@lilydesignsystem/themes 0.2.0 → 0.3.1

package/dist/united-kingdom-national-health-service-england-for-patients.css

@@ -196,6 +196,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(
@@ -935,7 +943,7 @@
     }
     :where(.dont-list-item)::marker {
         content: "✗ ";
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
 
     /* --- Tree --------------------------------------------------------------- */
@@ -1017,7 +1025,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);
@@ -1375,7 +1383,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
@@ -2589,6 +2597,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     ) {
@@ -2614,17 +2623,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);
@@ -2633,7 +2681,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);
@@ -2642,7 +2690,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-national-health-service-england-for-practitioners.css

@@ -245,6 +245,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(
@@ -1014,7 +1022,7 @@
     }
     :where(.dont-list-item)::marker {
         content: "✗ ";
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
 
     /* --- Tree --------------------------------------------------------------- */
@@ -1096,7 +1104,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);
@@ -1460,7 +1468,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
@@ -2680,6 +2688,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     ) {
@@ -2705,17 +2714,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);
@@ -2724,7 +2772,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);
@@ -2733,7 +2781,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-national-health-service-scotland-for-patients.css

@@ -299,6 +299,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(
@@ -1038,7 +1046,7 @@
     }
     :where(.dont-list-item)::marker {
         content: "✗ ";
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
 
     /* --- Tree --------------------------------------------------------------- */
@@ -1120,7 +1128,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);
@@ -1478,7 +1486,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
@@ -2692,6 +2700,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     ) {
@@ -2717,17 +2726,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);
@@ -2736,7 +2784,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);
@@ -2745,7 +2793,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-national-health-service-scotland-for-practitioners.css

@@ -341,6 +341,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(
@@ -1110,7 +1118,7 @@
     }
     :where(.dont-list-item)::marker {
         content: "✗ ";
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
 
     /* --- Tree --------------------------------------------------------------- */
@@ -1192,7 +1200,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);
@@ -1556,7 +1564,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
@@ -2776,6 +2784,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     ) {
@@ -2801,17 +2810,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);
@@ -2820,7 +2868,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);
@@ -2829,7 +2877,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-national-health-service-wales-for-patients.css

@@ -483,6 +483,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(
@@ -1478,7 +1486,7 @@
     }
     :where(.dont-list-item)::marker {
         content: "✗ ";
-        color: var(--color-error);
+        color: var(--lily-error-text);
     }
 
     /* --- Tree --------------------------------------------------------------- */
@@ -1560,7 +1568,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);
@@ -2032,7 +2040,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
@@ -3363,6 +3371,7 @@
         .theme-picker-list,
         .locale-picker-list,
         .text-size-picker-list,
+        .motion-picker-list,
         .share-picker-list,
         .search-picker-panel
     ) {
@@ -3388,17 +3397,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);
@@ -3407,7 +3455,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);
@@ -3416,7 +3464,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);