Merge remote-tracking branch 'origin/ouds/main' into ouds/main-lmp-add-list-item

Author: louismaximepiton

.bundlewatch.config.json

@@ -2,72 +2,72 @@
   "files": [
     {
       "path": "./packages/orange/dist/css/ouds-web-bootstrap.css",
-      "maxSize": "85.0 kB"
+      "maxSize": "85.25 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "81.0 kB"
+      "maxSize": "81.5 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-grid.css",
       "maxSize": "7.75 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-grid.min.css",
-      "maxSize": "8.5 kB"
+      "maxSize": "7.25 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-reboot.css",
-      "maxSize": "7.5 kB"
+      "maxSize": "7.75 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-reboot.min.css",
       "maxSize": "7.25 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-utilities.css",
-      "maxSize": "24.0 kB"
+      "maxSize": "24.25 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-utilities.min.css",
-      "maxSize": "23.0 kB"
+      "maxSize": "23.25 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web.css",
-      "maxSize": "68.5 kB"
+      "maxSize": "68.75 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web.min.css",
-      "maxSize": "64.25 kB"
+      "maxSize": "64.75 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",
-      "maxSize": "45.5 kB"
+      "maxSize": "44.25 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.min.js",
-      "maxSize": "24.75 kB"
+      "maxSize": "24 kB"
     },
     {
       "path": "./dist/js/ouds-web.esm.js",
-      "maxSize": "30.5 kB"
+      "maxSize": "29.5 kB"
     },
     {
       "path": "./dist/js/ouds-web.esm.min.js",
-      "maxSize": "19.75 kB"
+      "maxSize": "19 kB"
     },
     {
       "path": "./dist/js/ouds-web.js",
-      "maxSize": "31.25 kB"
+      "maxSize": "30 kB"
     },
     {
       "path": "./dist/js/ouds-web.min.js",
-      "maxSize": "17.5 kB"
+      "maxSize": "17 kB"
     }
   ],
   "ci": {
     "trackBranches": [
       "ouds/main"
     ]
   }
-}
+}

.github/PULL_REQUEST_TEMPLATE/ouds-release-template.md

@@ -4,20 +4,14 @@
   - then, if bumping a minor or major version:
     - [ ] Manually search and replace `$current_version` in all files, meaning changes should happen in:
       - [ ] The style sheet loaded in `.storybook/preview-head.html`
-      - [ ] Some download links in the `README.md`
       - [ ] `docs_version` in `config.yml` and other references to the previous version
-      - [ ] `VERSION` in `js/src/base-component.js`
-      - [ ] `version_short` in `package.json`
-      - [ ] `scss/mixins/_banner.scss`
+      - [ ] Update the pixel tracker URL in all `packages/**/scss/_composite.scss`
       - [ ] `scss/docs.scss`
       - [ ] Several markdown files and markdown extended files
       - [ ] Add docs version to `site/data/docs-versions.yml`
-      - [ ] Update the home news for the next release
-      - [ ] Move `site/content/docs/x.y` to `site/content/docs/x.y+1`
-      - [ ] Move `site/static/docs/x.y` to `site/static/docs/x.y+1`
-      - [ ] Make sure the migration guide is updated only for the next version
-      - [ ] (Major version) Manually update the version in `nuget/ouds-web.nuspec` and `nuget/ouds-web.sass.nuspec`
       - [ ] Check that the changes in the migration guide only apply to the latest version
+      - [ ] (Major version) Manually update the version in `nuget/ouds-web.nuspec` and `nuget/ouds-web.sass.nuspec`
+    - [ ] Update the home news for the next release
   - check wrong matches in `CHANGELOG.md`, and maybe `site/content/docs/<version>/migration.md`
   - :warning: check the `package-lock.json` and `package.json` content, only "@ouds/web" should have its version changed!
 - [ ] if the year changed recently, happy new year :tada: but please change © year in `.scss` main files (reboot, grid, utilities, and main file) as well as in `NOTICE.txt`.
@@ -28,28 +22,27 @@
   - [ ] Make sure to import all the bad named commits
 - [ ] Commit and push `dist` with a `chore(release): vx.y.z` commit message
 - [ ] Merge on `ouds/main`
