@lilydesignsystem/themes 0.2.0 → 0.3.1

package/dist/retro.css

@@ -155,6 +155,14 @@
         /* Primary body-copy colour. Maps to the theme's high-contrast
            reading colour. */
         --lily-text: var(--color-base-content);
+        /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
+           keeps WCAG contrast as text on the page and on the error-tinted
+           callout surface (`--color-error` itself is a fill colour). */
+        --lily-error-text: color-mix(
+            in oklch,
+            var(--color-error) 22%,
+            var(--color-base-content)
+        );
         /* Muted / secondary text — mixed 70% with transparent to keep the
            hue but lower contrast for captions, helptext, placeholders. */
         --lily-text-muted: color-mix(
@@ -894,7 +902,7 @@
     }
     :where(.dont-list-item)::marker {
         content: "✗ ";
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
 
     /* --- Tree --------------------------------------------------------------- */
@@ -976,7 +984,7 @@
         color: var(--color-success);
     }
     :where(.validation-list-item[data-status="failed"]) {
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
     :where(.validation-list-item[data-status="pending"]) {
         color: var(--lily-text-muted);
@@ -1334,7 +1342,7 @@
 
     /* Error message — inline form-validation message. */
     :where(.error-message) {
-        color: var(--color-error);
+        color: var(--lily-error-text);
         font-weight: 600;
     }
     /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
@@ -2548,6 +2556,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     ) {
@@ -2573,17 +2582,56 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     )[hidden] {
         display: none;
     }
 
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    /* Popups open under their button, aligned to its start edge, and flip to
+       its end edge (or above it) when they would run off the viewport. A header
+       picker near the right edge otherwise overflows, and focusing the popup
+       scrolls the whole page sideways. `position: fixed` makes the viewport the
+       containing block that the flip fallbacks are checked against; browsers
+       without anchor positioning keep the absolute placement above. */
+    @supports (position-area: block-end) {
+        :where(.theme-picker) { anchor-name: --lily-theme-picker; }
+        :where(.locale-picker) { anchor-name: --lily-locale-picker; }
+        :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
+        :where(.motion-picker) { anchor-name: --lily-motion-picker; }
+        :where(.share-picker) { anchor-name: --lily-share-picker; }
+        :where(.search-picker) { anchor-name: --lily-search-picker; }
+        :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
+        :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
+        :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
+        :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
+        :where(.share-picker-list) { position-anchor: --lily-share-picker; }
+        :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
+        :where(
+            .theme-picker-list,
+            .locale-picker-list,
+            .text-size-picker-list,
+            .motion-picker-list,
+            .share-picker-list,
+            .search-picker-panel
+        ) {
+            position: fixed;
+            inset: auto;
+            position-area: block-end span-inline-end;
+            position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
+            min-width: 0;
+            width: max-content;
+            max-width: calc(100vw - 1rem);
+        }
+    }
+
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where(
             .theme-picker-option,
             .locale-picker-option,
-            .text-size-picker-option
+            .text-size-picker-option,
+            .motion-picker-option
         ) {
         padding: var(--lily-space-xs) var(--lily-space-sm);
         border-radius: var(--lily-radius-sm);
@@ -2592,7 +2640,7 @@
 
     /* data-active is the keyboard cursor (aria-activedescendant); focus
        stays on the listbox, so this is the only visible cue for it. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where([data-active]) {
         background-color: var(--lily-surface-alt);
         outline: var(--lily-focus-ring);
@@ -2601,7 +2649,7 @@
 
     /* aria-selected marks the applied theme/locale, which is not the
        same thing as the keyboard cursor. Both can be visible at once. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where([aria-selected="true"]) {
         font-weight: 600;
         background-color: var(--lily-surface-sunken);

package/dist/silk.css

@@ -155,6 +155,14 @@
         /* Primary body-copy colour. Maps to the theme's high-contrast
            reading colour. */
         --lily-text: var(--color-base-content);
+        /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
+           keeps WCAG contrast as text on the page and on the error-tinted
+           callout surface (`--color-error` itself is a fill colour). */
+        --lily-error-text: color-mix(
+            in oklch,
+            var(--color-error) 22%,
+            var(--color-base-content)
+        );
         /* Muted / secondary text — mixed 70% with transparent to keep the
            hue but lower contrast for captions, helptext, placeholders. */
         --lily-text-muted: color-mix(
@@ -894,7 +902,7 @@
     }
     :where(.dont-list-item)::marker {
         content: "✗ ";
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
 
     /* --- Tree --------------------------------------------------------------- */
@@ -976,7 +984,7 @@
         color: var(--color-success);
     }
     :where(.validation-list-item[data-status="failed"]) {
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
     :where(.validation-list-item[data-status="pending"]) {
         color: var(--lily-text-muted);
@@ -1334,7 +1342,7 @@
 
     /* Error message — inline form-validation message. */
     :where(.error-message) {
-        color: var(--color-error);
+        color: var(--lily-error-text);
         font-weight: 600;
     }
     /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
@@ -2548,6 +2556,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     ) {
@@ -2573,17 +2582,56 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     )[hidden] {
         display: none;
     }
 
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    /* Popups open under their button, aligned to its start edge, and flip to
+       its end edge (or above it) when they would run off the viewport. A header
+       picker near the right edge otherwise overflows, and focusing the popup
+       scrolls the whole page sideways. `position: fixed` makes the viewport the
+       containing block that the flip fallbacks are checked against; browsers
+       without anchor positioning keep the absolute placement above. */
+    @supports (position-area: block-end) {
+        :where(.theme-picker) { anchor-name: --lily-theme-picker; }
+        :where(.locale-picker) { anchor-name: --lily-locale-picker; }
+        :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
+        :where(.motion-picker) { anchor-name: --lily-motion-picker; }
+        :where(.share-picker) { anchor-name: --lily-share-picker; }
+        :where(.search-picker) { anchor-name: --lily-search-picker; }
+        :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
+        :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
+        :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
+        :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
+        :where(.share-picker-list) { position-anchor: --lily-share-picker; }
+        :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
+        :where(
+            .theme-picker-list,
+            .locale-picker-list,
+            .text-size-picker-list,
+            .motion-picker-list,
+            .share-picker-list,
+            .search-picker-panel
+        ) {
+            position: fixed;
+            inset: auto;
+            position-area: block-end span-inline-end;
+            position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
+            min-width: 0;
+            width: max-content;
+            max-width: calc(100vw - 1rem);
+        }
+    }
+
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where(
             .theme-picker-option,
             .locale-picker-option,
-            .text-size-picker-option
+            .text-size-picker-option,
+            .motion-picker-option
         ) {
         padding: var(--lily-space-xs) var(--lily-space-sm);
         border-radius: var(--lily-radius-sm);
@@ -2592,7 +2640,7 @@
 
     /* data-active is the keyboard cursor (aria-activedescendant); focus
        stays on the listbox, so this is the only visible cue for it. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where([data-active]) {
         background-color: var(--lily-surface-alt);
         outline: var(--lily-focus-ring);
@@ -2601,7 +2649,7 @@
 
     /* aria-selected marks the applied theme/locale, which is not the
        same thing as the keyboard cursor. Both can be visible at once. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where([aria-selected="true"]) {
         font-weight: 600;
         background-color: var(--lily-surface-sunken);

package/dist/sunset.css

@@ -155,6 +155,14 @@
         /* Primary body-copy colour. Maps to the theme's high-contrast
            reading colour. */
         --lily-text: var(--color-base-content);
+        /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
+           keeps WCAG contrast as text on the page and on the error-tinted
+           callout surface (`--color-error` itself is a fill colour). */
+        --lily-error-text: color-mix(
+            in oklch,
+            var(--color-error) 22%,
+            var(--color-base-content)
+        );
         /* Muted / secondary text — mixed 70% with transparent to keep the
            hue but lower contrast for captions, helptext, placeholders. */
         --lily-text-muted: color-mix(
@@ -894,7 +902,7 @@
     }
     :where(.dont-list-item)::marker {
         content: "✗ ";
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
 
     /* --- Tree --------------------------------------------------------------- */
@@ -976,7 +984,7 @@
         color: var(--color-success);
     }
     :where(.validation-list-item[data-status="failed"]) {
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
     :where(.validation-list-item[data-status="pending"]) {
         color: var(--lily-text-muted);
@@ -1334,7 +1342,7 @@
 
     /* Error message — inline form-validation message. */
     :where(.error-message) {
-        color: var(--color-error);
+        color: var(--lily-error-text);
         font-weight: 600;
     }
     /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
@@ -2548,6 +2556,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     ) {
@@ -2573,17 +2582,56 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     )[hidden] {
         display: none;
     }
 
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    /* Popups open under their button, aligned to its start edge, and flip to
+       its end edge (or above it) when they would run off the viewport. A header
+       picker near the right edge otherwise overflows, and focusing the popup
+       scrolls the whole page sideways. `position: fixed` makes the viewport the
+       containing block that the flip fallbacks are checked against; browsers
+       without anchor positioning keep the absolute placement above. */
+    @supports (position-area: block-end) {
+        :where(.theme-picker) { anchor-name: --lily-theme-picker; }
+        :where(.locale-picker) { anchor-name: --lily-locale-picker; }
+        :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
+        :where(.motion-picker) { anchor-name: --lily-motion-picker; }
+        :where(.share-picker) { anchor-name: --lily-share-picker; }
+        :where(.search-picker) { anchor-name: --lily-search-picker; }
+        :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
+        :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
+        :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
+        :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
+        :where(.share-picker-list) { position-anchor: --lily-share-picker; }
+        :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
+        :where(
+            .theme-picker-list,
+            .locale-picker-list,
+            .text-size-picker-list,
+            .motion-picker-list,
+            .share-picker-list,
+            .search-picker-panel
+        ) {
+            position: fixed;
+            inset: auto;
+            position-area: block-end span-inline-end;
+            position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
+            min-width: 0;
+            width: max-content;
+            max-width: calc(100vw - 1rem);
+        }
+    }
+
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where(
             .theme-picker-option,
             .locale-picker-option,
-            .text-size-picker-option
+            .text-size-picker-option,
+            .motion-picker-option
         ) {
         padding: var(--lily-space-xs) var(--lily-space-sm);
         border-radius: var(--lily-radius-sm);
@@ -2592,7 +2640,7 @@
 
     /* data-active is the keyboard cursor (aria-activedescendant); focus
        stays on the listbox, so this is the only visible cue for it. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where([data-active]) {
         background-color: var(--lily-surface-alt);
         outline: var(--lily-focus-ring);
@@ -2601,7 +2649,7 @@
 
     /* aria-selected marks the applied theme/locale, which is not the
        same thing as the keyboard cursor. Both can be visible at once. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where([aria-selected="true"]) {
         font-weight: 600;
         background-color: var(--lily-surface-sunken);

package/dist/synthwave.css

@@ -155,6 +155,14 @@
         /* Primary body-copy colour. Maps to the theme's high-contrast
            reading colour. */
         --lily-text: var(--color-base-content);
+        /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
+           keeps WCAG contrast as text on the page and on the error-tinted
+           callout surface (`--color-error` itself is a fill colour). */
+        --lily-error-text: color-mix(
+            in oklch,
+            var(--color-error) 22%,
+            var(--color-base-content)
+        );
         /* Muted / secondary text — mixed 70% with transparent to keep the
            hue but lower contrast for captions, helptext, placeholders. */
         --lily-text-muted: color-mix(
@@ -894,7 +902,7 @@
     }
     :where(.dont-list-item)::marker {
         content: "✗ ";
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
 
     /* --- Tree --------------------------------------------------------------- */
@@ -976,7 +984,7 @@
         color: var(--color-success);
     }
     :where(.validation-list-item[data-status="failed"]) {
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
     :where(.validation-list-item[data-status="pending"]) {
         color: var(--lily-text-muted);
@@ -1334,7 +1342,7 @@
 
     /* Error message — inline form-validation message. */
     :where(.error-message) {
-        color: var(--color-error);
+        color: var(--lily-error-text);
         font-weight: 600;
     }
     /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
@@ -2548,6 +2556,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     ) {
@@ -2573,17 +2582,56 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     )[hidden] {
         display: none;
     }
 
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    /* Popups open under their button, aligned to its start edge, and flip to
+       its end edge (or above it) when they would run off the viewport. A header
+       picker near the right edge otherwise overflows, and focusing the popup
+       scrolls the whole page sideways. `position: fixed` makes the viewport the
+       containing block that the flip fallbacks are checked against; browsers
+       without anchor positioning keep the absolute placement above. */
+    @supports (position-area: block-end) {
+        :where(.theme-picker) { anchor-name: --lily-theme-picker; }
+        :where(.locale-picker) { anchor-name: --lily-locale-picker; }
+        :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
+        :where(.motion-picker) { anchor-name: --lily-motion-picker; }
+        :where(.share-picker) { anchor-name: --lily-share-picker; }
+        :where(.search-picker) { anchor-name: --lily-search-picker; }
+        :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
+        :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
+        :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
+        :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
+        :where(.share-picker-list) { position-anchor: --lily-share-picker; }
+        :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
+        :where(
+            .theme-picker-list,
+            .locale-picker-list,
+            .text-size-picker-list,
+            .motion-picker-list,
+            .share-picker-list,
+            .search-picker-panel
+        ) {
+            position: fixed;
+            inset: auto;
+            position-area: block-end span-inline-end;
+            position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
+            min-width: 0;
+            width: max-content;
+            max-width: calc(100vw - 1rem);
+        }
+    }
+
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where(
             .theme-picker-option,
             .locale-picker-option,
-            .text-size-picker-option
+            .text-size-picker-option,
+            .motion-picker-option
         ) {
         padding: var(--lily-space-xs) var(--lily-space-sm);
         border-radius: var(--lily-radius-sm);
@@ -2592,7 +2640,7 @@
 
     /* data-active is the keyboard cursor (aria-activedescendant); focus
        stays on the listbox, so this is the only visible cue for it. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where([data-active]) {
         background-color: var(--lily-surface-alt);
         outline: var(--lily-focus-ring);
@@ -2601,7 +2649,7 @@
 
     /* aria-selected marks the applied theme/locale, which is not the
        same thing as the keyboard cursor. Both can be visible at once. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where([aria-selected="true"]) {
         font-weight: 600;
         background-color: var(--lily-surface-sunken);

package/dist/united-kingdom-government-digital-service.css

@@ -160,6 +160,14 @@
         /* Primary body-copy colour. Maps to the theme's high-contrast
            reading colour. */
         --lily-text: var(--color-base-content);
+        /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
+           keeps WCAG contrast as text on the page and on the error-tinted
+           callout surface (`--color-error` itself is a fill colour). */
+        --lily-error-text: color-mix(
+            in oklch,
+            var(--color-error) 22%,
+            var(--color-base-content)
+        );
         /* Muted / secondary text — mixed 70% with transparent to keep the
            hue but lower contrast for captions, helptext, placeholders. */
         --lily-text-muted: color-mix(
@@ -899,7 +907,7 @@
     }
     :where(.dont-list-item)::marker {
         content: "✗ ";
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
 
     /* --- Tree --------------------------------------------------------------- */
@@ -981,7 +989,7 @@
         color: var(--color-success);
     }
     :where(.validation-list-item[data-status="failed"]) {
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
     :where(.validation-list-item[data-status="pending"]) {
         color: var(--lily-text-muted);
@@ -1339,7 +1347,7 @@
 
     /* Error message — inline form-validation message. */
     :where(.error-message) {
-        color: var(--color-error);
+        color: var(--lily-error-text);
         font-weight: 600;
     }
     /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
@@ -2553,6 +2561,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     ) {
@@ -2578,17 +2587,56 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     )[hidden] {
         display: none;
     }
 
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    /* Popups open under their button, aligned to its start edge, and flip to
+       its end edge (or above it) when they would run off the viewport. A header
+       picker near the right edge otherwise overflows, and focusing the popup
+       scrolls the whole page sideways. `position: fixed` makes the viewport the
+       containing block that the flip fallbacks are checked against; browsers
+       without anchor positioning keep the absolute placement above. */
+    @supports (position-area: block-end) {
+        :where(.theme-picker) { anchor-name: --lily-theme-picker; }
+        :where(.locale-picker) { anchor-name: --lily-locale-picker; }
+        :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
+        :where(.motion-picker) { anchor-name: --lily-motion-picker; }
+        :where(.share-picker) { anchor-name: --lily-share-picker; }
+        :where(.search-picker) { anchor-name: --lily-search-picker; }
+        :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
+        :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
+        :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
+        :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
+        :where(.share-picker-list) { position-anchor: --lily-share-picker; }
+        :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
+        :where(
+            .theme-picker-list,
+            .locale-picker-list,
+            .text-size-picker-list,
+            .motion-picker-list,
+            .share-picker-list,
+            .search-picker-panel
+        ) {
+            position: fixed;
+            inset: auto;
+            position-area: block-end span-inline-end;
+            position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
+            min-width: 0;
+            width: max-content;
+            max-width: calc(100vw - 1rem);
+        }
+    }
+
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where(
             .theme-picker-option,
             .locale-picker-option,
-            .text-size-picker-option
+            .text-size-picker-option,
+            .motion-picker-option
         ) {
         padding: var(--lily-space-xs) var(--lily-space-sm);
         border-radius: var(--lily-radius-sm);
@@ -2597,7 +2645,7 @@
 
     /* data-active is the keyboard cursor (aria-activedescendant); focus
        stays on the listbox, so this is the only visible cue for it. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where([data-active]) {
         background-color: var(--lily-surface-alt);
         outline: var(--lily-focus-ring);
@@ -2606,7 +2654,7 @@
 
     /* aria-selected marks the applied theme/locale, which is not the
        same thing as the keyboard cursor. Both can be visible at once. */
-    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
         > :where([aria-selected="true"]) {
         font-weight: 600;
         background-color: var(--lily-surface-sunken);