@lilydesignsystem/themes 0.3.1 → 0.4.0

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 +36 -0
  2. package/dist/acid.css +36 -0
  3. package/dist/adobe-spectrum.css +36 -0
  4. package/dist/aqua.css +36 -0
  5. package/dist/autumn.css +36 -0
  6. package/dist/black.css +36 -0
  7. package/dist/bumblebee.css +36 -0
  8. package/dist/business.css +36 -0
  9. package/dist/caramellatte.css +36 -0
  10. package/dist/cmyk.css +36 -0
  11. package/dist/coffee.css +36 -0
  12. package/dist/corporate.css +36 -0
  13. package/dist/cupcake.css +36 -0
  14. package/dist/cyberpunk.css +36 -0
  15. package/dist/dark.css +36 -0
  16. package/dist/dim.css +36 -0
  17. package/dist/dracula.css +36 -0
  18. package/dist/emerald.css +36 -0
  19. package/dist/fantasy.css +36 -0
  20. package/dist/forest.css +36 -0
  21. package/dist/garden.css +36 -0
  22. package/dist/halloween.css +36 -0
  23. package/dist/lemonade.css +36 -0
  24. package/dist/light.css +36 -0
  25. package/dist/lofi.css +36 -0
  26. package/dist/luxury.css +36 -0
  27. package/dist/mozilla-protocol.css +36 -0
  28. package/dist/night.css +36 -0
  29. package/dist/nord.css +36 -0
  30. package/dist/pastel.css +36 -0
  31. package/dist/retro.css +36 -0
  32. package/dist/silk.css +36 -0
  33. package/dist/sunset.css +36 -0
  34. package/dist/synthwave.css +36 -0
  35. package/dist/united-kingdom-government-digital-service.css +36 -0
  36. package/dist/united-kingdom-national-health-service-england-for-patients.css +36 -0
  37. package/dist/united-kingdom-national-health-service-england-for-practitioners.css +36 -0
  38. package/dist/united-kingdom-national-health-service-scotland-for-patients.css +36 -0
  39. package/dist/united-kingdom-national-health-service-scotland-for-practitioners.css +36 -0
  40. package/dist/united-kingdom-national-health-service-wales-for-patients.css +36 -0
  41. package/dist/united-kingdom-national-health-service-wales-for-practitioners.css +36 -0
  42. package/dist/united-states-web-design-system.css +36 -0
  43. package/dist/valentine.css +36 -0
  44. package/dist/winter.css +36 -0
  45. package/dist/wireframe.css +36 -0
  46. package/package.json +1 -1
package/dist/bumblebee.css CHANGED
@@ -2078,6 +2078,7 @@
2078
2078
  .locale-picker,
2079
2079
  .text-size-picker,
2080
2080
  .search-picker,
2081
+ .link-picker,
2081
2082
  .share-picker,
2082
2083
  .date-time-picker
2083
2084
  ) {
@@ -2090,6 +2091,7 @@
2090
2091
  .locale-picker-button,
2091
2092
  .text-size-picker-button,
2092
2093
  .search-picker-button,
2094
+ .link-picker-button,
2093
2095
  .share-picker-button,
2094
2096
  .date-time-picker-button
2095
2097
  ) {
@@ -2125,6 +2127,7 @@
2125
2127
  .locale-picker-icon,
2126
2128
  .text-size-picker-icon,
2127
2129
  .motion-picker-icon,
2130
+ .link-picker-icon,
2128
2131
  .share-picker-icon,
2129
2132
  .search-picker-icon
2130
2133
  ) {
@@ -2183,6 +2186,31 @@
2183
2186
  background-color: var(--lily-surface-alt);
2184
2187
  }
2185
2188
 
2189
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2190
+ so its items get the share list's treatment; the current page is
2191
+ marked by aria-current and shown in bold. */
2192
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2193
+ list-style: none;
2194
+ }
2195
+
2196
+ :where(.link-picker-link) {
2197
+ display: block;
2198
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2199
+ color: var(--lily-text);
2200
+ text-decoration: none;
2201
+ border-radius: var(--lily-radius-sm);
2202
+ cursor: pointer;
2203
+ }
2204
+
2205
+ :where(.link-picker-link:hover) {
2206
+ background-color: var(--lily-surface-alt);
2207
+ }
2208
+
2209
+ :where(.link-picker-link[aria-current="page"]) {
2210
+ font-weight: 600;
2211
+ background-color: var(--lily-surface-sunken);
2212
+ }
2213
+
2186
2214
  /* Copy feedback. Never display:none this — that silences the live
2187
2215
  region for screen-reader users. */