-- [ ] Tag your version, and push your tag using `git tag vx.y.z-ouds-web` and `git push vx.y.z-ouds-web`
-- [ ] Pack and publish
-  - `npm pack`
+- [ ] Tag your version, and push your tag using `git tag -s vx.y.z-ouds-web` and `git push origin vx.y.z-ouds-web`
+- [ ] Pack and publish for the common part and all the brands
+  - `npm run pack`
   - if you are already logged in to NPM (with a personal account, for example), [you'd better use a repository scoped `.npmrc` file](https://stackoverflow.com/questions/30114166/how-to-have-multiple-npm-users-set-up-locally)
   - Publish:
     - if you're releasing a pre-release, use `--tag`, e.g. for v1-alpha1 `npm publish ouds-web-1.0.0-alpha1.tgz --tag next`
-    - `npm publish`
-    <!-- When there is several branches to maintain
-    - (v4 only) `npm publish --tag v4.x.y` (if you forgot and v4 becomes the latest version on NPM, you can run `npm dist-tag add boosted@5.x.y latest` to fix it) -->
+    - `npm run publish`
 - [ ] check release on [NPM](https://www.npmjs.com/package/@ouds/web), [Nuget](https://www.nuget.org/packages/@ouds/web/), [Packagist](https://packagist.org/packages/orange-opensource/orange-boosted-bootstrap)…
 - [ ] publish documentation on `main` of the [ouds-web-doc](https://github.com/Orange-OpenSource/ouds-web-doc) repo:
-  - [ ] copy `../_site` to the `main` branch
-  - [ ] don't forget to update Storybook as well and double-check that pages are referenced
-  - [ ] check every `index.html` used as redirections to redirect to the new release
+  - [ ] run `npm run storybook-build` from `Orange-Boosted-Bootstrap` (be careful that `release-sri` doesn't update `config.yml`s)
+  - [ ] remove `storybook` folder from `ouds-web-doc`
+  - [ ] copy `Orange-Boosted-Bootstrap/_site` to a new branch starting from `ouds-web-doc#main`
+  - [ ] check every `index.html` used as redirection, redirect to the new release
   - [ ] when bumping minor or major version: ensure `dist` URLs in examples' HTML has changed
   - [ ] double-check everything before pushing, starting by searching for forgotten old version number occurrences
-  - [ ] Make the new release banner appears in the previous version of the doc (e.g. in v5.3 when releasing the v5.4.0 doc)
-<!-- When there is a v1 released
-- [ ] make an announcement in [GitHub Discussions](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/discussions/categories/announcements) (+ pin the new GH Discussion) -->
+  - [ ] Make the new release banner appears in the previous version of the doc (e.g. in v5.3 when releasing the v5.4.0 doc, search for `navbar navbar-expand supra d-none` and replace by `navbar navbar-expand supra`)
+  - [ ] Make the new release remove the Netlify badge in the newly released version of the documentation (search for `Netlify` and remove the badge in the new release)
+- [ ] Run Algolia crawler manually for the new documentation to be indexed in the search engine (https://dashboard.algolia.com/apps/AKIHKMSEKB/dashboard)
 - [ ] [create a GitHub release](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/new):
-  - attach the 2 zip files
+  - attach the 2 zip files per brand
   - paste the CHANGELOG / Ship list in the release's description
-<!-- When there is a v1 released
-- [ ] make an announcement on internal communication channels :tada: -->
+- [ ] make an announcement in [GitHub Discussions](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/discussions/categories/announcements) (+ pin the new GH Discussion)
+- [ ] make an announcement on internal communication channels and publish posts :tada:
 - [ ] [publish on Nuget](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/wiki/Generate-NuGet-packages)

.github/copilot-instructions.md

@@ -0,0 +1,35 @@
+---
+applyTo: "**"
+---
+
+# OUDS Web
+
+**OUDS Web** (Orange Unified Design System — Web) is a multi-brand design system built as a fork of Bootstrap 5.3.6. It serves 3 brands (Orange, Sosh, Orange Compact) from a single codebase — only CSS tokens differ per brand, JavaScript is fully shared.
+
+## Quick Reference
+
+| Key | Value |
+|---|---|
+| Version | 1.1.0 |
+| Main branch | `ouds/main` |
+| CSS prefix | `--bs-` (via `$prefix`) |
+| Build | `npm run dist` |
+| Lint | `npm run lint` |
+| Tests | `npm run test` |
+| Dev servers | `:9001` (orange) · `:9002` (sosh) · `:9003` (orange-compact) |
+
+## Skills
+
+This project provides specialized skills in `.github/skills/`. Invoke them when relevant — they contain detailed conventions, workflows, and reference material:
+
+- **scss-conventions** — SCSS rules (variables, mixins, tokens, forbidden patterns)
+- **javascript-conventions** — JS rules (no-semi, BaseComponent, imports)
+- **accessibility** — WCAG 2.2 AAA/AA, ARIA, focus, contrast, touch targets
+- **token-system** — 3-tier token hierarchy, dark mode, auto-gen protections
+- **component-patterns** — CSS custom props, state overrides, markers
+- **multi-brand** — 3-brand architecture, cross-brand sync
+- **create-component** — Step-by-step workflow for new components
+- **diagnose-errors** — Error diagnostic decision tree
+- **validate-tokens** — Read-only token audit
+- **code-review** — Compliance checker (safety net before commit/PR)
+- **project-knowledge** — Glossary, npm scripts, CI/CD, file map

.github/dependabot.yml

@@ -67,7 +67,6 @@ updates:
       - dependency-name: "image-size"
       - dependency-name: "ip"
       - dependency-name: "jasmine"
-      - dependency-name: "jquery"
       - dependency-name: "js-yaml"
       - dependency-name: "karma"
       - dependency-name: "karma-browserstack-launcher"

.github/instructions/critical-rules.instructions.md

@@ -0,0 +1,21 @@
+---
+applyTo: "**"
+---
+
+# Critical Rules (Non-Negotiable)
+
+These 7 rules apply to every file in OUDS Web. They are the minimum safety net — always enforced regardless of which skills are loaded.
+
+1. **Tokens over hardcoding** — Never use hardcoded colors (`#ff7900`), spacing (`16px`), or dimensions. Use `$ouds-*` tokens or `var(--#{$prefix}color-*)`.
+
+2. **Mixins for border-radius and transition** — Direct properties are Stylelint violations. Use `@include border-radius()` and `@include transition()`.
+
+3. **Auto-generated token files are read-only** — Never edit `_raw.scss`, `_semantic.scss`, `_component.scss`, or `_*-custom-props.scss`. Only `_composite.scss` is hand-editable.
+
+4. **Never commit dist/** — Build artifacts are generated in CI.
+
+5. **JS in js/src/ only** — Never put JavaScript in `packages/<brand>/`. JS is shared across all brands.
+
+6. **Colors via CSS custom properties** — Use `var(--#{$prefix}color-*)` for all colors. This enables dark mode switching at runtime.
+
+7. **Accessibility is mandatory** — Every interactive element needs: `@include focus-visible()`, correct ARIA attributes, `.visually-hidden` (never `display: none`) for SR content, 44×44px touch targets.

.github/skills/accessibility/SKILL.md

@@ -0,0 +1,84 @@
+---
+name: 'accessibility'
+description: 'WCAG 2.2 accessibility rules for OUDS Web. Use this skill when creating or editing interactive components, writing HTML templates, adding ARIA attributes, handling focus states, or reviewing accessibility. Covers WCAG 2.2 Level AAA target (AA fallback), ARIA patterns for every component type, focus-visible mixin, color contrast (7:1 AAA / 4.5:1 AA), 44×44px touch targets, reduced motion, RTL, focus trapping, and cognitive accessibility. Always invoke this skill for any work touching user interaction or markup structure.'
+---
+
+# Accessibility (WCAG 2.2)
+
+## Compliance target
+
+**WCAG 2.2 Level AAA** primary, with **Level AA as documented fallback** when brand constraints make AAA infeasible. Every component meets at least AA.
+
+---
+
+## ARIA patterns (quick reference)
+
+| Pattern | Required ARIA |
+|---|---|
+| Decorative icons | `aria-hidden="true"` on `<svg>` |
+| Close buttons | `aria-label="Close"` or `aria-labelledby` |
+| Toggles | `aria-pressed="true/false"` |
+| Expandable | `aria-expanded` + `aria-controls="id"` |
+| Form validation | `aria-invalid="true"` + `aria-describedby` |
+| Disabled | `aria-disabled="true"` |
+| Loading | `aria-busy="true"` |
+| Icon-only buttons | `aria-label="Action"` + `aria-hidden` on icon |
+
+---
+
+## Focus management
+
+- Use `@include focus-visible()` mixin — never `outline: none` without alternative
+- Focus indicators: 3:1 contrast minimum, 2px thick (AAA: 3-4px)
+- Modal/offcanvas: trap focus via `focustrap.js`, Escape closes, focus returns to trigger
+- Focused elements must not be obscured by sticky headers or overlays
+
+---
+
+## Color contrast
+
+| Content | AAA target | AA fallback |
+|---|---|---|
+| Text | 7:1 | 4.5:1 |
+| UI components | 4.5:1 | 3:1 |
+
+When AA fallback needed: use larger/bolder text, redundant visual cues (never color alone), document with `// OUDS mod: AA fallback — [reason]`.
+
+---
+
+## Touch targets (WCAG 2.5.8)
+
+Minimum 44×44px on all interactive elements. Use `@include target-size()` mixin.
+
+---
+
+## Reduced motion (WCAG 2.3.3)
+
+All animation respects `prefers-reduced-motion: reduce`. The `@include transition()` mixin handles this — which is why direct `transition:` is forbidden.
+
+---
+
+## Semantic HTML
+
+- `<button>` for actions, `<a>` for navigation — never `<div>`/`<span>` as interactive
+- Heading hierarchy: `<h1>` → `<h2>` → `<h3>` (never skip)
+- `role="alert"` for auto-announced; `role="status"` for polite
+- `.visually-hidden` for SR content — never `display: none`
+
+---
+
+## Color modes
+
+Use `data-bs-theme` attribute, never `prefers-color-scheme` media queries.
+
+---
+
+## WCAG 2.2 specifics
+
+| Criterion | Requirement |
+|---|---|
+| Consistent Help (3.2.6) | Help mechanisms in same order across pages |
+| Accessible Auth (3.3.8/9) | Support `autocomplete`, offer passkey/magic-link |
+| Dragging (2.5.7) | Click/keyboard alternative to all drag |
+| Redundant Entry (3.3.7) | Auto-populate previously entered data |
+| Focus Not Obscured (2.4.11/12) | Never fully hidden by sticky elements |

.github/skills/code-review/SKILL.md

@@ -0,0 +1,88 @@
+---
+name: 'code-review'
+description: 'OUDS Web compliance code review. Use this skill when reviewing a diff, preparing a commit, or when asked to check code quality. Acts as a safety net that verifies all OUDS conventions are respected: token usage (no hardcoded values, no raw tokens), required mixins (border-radius, transition), accessibility (ARIA, focus-visible), multi-brand sync (tokens in all 3 brands), and file hygiene (no dist/, no auto-gen edits). Invoke proactively before any commit or PR submission.'
+---
+
+# Code Review (OUDS Compliance)
+
+## Purpose
+
+This skill is a safety net. It catches OUDS convention violations that other skills might have missed. Invoke it before committing or when reviewing diffs.
+
+---
+
+## Checklist
+
+For each changed file in the diff, verify:
+
+### SCSS files (`**/*.scss`)
+
+- [ ] **No hardcoded values** — colors (`#xxx`), spacing (`16px`), dimensions must use tokens
+- [ ] **No raw tokens** — `$core-ouds-*`, `$core-orange-*`, `$core-sosh-*` never in component SCSS
+- [ ] **Mixins used** — `@include border-radius()` and `@include transition()` (never direct properties)
+- [ ] **`border: 0`** — not `border: none`
+- [ ] **No `lighten()`/`darken()`** — use token variant
+- [ ] **`!default` on variables** — every module-scope SCSS variable
+- [ ] **Colors via CSS custom props** — `var(--#{$prefix}color-*)` for dark mode
+- [ ] **`color-mode()` mixin** — not raw `[data-bs-theme]` or `prefers-color-scheme`
+- [ ] **`#{$ouds-root-selector}`** — not `:root` directly
+- [ ] **`// OUDS mod:`** comment on Bootstrap deviations
+
+### JavaScript files (`js/src/**/*.js`)
+
+- [ ] **No semicolons**
+- [ ] **No trailing commas**
+- [ ] **Template literals** (not concatenation)
+- [ ] **`.js` extension** on imports
+- [ ] **No `console.*`** in `js/src/`
+- [ ] **`'use strict'`** at top
+- [ ] **Extends `BaseComponent`** (if it's a component)
+
+### HTML/MDX files
+
+- [ ] **Semantic elements** — `<button>` for actions, `<a>` for links
+- [ ] **ARIA attributes** — correct for the interaction pattern
+- [ ] **`.visually-hidden`** — not `display: none` for SR content
+- [ ] **`data-bs-theme`** — not `prefers-color-scheme` for color modes
+
+### Token/brand files (`packages/**`)
+
+- [ ] **Auto-generated files not modified** — `_raw.scss`, `_semantic.scss`, `_component.scss`, `_*-custom-props.scss`
+- [ ] **New tokens in all 3 brands** — if a new `$ouds-<comp>-*` was added
+- [ ] **Import order preserved** — in `_index.scss`
+
+### General
+
+- [ ] **No `dist/` files** in the diff
+- [ ] **No JS in `packages/<brand>/`** — JS is shared
+- [ ] **Focus visible** — `@include focus-visible()` on interactive elements
+- [ ] **Touch targets** — 44×44px minimum on new interactive elements
+
+---
+
+## How to use
+
+1. Run `git diff --stat` to see changed files
+2. For each file category, apply the relevant checklist section
+3. Report violations with file, line, and suggested fix
+4. Classify: ERROR (must fix) vs WARNING (should fix)
+
+---
+
+## Report format
+
+```
+## Code Review: OUDS Compliance
+
+### ❌ Errors (must fix before merge)
+- `scss/_buttons.scss:42` — hardcoded `padding: 8px` → use `$ouds-space-*` token
+- `js/src/tooltip.js:15` — semicolon present → remove
+
+### ⚠️ Warnings (should fix)
+- `scss/_card.scss:88` — missing `// OUDS mod:` on Bootstrap override
+
+### ✅ Passed
+- Token cross-brand check: all present
+- No dist/ files in diff
+- ARIA attributes correct
+```