@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/caramellatte.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/cmyk.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/coffee.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/corporate.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/cupcake.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/cyberpunk.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/dark.css CHANGED
@@ -2557,6 +2557,7 @@
2557
2557
  .theme-picker-list,
2558
2558
  .locale-picker-list,
2559
2559
  .text-size-picker-list,
2560
+ .motion-picker-list,
2560
2561
  .share-picker-list,
2561
2562
  .search-picker-panel
2562
2563
  ) {
@@ -2582,17 +2583,56 @@
2582
2583
  .theme-picker-list,
2583
2584
  .locale-picker-list,
2584
2585
  .text-size-picker-list,
2586
+ .motion-picker-list,
2585
2587
  .share-picker-list,
2586
2588
  .search-picker-panel
2587
2589
  )[hidden] {
2588
2590
  display: none;
2589
2591
  }
2590
2592
 
2591
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2593
+ /* Popups open under their button, aligned to its start edge, and flip to
2594
+ its end edge (or above it) when they would run off the viewport. A header
2595
+ picker near the right edge otherwise overflows, and focusing the popup
2596
+ scrolls the whole page sideways. `position: fixed` makes the viewport the
2597
+ containing block that the flip fallbacks are checked against; browsers
2598
+ without anchor positioning keep the absolute placement above. */
2599
+ @supports (position-area: block-end) {
2600
+ :where(.theme-picker) { anchor-name: --lily-theme-picker; }
2601
+ :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2602
+ :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2603
+ :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2604
+ :where(.share-picker) { anchor-name: --lily-share-picker; }
2605
+ :where(.search-picker) { anchor-name: --lily-search-picker; }
2606
+ :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2607
+ :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2608
+ :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2609
+ :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2610
+ :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2611
+ :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2612
+ :where(
2613
+ .theme-picker-list,
2614
+ .locale-picker-list,
2615
+ .text-size-picker-list,
2616
+ .motion-picker-list,
2617
+ .share-picker-list,
2618
+ .search-picker-panel
2619
+ ) {
2620
+ position: fixed;
2621
+ inset: auto;
2622
+ position-area: block-end span-inline-end;
2623
+ position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
2624
+ min-width: 0;
2625
+ width: max-content;
2626
+ max-width: calc(100vw - 1rem);
2627
+ }
2628
+ }
2629
+
2630
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2592
2631
  > :where(
2593
2632
  .theme-picker-option,
2594
2633
  .locale-picker-option,
2595
- .text-size-picker-option
2634
+ .text-size-picker-option,
2635
+ .motion-picker-option
2596
2636
  ) {
2597
2637
  padding: var(--lily-space-xs) var(--lily-space-sm);
2598
2638
  border-radius: var(--lily-radius-sm);
@@ -2601,7 +2641,7 @@
2601
2641
 
2602
2642
  /* data-active is the keyboard cursor (aria-activedescendant); focus
2603
2643
  stays on the listbox, so this is the only visible cue for it. */
2604
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2644
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2605
2645
  > :where([data-active]) {
2606
2646
  background-color: var(--lily-surface-alt);
2607
2647
  outline: var(--lily-focus-ring);
@@ -2610,7 +2650,7 @@
2610
2650
 
2611
2651
  /* aria-selected marks the applied theme/locale, which is not the
2612
2652
  same thing as the keyboard cursor. Both can be visible at once. */
2613
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
2653
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
2614
2654
  > :where([aria-selected="true"]) {
2615
2655
  font-weight: 600;
2616
2656
  background-color: var(--lily-surface-sunken);
package/dist/dim.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);