2188
2216
  :where(.share-picker-status) {
@@ -2464,6 +2492,7 @@
2464
2492
  .locale-picker-tooltip,
2465
2493
  .text-size-picker-tooltip,
2466
2494
  .motion-picker-tooltip,
2495
+ .link-picker-tooltip,
2467
2496
  .share-picker-tooltip,
2468
2497
  .search-picker-tooltip,
2469
2498
  .date-time-picker-tooltip
@@ -2488,6 +2517,7 @@
2488
2517
  .locale-picker-tooltip,
2489
2518
  .text-size-picker-tooltip,
2490
2519
  .motion-picker-tooltip,
2520
+ .link-picker-tooltip,
2491
2521
  .share-picker-tooltip,
2492
2522
  .search-picker-tooltip,
2493
2523
  .date-time-picker-tooltip
@@ -2504,6 +2534,7 @@
2504
2534
  .locale-picker-tooltip,
2505
2535
  .text-size-picker-tooltip,
2506
2536
  .motion-picker-tooltip,
2537
+ .link-picker-tooltip,
2507
2538
  .share-picker-tooltip,
2508
2539
  .search-picker-tooltip,
2509
2540
  .date-time-picker-tooltip
@@ -2557,6 +2588,7 @@
2557
2588
  .locale-picker-list,
2558
2589
  .text-size-picker-list,
2559
2590
  .motion-picker-list,
2591
+ .link-picker-list,
2560
2592
  .share-picker-list,
2561
2593
  .search-picker-panel
2562
2594
  ) {
@@ -2583,6 +2615,7 @@
2583
2615
  .locale-picker-list,
2584
2616
  .text-size-picker-list,
2585
2617
  .motion-picker-list,
2618
+ .link-picker-list,
2586
2619
  .share-picker-list,
2587
2620
  .search-picker-panel
2588
2621
  )[hidden] {
@@ -2600,12 +2633,14 @@
2600
2633
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
2634
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
2635
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2636
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2603
2637
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
2638
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
2639
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
2640
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
2641
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
2642
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2643
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2609
2644
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
2645
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
2646
  :where(
@@ -2613,6 +2648,7 @@
2613
2648
  .locale-picker-list,
2614
2649
  .text-size-picker-list,
2615
2650
  .motion-picker-list,
2651
+ .link-picker-list,
2616
2652
  .share-picker-list,
2617
2653
  .search-picker-panel
2618
2654
  ) {
package/dist/business.css CHANGED
@@ -2078,6 +2078,7 @@
2078
2078
  .locale-picker,
2079
2079
  .text-size-picker,
2080
2080
  .search-picker,
2081
+ .link-picker,
2081
2082
  .share-picker,
2082
2083
  .date-time-picker
2083
2084
  ) {
@@ -2090,6 +2091,7 @@
2090
2091
  .locale-picker-button,
2091
2092
  .text-size-picker-button,
2092
2093
  .search-picker-button,
2094
+ .link-picker-button,
2093
2095
  .share-picker-button,
2094
2096
  .date-time-picker-button
2095
2097
  ) {
@@ -2125,6 +2127,7 @@
2125
2127
  .locale-picker-icon,
2126
2128
  .text-size-picker-icon,
2127
2129
  .motion-picker-icon,
2130
+ .link-picker-icon,
2128
2131
  .share-picker-icon,
2129
2132
  .search-picker-icon
2130
2133
  ) {
@@ -2183,6 +2186,31 @@
2183
2186
  background-color: var(--lily-surface-alt);
2184
2187
  }
2185
2188
 
2189
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2190
+ so its items get the share list's treatment; the current page is
2191
+ marked by aria-current and shown in bold. */
2192
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2193
+ list-style: none;
2194
+ }
2195
+
2196
+ :where(.link-picker-link) {
2197
+ display: block;
2198
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2199
+ color: var(--lily-text);
2200
+ text-decoration: none;
2201
+ border-radius: var(--lily-radius-sm);
2202
+ cursor: pointer;
2203
+ }
2204
+
2205
+ :where(.link-picker-link:hover) {
2206
+ background-color: var(--lily-surface-alt);
2207
+ }
2208
+
2209
+ :where(.link-picker-link[aria-current="page"]) {
2210
+ font-weight: 600;
2211
+ background-color: var(--lily-surface-sunken);
2212
+ }
2213
+
2186
2214
  /* Copy feedback. Never display:none this — that silences the live
2187
2215
  region for screen-reader users. */
