@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/united-kingdom-national-health-service-wales-for-practitioners.css CHANGED
@@ -3513,6 +3513,7 @@
3513
3513
  .theme-picker-list,
3514
3514
  .locale-picker-list,
3515
3515
  .text-size-picker-list,
3516
+ .motion-picker-list,
3516
3517
  .share-picker-list,
3517
3518
  .search-picker-panel
3518
3519
  ) {
@@ -3538,17 +3539,56 @@
3538
3539
  .theme-picker-list,
3539
3540
  .locale-picker-list,
3540
3541
  .text-size-picker-list,
3542
+ .motion-picker-list,
3541
3543
  .share-picker-list,
3542
3544
  .search-picker-panel
3543
3545
  )[hidden] {
3544
3546
  display: none;
3545
3547
  }
3546
3548
 
3547
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
3549
+ /* Popups open under their button, aligned to its start edge, and flip to
3550
+ its end edge (or above it) when they would run off the viewport. A header
3551
+ picker near the right edge otherwise overflows, and focusing the popup
3552
+ scrolls the whole page sideways. `position: fixed` makes the viewport the
3553
+ containing block that the flip fallbacks are checked against; browsers
3554
+ without anchor positioning keep the absolute placement above. */
3555
+ @supports (position-area: block-end) {
3556
+ :where(.theme-picker) { anchor-name: --lily-theme-picker; }
3557
+ :where(.locale-picker) { anchor-name: --lily-locale-picker; }
3558
+ :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
3559
+ :where(.motion-picker) { anchor-name: --lily-motion-picker; }
3560
+ :where(.share-picker) { anchor-name: --lily-share-picker; }
3561
+ :where(.search-picker) { anchor-name: --lily-search-picker; }
3562
+ :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
3563
+ :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
3564
+ :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
3565
+ :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
3566
+ :where(.share-picker-list) { position-anchor: --lily-share-picker; }
3567
+ :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
3568
+ :where(
3569
+ .theme-picker-list,
3570
+ .locale-picker-list,
3571
+ .text-size-picker-list,
3572
+ .motion-picker-list,
3573
+ .share-picker-list,
3574
+ .search-picker-panel
3575
+ ) {
3576
+ position: fixed;
3577
+ inset: auto;
3578
+ position-area: block-end span-inline-end;
3579
+ position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
3580
+ min-width: 0;
3581
+ width: max-content;
3582
+ max-width: calc(100vw - 1rem);
3583
+ }
3584
+ }
3585
+
3586
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
3548
3587
  > :where(
3549
3588
  .theme-picker-option,
3550
3589
  .locale-picker-option,
3551
- .text-size-picker-option
3590
+ .text-size-picker-option,
3591
+ .motion-picker-option
3552
3592
  ) {
3553
3593
  padding: var(--lily-space-xs) var(--lily-space-sm);
3554
3594
  border-radius: var(--lily-radius-sm);
@@ -3557,7 +3597,7 @@
3557
3597
 
3558
3598
  /* data-active is the keyboard cursor (aria-activedescendant); focus
3559
3599
  stays on the listbox, so this is the only visible cue for it. */
3560
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
3600
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
3561
3601
  > :where([data-active]) {
3562
3602
  background-color: var(--lily-surface-alt);
3563
3603
  outline: var(--lily-focus-ring);
@@ -3566,7 +3606,7 @@
3566
3606
 
3567
3607
  /* aria-selected marks the applied theme/locale, which is not the
3568
3608
  same thing as the keyboard cursor. Both can be visible at once. */
3569
- :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
3609
+ :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
3570
3610
  > :where([aria-selected="true"]) {
3571
3611
  font-weight: 600;
3572
3612
  background-color: var(--lily-surface-sunken);
package/dist/united-states-web-design-system.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/valentine.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/winter.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/wireframe.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lilydesignsystem/themes",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "engines": {
5
5
  "node": "=26"
6
6
  },