srcdev-nuxt-components 9.4.10 → 9.4.12

package/app/components/01.atoms/animations/marquee-scroller/MarqueeScroller.vue

@@ -291,7 +291,7 @@ onUnmounted(() => {
       flex-shrink: 0;
 
       border: var(--marquee-scroller-item-border-width, 1px) solid
-        var(--marquee-scroller-item-border-colour, light-dark(var(--slate-10), var(--slate-00)));
+        var(--marquee-scroller-item-border-colour, var(--slate-10));
       border-radius: var(--marquee-scroller-item-border-radius, 4px);
 
       &:hover {

package/app/components/01.atoms/animations/marquee-scroller/stories/MarqueeScroller.stories.ts

@@ -33,7 +33,7 @@ const logoSlots = logoData
   .map(
     (item) => `
     <template #${item.id}>
-      <div style="display: grid; place-items: center; width: 100%; height: 100%; background: light-dark(#eee, #333); font-weight: 600;">
+      <div style="display: grid; place-items: center; width: 100%; height: 100%; background: #eee; font-weight: 600;">
         ${item.content}
       </div>
     </template>`

package/app/components/01.atoms/animations/section-parallax/CONSUMER-STYLING.md

@@ -8,7 +8,7 @@
 | `--section-parallax-min-height-fixed` | `120vh` | Section height once the parallax effect is active — taller than the base height to give enough scroll travel to see the motion. |
 | `--section-parallax-background-position` | `center` | `background-position` of the image. |
 | `--section-parallax-background-size` | `cover` | `background-size` of the image. |
-| `--section-parallax-background-colour` | `light-dark(var(--slate-01), var(--slate-08))` | Fallback colour visible if the image fails to load or hasn't loaded yet. |
+| `--section-parallax-background-colour` | `var(--slate-01)` | Fallback colour visible if the image fails to load or hasn't loaded yet. |
 
 ```vue
 <SectionParallax

package/app/components/01.atoms/animations/section-parallax/SectionParallax.vue

@@ -38,7 +38,7 @@ watch(
     background-size: var(--section-parallax-background-size, cover);
     position: relative;
 
-    background-color: var(--section-parallax-background-colour, light-dark(var(--slate-01), var(--slate-08)));
+    background-color: var(--section-parallax-background-colour, var(--slate-01));
     width: 100%;
 
     @media (hover: hover) and (pointer: fine) {

package/app/components/01.atoms/canvas-switcher/CONSUMER-STYLING.md

@@ -9,8 +9,8 @@ CanvasSwitcher itself exposes the following public tokens:
 | `--canvas-switcher-gap` | `2rem` | Gap between the switcher's own children (currently just the list) |
 | `--canvas-switcher-item-gap` | `1rem` | Gap between each button in the list |
 | `--canvas-switcher-icon-size` | `2.4rem` | Width/height of each icon |
-| `--canvas-switcher-icon-colour` | `light-dark(var(--slate-10), var(--slate-02))` | Icon colour, resting state |
-| `--canvas-switcher-icon-colour-current` | `light-dark(var(--green-10), var(--green-04))` | Icon colour when that button's canvas is selected (`aria-pressed="true"`) |
+| `--canvas-switcher-icon-colour` | `var(--slate-10)` | Icon colour, resting state |
+| `--canvas-switcher-icon-colour-current` | `var(--green-10)` | Icon colour when that button's canvas is selected (`aria-pressed="true"`) |
 
 ## Class passthrough
 

package/app/components/01.atoms/canvas-switcher/CanvasSwitcher.vue

@@ -78,10 +78,10 @@ watch(
   }
 
   .canvas-switcher-button.input-button-core {
-    color: var(--canvas-switcher-icon-colour, light-dark(var(--slate-10), var(--slate-02)));
+    color: var(--canvas-switcher-icon-colour, var(--slate-10));
 
     &[aria-pressed="true"] {
-      color: var(--canvas-switcher-icon-colour-current, light-dark(var(--green-10), var(--green-04)));
+      color: var(--canvas-switcher-icon-colour-current, var(--green-10));
     }
 
     .icon {

package/app/components/01.atoms/card/CardCore.vue

@@ -90,18 +90,18 @@ watch(
     }
 
     &.solid {
-      --_card-background-color: light-dark(var(--slate-00), var(--slate-10));
+      --_card-background-color: var(--slate-00);
       --_card-border: 0.2rem solid var(--slate-08);
     }
 
     &.subtle {
-      --_card-background-color: color-mix(in oklab, light-dark(var(--slate-01), var(--slate-08)) 50%, transparent);
+      --_card-background-color: color-mix(in oklab, var(--slate-01) 50%, transparent);
       --_card-border: 0.2rem solid var(--slate-08);
     }
 
     &.soft {
-      --_card-background-color: color-mix(in oklab, light-dark(var(--slate-01), var(--slate-08)) 20%, transparent);
-      --_card-box-shadow-color: color-mix(in oklab, light-dark(var(--slate-02), var(--slate-08)) 80%, transparent);
+      --_card-background-color: color-mix(in oklab, var(--slate-01) 20%, transparent);
+      --_card-box-shadow-color: color-mix(in oklab, var(--slate-02) 80%, transparent);
     }
 
     &.outline {

package/app/components/01.atoms/clipped-panel/CONSUMER-STYLING.md

@@ -4,8 +4,8 @@
 
 | Token | Default | Controls |
 |---|---|---|
-| `--clipped-panel-background-colour` | `light-dark(hsl(0, 0%, 96%), hsl(0, 0%, 12%))` | Panel background |
-| `--clipped-panel-outline-colour` | `light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%))` | Outline colour, and the panel's text/icon colour (`color`) |
+| `--clipped-panel-background-colour` | `hsl(0, 0%, 96%)` | Panel background |
+| `--clipped-panel-outline-colour` | `hsl(0, 29%, 3%)` | Outline colour, and the panel's text/icon colour (`color`) |
 | `--clipped-panel-outline-width` | `1px` | Outline width |
 
 ```css

package/app/components/01.atoms/clipped-panel/ClippedPanel.vue

@@ -30,9 +30,9 @@ watch(
 <style lang="css">
 @layer components {
 .clipped-panel {
-  --_outline-colour: var(--clipped-panel-outline-colour, light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%)));
+  --_outline-colour: var(--clipped-panel-outline-colour, hsl(0, 29%, 3%));
 
-  background-color: var(--clipped-panel-background-colour, light-dark(hsl(0, 0%, 96%), hsl(0, 0%, 12%)));
+  background-color: var(--clipped-panel-background-colour, hsl(0, 0%, 96%));
   color: var(--_outline-colour);
   outline: var(--clipped-panel-outline-width, 1px) solid var(--_outline-colour);
 

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/CONSUMER-STYLING.md

@@ -7,10 +7,10 @@
 | `--dashboard-quad-grid-gap` | `2rem` | Gap between the four slot panels |
 | `--dashboard-quad-grid-padding` | `2rem` | Padding inside each slot panel |
 | `--dashboard-quad-grid-outline-width` | `0.1rem` | Slot panel outline width |
-| `--dashboard-quad-grid-outline-colour` | `light-dark(black, white)` | Slot panel outline colour |
+| `--dashboard-quad-grid-outline-colour` | `black` | Slot panel outline colour |
 | `--dashboard-quad-grid-outline-offset` | `0` | Slot panel outline offset |
 | `--dashboard-quad-grid-border-width` | `0` | Slot panel border width (off by default — the panel edge is drawn by the outline) |
-| `--dashboard-quad-grid-border-colour` | `light-dark(black, white)` | Slot panel border colour, only visible once `--dashboard-quad-grid-border-width` is set |
+| `--dashboard-quad-grid-border-colour` | `black` | Slot panel border colour, only visible once `--dashboard-quad-grid-border-width` is set |
 | `--dashboard-quad-grid-border-radius` | `0.5rem` | Slot panel corner radius |
 | `--dashboard-quad-grid-rule-width` | `0.1rem` | Width of the grid gap rule line (CSS Gap Decorations — see Notes) |
 | `--dashboard-quad-grid-rule-colour` | `transparent` | Colour of the grid gap rule line, invisible by default |

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/DashboardQuadGrid.vue

@@ -53,10 +53,10 @@ watch(
       & > div {
         padding: var(--dashboard-quad-grid-padding, 2rem);
         outline: var(--dashboard-quad-grid-outline-width, 0.1rem) solid
-          var(--dashboard-quad-grid-outline-colour, light-dark(black, white));
+          var(--dashboard-quad-grid-outline-colour, black);
         outline-offset: var(--dashboard-quad-grid-outline-offset, 0);
         border: var(--dashboard-quad-grid-border-width, 0) solid
-          var(--dashboard-quad-grid-border-colour, light-dark(black, white));
+          var(--dashboard-quad-grid-border-colour, black);
         border-radius: var(--dashboard-quad-grid-border-radius, 0.5rem);
       }
 

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/stories/DashboardQuadGrid.stories.ts

@@ -282,7 +282,7 @@ const RuleDecorationsTemplate: StoryFn<DashboardQuadGridArgs> = (args) => ({
       "--dashboard-quad-grid-border-width: 0",
       "--dashboard-quad-grid-border-radius: 0",
       "--dashboard-quad-grid-rule-width: 0.2rem",
-      "--dashboard-quad-grid-rule-colour: light-dark(#cbd5e1, #475569)",
+      "--dashboard-quad-grid-rule-colour: #cbd5e1",
       "--dashboard-quad-grid-rule-inset: 0",
     ].join("; ");
 

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-stats-grid/CONSUMER-STYLING.md

@@ -7,7 +7,7 @@
 | `--dashboard-stats-grid-gap` | `1.2rem` | Gap between panels, in every row |
 | `--dashboard-stats-grid-panel-padding` | `1.2rem` | Padding inside each panel |
 | `--dashboard-stats-grid-border-width` | `0.1rem` | Panel border width |
-| `--dashboard-stats-grid-border-colour` | `light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%))` | Panel border colour |
+| `--dashboard-stats-grid-border-colour` | `hsl(0, 29%, 3%)` | Panel border colour |
 | `--dashboard-stats-grid-border-radius` | `1.2rem` | Panel corner radius |
 | `--dashboard-stats-grid-rule-width` | `0.1rem` | Width of the grid gap rule line (CSS Gap Decorations — see Notes) |
 | `--dashboard-stats-grid-rule-colour` | `transparent` | Colour of the grid gap rule line, invisible by default |

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-stats-grid/DashboardStatsGrid.vue

@@ -57,7 +57,7 @@ watch(
   .dashboard-stats-grid {
     .panel {
       border: var(--dashboard-stats-grid-border-width, 0.1rem) solid
-        var(--dashboard-stats-grid-border-colour, light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%)));
+        var(--dashboard-stats-grid-border-colour, hsl(0, 29%, 3%));
       border-radius: var(--dashboard-stats-grid-border-radius, 1.2rem);
       padding: var(--dashboard-stats-grid-panel-padding, 1.2rem);
       height: auto;

package/app/components/01.atoms/display-tooltip/CONSUMER-STYLING.md

@@ -15,19 +15,19 @@
 | `--display-tooltip-popover-padding` | `1.2rem` | Popover panel content padding |
 | `--display-tooltip-popover-content-gap` | `1.2rem` | Gap between stacked children in the `tooltipContent` slot |
 | `--display-tooltip-popover-outline-width` | `0.1rem` | Popover panel outline (border) width |
-| `--display-tooltip-popover-outline-colour` | `light-dark(var(--slate-02), var(--slate-06))` | Popover panel outline (border) colour |
-| `--display-tooltip-popover-text-colour` | `light-dark(var(--slate-09), var(--slate-01))` | Popover panel text colour |
-| `--display-tooltip-popover-background-colour` | `light-dark(var(--slate-00), var(--slate-07))` | Popover panel background |
+| `--display-tooltip-popover-outline-colour` | `var(--slate-02)` | Popover panel outline (border) colour |
+| `--display-tooltip-popover-text-colour` | `var(--slate-09)` | Popover panel text colour |
+| `--display-tooltip-popover-background-colour` | `var(--slate-00)` | Popover panel background |
 | `--display-tooltip-popover-border-radius` | `0.8rem` | Popover panel corner radius |
-| `--display-tooltip-popover-shadow` | `light-dark(0 0.4rem 1.6rem rgba(0,0,0,.12), 0 0.4rem 1.6rem rgba(0,0,0,.5))` | Popover panel elevation shadow |
+| `--display-tooltip-popover-shadow` | `0 0.4rem 1.6rem rgba(0,0,0,.12)` | Popover panel elevation shadow |
 | `--display-tooltip-popover-offset` | `0.1rem` | Gap between the trigger and the popover panel |
-| `--display-tooltip-close-button-colour` | `light-dark(var(--slate-09), var(--slate-01))` | Close button text colour (used by `DisplayTooltipDefined`) |
+| `--display-tooltip-close-button-colour` | `var(--slate-09)` | Close button text colour (used by `DisplayTooltipDefined`) |
 | `--display-tooltip-close-button-border-width` | `0.1rem` | Close button border width |
-| `--display-tooltip-close-button-border-colour` | `light-dark(var(--slate-03), var(--slate-06))` | Close button border colour |
+| `--display-tooltip-close-button-border-colour` | `var(--slate-03)` | Close button border colour |
 | `--display-tooltip-close-button-outline-width` | `0.1rem` | Close button outline width |
 | `--display-tooltip-close-button-outline-colour` | `transparent` | Close button outline colour at rest (no permanent ring) |
-| `--display-tooltip-close-button-border-colour-hover` | `light-dark(var(--slate-06), var(--slate-03))` | Close button border colour on hover/focus |
-| `--display-tooltip-close-button-outline-colour-hover` | `light-dark(var(--slate-06), var(--slate-03))` | Close button outline colour on hover/focus |
+| `--display-tooltip-close-button-border-colour-hover` | `var(--slate-06)` | Close button border colour on hover/focus |
+| `--display-tooltip-close-button-outline-colour-hover` | `var(--slate-06)` | Close button outline colour on hover/focus |
 | `--display-tooltip-close-button-padding` | `0.4rem 1rem` | Close button padding |
 
 ```css

package/app/components/01.atoms/display-tooltip/DisplayTooltip.vue

@@ -115,13 +115,13 @@ watch(
       width: var(--display-tooltip-popover-width, 30rem);
 
       outline: var(--display-tooltip-popover-outline-width, 0.1rem) solid
-        var(--display-tooltip-popover-outline-colour, light-dark(var(--slate-02), var(--slate-06)));
-      color: var(--display-tooltip-popover-text-colour, light-dark(var(--slate-09), var(--slate-01)));
-      background-color: var(--display-tooltip-popover-background-colour, light-dark(var(--slate-00), var(--slate-07)));
+        var(--display-tooltip-popover-outline-colour, var(--slate-02));
+      color: var(--display-tooltip-popover-text-colour, var(--slate-09));
+      background-color: var(--display-tooltip-popover-background-colour, var(--slate-00));
       border-radius: var(--display-tooltip-popover-border-radius, 0.8rem);
       box-shadow: var(
         --display-tooltip-popover-shadow,
-        light-dark(0 0.4rem 1.6rem rgba(0, 0, 0, 0.12), 0 0.4rem 1.6rem rgba(0, 0, 0, 0.5))
+        0 0.4rem 1.6rem rgba(0, 0, 0, 0.12)
       );
 
       position-anchor: var(--_anchor-name);
@@ -147,9 +147,9 @@ watch(
         .display-tooltip-close-button {
           all: unset;
           cursor: pointer;
-          color: var(--display-tooltip-close-button-colour, light-dark(var(--slate-09), var(--slate-01)));
+          color: var(--display-tooltip-close-button-colour, var(--slate-09));
           border: var(--display-tooltip-close-button-border-width, 0.1rem) solid
-            var(--display-tooltip-close-button-border-colour, light-dark(var(--slate-03), var(--slate-06)));
+            var(--display-tooltip-close-button-border-colour, var(--slate-03));
           outline: var(--display-tooltip-close-button-outline-width, 0.1rem) solid transparent;
 
           font-weight: 600;
@@ -160,11 +160,11 @@ watch(
             text-decoration: underline;
             border-color: var(
               --display-tooltip-close-button-border-colour-hover,
-              light-dark(var(--slate-06), var(--slate-03))
+              var(--slate-06)
             );
             outline-color: var(
               --display-tooltip-close-button-outline-colour-hover,
-              light-dark(var(--slate-06), var(--slate-03))
+              var(--slate-06)
             );
             outline-offset: 0.2rem;
           }

package/app/components/01.atoms/pop-over/CONSUMER-STYLING.md

@@ -9,21 +9,21 @@
 | `--pop-over-trigger-outline-colour-hover` | `var(--theme-ring)` | Trigger outline colour on focus-visible |
 | `--pop-over-width` | `30rem` | Popover panel width |
 | `--pop-over-border-width` | `0.1rem` | Popover panel border width |
-| `--pop-over-border-colour` | `light-dark(var(--slate-02), var(--slate-06))` | Popover panel border colour |
+| `--pop-over-border-colour` | `var(--slate-02)` | Popover panel border colour |
 | `--pop-over-border-radius` | `0.8rem` | Popover panel corner radius |
-| `--pop-over-background-colour` | `light-dark(var(--slate-00), var(--slate-07))` | Popover panel background |
-| `--pop-over-text-colour` | `light-dark(var(--slate-09), var(--slate-01))` | Popover panel text colour |
-| `--pop-over-shadow` | `light-dark(0 0.4rem 1.6rem rgba(0,0,0,.12), 0 0.4rem 1.6rem rgba(0,0,0,.5))` | Popover panel elevation shadow |
+| `--pop-over-background-colour` | `var(--slate-00)` | Popover panel background |
+| `--pop-over-text-colour` | `var(--slate-09)` | Popover panel text colour |
+| `--pop-over-shadow` | `0 0.4rem 1.6rem rgba(0,0,0,.12)` | Popover panel elevation shadow |
 | `--pop-over-transition-duration` | `200ms` | Open/close fade duration |
 | `--pop-over-content-padding` | `1.6rem` | Padding around the `content` slot |
 | `--pop-over-content-padding-block-start` | `3.2rem` | Extra top padding so content clears the close button |
 | `--pop-over-close-button-offset` | `0.8rem` | Distance of the close button from the panel's top/right edges |
 | `--pop-over-close-button-size` | `2.4rem` | Close button box width/height |
 | `--pop-over-close-button-border-radius` | `50%` | Close button corner radius |
-| `--pop-over-close-button-colour` | `light-dark(var(--slate-06), var(--slate-03))` | Close button icon colour |
+| `--pop-over-close-button-colour` | `var(--slate-06)` | Close button icon colour |
 | `--pop-over-close-button-icon-size` | `1.4rem` | Close button icon glyph size |
 | `--pop-over-close-button-outline-width` | `0.1rem` | Close button focus/hover outline width |
-| `--pop-over-close-button-surface-hover` | `light-dark(var(--slate-01), var(--slate-06))` | Close button background on hover/focus-visible |
+| `--pop-over-close-button-surface-hover` | `var(--slate-01)` | Close button background on hover/focus-visible |
 | `--pop-over-close-button-outline-colour-hover` | `var(--theme-ring)` | Close button outline colour on hover/focus-visible |
 
 ```css

package/app/components/01.atoms/pop-over/PopOver.vue

@@ -102,13 +102,13 @@ watch(
       margin: 0;
       inset: auto;
       border: var(--pop-over-border-width, 0.1rem) solid
-        var(--pop-over-border-colour, light-dark(var(--slate-02), var(--slate-06)));
+        var(--pop-over-border-colour, var(--slate-02));
       border-radius: var(--pop-over-border-radius, 0.8rem);
-      background-color: var(--pop-over-background-colour, light-dark(var(--slate-00), var(--slate-07)));
-      color: var(--pop-over-text-colour, light-dark(var(--slate-09), var(--slate-01)));
+      background-color: var(--pop-over-background-colour, var(--slate-00));
+      color: var(--pop-over-text-colour, var(--slate-09));
       box-shadow: var(
         --pop-over-shadow,
-        light-dark(0 0.4rem 1.6rem rgba(0, 0, 0, 0.12), 0 0.4rem 1.6rem rgba(0, 0, 0, 0.5))
+        0 0.4rem 1.6rem rgba(0, 0, 0, 0.12)
       );
       width: var(--pop-over-width, 30rem);
 
@@ -139,12 +139,12 @@ watch(
         width: var(--pop-over-close-button-size, 2.4rem);
         height: var(--pop-over-close-button-size, 2.4rem);
         border-radius: var(--pop-over-close-button-border-radius, 50%);
-        color: var(--pop-over-close-button-colour, light-dark(var(--slate-06), var(--slate-03)));
+        color: var(--pop-over-close-button-colour, var(--slate-06));
         outline: var(--pop-over-close-button-outline-width, 0.1rem) solid transparent;
 
         &:hover,
         &:focus-visible {
-          background-color: var(--pop-over-close-button-surface-hover, light-dark(var(--slate-01), var(--slate-06)));
+          background-color: var(--pop-over-close-button-surface-hover, var(--slate-01));
           outline-color: var(--pop-over-close-button-outline-colour-hover, var(--theme-ring));
           outline-offset: 0.1rem;
         }

package/app/components/02.molecules/navigation/deep-expanding-menu/CONSUMER-STYLING.md

@@ -7,7 +7,7 @@
 | `--deep-expanding-menu-gap` | `2.4rem` | Gap between top-level items |
 | `--deep-expanding-menu-link-border-width` | `0.2rem` | Bottom border width on links and group toggles |
 | `--deep-expanding-menu-link-padding-block` | `0.8rem` | Vertical padding on links and group toggles |
-| `--deep-expanding-menu-link-border-colour-hover` | `light-dark(var(--blue-10), var(--slate-00))` | Bottom border colour on hover/focus |
+| `--deep-expanding-menu-link-border-colour-hover` | `var(--blue-10)` | Bottom border colour on hover/focus |
 | `--deep-expanding-menu-icon-size` | `1.2rem` | Caret icon size |
 | `--deep-expanding-menu-panel-width` | `min(100%, 50vw)` | Popover panel width |
 | `--deep-expanding-menu-panel-background-colour` | `white` | Popover panel background |

package/app/components/02.molecules/navigation/deep-expanding-menu/DeepExpandingMenu.vue

@@ -92,7 +92,7 @@ watch(
             cursor: pointer;
             border-color: var(
               --deep-expanding-menu-link-border-colour-hover,
-              light-dark(var(--blue-10), var(--slate-00))
+              var(--blue-10)
             );
           }
         }

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/CONSUMER-STYLING.md

@@ -8,7 +8,7 @@
 | `--deep-expanding-menu-classic-item-gap` | `2.4rem` | Gap between top-level items |
 | `--deep-expanding-menu-classic-link-border-width` | `0.2rem` | Bottom border width on links and group toggles |
 | `--deep-expanding-menu-classic-link-padding-block` | `0.8rem` | Vertical padding on links and group toggles |
-| `--deep-expanding-menu-classic-link-border-colour-hover` | `light-dark(var(--blue-10), var(--slate-00))` | Bottom border colour on hover/focus |
+| `--deep-expanding-menu-classic-link-border-colour-hover` | `var(--blue-10)` | Bottom border colour on hover/focus |
 | `--deep-expanding-menu-classic-icon-size` | `1.2rem` | Caret icon size |
 | `--deep-expanding-menu-classic-panel-offset-top` | `4rem` | Panel offset from the toggle |
 | `--deep-expanding-menu-classic-panel-width` | `20rem` | Panel width below the `768px` breakpoint |

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/DeepExpandingMenuClassic.vue

@@ -89,7 +89,7 @@ onMounted(() => {
             cursor: pointer;
             border-color: var(
               --deep-expanding-menu-classic-link-border-colour-hover,
-              light-dark(var(--blue-10), var(--slate-00))
+              var(--blue-10)
             );
           }
         }

package/app/components/02.molecules/pricing-card/CONSUMER-STYLING.md

@@ -131,6 +131,17 @@ When displaying multiple cards side-by-side (common in pricing pages), wrap in a
 
 ---
 
+## Highlight badge text
+
+`isHighlighted` shows a top-centred badge reading "Most Popular". Pass `badge-text` to change it,
+e.g. for localisation:
+
+```vue
+<PricingCard planName="Standard" :price="99" is-highlighted :badge-text="t('pricing.mostPopular')" />
+```
+
+---
+
 ## Discount ribbon
 
 Pass `ribbon-text` to render a diagonal corner ribbon (top-right, 45°) for marketing callouts —

package/app/components/02.molecules/pricing-card/PricingCard.vue

@@ -1,6 +1,6 @@
 <template>
   <component :is="tag" class="pricing-card" :class="[elementClasses, { 'is-highlighted': isHighlighted }]">
-    <div v-if="isHighlighted" class="pricing-card__badge">Most Popular</div>
+    <div v-if="isHighlighted" class="pricing-card__badge">{{ badgeText }}</div>
 
     <div v-if="ribbonText" class="pricing-card__ribbon-clip">
       <span class="pricing-card__ribbon">{{ ribbonText }}</span>
@@ -41,6 +41,7 @@ interface Props {
   description?: string;
   features?: string[];
   isHighlighted?: boolean;
+  badgeText?: string;
   ctaText?: string;
   ctaDisabled?: boolean;
   ribbonText?: string;
@@ -54,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
   description: undefined,
   features: () => [],
   isHighlighted: false,
+  badgeText: "Most Popular",
   ctaText: "Get started",
   ctaDisabled: false,
   ribbonText: undefined,

package/app/components/02.molecules/pricing-card/stories/PricingCard.stories.ts

@@ -11,6 +11,7 @@ const meta: Meta<typeof PricingCard> = {
     billingPeriod: { control: "text" },
     description: { control: "text" },
     isHighlighted: { control: "boolean" },
+    badgeText: { control: "text" },
     ctaText: { control: "text" },
     ctaDisabled: { control: "boolean" },
     ribbonText: { control: "text" },
@@ -22,6 +23,7 @@ const meta: Meta<typeof PricingCard> = {
     description: "Perfect for freelancers and solo practitioners.",
     features: ["Embed on one domain", "Unlimited consultations", "Email support", "Monthly updates"],
     isHighlighted: false,
+    badgeText: "Most Popular",
     ctaText: "Get started",
     ctaDisabled: false,
     ribbonText: undefined,

package/app/components/02.molecules/pricing-card/tests/PricingCard.spec.ts

@@ -84,6 +84,19 @@ describe("PricingCard", () => {
     expect(wrapper.text()).toContain("Most Popular");
   });
 
+  it("renders custom badge text when highlighted", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+        isHighlighted: true,
+        badgeText: "Le plus populaire",
+      },
+    });
+
+    expect(wrapper.find(".pricing-card__badge").text()).toBe("Le plus populaire");
+  });
+
   it("emits select event with plan name on CTA click", async () => {
     const wrapper = mount(PricingCard, {
       props: {

package/app/components/02.molecules/select-menu/CONSUMER-STYLING.md

@@ -0,0 +1,168 @@
+# SelectMenu — Consumer Styling Guide
+
+## Public token API
+
+All `--select-menu-*` tokens are the stable override surface, each falling back to a `--theme-*`
+global token so it matches the rest of the design system out of the box.
+
+### Trigger button
+
+| Token | Default | Controls |
+|---|---|---|
+| `--select-menu-trigger-gap` | `0.8rem` | Gap between icon / label / chevron |
+| `--select-menu-trigger-min-height` | `4.4rem` | Trigger minimum height |
+| `--select-menu-trigger-padding-block` | `0.8rem` | Trigger vertical padding |
+| `--select-menu-trigger-padding-inline` | `1.2rem` | Trigger horizontal padding |
+| `--select-menu-trigger-border-width` | `0.1rem` | Trigger border thickness |
+| `--select-menu-trigger-border` | `var(--theme-border)` | Trigger border colour (rest state) |
+| `--select-menu-trigger-border-focus` | `var(--theme-border-focus)` | Trigger border colour on hover/focus |
+| `--select-menu-trigger-border-radius` | `0.5rem` | Trigger corner rounding |
+| `--select-menu-trigger-surface` | `var(--theme-input-surface)` | Trigger background |
+| `--select-menu-trigger-text-color` | `var(--theme-text)` | Trigger label text colour |
+| `--select-menu-trigger-font-size` | `1.6rem` | Trigger label font size |
+| `--select-menu-trigger-outline-width` | `0.2rem` | Focus-visible outline width (trigger and items) |
+| `--select-menu-trigger-icon-size` | `2rem` | Selected option's icon size in the trigger |
+| `--select-menu-trigger-chevron-size` | `1.6rem` | Chevron icon size |
+
+### Menu popover
+
+| Token | Default | Controls |
+|---|---|---|
+| `--select-menu-block-distance` | `0.4rem` | Gap between trigger bottom and menu top |
+| `--select-menu-popover-border-width` | `0.1rem` | Popover border thickness |
+| `--select-menu-popover-border` | `var(--theme-border)` | Popover border colour |
+| `--select-menu-popover-surface` | `var(--theme-input-surface)` | Popover background |
+| `--select-menu-popover-border-radius` | `0.5rem` | Popover corner rounding |
+| `--select-menu-popover-min-width` | `18rem` | Minimum popover width |
+| `--select-menu-popover-max-height` | `32rem` | Maximum popover height before scrolling |
+| `--select-menu-popover-shadow` | `0 0.4rem 1.6rem rgb(0 0 0 / 12%)` | Popover drop shadow |
+| `--select-menu-transition-duration` | `200ms` | Open/close fade and chevron-rotate duration |
+
+### Options
+
+| Token | Default | Controls |
+|---|---|---|
+| `--select-menu-item-gap` | `0.8rem` | Gap between checkmark / icon / label in a row |
+| `--select-menu-item-padding-block` | `1rem` | Option row vertical padding |
+| `--select-menu-item-padding-inline` | `1.2rem` | Option row horizontal padding |
+| `--select-menu-item-text-color` | `var(--theme-text)` | Option label colour |
+| `--select-menu-item-font-size` | `1.5rem` | Option label font size |
+| `--select-menu-item-surface-hover` | `var(--theme-input-surface-hover)` | Option row background on hover/focus |
+| `--select-menu-item-check-size` | `1.6rem` | Checkmark icon box size |
+| `--select-menu-item-check-color` | `currentcolor` | Checkmark icon colour |
+| `--select-menu-item-icon-size` | `1.8rem` | Per-option icon size |
+
+---
+
+## Global theming — recommended approach
+
+Create `assets/styles/setup/07.components/select-menu.css` in the consuming app and set tokens
+on `:root`. This applies to every `SelectMenu` across the site.
+
+```css
+/* assets/styles/setup/07.components/select-menu.css */
+:root {
+  --select-menu-trigger-border-radius: 999rem;
+  --select-menu-trigger-surface: var(--brand-surface);
+  --select-menu-trigger-border: var(--brand-border);
+
+  --select-menu-popover-surface: var(--brand-surface);
+  --select-menu-popover-border: var(--brand-border);
+  --select-menu-popover-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.15);
+
+  --select-menu-item-surface-hover: var(--brand-surface-subtle);
+  --select-menu-item-check-color: var(--brand-accent);
+}
+```
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+```vue
+<SelectMenu
+  v-model="language"
+  :options="languageOptions"
+  label="Language"
+  :style-class-passthrough="['compact-switcher']"
+/>
+```
+
+```css
+.select-menu.compact-switcher {
+  --select-menu-trigger-min-height: 3.2rem;
+  --select-menu-trigger-padding-inline: 0.8rem;
+  --select-menu-trigger-border-radius: 50%;
+}
+```
+
+---
+
+## Trigger content variants
+
+`showIcon` / `showLabel` / `showChevron` control what renders in the trigger — combine them for
+the three common shapes:
+
+| Variant | Props |
+|---|---|
+| Icon-only (e.g. flag switcher in a tight header) | `:show-label="false" :show-chevron="false"` |
+| Text + chevron (e.g. a category filter with no per-option icons) | `:show-icon="false"` (default `showLabel`/`showChevron`) |
+| Icon + text + chevron (full select) | Defaults — no overrides needed |
+
+---
+
+## Single-select vs multi-select
+
+By default `SelectMenu` is single-select: `v-model` is `string | number | undefined`, the selected
+option shows a checkmark, and picking one closes the popover.
+
+Set `multiple` for a checkbox-per-option multi-select instead: `v-model` becomes
+`(string | number)[]`, every option shows a checkbox (checked/unchecked), and picking an option
+toggles it in the array without closing the popover — so several can be picked in one open/close
+cycle. By default the trigger text stays fixed on `placeholder`/`label` as a static category tag
+(e.g. `"Services required"`) regardless of how many options are checked, since a comma-joined list
+of checked options would grow unpredictably long. Set `showSelectionInTrigger` to opt into that
+comma-joined list instead (falling back to `placeholder`/`label` when nothing is checked). The
+trigger icon is not shown in multi-select mode (`showIcon` has no effect), since there's no single
+selected option to represent.
+
+```vue
+<script setup lang="ts">
+const treatments = ref<string[]>([]);
+const treatmentOptions = [
+  { value: "trim", label: "Trim" },
+  { value: "layers", label: "Layers" },
+  { value: "restyle", label: "Restyle" },
+  { value: "straightening", label: "Straightening" },
+];
+</script>
+
+<template>
+  <SelectMenu v-model="treatments" :options="treatmentOptions" label="Services required" multiple />
+
+  <!-- Trigger updates to "Layers, Restyle" etc. as options are checked -->
+  <SelectMenu
+    v-model="treatments"
+    :options="treatmentOptions"
+    label="Services required"
+    multiple
+    show-selection-in-trigger
+  />
+</template>
+```
+
+For several independent single-select filter categories (rather than one multi-select category),
+place multiple single-select `SelectMenu` instances side by side instead — see the "Filter Bar"
+story.
+
+---
+
+## Notes
+
+- **Popover API + CSS anchor positioning** — same mechanism as `ActionMenu`. Broadly supported
+  (Chrome 114+, Firefox 125+, Safari 17+). No polyfill is included.
+- **Popover left-aligns with the trigger** by default (`left: anchor(left)`), unlike `ActionMenu`
+  which right-aligns — matches native `<select>` dropdown behaviour. Flips above the trigger near
+  the bottom of the viewport (`position-try-fallbacks: flip-block`).
+- **Chevron rotation** is pure CSS via `:has(.select-menu-popover:popover-open)` — no JS state
+  needed for the visual, though `isOpen` is still tracked internally to drive `aria-expanded`.