2188
2216
  :where(.share-picker-status) {
@@ -2464,6 +2492,7 @@
2464
2492
  .locale-picker-tooltip,
2465
2493
  .text-size-picker-tooltip,
2466
2494
  .motion-picker-tooltip,
2495
+ .link-picker-tooltip,
2467
2496
  .share-picker-tooltip,
2468
2497
  .search-picker-tooltip,
2469
2498
  .date-time-picker-tooltip
@@ -2488,6 +2517,7 @@
2488
2517
  .locale-picker-tooltip,
2489
2518
  .text-size-picker-tooltip,
2490
2519
  .motion-picker-tooltip,
2520
+ .link-picker-tooltip,
2491
2521
  .share-picker-tooltip,
2492
2522
  .search-picker-tooltip,
2493
2523
  .date-time-picker-tooltip
@@ -2504,6 +2534,7 @@
2504
2534
  .locale-picker-tooltip,
2505
2535
  .text-size-picker-tooltip,
2506
2536
  .motion-picker-tooltip,
2537
+ .link-picker-tooltip,
2507
2538
  .share-picker-tooltip,
2508
2539
  .search-picker-tooltip,
2509
2540
  .date-time-picker-tooltip
@@ -2557,6 +2588,7 @@
2557
2588
  .locale-picker-list,
2558
2589
  .text-size-picker-list,
2559
2590
  .motion-picker-list,
2591
+ .link-picker-list,
2560
2592
  .share-picker-list,
2561
2593
  .search-picker-panel
2562
2594
  ) {
@@ -2583,6 +2615,7 @@
2583
2615
  .locale-picker-list,
2584
2616
  .text-size-picker-list,
2585
2617
  .motion-picker-list,
2618
+ .link-picker-list,
2586
2619
  .share-picker-list,
2587
2620
  .search-picker-panel
2588
2621
  )[hidden] {
@@ -2600,12 +2633,14 @@
2600
2633
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
2634
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
2635
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2636
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2603
2637
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
2638
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
2639
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
2640
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
2641
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
2642
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2643
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2609
2644
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
2645
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
2646
  :where(
@@ -2613,6 +2648,7 @@
2613
2648
  .locale-picker-list,
2614
2649
  .text-size-picker-list,
2615
2650
  .motion-picker-list,
2651
+ .link-picker-list,
2616
2652
  .share-picker-list,
2617
2653
  .search-picker-panel
2618
2654
  ) {
package/dist/caramellatte.css CHANGED
@@ -2078,6 +2078,7 @@
2078
2078
  .locale-picker,
2079
2079
  .text-size-picker,
2080
2080
  .search-picker,
2081
+ .link-picker,
2081
2082
  .share-picker,
2082
2083
  .date-time-picker
2083
2084
  ) {
@@ -2090,6 +2091,7 @@
2090
2091
  .locale-picker-button,
2091
2092
  .text-size-picker-button,
2092
2093
  .search-picker-button,
2094
+ .link-picker-button,
2093
2095
  .share-picker-button,
2094
2096
  .date-time-picker-button
2095
2097
  ) {
@@ -2125,6 +2127,7 @@
2125
2127
  .locale-picker-icon,
2126
2128
  .text-size-picker-icon,
2127
2129
  .motion-picker-icon,
2130
+ .link-picker-icon,
2128
2131
  .share-picker-icon,
2129
2132
  .search-picker-icon
2130
2133
  ) {
@@ -2183,6 +2186,31 @@
2183
2186
  background-color: var(--lily-surface-alt);
2184
2187
  }
2185
2188
 
2189
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2190
+ so its items get the share list's treatment; the current page is
2191
+ marked by aria-current and shown in bold. */
2192
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2193
+ list-style: none;
2194
+ }
2195
+
2196
+ :where(.link-picker-link) {
2197
+ display: block;
2198
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2199
+ color: var(--lily-text);
2200
+ text-decoration: none;
2201
+ border-radius: var(--lily-radius-sm);
2202
+ cursor: pointer;
2203
+ }
2204
+
2205
+ :where(.link-picker-link:hover) {
2206
+ background-color: var(--lily-surface-alt);
2207
+ }
2208
+
2209
+ :where(.link-picker-link[aria-current="page"]) {
2210
+ font-weight: 600;
2211
+ background-color: var(--lily-surface-sunken);
2212
+ }
2213
+
2186
2214
  /* Copy feedback. Never display:none this — that silences the live
2187
2215
  region for screen-reader users. */
