@lilydesignsystem/themes 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/abyss.css +44 -4
  2. package/dist/acid.css +44 -4
  3. package/dist/adobe-spectrum.css +44 -4
  4. package/dist/aqua.css +44 -4
  5. package/dist/autumn.css +44 -4
  6. package/dist/black.css +44 -4
  7. package/dist/bumblebee.css +44 -4
  8. package/dist/business.css +44 -4
  9. package/dist/caramellatte.css +44 -4
  10. package/dist/cmyk.css +44 -4
  11. package/dist/coffee.css +44 -4
  12. package/dist/corporate.css +44 -4
  13. package/dist/cupcake.css +44 -4
  14. package/dist/cyberpunk.css +44 -4
  15. package/dist/dark.css +44 -4
  16. package/dist/dim.css +44 -4
  17. package/dist/dracula.css +44 -4
  18. package/dist/emerald.css +44 -4
  19. package/dist/fantasy.css +44 -4
  20. package/dist/forest.css +44 -4
  21. package/dist/garden.css +44 -4
  22. package/dist/halloween.css +44 -4
  23. package/dist/lemonade.css +44 -4
  24. package/dist/light.css +44 -4
  25. package/dist/lofi.css +44 -4
  26. package/dist/luxury.css +44 -4
  27. package/dist/mozilla-protocol.css +44 -4
  28. package/dist/night.css +44 -4
  29. package/dist/nord.css +44 -4
  30. package/dist/pastel.css +44 -4
  31. package/dist/retro.css +44 -4
  32. package/dist/silk.css +44 -4
  33. package/dist/sunset.css +44 -4
  34. package/dist/synthwave.css +44 -4
  35. package/dist/united-kingdom-government-digital-service.css +44 -4
  36. package/dist/united-kingdom-national-health-service-england-for-patients.css +44 -4
  37. package/dist/united-kingdom-national-health-service-england-for-practitioners.css +44 -4
  38. package/dist/united-kingdom-national-health-service-scotland-for-patients.css +44 -4
  39. package/dist/united-kingdom-national-health-service-scotland-for-practitioners.css +44 -4
  40. package/dist/united-kingdom-national-health-service-wales-for-patients.css +44 -4
  41. package/dist/united-kingdom-national-health-service-wales-for-practitioners.css +44 -4
  42. package/dist/united-states-web-design-system.css +44 -4
  43. package/dist/valentine.css +44 -4
  44. package/dist/winter.css +44 -4
  45. package/dist/wireframe.css +44 -4
  46. package/package.json +1 -1
package/dist/abyss.css CHANGED
@@ -2556,6 +2556,7 @@
2556
2556
  .theme-picker-list,
2557
2557
  .locale-picker-list,
2558
2558
  .text-size-picker-list,
2559
+ .motion-picker-list,
2559
2560
  .share-picker-list,
2560
2561
  .search-picker-panel
2561
2562
  ) {
@@ -2581,17 +2582,56 @@
2581
2582
  .theme-picker-list,
2582
2583
  .locale-picker-list,
2583
2584
  .text-size-picker-list,
2585
+ .motion-picker-list,
2584
2586
  .share-picker-list,
2585
2587
  .search-picker-panel
2586
2588
  )[hidden] {
2587
2589
  display: none;
2588
2590
  }
2589
2591
 