2188
2216
  :where(.share-picker-status) {
@@ -2464,6 +2492,7 @@
2464
2492
  .locale-picker-tooltip,
2465
2493
  .text-size-picker-tooltip,
2466
2494
  .motion-picker-tooltip,
2495
+ .link-picker-tooltip,
2467
2496
  .share-picker-tooltip,
2468
2497
  .search-picker-tooltip,
2469
2498
  .date-time-picker-tooltip
@@ -2488,6 +2517,7 @@
2488
2517
  .locale-picker-tooltip,
2489
2518
  .text-size-picker-tooltip,
2490
2519
  .motion-picker-tooltip,
2520
+ .link-picker-tooltip,
2491
2521
  .share-picker-tooltip,
2492
2522
  .search-picker-tooltip,
2493
2523
  .date-time-picker-tooltip
@@ -2504,6 +2534,7 @@
2504
2534
  .locale-picker-tooltip,
2505
2535
  .text-size-picker-tooltip,
2506
2536
  .motion-picker-tooltip,
2537
+ .link-picker-tooltip,
2507
2538
  .share-picker-tooltip,
2508
2539
  .search-picker-tooltip,
2509
2540
  .date-time-picker-tooltip
@@ -2557,6 +2588,7 @@
2557
2588
  .locale-picker-list,
2558
2589
  .text-size-picker-list,
2559
2590
  .motion-picker-list,
2591
+ .link-picker-list,
2560
2592
  .share-picker-list,
2561
2593
  .search-picker-panel
2562
2594
  ) {
@@ -2583,6 +2615,7 @@
2583
2615
  .locale-picker-list,
2584
2616
  .text-size-picker-list,
2585
2617
  .motion-picker-list,
2618
+ .link-picker-list,
2586
2619
  .share-picker-list,
2587
2620
  .search-picker-panel
2588
2621
  )[hidden] {
@@ -2600,12 +2633,14 @@
2600
2633
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
2634
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
2635
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2636
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2603
2637
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
2638
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
2639
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
2640
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
2641
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
2642
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2643
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2609
2644
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
2645
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
2646
  :where(
@@ -2613,6 +2648,7 @@
2613
2648
  .locale-picker-list,
2614
2649
  .text-size-picker-list,
2615
2650
  .motion-picker-list,
2651
+ .link-picker-list,
2616
2652
  .share-picker-list,
2617
2653
  .search-picker-panel
2618
2654
  ) {
package/dist/cmyk.css CHANGED
@@ -2078,6 +2078,7 @@
2078
2078
  .locale-picker,
2079
2079
  .text-size-picker,
2080
2080
  .search-picker,
2081
+ .link-picker,
2081
2082
  .share-picker,
2082
2083
  .date-time-picker
2083
2084
  ) {
@@ -2090,6 +2091,7 @@
2090
2091
  .locale-picker-button,
2091
2092
  .text-size-picker-button,
2092
2093
  .search-picker-button,
2094
+ .link-picker-button,
2093
2095
  .share-picker-button,
2094
2096
  .date-time-picker-button
2095
2097
  ) {
@@ -2125,6 +2127,7 @@
2125
2127
  .locale-picker-icon,
2126
2128
  .text-size-picker-icon,
2127
2129
  .motion-picker-icon,
2130
+ .link-picker-icon,
2128
2131
  .share-picker-icon,
2129
2132
  .search-picker-icon
2130
2133
  ) {
@@ -2183,6 +2186,31 @@
2183
2186
  background-color: var(--lily-surface-alt);
2184
2187
  }
2185
2188
 
2189
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2190
+ so its items get the share list's treatment; the current page is
2191
+ marked by aria-current and shown in bold. */
2192
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2193
+ list-style: none;
2194
+ }
2195
+
2196
+ :where(.link-picker-link) {
2197
+ display: block;
2198
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2199
+ color: var(--lily-text);
2200
+ text-decoration: none;
2201
+ border-radius: var(--lily-radius-sm);
2202
+ cursor: pointer;
2203
+ }
2204
+
2205
+ :where(.link-picker-link:hover) {
2206
+ background-color: var(--lily-surface-alt);
2207
+ }
2208
+
2209
+ :where(.link-picker-link[aria-current="page"]) {
2210
+ font-weight: 600;
2211
+ background-color: var(--lily-surface-sunken);
2212
+ }
2213
+
2186
2214
  /* Copy feedback. Never display:none this — that silences the live
2187
2215
  region for screen-reader users. */
2188
2216
  :where(.share-picker-status) {
@@ -2464,6 +2492,7 @@
2464
2492
  .locale-picker-tooltip,
2465
2493
  .text-size-picker-tooltip,
2466
2494
  .motion-picker-tooltip,
2495
+ .link-picker-tooltip,
2467
2496
  .share-picker-tooltip,
2468
2497
  .search-picker-tooltip,
2469
2498
  .date-time-picker-tooltip
@@ -2488,6 +2517,7 @@
2488
2517
  .locale-picker-tooltip,
2489
2518
  .text-size-picker-tooltip,
2490
2519
  .motion-picker-tooltip,
2520
+ .link-picker-tooltip,
2491
2521
  .share-picker-tooltip,
2492
2522
  .search-picker-tooltip,
2493
2523
  .date-time-picker-tooltip
@@ -2504,6 +2534,7 @@
2504
2534
  .locale-picker-tooltip,
2505
2535
  .text-size-picker-tooltip,
2506
2536
  .motion-picker-tooltip,
2537
+ .link-picker-tooltip,
2507
2538
  .share-picker-tooltip,
2508
2539
  .search-picker-tooltip,
2509
2540
  .date-time-picker-tooltip
@@ -2557,6 +2588,7 @@
2557
2588
  .locale-picker-list,
2558
2589
  .text-size-picker-list,
2559
2590
  .motion-picker-list,
2591
+ .link-picker-list,
2560
2592
  .share-picker-list,
2561
2593
  .search-picker-panel
2562
2594
  ) {
@@ -2583,6 +2615,7 @@
2583
2615
  .locale-picker-list,
2584
2616
  .text-size-picker-list,
2585
2617
  .motion-picker-list,
2618
+ .link-picker-list,
2586
2619
  .share-picker-list,
2587
2620
  .search-picker-panel
2588
2621
  )[hidden] {
@@ -2600,12 +2633,14 @@
2600
2633
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
2634
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
2635
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2636
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2603
2637
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
2638
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
2639
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
2640
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
2641
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
2642
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2643
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2609
2644
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
2645
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
2646
  :where(
@@ -2613,6 +2648,7 @@
2613
2648
  .locale-picker-list,
2614
2649
  .text-size-picker-list,
2615
2650
  .motion-picker-list,
2651
+ .link-picker-list,
2616
2652
  .share-picker-list,
2617
2653
  .search-picker-panel
2618
2654
  ) {
package/dist/coffee.css CHANGED
@@ -2078,6 +2078,7 @@
2078
2078
  .locale-picker,
2079
2079
  .text-size-picker,
2080
2080
  .search-picker,
2081
+ .link-picker,
2081
2082
  .share-picker,
2082
2083
  .date-time-picker
2083
2084
  ) {
@@ -2090,6 +2091,7 @@
2090
2091
  .locale-picker-button,
2091
2092
  .text-size-picker-button,
2092
2093
  .search-picker-button,
2094
+ .link-picker-button,
2093
2095
  .share-picker-button,
2094
2096
  .date-time-picker-button
2095
2097
  ) {
@@ -2125,6 +2127,7 @@
2125
2127
  .locale-picker-icon,
2126
2128
  .text-size-picker-icon,
2127
2129
  .motion-picker-icon,
2130
+ .link-picker-icon,
2128
2131
  .share-picker-icon,
2129
2132
  .search-picker-icon
2130
2133
  ) {
@@ -2183,6 +2186,31 @@
2183
2186
  background-color: var(--lily-surface-alt);
2184
2187
  }
2185
2188
 
2189
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2190
+ so its items get the share list's treatment; the current page is
2191
+ marked by aria-current and shown in bold. */
2192
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2193
+ list-style: none;
2194
+ }
2195
+
2196
+ :where(.link-picker-link) {
2197
+ display: block;
2198
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2199
+ color: var(--lily-text);
2200
+ text-decoration: none;
2201
+ border-radius: var(--lily-radius-sm);
2202
+ cursor: pointer;
2203
+ }
2204
+
2205
+ :where(.link-picker-link:hover) {
2206
+ background-color: var(--lily-surface-alt);
2207
+ }
2208
+
2209
+ :where(.link-picker-link[aria-current="page"]) {
2210
+ font-weight: 600;
2211
+ background-color: var(--lily-surface-sunken);
2212
+ }
2213
+
2186
2214
  /* Copy feedback. Never display:none this — that silences the live
2187
2215
  region for screen-reader users. */