2590
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2592
+ /* Popups open under their button, aligned to its start edge, and flip to
2593
+ its end edge (or above it) when they would run off the viewport. A header
2594
+ picker near the right edge otherwise overflows, and focusing the popup
2595
+ scrolls the whole page sideways. `position: fixed` makes the viewport the
2596
+ containing block that the flip fallbacks are checked against; browsers
2597
+ without anchor positioning keep the absolute placement above. */
2598
+ @supports (position-area: block-end) {
2599
+ :where(.theme-picker) { anchor-name: --lily-theme-picker; }
2600
+ :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
+ :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
+ :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2603
+ :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
+ :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
+ :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
+ :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
+ :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
+ :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2609
+ :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
+ :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
+ :where(
2612
+ .theme-picker-list,
2613
+ .locale-picker-list,
2614
+ .text-size-picker-list,
2615
+ .motion-picker-list,
2616
+ .share-picker-list,
2617
+ .search-picker-panel
2618
+ ) {
2619
+ position: fixed;
2620
+ inset: auto;
2621
+ position-area: block-end span-inline-end;
2622
+ position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
2623
+ min-width: 0;
2624
+ width: max-content;
2625
+ max-width: calc(100vw - 1rem);
2626
+ }
2627
+ }
2628
+
2629
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2591
2630
  > :where(
2592
2631
  .theme-picker-option,
2593
2632
  .locale-picker-option,
2594
- .text-size-picker-option
2633
+ .text-size-picker-option,
2634
+ .motion-picker-option
2595
2635
  ) {
2596
2636
  padding: var(--lily-space-xs) var(--lily-space-sm);
2597
2637
  border-radius: var(--lily-radius-sm);
@@ -2600,7 +2640,7 @@
2600
2640
 
2601
2641
  /* data-active is the keyboard cursor (aria-activedescendant); focus
2602
2642
  stays on the listbox, so this is the only visible cue for it. */
2603
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2643
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2604
2644
  > :where([data-active]) {
2605
2645
  background-color: var(--lily-surface-alt);
2606
2646
  outline: var(--lily-focus-ring);
@@ -2609,7 +2649,7 @@
2609
2649
 
2610
2650
  /* aria-selected marks the applied theme/locale, which is not the
2611
2651
  same thing as the keyboard cursor. Both can be visible at once. */
2612
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2652
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2613
2653
  > :where([aria-selected="true"]) {
2614
2654
  font-weight: 600;
2615
2655
  background-color: var(--lily-surface-sunken);
package/dist/acid.css CHANGED
@@ -2556,6 +2556,7 @@
2556
2556
  .theme-picker-list,
2557
2557
  .locale-picker-list,
2558
2558
  .text-size-picker-list,
2559
+ .motion-picker-list,
2559
2560
  .share-picker-list,
2560
2561
  .search-picker-panel
2561
2562
  ) {
@@ -2581,17 +2582,56 @@
2581
2582
  .theme-picker-list,
2582
2583
  .locale-picker-list,
2583
2584
  .text-size-picker-list,
2585
+ .motion-picker-list,
2584
2586
  .share-picker-list,
2585
2587
  .search-picker-panel
2586
2588
  )[hidden] {
2587
2589
  display: none;
2588
2590
  }
2589
2591
 
2590
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2592
+ /* Popups open under their button, aligned to its start edge, and flip to
2593
+ its end edge (or above it) when they would run off the viewport. A header
2594
+ picker near the right edge otherwise overflows, and focusing the popup
2595
+ scrolls the whole page sideways. `position: fixed` makes the viewport the
2596
+ containing block that the flip fallbacks are checked against; browsers
2597
+ without anchor positioning keep the absolute placement above. */
2598
+ @supports (position-area: block-end) {
2599
+ :where(.theme-picker) { anchor-name: --lily-theme-picker; }
2600
+ :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
+ :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
+ :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2603
+ :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
+ :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
+ :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
+ :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
+ :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
+ :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2609
+ :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
+ :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
+ :where(
2612
+ .theme-picker-list,
2613
+ .locale-picker-list,
2614
+ .text-size-picker-list,
2615
+ .motion-picker-list,
2616
+ .share-picker-list,
2617
+ .search-picker-panel
2618
+ ) {
2619
+ position: fixed;
2620
+ inset: auto;
2621
+ position-area: block-end span-inline-end;
2622
+ position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
2623
+ min-width: 0;
2624
+ width: max-content;
2625
+ max-width: calc(100vw - 1rem);
2626
+ }
2627
+ }
2628
+
2629
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2591
2630
  > :where(
2592
2631
  .theme-picker-option,
2593
2632
  .locale-picker-option,
2594
- .text-size-picker-option
2633
+ .text-size-picker-option,
2634
+ .motion-picker-option
2595
2635
  ) {
2596
2636
  padding: var(--lily-space-xs) var(--lily-space-sm);
2597
2637
  border-radius: var(--lily-radius-sm);
@@ -2600,7 +2640,7 @@
2600
2640
 
2601
2641
  /* data-active is the keyboard cursor (aria-activedescendant); focus
2602
2642
  stays on the listbox, so this is the only visible cue for it. */
2603
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2643
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2604
2644
  > :where([data-active]) {
2605
2645
  background-color: var(--lily-surface-alt);
2606
2646
  outline: var(--lily-focus-ring);
@@ -2609,7 +2649,7 @@
2609
2649
 
2610
2650
  /* aria-selected marks the applied theme/locale, which is not the
2611
2651
  same thing as the keyboard cursor. Both can be visible at once. */
2612
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2652
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2613
2653
  > :where([aria-selected="true"]) {
2614
2654
  font-weight: 600;
2615
2655
  background-color: var(--lily-surface-sunken);
package/dist/adobe-spectrum.css CHANGED
@@ -2556,6 +2556,7 @@
2556
2556
  .theme-picker-list,
2557
2557
  .locale-picker-list,
2558
2558
  .text-size-picker-list,
2559
+ .motion-picker-list,
2559
2560
  .share-picker-list,
2560
2561
  .search-picker-panel
2561
2562
  ) {
@@ -2581,17 +2582,56 @@
2581
2582
  .theme-picker-list,
2582
2583
  .locale-picker-list,
2583
2584
  .text-size-picker-list,
2585
+ .motion-picker-list,
2584
2586
  .share-picker-list,
2585
2587
  .search-picker-panel
2586
2588
  )[hidden] {
2587
2589
  display: none;
2588
2590
  }
2589
2591
 
2590
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2592
+ /* Popups open under their button, aligned to its start edge, and flip to
2593
+ its end edge (or above it) when they would run off the viewport. A header
2594
+ picker near the right edge otherwise overflows, and focusing the popup
2595
+ scrolls the whole page sideways. `position: fixed` makes the viewport the
2596
+ containing block that the flip fallbacks are checked against; browsers
2597
+ without anchor positioning keep the absolute placement above. */
2598
+ @supports (position-area: block-end) {
2599
+ :where(.theme-picker) { anchor-name: --lily-theme-picker; }
2600
+ :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
+ :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
+ :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2603
+ :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
+ :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
+ :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
+ :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
+ :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
+ :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2609
+ :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
+ :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
+ :where(
2612
+ .theme-picker-list,
2613
+ .locale-picker-list,
2614
+ .text-size-picker-list,
2615
+ .motion-picker-list,
2616
+ .share-picker-list,
2617
+ .search-picker-panel
2618
+ ) {
2619
+ position: fixed;
2620
+ inset: auto;
2621
+ position-area: block-end span-inline-end;
2622
+ position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
2623
+ min-width: 0;
2624
+ width: max-content;
2625
+ max-width: calc(100vw - 1rem);
2626
+ }
2627
+ }
2628
+
2629
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2591
2630
  > :where(
2592
2631
  .theme-picker-option,
2593
2632
  .locale-picker-option,
2594
- .text-size-picker-option
2633
+ .text-size-picker-option,
2634
+ .motion-picker-option
2595
2635
  ) {
2596
2636
  padding: var(--lily-space-xs) var(--lily-space-sm);
2597
2637
  border-radius: var(--lily-radius-sm);
@@ -2600,7 +2640,7 @@
2600
2640
 
2601
2641
  /* data-active is the keyboard cursor (aria-activedescendant); focus
2602
2642
  stays on the listbox, so this is the only visible cue for it. */
2603
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2643
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2604
2644
  > :where([data-active]) {
2605
2645
  background-color: var(--lily-surface-alt);
2606
2646
  outline: var(--lily-focus-ring);
@@ -2609,7 +2649,7 @@
2609
2649
 
2610
2650
  /* aria-selected marks the applied theme/locale, which is not the
2611
2651
  same thing as the keyboard cursor. Both can be visible at once. */
2612
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2652
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2613
2653
  > :where([aria-selected="true"]) {
2614
2654
  font-weight: 600;
2615
2655
  background-color: var(--lily-surface-sunken);
package/dist/aqua.css CHANGED
@@ -2556,6 +2556,7 @@
2556
2556
  .theme-picker-list,
2557
2557
  .locale-picker-list,
2558
2558
  .text-size-picker-list,
2559
+ .motion-picker-list,
2559
2560
  .share-picker-list,
2560
2561
  .search-picker-panel
2561
2562
  ) {
@@ -2581,17 +2582,56 @@
2581
2582
  .theme-picker-list,
2582
2583
  .locale-picker-list,
2583
2584
  .text-size-picker-list,
2585
+ .motion-picker-list,
2584
2586
  .share-picker-list,
2585
2587
  .search-picker-panel
2586
2588
  )[hidden] {
2587
2589
  display: none;
2588
2590
  }
2589
2591
 
2590
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2592
+ /* Popups open under their button, aligned to its start edge, and flip to
2593
+ its end edge (or above it) when they would run off the viewport. A header
2594
+ picker near the right edge otherwise overflows, and focusing the popup
2595
+ scrolls the whole page sideways. `position: fixed` makes the viewport the
2596
+ containing block that the flip fallbacks are checked against; browsers
2597
+ without anchor positioning keep the absolute placement above. */
2598
+ @supports (position-area: block-end) {
2599
+ :where(.theme-picker) { anchor-name: --lily-theme-picker; }
2600
+ :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
+ :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
+ :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2603
+ :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
+ :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
+ :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
+ :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
+ :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
+ :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2609
+ :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
+ :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
+ :where(
2612
+ .theme-picker-list,
2613
+ .locale-picker-list,
2614
+ .text-size-picker-list,
2615
+ .motion-picker-list,
2616
+ .share-picker-list,
2617
+ .search-picker-panel
2618
+ ) {
2619
+ position: fixed;
2620
+ inset: auto;
2621
+ position-area: block-end span-inline-end;
2622
+ position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
2623
+ min-width: 0;
2624
+ width: max-content;
2625
+ max-width: calc(100vw - 1rem);
2626
+ }
2627
+ }
2628
+
2629
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2591
2630
  > :where(
2592
2631
  .theme-picker-option,
2593
2632
  .locale-picker-option,
2594
- .text-size-picker-option
2633
+ .text-size-picker-option,
2634
+ .motion-picker-option
2595
2635
  ) {
2596
2636
  padding: var(--lily-space-xs) var(--lily-space-sm);
2597
2637
  border-radius: var(--lily-radius-sm);
@@ -2600,7 +2640,7 @@
2600
2640
 
2601
2641
  /* data-active is the keyboard cursor (aria-activedescendant); focus
2602
2642
  stays on the listbox, so this is the only visible cue for it. */
2603
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2643
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2604
2644
  > :where([data-active]) {
2605
2645
  background-color: var(--lily-surface-alt);
2606
2646
  outline: var(--lily-focus-ring);
@@ -2609,7 +2649,7 @@
2609
2649
 
2610
2650
  /* aria-selected marks the applied theme/locale, which is not the
2611
2651
  same thing as the keyboard cursor. Both can be visible at once. */
2612
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2652
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2613
2653
  > :where([aria-selected="true"]) {
2614
2654
  font-weight: 600;
2615
2655
  background-color: var(--lily-surface-sunken);
package/dist/autumn.css CHANGED
@@ -2556,6 +2556,7 @@
2556
2556
  .theme-picker-list,
2557
2557
  .locale-picker-list,
2558
2558
  .text-size-picker-list,
2559
+ .motion-picker-list,
2559
2560
  .share-picker-list,
2560
2561
  .search-picker-panel
2561
2562
  ) {
@@ -2581,17 +2582,56 @@
2581
2582
  .theme-picker-list,
2582
2583
  .locale-picker-list,
2583
2584
  .text-size-picker-list,
2585
+ .motion-picker-list,
2584
2586
  .share-picker-list,
2585
2587
  .search-picker-panel
2586
2588
  )[hidden] {
2587
2589
  display: none;
2588
2590
  }
2589
2591
 
2590
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2592
+ /* Popups open under their button, aligned to its start edge, and flip to
2593
+ its end edge (or above it) when they would run off the viewport. A header
2594
+ picker near the right edge otherwise overflows, and focusing the popup
2595
+ scrolls the whole page sideways. `position: fixed` makes the viewport the
2596
+ containing block that the flip fallbacks are checked against; browsers
2597
+ without anchor positioning keep the absolute placement above. */
2598
+ @supports (position-area: block-end) {
2599
+ :where(.theme-picker) { anchor-name: --lily-theme-picker; }
2600
+ :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
+ :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
+ :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2603
+ :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
+ :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
+ :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
+ :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
+ :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
+ :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2609
+ :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
+ :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
+ :where(
2612
+ .theme-picker-list,
2613
+ .locale-picker-list,
2614
+ .text-size-picker-list,
2615
+ .motion-picker-list,
2616
+ .share-picker-list,
2617
+ .search-picker-panel
2618
+ ) {
2619
+ position: fixed;
2620
+ inset: auto;
2621
+ position-area: block-end span-inline-end;
2622
+ position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
2623
+ min-width: 0;
2624
+ width: max-content;
2625
+ max-width: calc(100vw - 1rem);
2626
+ }
2627
+ }
2628
+
2629
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2591
2630
  > :where(
2592
2631
  .theme-picker-option,
2593
2632
  .locale-picker-option,
2594
- .text-size-picker-option
2633
+ .text-size-picker-option,
2634
+ .motion-picker-option
2595
2635
  ) {
2596
2636
  padding: var(--lily-space-xs) var(--lily-space-sm);
2597
2637
  border-radius: var(--lily-radius-sm);
@@ -2600,7 +2640,7 @@
2600
2640
 
2601
2641
  /* data-active is the keyboard cursor (aria-activedescendant); focus
2602
2642
  stays on the listbox, so this is the only visible cue for it. */
2603
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2643
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2604
2644
  > :where([data-active]) {
2605
2645
  background-color: var(--lily-surface-alt);
2606
2646
  outline: var(--lily-focus-ring);
@@ -2609,7 +2649,7 @@
2609
2649
 
2610
2650
  /* aria-selected marks the applied theme/locale, which is not the
2611
2651
  same thing as the keyboard cursor. Both can be visible at once. */
2612
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2652
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2613
2653
  > :where([aria-selected="true"]) {
2614
2654
  font-weight: 600;
2615
2655
  background-color: var(--lily-surface-sunken);
package/dist/black.css CHANGED
@@ -2556,6 +2556,7 @@
2556
2556
  .theme-picker-list,
2557
2557
  .locale-picker-list,
2558
2558
  .text-size-picker-list,
2559
+ .motion-picker-list,
2559
2560
  .share-picker-list,
2560
2561
  .search-picker-panel
2561
2562
  ) {
@@ -2581,17 +2582,56 @@
2581
2582
  .theme-picker-list,
2582
2583
  .locale-picker-list,
2583
2584
  .text-size-picker-list,
2585
+ .motion-picker-list,
2584
2586
  .share-picker-list,
2585
2587
  .search-picker-panel
2586
2588
  )[hidden] {
2587
2589
  display: none;
2588
2590
  }
2589
2591
 
2590
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2592
+ /* Popups open under their button, aligned to its start edge, and flip to
2593
+ its end edge (or above it) when they would run off the viewport. A header
2594
+ picker near the right edge otherwise overflows, and focusing the popup
2595
+ scrolls the whole page sideways. `position: fixed` makes the viewport the
2596
+ containing block that the flip fallbacks are checked against; browsers
2597
+ without anchor positioning keep the absolute placement above. */
2598
+ @supports (position-area: block-end) {
2599
+ :where(.theme-picker) { anchor-name: --lily-theme-picker; }
2600
+ :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
+ :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
+ :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2603
+ :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
+ :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
+ :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
+ :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
+ :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
+ :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2609
+ :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
+ :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
+ :where(
2612
+ .theme-picker-list,
2613
+ .locale-picker-list,
2614
+ .text-size-picker-list,
2615
+ .motion-picker-list,
2616
+ .share-picker-list,
2617
+ .search-picker-panel
2618
+ ) {
2619
+ position: fixed;
2620
+ inset: auto;
2621
+ position-area: block-end span-inline-end;
2622
+ position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
2623
+ min-width: 0;
2624
+ width: max-content;
2625
+ max-width: calc(100vw - 1rem);
2626
+ }
2627
+ }
2628
+
2629
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2591
2630
  > :where(
2592
2631
  .theme-picker-option,
2593
2632
  .locale-picker-option,
2594
- .text-size-picker-option
2633
+ .text-size-picker-option,
2634
+ .motion-picker-option
2595
2635
  ) {
2596
2636
  padding: var(--lily-space-xs) var(--lily-space-sm);
2597
2637
  border-radius: var(--lily-radius-sm);
@@ -2600,7 +2640,7 @@
2600
2640
 
2601
2641
  /* data-active is the keyboard cursor (aria-activedescendant); focus
2602
2642
  stays on the listbox, so this is the only visible cue for it. */
2603
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2643
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2604
2644
  > :where([data-active]) {
2605
2645
  background-color: var(--lily-surface-alt);
2606
2646
  outline: var(--lily-focus-ring);
@@ -2609,7 +2649,7 @@
2609
2649
 
2610
2650
  /* aria-selected marks the applied theme/locale, which is not the
2611
2651
  same thing as the keyboard cursor. Both can be visible at once. */
2612
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2652
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2613
2653
  > :where([aria-selected="true"]) {
2614
2654
  font-weight: 600;
2615
2655
  background-color: var(--lily-surface-sunken);
package/dist/bumblebee.css CHANGED
@@ -2556,6 +2556,7 @@
2556
2556
  .theme-picker-list,
2557
2557
  .locale-picker-list,
2558
2558
  .text-size-picker-list,
2559
+ .motion-picker-list,
2559
2560
  .share-picker-list,
2560
2561
  .search-picker-panel
2561
2562
  ) {
@@ -2581,17 +2582,56 @@
2581
2582
  .theme-picker-list,
2582
2583
  .locale-picker-list,
2583
2584
  .text-size-picker-list,
2585
+ .motion-picker-list,
2584
2586
  .share-picker-list,
2585
2587
  .search-picker-panel
2586
2588
  )[hidden] {
2587
2589
  display: none;
2588
2590
  }
2589
2591
 
2590
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2592
+ /* Popups open under their button, aligned to its start edge, and flip to
2593
+ its end edge (or above it) when they would run off the viewport. A header
2594
+ picker near the right edge otherwise overflows, and focusing the popup
2595
+ scrolls the whole page sideways. `position: fixed` makes the viewport the
2596
+ containing block that the flip fallbacks are checked against; browsers
2597
+ without anchor positioning keep the absolute placement above. */
2598
+ @supports (position-area: block-end) {
2599
+ :where(.theme-picker) { anchor-name: --lily-theme-picker; }
2600
+ :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
+ :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
+ :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2603
+ :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
+ :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
+ :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
+ :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
+ :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
+ :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2609
+ :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
+ :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
+ :where(
2612
+ .theme-picker-list,
2613
+ .locale-picker-list,
2614
+ .text-size-picker-list,
2615
+ .motion-picker-list,
2616
+ .share-picker-list,
2617
+ .search-picker-panel
2618
+ ) {
2619
+ position: fixed;
2620
+ inset: auto;
2621
+ position-area: block-end span-inline-end;
2622
+ position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
2623
+ min-width: 0;
2624
+ width: max-content;
2625
+ max-width: calc(100vw - 1rem);
2626
+ }
2627
+ }
2628
+
2629
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2591
2630
  > :where(
2592
2631
  .theme-picker-option,
2593
2632
  .locale-picker-option,
2594
- .text-size-picker-option
2633
+ .text-size-picker-option,
2634
+ .motion-picker-option
2595
2635
  ) {
2596
2636
  padding: var(--lily-space-xs) var(--lily-space-sm);
2597
2637
  border-radius: var(--lily-radius-sm);
@@ -2600,7 +2640,7 @@
2600
2640
 
2601
2641
  /* data-active is the keyboard cursor (aria-activedescendant); focus
2602
2642
  stays on the listbox, so this is the only visible cue for it. */
2603
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2643
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2604
2644
  > :where([data-active]) {
2605
2645
  background-color: var(--lily-surface-alt);
2606
2646
  outline: var(--lily-focus-ring);
@@ -2609,7 +2649,7 @@
2609
2649
 
2610
2650
  /* aria-selected marks the applied theme/locale, which is not the
2611
2651
  same thing as the keyboard cursor. Both can be visible at once. */
2612
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2652
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2613
2653
  > :where([aria-selected="true"]) {
2614
2654
  font-weight: 600;
2615
2655
  background-color: var(--lily-surface-sunken);
package/dist/business.css CHANGED
@@ -2556,6 +2556,7 @@
2556
2556
  .theme-picker-list,
2557
2557
  .locale-picker-list,
2558
2558
  .text-size-picker-list,
2559
+ .motion-picker-list,
2559
2560
  .share-picker-list,
2560
2561
  .search-picker-panel
2561
2562
  ) {
@@ -2581,17 +2582,56 @@
2581
2582
  .theme-picker-list,
2582
2583
  .locale-picker-list,
2583
2584
  .text-size-picker-list,
2585
+ .motion-picker-list,
2584
2586
  .share-picker-list,
2585
2587
  .search-picker-panel
2586
2588
  )[hidden] {
2587
2589
  display: none;
2588
2590
  }
2589
2591
 
2590
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2592
+ /* Popups open under their button, aligned to its start edge, and flip to
2593
+ its end edge (or above it) when they would run off the viewport. A header
2594
+ picker near the right edge otherwise overflows, and focusing the popup
2595
+ scrolls the whole page sideways. `position: fixed` makes the viewport the
2596
+ containing block that the flip fallbacks are checked against; browsers
2597
+ without anchor positioning keep the absolute placement above. */
2598
+ @supports (position-area: block-end) {
2599
+ :where(.theme-picker) { anchor-name: --lily-theme-picker; }
2600
+ :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
+ :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
+ :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2603
+ :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
+ :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
+ :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
+ :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
+ :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
+ :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2609
+ :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
+ :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
+ :where(
2612
+ .theme-picker-list,
2613
+ .locale-picker-list,
2614
+ .text-size-picker-list,
2615
+ .motion-picker-list,
2616
+ .share-picker-list,
2617
+ .search-picker-panel
2618
+ ) {
2619
+ position: fixed;
2620
+ inset: auto;
2621
+ position-area: block-end span-inline-end;
2622
+ position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
2623
+ min-width: 0;
2624
+ width: max-content;
2625
+ max-width: calc(100vw - 1rem);
2626
+ }
2627
+ }
2628
+
2629
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2591
2630
  > :where(
2592
2631
  .theme-picker-option,
2593
2632
  .locale-picker-option,
2594
- .text-size-picker-option
2633
+ .text-size-picker-option,
2634
+ .motion-picker-option
2595
2635
  ) {
2596
2636
  padding: var(--lily-space-xs) var(--lily-space-sm);
2597
2637
  border-radius: var(--lily-radius-sm);
@@ -2600,7 +2640,7 @@
2600
2640
 
2601
2641
  /* data-active is the keyboard cursor (aria-activedescendant); focus
2602
2642
  stays on the listbox, so this is the only visible cue for it. */
2603
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2643
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2604
2644
  > :where([data-active]) {
2605
2645
  background-color: var(--lily-surface-alt);
2606
2646
  outline: var(--lily-focus-ring);
@@ -2609,7 +2649,7 @@
2609
2649
 
2610
2650
  /* aria-selected marks the applied theme/locale, which is not the
2611
2651
  same thing as the keyboard cursor. Both can be visible at once. */
2612
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2652
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2613
2653
  > :where([aria-selected="true"]) {
2614
2654
  font-weight: 600;
2615
2655
  background-color: var(--lily-surface-sunken);