2188
2216
  :where(.share-picker-status) {
@@ -2464,6 +2492,7 @@
2464
2492
  .locale-picker-tooltip,
2465
2493
  .text-size-picker-tooltip,
2466
2494
  .motion-picker-tooltip,
2495
+ .link-picker-tooltip,
2467
2496
  .share-picker-tooltip,
2468
2497
  .search-picker-tooltip,
2469
2498
  .date-time-picker-tooltip
@@ -2488,6 +2517,7 @@
2488
2517
  .locale-picker-tooltip,
2489
2518
  .text-size-picker-tooltip,
2490
2519
  .motion-picker-tooltip,
2520
+ .link-picker-tooltip,
2491
2521
  .share-picker-tooltip,
2492
2522
  .search-picker-tooltip,
2493
2523
  .date-time-picker-tooltip
@@ -2504,6 +2534,7 @@
2504
2534
  .locale-picker-tooltip,
2505
2535
  .text-size-picker-tooltip,
2506
2536
  .motion-picker-tooltip,
2537
+ .link-picker-tooltip,
2507
2538
  .share-picker-tooltip,
2508
2539
  .search-picker-tooltip,
2509
2540
  .date-time-picker-tooltip
@@ -2557,6 +2588,7 @@
2557
2588
  .locale-picker-list,
2558
2589
  .text-size-picker-list,
2559
2590
  .motion-picker-list,
2591
+ .link-picker-list,
2560
2592
  .share-picker-list,
2561
2593
  .search-picker-panel
2562
2594
  ) {
@@ -2583,6 +2615,7 @@
2583
2615
  .locale-picker-list,
2584
2616
  .text-size-picker-list,
2585
2617
  .motion-picker-list,
2618
+ .link-picker-list,
2586
2619
  .share-picker-list,
2587
2620
  .search-picker-panel
2588
2621
  )[hidden] {
@@ -2600,12 +2633,14 @@
2600
2633
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
2634
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
2635
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2636
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2603
2637
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
2638
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
2639
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
2640
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
2641
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
2642
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2643
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2609
2644
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
2645
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
2646
  :where(
@@ -2613,6 +2648,7 @@
2613
2648
  .locale-picker-list,
2614
2649
  .text-size-picker-list,
2615
2650
  .motion-picker-list,
2651
+ .link-picker-list,
2616
2652
  .share-picker-list,
2617
2653
  .search-picker-panel
2618
2654
  ) {
package/dist/corporate.css CHANGED
@@ -2078,6 +2078,7 @@
2078
2078
  .locale-picker,
2079
2079
  .text-size-picker,
2080
2080
  .search-picker,
2081
+ .link-picker,
2081
2082
  .share-picker,
2082
2083
  .date-time-picker
2083
2084
  ) {
@@ -2090,6 +2091,7 @@
2090
2091
  .locale-picker-button,
2091
2092
  .text-size-picker-button,
2092
2093
  .search-picker-button,
2094
+ .link-picker-button,
2093
2095
  .share-picker-button,
2094
2096
  .date-time-picker-button
2095
2097
  ) {
@@ -2125,6 +2127,7 @@
2125
2127
  .locale-picker-icon,
2126
2128
  .text-size-picker-icon,
2127
2129
  .motion-picker-icon,
2130
+ .link-picker-icon,
2128
2131
  .share-picker-icon,
2129
2132
  .search-picker-icon
2130
2133
  ) {
@@ -2183,6 +2186,31 @@
2183
2186
  background-color: var(--lily-surface-alt);
2184
2187
  }
2185
2188
 
2189
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2190
+ so its items get the share list's treatment; the current page is
2191
+ marked by aria-current and shown in bold. */
2192
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2193
+ list-style: none;
2194
+ }
2195
+
2196
+ :where(.link-picker-link) {
2197
+ display: block;
2198
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2199
+ color: var(--lily-text);
2200
+ text-decoration: none;
2201
+ border-radius: var(--lily-radius-sm);
2202
+ cursor: pointer;
2203
+ }
2204
+
2205
+ :where(.link-picker-link:hover) {
2206
+ background-color: var(--lily-surface-alt);
2207
+ }
2208
+
2209
+ :where(.link-picker-link[aria-current="page"]) {
2210
+ font-weight: 600;
2211
+ background-color: var(--lily-surface-sunken);
2212
+ }
2213
+
2186
2214
  /* Copy feedback. Never display:none this — that silences the live
2187
2215
  region for screen-reader users. */
2188
2216
  :where(.share-picker-status) {
@@ -2464,6 +2492,7 @@
2464
2492
  .locale-picker-tooltip,
2465
2493
  .text-size-picker-tooltip,
2466
2494
  .motion-picker-tooltip,
2495
+ .link-picker-tooltip,
2467
2496
  .share-picker-tooltip,
2468
2497
  .search-picker-tooltip,
2469
2498
  .date-time-picker-tooltip
@@ -2488,6 +2517,7 @@
2488
2517
  .locale-picker-tooltip,
2489
2518
  .text-size-picker-tooltip,
2490
2519
  .motion-picker-tooltip,
2520
+ .link-picker-tooltip,
2491
2521
  .share-picker-tooltip,
2492
2522
  .search-picker-tooltip,
2493
2523
  .date-time-picker-tooltip
@@ -2504,6 +2534,7 @@
2504
2534
  .locale-picker-tooltip,
2505
2535
  .text-size-picker-tooltip,
2506
2536
  .motion-picker-tooltip,
2537
+ .link-picker-tooltip,
2507
2538
  .share-picker-tooltip,
2508
2539
  .search-picker-tooltip,
2509
2540
  .date-time-picker-tooltip
@@ -2557,6 +2588,7 @@
2557
2588
  .locale-picker-list,
2558
2589
  .text-size-picker-list,
2559
2590
  .motion-picker-list,
2591
+ .link-picker-list,
2560
2592
  .share-picker-list,
2561
2593
  .search-picker-panel
2562
2594
  ) {
@@ -2583,6 +2615,7 @@
2583
2615
  .locale-picker-list,
2584
2616
  .text-size-picker-list,
2585
2617
  .motion-picker-list,
2618
+ .link-picker-list,
2586
2619
  .share-picker-list,
2587
2620
  .search-picker-panel
2588
2621
  )[hidden] {
@@ -2600,12 +2633,14 @@
2600
2633
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
2634
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
2635
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2636
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2603
2637
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
2638
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
2639
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
2640
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
2641
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
2642
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2643
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2609
2644
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
2645
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
2646
  :where(
@@ -2613,6 +2648,7 @@
2613
2648
  .locale-picker-list,
2614
2649
  .text-size-picker-list,
2615
2650
  .motion-picker-list,
2651
+ .link-picker-list,
2616
2652
  .share-picker-list,
2617
2653
  .search-picker-panel
2618
2654
  ) {