@helpwave/hightide 0.8.12 → 0.9.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 (20) hide show
  1. package/dist/index.d.mts +1035 -636
  2. package/dist/index.d.ts +1035 -636
  3. package/dist/index.js +6836 -5046
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +6630 -4850
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/style/globals.css +360 -57
  8. package/dist/style/uncompiled/theme/colors/utilities.css +8 -1
  9. package/dist/style/uncompiled/theme/components/button.css +8 -4
  10. package/dist/style/uncompiled/theme/components/checkbox.css +8 -0
  11. package/dist/style/uncompiled/theme/components/combobox.css +25 -0
  12. package/dist/style/uncompiled/theme/components/general.css +2 -2
  13. package/dist/style/uncompiled/theme/components/icon-button.css +8 -4
  14. package/dist/style/uncompiled/theme/components/index.css +1 -0
  15. package/dist/style/uncompiled/theme/components/input-elements.css +8 -0
  16. package/dist/style/uncompiled/theme/components/pop-up.css +8 -1
  17. package/dist/style/uncompiled/theme/components/select.css +45 -14
  18. package/dist/style/uncompiled/utitlity/coloring.css +27 -0
  19. package/dist/style/uncompiled/utitlity/focus.css +2 -2
  20. package/package.json +13 -9
package/dist/style/globals.css CHANGED
@@ -316,6 +316,17 @@
316
316
  .visible {
317
317
  visibility: visible;
318
318
  }
319
+ .sr-only {
320
+ position: absolute;
321
+ width: 1px;
322
+ height: 1px;
323
+ padding: 0;
324
+ margin: -1px;
325
+ overflow: hidden;
326
+ clip-path: inset(50%);
327
+ white-space: nowrap;
328
+ border-width: 0;
329
+ }
319
330
  .absolute {
320
331
  position: absolute;
321
332
  }
@@ -421,6 +432,9 @@
421
432
  .my-2 {
422
433
  margin-block: calc(var(--spacing) * 2);
423
434
  }
435
+ .mt-1 {
436
+ margin-top: calc(var(--spacing) * 1);
437
+ }
424
438
  .mt-2 {
425
439
  margin-top: calc(var(--spacing) * 2);
426
440
  }
@@ -453,6 +467,11 @@
453
467
  flex-direction: row;
454
468
  column-gap: calc(var(--spacing) * 0);
455
469
  }
470
+ .flex-row-0\.5 {
471
+ display: flex;
472
+ flex-direction: row;
473
+ column-gap: calc(var(--spacing) * 0.5);
474
+ }
456
475
  .flex-row-1 {
457
476
  display: flex;
458
477
  flex-direction: row;
@@ -624,6 +643,9 @@
624
643
  .h-128 {
625
644
  height: calc(var(--spacing) * 128);
626
645
  }
646
+ .h-element-sm {
647
+ height: var(--spacing-element-sm);
648
+ }
627
649
  .h-full {
628
650
  height: 100%;
629
651
  }
@@ -801,6 +823,9 @@
801
823
  .flex-\[5\] {
802
824
  flex: 5;
803
825
  }
826
+ .shrink-0 {
827
+ flex-shrink: 0;
828
+ }
804
829
  .grow {
805
830
  flex-grow: 1;
806
831
  }
@@ -850,10 +875,11 @@
850
875
  --focus-box-shadow: none;
851
876
  --focus-border-color: inherit;
852
877
  --focus-border-color: var(--color-focus);
853
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
878
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
854
879
  @supports (color: color-mix(in lab, red, red)) {
855
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
880
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
856
881
  }
882
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
857
883
  &:not([data-disabled]):not([data-invalid]) {
858
884
  background-color: var(--color-input-background);
859
885
  &:hover {
@@ -1065,9 +1091,22 @@
1065
1091
  border-color: transparent;
1066
1092
  }
1067
1093
  .coloring-solid {
1094
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
1068
1095
  background-color: var(--coloring-solid-color,var(--coloring-color));
1069
1096
  color: var(--coloring-solid-text,var(--coloring-on-color));
1070
1097
  }
1098
+ .coloring-text-hover {
1099
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
1100
+ color: var(--coloring-text,var(--coloring-color));
1101
+ &:hover {
1102
+ @media (hover: hover) {
1103
+ background-color: var(--coloring-text-hover,var(--coloring-text,var(--coloring-color)));
1104
+ @supports (color: color-mix(in lab, red, red)) {
1105
+ background-color: color-mix(in oklab, var(--coloring-text-hover,var(--coloring-text,var(--coloring-color))) 20%, transparent);
1106
+ }
1107
+ }
1108
+ }
1109
+ }
1071
1110
  .bg-blue-400 {
1072
1111
  background-color: var(--color-blue-400);
1073
1112
  }
@@ -1212,6 +1251,9 @@
1212
1251
  .p-2 {
1213
1252
  padding: calc(var(--spacing) * 2);
1214
1253
  }
1254
+ .p-3 {
1255
+ padding: calc(var(--spacing) * 3);
1256
+ }
1215
1257
  .p-4 {
1216
1258
  padding: calc(var(--spacing) * 4);
1217
1259
  }
@@ -1596,6 +1638,7 @@
1596
1638
  --coloring-color: var(--color-negative);
1597
1639
  --coloring-on-color: var(--color-on-negative);
1598
1640
  --coloring-hover: var(--color-negative-hover);
1641
+ --color-focus: var(--color-negative);
1599
1642
  }
1600
1643
  .positive {
1601
1644
  --coloring-color: initial;
@@ -1612,6 +1655,7 @@
1612
1655
  --coloring-color: var(--color-positive);
1613
1656
  --coloring-on-color: var(--color-on-positive);
1614
1657
  --coloring-hover: var(--color-positive-hover);
1658
+ --color-focus: var(--color-positive);
1615
1659
  }
1616
1660
  .primary {
1617
1661
  --coloring-color: initial;
@@ -1628,6 +1672,7 @@
1628
1672
  --coloring-color: var(--color-primary);
1629
1673
  --coloring-on-color: var(--color-on-primary);
1630
1674
  --coloring-hover: var(--color-primary-hover);
1675
+ --color-focus: var(--color-primary);
1631
1676
  }
1632
1677
  .secondary {
1633
1678
  --coloring-color: initial;
@@ -1644,8 +1689,9 @@
1644
1689
  --coloring-color: var(--color-secondary);
1645
1690
  --coloring-on-color: var(--color-on-secondary);
1646
1691
  --coloring-hover: var(--color-secondary-hover);
1692
+ --color-focus: var(--color-secondary);
1647
1693
  }
1648
- .surface {
1694
+ .warning {
1649
1695
  --coloring-color: initial;
1650
1696
  --coloring-on-color: initial;
1651
1697
  --coloring-hover: initial;
@@ -1657,11 +1703,12 @@
1657
1703
  --coloring-tonal-background: initial;
1658
1704
  --coloring-tonal-text: initial;
1659
1705
  --coloring-tonal-hover: initial;
1660
- --coloring-color: var(--color-surface);
1661
- --coloring-on-color: var(--color-on-surface);
1662
- --coloring-hover: var(--color-surface-hover);
1706
+ --coloring-color: var(--color-warning);
1707
+ --coloring-on-color: var(--color-on-warning);
1708
+ --coloring-hover: var(--color-warning-hover);
1709
+ --color-focus: var(--color-warning);
1663
1710
  }
1664
- .warning {
1711
+ .surface {
1665
1712
  --coloring-color: initial;
1666
1713
  --coloring-on-color: initial;
1667
1714
  --coloring-hover: initial;
@@ -1673,9 +1720,9 @@
1673
1720
  --coloring-tonal-background: initial;
1674
1721
  --coloring-tonal-text: initial;
1675
1722
  --coloring-tonal-hover: initial;
1676
- --coloring-color: var(--color-warning);
1677
- --coloring-on-color: var(--color-on-warning);
1678
- --coloring-hover: var(--color-warning-hover);
1723
+ --coloring-color: var(--color-surface);
1724
+ --coloring-on-color: var(--color-on-surface);
1725
+ --coloring-hover: var(--color-surface-hover);
1679
1726
  }
1680
1727
  .description {
1681
1728
  --coloring-color: initial;
@@ -1717,14 +1764,9 @@
1717
1764
  --focus-border-color: var(--color-focus);
1718
1765
  }
1719
1766
  .focus-style-shadow {
1720
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
1767
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
1721
1768
  @supports (color: color-mix(in lab, red, red)) {
1722
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
1723
- }
1724
- }
1725
- .not-data-disabled\:cursor-pointer {
1726
- &:not(*[data-disabled]) {
1727
- cursor: pointer;
1769
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
1728
1770
  }
1729
1771
  }
1730
1772
  .group-focus-within\/slide\:border-primary {
@@ -1834,24 +1876,6 @@
1834
1876
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1835
1877
  }
1836
1878
  }
1837
- .data-disabled\:cursor-not-allowed {
1838
- &[data-disabled] {
1839
- cursor: not-allowed;
1840
- }
1841
- }
1842
- .data-disabled\:text-disabled {
1843
- &[data-disabled] {
1844
- color: var(--color-disabled);
1845
- }
1846
- }
1847
- .data-highlighted\:bg-primary\/20 {
1848
- &[data-highlighted] {
1849
- background-color: color-mix(in srgb, #694BB4 20%, transparent);
1850
- @supports (color: color-mix(in lab, red, red)) {
1851
- background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
1852
- }
1853
- }
1854
- }
1855
1879
  .data-\[display\=full\]\:top-1\/2 {
1856
1880
  &[data-display="full"] {
1857
1881
  top: calc(1/2 * 100%);
@@ -2097,6 +2121,7 @@
2097
2121
  &:not([data-disabled]) {
2098
2122
  cursor: pointer;
2099
2123
  &[data-coloringstyle="solid"] {
2124
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2100
2125
  background-color: var(--coloring-solid-color,var(--coloring-color));
2101
2126
  color: var(--coloring-solid-text,var(--coloring-on-color));
2102
2127
  &:hover {
@@ -2106,6 +2131,7 @@
2106
2131
  }
2107
2132
  }
2108
2133
  &[data-coloringstyle="text"] {
2134
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2109
2135
  color: var(--coloring-text,var(--coloring-color));
2110
2136
  &:hover {
2111
2137
  @media (hover: hover) {
@@ -2117,6 +2143,7 @@
2117
2143
  }
2118
2144
  }
2119
2145
  &[data-coloringstyle="outline"] {
2146
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2120
2147
  border-width: var(--coloring-outline-width, 0.125rem);
2121
2148
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2122
2149
  color: var(--coloring-outline,var(--coloring-color));
@@ -2132,6 +2159,7 @@
2132
2159
  }
2133
2160
  }
2134
2161
  &[data-coloringstyle="tonal"] {
2162
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2135
2163
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
2136
2164
  @supports (color: color-mix(in lab, red, red)) {
2137
2165
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
@@ -2146,6 +2174,31 @@
2146
2174
  }
2147
2175
  }
2148
2176
  }
2177
+ &[data-coloringstyle="tonal-outline"] {
2178
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2179
+ color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
2180
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2181
+ border-width: var(--coloring-outline-width, 0.125rem);
2182
+ border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2183
+ &:hover {
2184
+ @media (hover: hover) {
2185
+ border-color: var(--coloring-border-hover,--coloring-hover);
2186
+ }
2187
+ }
2188
+ &:hover {
2189
+ @media (hover: hover) {
2190
+ background-color: var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))));
2191
+ @supports (color: color-mix(in lab, red, red)) {
2192
+ background-color: color-mix(in oklab, var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)))) 30%, transparent);
2193
+ }
2194
+ }
2195
+ }
2196
+ &:hover {
2197
+ @media (hover: hover) {
2198
+ color: var(--coloring-outline-hover,var(--coloring-hover));
2199
+ }
2200
+ }
2201
+ }
2149
2202
  &[data-color="primary"] {
2150
2203
  --coloring-color: initial;
2151
2204
  --coloring-on-color: initial;
@@ -2161,6 +2214,7 @@
2161
2214
  --coloring-color: var(--color-primary);
2162
2215
  --coloring-on-color: var(--color-on-primary);
2163
2216
  --coloring-hover: var(--color-primary-hover);
2217
+ --color-focus: var(--color-primary);
2164
2218
  }
2165
2219
  &[data-color="secondary"] {
2166
2220
  --coloring-color: initial;
@@ -2177,6 +2231,7 @@
2177
2231
  --coloring-color: var(--color-secondary);
2178
2232
  --coloring-on-color: var(--color-on-secondary);
2179
2233
  --coloring-hover: var(--color-secondary-hover);
2234
+ --color-focus: var(--color-secondary);
2180
2235
  }
2181
2236
  &[data-color="positive"] {
2182
2237
  --coloring-color: initial;
@@ -2193,6 +2248,7 @@
2193
2248
  --coloring-color: var(--color-positive);
2194
2249
  --coloring-on-color: var(--color-on-positive);
2195
2250
  --coloring-hover: var(--color-positive-hover);
2251
+ --color-focus: var(--color-positive);
2196
2252
  }
2197
2253
  &[data-color="warning"] {
2198
2254
  --coloring-color: initial;
@@ -2209,6 +2265,7 @@
2209
2265
  --coloring-color: var(--color-warning);
2210
2266
  --coloring-on-color: var(--color-on-warning);
2211
2267
  --coloring-hover: var(--color-warning-hover);
2268
+ --color-focus: var(--color-warning);
2212
2269
  }
2213
2270
  &[data-color="negative"] {
2214
2271
  --coloring-color: initial;
@@ -2225,6 +2282,7 @@
2225
2282
  --coloring-color: var(--color-negative);
2226
2283
  --coloring-on-color: var(--color-on-negative);
2227
2284
  --coloring-hover: var(--color-negative-hover);
2285
+ --color-focus: var(--color-negative);
2228
2286
  }
2229
2287
  &[data-color="neutral"] {
2230
2288
  --coloring-color: initial;
@@ -2301,24 +2359,35 @@
2301
2359
  &[data-disabled] {
2302
2360
  cursor: not-allowed;
2303
2361
  &[data-coloringstyle="solid"] {
2362
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2304
2363
  background-color: var(--coloring-solid-color,var(--coloring-color));
2305
2364
  color: var(--coloring-solid-text,var(--coloring-on-color));
2306
2365
  }
2307
2366
  &[data-coloringstyle="text"] {
2367
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2308
2368
  color: var(--coloring-text,var(--coloring-color));
2309
2369
  }
2310
2370
  &[data-coloringstyle="outline"] {
2371
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2311
2372
  border-width: var(--coloring-outline-width, 0.125rem);
2312
2373
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2313
2374
  color: var(--coloring-outline,var(--coloring-color));
2314
2375
  }
2315
2376
  &[data-coloringstyle="tonal"] {
2377
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2316
2378
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
2317
2379
  @supports (color: color-mix(in lab, red, red)) {
2318
2380
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2319
2381
  }
2320
2382
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
2321
2383
  }
2384
+ &[data-coloringstyle="tonal-outline"] {
2385
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2386
+ color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
2387
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2388
+ border-width: var(--coloring-outline-width, 0.125rem);
2389
+ border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2390
+ }
2322
2391
  --coloring-color: initial;
2323
2392
  --coloring-on-color: initial;
2324
2393
  --coloring-hover: initial;
@@ -2344,7 +2413,7 @@
2344
2413
  min-width: calc(var(--spacing) * 20);
2345
2414
  font-size: var(--text-xs);
2346
2415
  line-height: var(--tw-leading, var(--text-xs--line-height));
2347
- &[data-coloringstyle="outline"] {
2416
+ &[data-coloringstyle="outline"], &[data-coloringstyle="tonal-outline"] {
2348
2417
  padding: calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width)) calc(var(--spacing-element-padding-direction-xs) - var(--coloring-outline-width));
2349
2418
  }
2350
2419
  }
@@ -2355,7 +2424,7 @@
2355
2424
  --element-border-radius: 0.375rem;
2356
2425
  --element-height: var(--spacing-element-sm);
2357
2426
  min-width: calc(var(--spacing) * 28);
2358
- &[data-coloringstyle="outline"] {
2427
+ &[data-coloringstyle="outline"], &[data-coloringstyle="tonal-outline"] {
2359
2428
  padding: calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width)) calc(var(--spacing-element-padding-direction-sm) - var(--coloring-outline-width));
2360
2429
  }
2361
2430
  }
@@ -2366,7 +2435,7 @@
2366
2435
  --element-border-radius: 0.375rem;
2367
2436
  --element-height: var(--spacing-element-md);
2368
2437
  min-width: calc(var(--spacing) * 36);
2369
- &[data-coloringstyle="outline"] {
2438
+ &[data-coloringstyle="outline"], &[data-coloringstyle="tonal-outline"] {
2370
2439
  padding: calc(var(--spacing-element-padding-md) - var(--coloring-outline-width)) calc(var(--spacing-element-padding-direction-md) - var(--coloring-outline-width));
2371
2440
  }
2372
2441
  }
@@ -2379,7 +2448,7 @@
2379
2448
  min-width: calc(var(--spacing) * 45);
2380
2449
  font-size: var(--text-lg);
2381
2450
  line-height: var(--tw-leading, var(--text-lg--line-height));
2382
- &[data-coloringstyle="outline"] {
2451
+ &[data-coloringstyle="outline"], &[data-coloringstyle="tonal-outline"] {
2383
2452
  padding: calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width)) calc(var(--spacing-element-padding-direction-lg) - var(--coloring-outline-width));
2384
2453
  }
2385
2454
  }
@@ -2391,6 +2460,7 @@
2391
2460
  flex-direction: column;
2392
2461
  row-gap: calc(var(--spacing) * 2);
2393
2462
  border-radius: 0.25rem;
2463
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2394
2464
  background-color: var(--coloring-solid-color,var(--coloring-color));
2395
2465
  color: var(--coloring-solid-text,var(--coloring-on-color));
2396
2466
  padding-inline: calc(var(--spacing) * 2);
@@ -2439,24 +2509,35 @@
2439
2509
  align-items: center;
2440
2510
  justify-content: center;
2441
2511
  &[data-coloringstyle="solid"] {
2512
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2442
2513
  background-color: var(--coloring-solid-color,var(--coloring-color));
2443
2514
  color: var(--coloring-solid-text,var(--coloring-on-color));
2444
2515
  }
2445
2516
  &[data-coloringstyle="text"] {
2517
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2446
2518
  color: var(--coloring-text,var(--coloring-color));
2447
2519
  }
2448
2520
  &[data-coloringstyle="outline"] {
2521
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2449
2522
  border-width: var(--coloring-outline-width, 0.125rem);
2450
2523
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2451
2524
  color: var(--coloring-outline,var(--coloring-color));
2452
2525
  }
2453
2526
  &[data-coloringstyle="tonal"] {
2527
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2454
2528
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
2455
2529
  @supports (color: color-mix(in lab, red, red)) {
2456
2530
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2457
2531
  }
2458
2532
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
2459
2533
  }
2534
+ &[data-coloringstyle="tonal-outline"] {
2535
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2536
+ color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
2537
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2538
+ border-width: var(--coloring-outline-width, 0.125rem);
2539
+ border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2540
+ }
2460
2541
  --tw-font-weight: var(--font-weight-semibold);
2461
2542
  font-weight: var(--font-weight-semibold);
2462
2543
  &[data-color="primary"] {
@@ -2474,6 +2555,7 @@
2474
2555
  --coloring-color: var(--color-primary);
2475
2556
  --coloring-on-color: var(--color-on-primary);
2476
2557
  --coloring-hover: var(--color-primary-hover);
2558
+ --color-focus: var(--color-primary);
2477
2559
  }
2478
2560
  &[data-color="secondary"] {
2479
2561
  --coloring-color: initial;
@@ -2490,6 +2572,7 @@
2490
2572
  --coloring-color: var(--color-secondary);
2491
2573
  --coloring-on-color: var(--color-on-secondary);
2492
2574
  --coloring-hover: var(--color-secondary-hover);
2575
+ --color-focus: var(--color-secondary);
2493
2576
  }
2494
2577
  &[data-color="positive"] {
2495
2578
  --coloring-color: initial;
@@ -2506,6 +2589,7 @@
2506
2589
  --coloring-color: var(--color-positive);
2507
2590
  --coloring-on-color: var(--color-on-positive);
2508
2591
  --coloring-hover: var(--color-positive-hover);
2592
+ --color-focus: var(--color-positive);
2509
2593
  }
2510
2594
  &[data-color="warning"] {
2511
2595
  --coloring-color: initial;
@@ -2522,6 +2606,7 @@
2522
2606
  --coloring-color: var(--color-warning);
2523
2607
  --coloring-on-color: var(--color-on-warning);
2524
2608
  --coloring-hover: var(--color-warning-hover);
2609
+ --color-focus: var(--color-warning);
2525
2610
  }
2526
2611
  &[data-color="negative"] {
2527
2612
  --coloring-color: initial;
@@ -2538,6 +2623,7 @@
2538
2623
  --coloring-color: var(--color-negative);
2539
2624
  --coloring-on-color: var(--color-on-negative);
2540
2625
  --coloring-hover: var(--color-negative-hover);
2626
+ --color-focus: var(--color-negative);
2541
2627
  }
2542
2628
  &[data-color="neutral"] {
2543
2629
  --coloring-color: initial;
@@ -2659,10 +2745,11 @@
2659
2745
  --focus-box-shadow: none;
2660
2746
  --focus-border-color: inherit;
2661
2747
  --focus-border-color: var(--color-focus);
2662
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
2748
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
2663
2749
  @supports (color: color-mix(in lab, red, red)) {
2664
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
2750
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
2665
2751
  }
2752
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2666
2753
  &:not([data-disabled]):not([data-invalid]) {
2667
2754
  background-color: var(--color-input-background);
2668
2755
  &:hover {
@@ -2980,6 +3067,7 @@
2980
3067
  align-items: center;
2981
3068
  justify-content: center;
2982
3069
  border-radius: calc(infinity * 1px);
3070
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
2983
3071
  background-color: var(--coloring-solid-color,var(--coloring-color));
2984
3072
  color: var(--coloring-solid-text,var(--coloring-on-color));
2985
3073
  --coloring-color: initial;
@@ -2996,6 +3084,7 @@
2996
3084
  --coloring-color: var(--color-primary);
2997
3085
  --coloring-on-color: var(--color-on-primary);
2998
3086
  --coloring-hover: var(--color-primary-hover);
3087
+ --color-focus: var(--color-primary);
2999
3088
  &[data-group] {
3000
3089
  position: absolute;
3001
3090
  box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
@@ -3118,24 +3207,35 @@
3118
3207
  align-items: center;
3119
3208
  justify-content: center;
3120
3209
  &[data-coloringstyle="solid"] {
3210
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3121
3211
  background-color: var(--coloring-solid-color,var(--coloring-color));
3122
3212
  color: var(--coloring-solid-text,var(--coloring-on-color));
3123
3213
  }
3124
3214
  &[data-coloringstyle="text"] {
3215
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3125
3216
  color: var(--coloring-text,var(--coloring-color));
3126
3217
  }
3127
3218
  &[data-coloringstyle="outline"] {
3219
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3128
3220
  border-width: var(--coloring-outline-width, 0.125rem);
3129
3221
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
3130
3222
  color: var(--coloring-outline,var(--coloring-color));
3131
3223
  }
3132
3224
  &[data-coloringstyle="tonal"] {
3225
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3133
3226
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
3134
3227
  @supports (color: color-mix(in lab, red, red)) {
3135
3228
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
3136
3229
  }
3137
3230
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
3138
3231
  }
3232
+ &[data-coloringstyle="tonal-outline"] {
3233
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
3234
+ color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
3235
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3236
+ border-width: var(--coloring-outline-width, 0.125rem);
3237
+ border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
3238
+ }
3139
3239
  --tw-font-weight: var(--font-weight-semibold);
3140
3240
  font-weight: var(--font-weight-semibold);
3141
3241
  &[data-color="primary"] {
@@ -3153,6 +3253,7 @@
3153
3253
  --coloring-color: var(--color-primary);
3154
3254
  --coloring-on-color: var(--color-on-primary);
3155
3255
  --coloring-hover: var(--color-primary-hover);
3256
+ --color-focus: var(--color-primary);
3156
3257
  }
3157
3258
  &[data-color="secondary"] {
3158
3259
  --coloring-color: initial;
@@ -3169,6 +3270,7 @@
3169
3270
  --coloring-color: var(--color-secondary);
3170
3271
  --coloring-on-color: var(--color-on-secondary);
3171
3272
  --coloring-hover: var(--color-secondary-hover);
3273
+ --color-focus: var(--color-secondary);
3172
3274
  }
3173
3275
  &[data-color="positive"] {
3174
3276
  --coloring-color: initial;
@@ -3185,6 +3287,7 @@
3185
3287
  --coloring-color: var(--color-positive);
3186
3288
  --coloring-on-color: var(--color-on-positive);
3187
3289
  --coloring-hover: var(--color-positive-hover);
3290
+ --color-focus: var(--color-positive);
3188
3291
  }
3189
3292
  &[data-color="warning"] {
3190
3293
  --coloring-color: initial;
@@ -3201,6 +3304,7 @@
3201
3304
  --coloring-color: var(--color-warning);
3202
3305
  --coloring-on-color: var(--color-on-warning);
3203
3306
  --coloring-hover: var(--color-warning-hover);
3307
+ --color-focus: var(--color-warning);
3204
3308
  }
3205
3309
  &[data-color="negative"] {
3206
3310
  --coloring-color: initial;
@@ -3217,6 +3321,7 @@
3217
3321
  --coloring-color: var(--color-negative);
3218
3322
  --coloring-on-color: var(--color-on-negative);
3219
3323
  --coloring-hover: var(--color-negative-hover);
3324
+ --color-focus: var(--color-negative);
3220
3325
  }
3221
3326
  &[data-color="neutral"] {
3222
3327
  --coloring-color: initial;
@@ -3348,6 +3453,7 @@
3348
3453
  border-radius: calc(var(--spacing) * 1.5);
3349
3454
  padding-inline: calc(var(--spacing) * 1.5);
3350
3455
  padding-block: calc(var(--spacing) * 1);
3456
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3351
3457
  color: var(--coloring-text,var(--coloring-color));
3352
3458
  &:hover {
3353
3459
  @media (hover: hover) {
@@ -3412,6 +3518,7 @@
3412
3518
  justify-content: center;
3413
3519
  border-bottom-style: var(--tw-border-style);
3414
3520
  border-bottom-width: 4px;
3521
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3415
3522
  color: var(--coloring-text,var(--coloring-color));
3416
3523
  &:hover {
3417
3524
  @media (hover: hover) {
@@ -3454,6 +3561,7 @@
3454
3561
  --coloring-tonal-hover: var(--color-neutral-tonal-hover);
3455
3562
  &[data-disabled] {
3456
3563
  cursor: not-allowed;
3564
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3457
3565
  color: var(--coloring-text,var(--coloring-color));
3458
3566
  --coloring-color: initial;
3459
3567
  --coloring-on-color: initial;
@@ -3502,6 +3610,7 @@
3502
3610
  flex-direction: column;
3503
3611
  row-gap: calc(var(--spacing) * 0);
3504
3612
  border-radius: var(--radius-lg);
3613
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3505
3614
  background-color: var(--coloring-solid-color,var(--coloring-color));
3506
3615
  color: var(--coloring-solid-text,var(--coloring-on-color));
3507
3616
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -3537,6 +3646,7 @@
3537
3646
  user-select: none;
3538
3647
  &:not([data-disabled]) {
3539
3648
  cursor: pointer;
3649
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3540
3650
  background-color: var(--coloring-solid-color,var(--coloring-color));
3541
3651
  color: var(--coloring-solid-text,var(--coloring-on-color));
3542
3652
  &:hover {
@@ -3561,6 +3671,7 @@
3561
3671
  }
3562
3672
  &[data-disabled] {
3563
3673
  cursor: not-allowed;
3674
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
3564
3675
  background-color: var(--coloring-solid-color,var(--coloring-color));
3565
3676
  color: var(--coloring-solid-text,var(--coloring-on-color));
3566
3677
  --coloring-color: initial;
@@ -3654,6 +3765,7 @@
3654
3765
  border-radius: 0.25rem;
3655
3766
  border-style: var(--tw-border-style);
3656
3767
  border-width: 2px;
3768
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color 100ms ease-in-out, background-color 100ms ease-in-out;
3657
3769
  &:not([data-disabled]) {
3658
3770
  &:hover {
3659
3771
  @media (hover: hover) {
@@ -4162,10 +4274,11 @@
4162
4274
  --focus-box-shadow: none;
4163
4275
  --focus-border-color: inherit;
4164
4276
  --focus-border-color: var(--color-focus);
4165
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
4277
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
4166
4278
  @supports (color: color-mix(in lab, red, red)) {
4167
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
4279
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
4168
4280
  }
4281
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4169
4282
  &:not([data-disabled]):not([data-invalid]) {
4170
4283
  background-color: var(--color-input-background);
4171
4284
  &:hover {
@@ -4296,6 +4409,7 @@
4296
4409
  }
4297
4410
  }
4298
4411
  &[data-selected] {
4412
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4299
4413
  background-color: var(--coloring-solid-color,var(--coloring-color));
4300
4414
  color: var(--coloring-solid-text,var(--coloring-on-color));
4301
4415
  &:hover {
@@ -4317,8 +4431,10 @@
4317
4431
  --coloring-color: var(--color-primary);
4318
4432
  --coloring-on-color: var(--color-on-primary);
4319
4433
  --coloring-hover: var(--color-primary-hover);
4434
+ --color-focus: var(--color-primary);
4320
4435
  }
4321
4436
  &:not([data-selected]) {
4437
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4322
4438
  color: var(--coloring-text,var(--coloring-color));
4323
4439
  &:hover {
4324
4440
  @media (hover: hover) {
@@ -4377,10 +4493,12 @@
4377
4493
  }
4378
4494
  }
4379
4495
  &[data-selected] {
4496
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4380
4497
  background-color: var(--coloring-solid-color,var(--coloring-color));
4381
4498
  color: var(--coloring-solid-text,var(--coloring-on-color));
4382
4499
  }
4383
4500
  &:not([data-selected]) {
4501
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4384
4502
  color: var(--coloring-text,var(--coloring-color));
4385
4503
  }
4386
4504
  }
@@ -4549,10 +4667,15 @@
4549
4667
  border-style: var(--tw-border-style);
4550
4668
  border-width: 2px;
4551
4669
  border-color: var(--color-outline-variant);
4670
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4552
4671
  background-color: var(--coloring-solid-color,var(--coloring-color));
4553
4672
  color: var(--coloring-solid-text,var(--coloring-on-color));
4554
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4673
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4555
4674
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4675
+ --tw-shadow-color: color-mix(in srgb, #000000 15%, transparent);
4676
+ @supports (color: color-mix(in lab, red, red)) {
4677
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 15%, transparent) var(--tw-shadow-alpha), transparent);
4678
+ }
4556
4679
  --coloring-color: initial;
4557
4680
  --coloring-on-color: initial;
4558
4681
  --coloring-hover: initial;
@@ -4570,6 +4693,7 @@
4570
4693
  &:focus-within {
4571
4694
  border-color: var(--color-primary);
4572
4695
  }
4696
+ transition: top var(--anchored-position-polling-interval, 100ms) linear, left var(--anchored-position-polling-interval, 100ms) linear, right var(--anchored-position-polling-interval, 100ms) linear, bottom var(--anchored-position-polling-interval, 100ms) linear, border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out;
4573
4697
  &[data-positioned] {
4574
4698
  animation: pop-in var(--animation-duration-in, 250ms) ease-in-out forwards;
4575
4699
  }
@@ -4578,7 +4702,7 @@
4578
4702
  }
4579
4703
  }
4580
4704
  @layer components {
4581
- [data-name="select-button"] {
4705
+ [data-name="select-button"], [data-name="multi-select-button"] {
4582
4706
  display: flex;
4583
4707
  flex-direction: row;
4584
4708
  column-gap: calc(var(--spacing) * 2);
@@ -4590,10 +4714,11 @@
4590
4714
  --focus-box-shadow: none;
4591
4715
  --focus-border-color: inherit;
4592
4716
  --focus-border-color: var(--color-focus);
4593
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
4717
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
4594
4718
  @supports (color: color-mix(in lab, red, red)) {
4595
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
4719
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
4596
4720
  }
4721
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4597
4722
  &:not([data-disabled]):not([data-invalid]) {
4598
4723
  background-color: var(--color-input-background);
4599
4724
  &:hover {
@@ -4649,7 +4774,7 @@
4649
4774
  }
4650
4775
  }
4651
4776
  }
4652
- [data-name="select-chip-display"] {
4777
+ [data-name="multi-select-chip-display-button"] {
4653
4778
  display: flex;
4654
4779
  border-style: var(--tw-border-style);
4655
4780
  border-width: 2px;
@@ -4659,10 +4784,11 @@
4659
4784
  --focus-box-shadow: none;
4660
4785
  --focus-border-color: inherit;
4661
4786
  --focus-border-color: var(--color-focus);
4662
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
4787
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
4663
4788
  @supports (color: color-mix(in lab, red, red)) {
4664
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
4789
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
4665
4790
  }
4791
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4666
4792
  &:not([data-disabled]):not([data-invalid]) {
4667
4793
  background-color: var(--color-input-background);
4668
4794
  &:hover {
@@ -4719,13 +4845,14 @@
4719
4845
  }
4720
4846
  }
4721
4847
  }
4722
- [data-name="select-chip-display-chip"] {
4848
+ [data-name="multi-select-chip-display-chip"] {
4723
4849
  display: flex;
4724
4850
  flex-direction: row;
4725
4851
  column-gap: calc(var(--spacing) * 1);
4726
4852
  height: calc(var(--spacing) * 9);
4727
4853
  align-items: center;
4728
4854
  border-radius: var(--radius-md);
4855
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4729
4856
  background-color: var(--coloring-solid-color,var(--coloring-color));
4730
4857
  color: var(--coloring-solid-text,var(--coloring-on-color));
4731
4858
  padding-right: calc(var(--spacing) * 1);
@@ -4753,6 +4880,135 @@
4753
4880
  --coloring-tonal-background: var(--color-neutral-tonal-background);
4754
4881
  --coloring-tonal-hover: var(--color-neutral-tonal-hover);
4755
4882
  }
4883
+ [data-name="select-list"], [data-name="multi-select-list"] {
4884
+ display: flex;
4885
+ flex-direction: column;
4886
+ row-gap: calc(var(--spacing) * 1);
4887
+ overflow-y: auto;
4888
+ }
4889
+ [data-name="select-list-option"], [data-name="multi-select-list-option"] {
4890
+ display: flex;
4891
+ flex-direction: row;
4892
+ column-gap: calc(var(--spacing) * 1);
4893
+ align-items: center;
4894
+ border-radius: var(--radius-md);
4895
+ padding-inline: calc(var(--spacing) * 2);
4896
+ padding-block: calc(var(--spacing) * 1);
4897
+ &[data-disabled] {
4898
+ cursor: not-allowed;
4899
+ color: var(--color-disabled);
4900
+ }
4901
+ &:not([data-disabled]) {
4902
+ cursor: pointer;
4903
+ &[data-highlighted] {
4904
+ background-color: color-mix(in srgb, #694BB4 20%, transparent);
4905
+ @supports (color: color-mix(in lab, red, red)) {
4906
+ background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
4907
+ }
4908
+ }
4909
+ }
4910
+ }
4911
+ [data-name="select-list-status"], [data-name="multi-select-list-status"] {
4912
+ border-radius: var(--radius-md);
4913
+ padding-inline: calc(var(--spacing) * 2);
4914
+ padding-block: calc(var(--spacing) * 1);
4915
+ color: var(--color-description);
4916
+ }
4917
+ }
4918
+ @layer components {
4919
+ [data-name="combobox-root"] {
4920
+ display: flex;
4921
+ flex-direction: column;
4922
+ row-gap: calc(var(--spacing) * 2);
4923
+ }
4924
+ [data-name="combobox-input"] {
4925
+ border-style: var(--tw-border-style);
4926
+ border-width: 2px;
4927
+ --focus-outline: none;
4928
+ --focus-outline-offset: 0;
4929
+ --focus-outline-transition: none;
4930
+ --focus-box-shadow: none;
4931
+ --focus-border-color: inherit;
4932
+ --focus-border-color: var(--color-focus);
4933
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
4934
+ @supports (color: color-mix(in lab, red, red)) {
4935
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
4936
+ }
4937
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4938
+ &:not([data-disabled]):not([data-invalid]) {
4939
+ background-color: var(--color-input-background);
4940
+ &:hover {
4941
+ @media (hover: hover) {
4942
+ border-color: var(--color-primary-hover);
4943
+ }
4944
+ }
4945
+ &:not([data-value]) {
4946
+ color: var(--color-placeholder);
4947
+ }
4948
+ &[data-value] {
4949
+ color: var(--color-input-text);
4950
+ }
4951
+ }
4952
+ &:not([data-disabled])[data-invalid] {
4953
+ border-color: var(--color-negative);
4954
+ background-color: color-mix(in srgb, #DC576D 20%, transparent);
4955
+ @supports (color: color-mix(in lab, red, red)) {
4956
+ background-color: color-mix(in oklab, var(--color-negative) 20%, transparent);
4957
+ }
4958
+ &:hover {
4959
+ @media (hover: hover) {
4960
+ border-color: var(--color-negative-hover);
4961
+ }
4962
+ }
4963
+ --color-focus: var(--color-negative);
4964
+ &[data-value] {
4965
+ color: var(--color-negative);
4966
+ }
4967
+ &:not([data-value]) {
4968
+ color: var(--color-placeholder);
4969
+ }
4970
+ }
4971
+ &[data-disabled] {
4972
+ cursor: not-allowed;
4973
+ border-color: var(--color-disabled);
4974
+ background-color: var(--color-disabled);
4975
+ color: var(--color-on-disabled);
4976
+ &::placeholder {
4977
+ color: transparent;
4978
+ }
4979
+ }
4980
+ border-radius: var(--radius-md);
4981
+ }
4982
+ [data-name="combobox-list"] {
4983
+ display: flex;
4984
+ flex-direction: column;
4985
+ row-gap: calc(var(--spacing) * 1);
4986
+ overflow-y: auto;
4987
+ }
4988
+ [data-name="combobox-option"] {
4989
+ display: flex;
4990
+ flex-direction: row;
4991
+ column-gap: calc(var(--spacing) * 1);
4992
+ cursor: pointer;
4993
+ align-items: center;
4994
+ border-radius: var(--radius-md);
4995
+ padding-inline: calc(var(--spacing) * 2);
4996
+ padding-block: calc(var(--spacing) * 1);
4997
+ &[data-highlighted] {
4998
+ background-color: color-mix(in srgb, #694BB4 20%, transparent);
4999
+ @supports (color: color-mix(in lab, red, red)) {
5000
+ background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
5001
+ }
5002
+ }
5003
+ }
5004
+ [data-name="combobox-list-status"] {
5005
+ border-radius: var(--radius-md);
5006
+ padding-inline: calc(var(--spacing) * 2);
5007
+ padding-block: calc(var(--spacing) * 1);
5008
+ font-size: var(--text-sm);
5009
+ line-height: var(--tw-leading, var(--text-sm--line-height));
5010
+ color: var(--color-description);
5011
+ }
4756
5012
  }
4757
5013
  @layer components {
4758
5014
  * {
@@ -4789,6 +5045,7 @@
4789
5045
  box-shadow: var(--focus-box-shadow);
4790
5046
  border-color: var(--focus-border-color);
4791
5047
  }
5048
+ outline-color: var(--color-focus);
4792
5049
  --focus-outline: 2px solid var(--color-focus);
4793
5050
  --focus-outline-offset: calc(var(--spacing) * 0.25);
4794
5051
  --focus-outline-transition: outline-offset var(--animation-duration-in, 250ms);
@@ -4808,6 +5065,7 @@
4808
5065
  &:not([data-disabled]) {
4809
5066
  cursor: pointer;
4810
5067
  &[data-coloringstyle="solid"] {
5068
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4811
5069
  background-color: var(--coloring-solid-color,var(--coloring-color));
4812
5070
  color: var(--coloring-solid-text,var(--coloring-on-color));
4813
5071
  &:hover {
@@ -4817,6 +5075,7 @@
4817
5075
  }
4818
5076
  }
4819
5077
  &[data-coloringstyle="text"] {
5078
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4820
5079
  color: var(--coloring-text,var(--coloring-color));
4821
5080
  &:hover {
4822
5081
  @media (hover: hover) {
@@ -4828,6 +5087,7 @@
4828
5087
  }
4829
5088
  }
4830
5089
  &[data-coloringstyle="outline"] {
5090
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4831
5091
  border-width: var(--coloring-outline-width, 0.125rem);
4832
5092
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
4833
5093
  color: var(--coloring-outline,var(--coloring-color));
@@ -4843,6 +5103,7 @@
4843
5103
  }
4844
5104
  }
4845
5105
  &[data-coloringstyle="tonal"] {
5106
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
4846
5107
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
4847
5108
  @supports (color: color-mix(in lab, red, red)) {
4848
5109
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
@@ -4857,6 +5118,31 @@
4857
5118
  }
4858
5119
  }
4859
5120
  }
5121
+ &[data-coloringstyle="tonal-outline"] {
5122
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
5123
+ color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
5124
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
5125
+ border-width: var(--coloring-outline-width, 0.125rem);
5126
+ border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
5127
+ &:hover {
5128
+ @media (hover: hover) {
5129
+ border-color: var(--coloring-border-hover,--coloring-hover);
5130
+ }
5131
+ }
5132
+ &:hover {
5133
+ @media (hover: hover) {
5134
+ background-color: var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))));
5135
+ @supports (color: color-mix(in lab, red, red)) {
5136
+ background-color: color-mix(in oklab, var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)))) 30%, transparent);
5137
+ }
5138
+ }
5139
+ }
5140
+ &:hover {
5141
+ @media (hover: hover) {
5142
+ color: var(--coloring-outline-hover,var(--coloring-hover));
5143
+ }
5144
+ }
5145
+ }
4860
5146
  &[data-color="primary"] {
4861
5147
  --coloring-color: initial;
4862
5148
  --coloring-on-color: initial;
@@ -4872,6 +5158,7 @@
4872
5158
  --coloring-color: var(--color-primary);
4873
5159
  --coloring-on-color: var(--color-on-primary);
4874
5160
  --coloring-hover: var(--color-primary-hover);
5161
+ --color-focus: var(--color-primary);
4875
5162
  }
4876
5163
  &[data-color="secondary"] {
4877
5164
  --coloring-color: initial;
@@ -4888,6 +5175,7 @@
4888
5175
  --coloring-color: var(--color-secondary);
4889
5176
  --coloring-on-color: var(--color-on-secondary);
4890
5177
  --coloring-hover: var(--color-secondary-hover);
5178
+ --color-focus: var(--color-secondary);
4891
5179
  }
4892
5180
  &[data-color="positive"] {
4893
5181
  --coloring-color: initial;
@@ -4904,6 +5192,7 @@
4904
5192
  --coloring-color: var(--color-positive);
4905
5193
  --coloring-on-color: var(--color-on-positive);
4906
5194
  --coloring-hover: var(--color-positive-hover);
5195
+ --color-focus: var(--color-positive);
4907
5196
  }
4908
5197
  &[data-color="warning"] {
4909
5198
  --coloring-color: initial;
@@ -4920,6 +5209,7 @@
4920
5209
  --coloring-color: var(--color-warning);
4921
5210
  --coloring-on-color: var(--color-on-warning);
4922
5211
  --coloring-hover: var(--color-warning-hover);
5212
+ --color-focus: var(--color-warning);
4923
5213
  }
4924
5214
  &[data-color="negative"] {
4925
5215
  --coloring-color: initial;
@@ -4936,6 +5226,7 @@
4936
5226
  --coloring-color: var(--color-negative);
4937
5227
  --coloring-on-color: var(--color-on-negative);
4938
5228
  --coloring-hover: var(--color-negative-hover);
5229
+ --color-focus: var(--color-negative);
4939
5230
  }
4940
5231
  &[data-color="neutral"] {
4941
5232
  --coloring-color: initial;
@@ -5012,24 +5303,35 @@
5012
5303
  &[data-disabled] {
5013
5304
  cursor: not-allowed;
5014
5305
  &[data-coloringstyle="solid"] {
5306
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
5015
5307
  background-color: var(--coloring-solid-color,var(--coloring-color));
5016
5308
  color: var(--coloring-solid-text,var(--coloring-on-color));
5017
5309
  }
5018
5310
  &[data-coloringstyle="text"] {
5311
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
5019
5312
  color: var(--coloring-text,var(--coloring-color));
5020
5313
  }
5021
5314
  &[data-coloringstyle="outline"] {
5315
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
5022
5316
  border-width: var(--coloring-outline-width, 0.125rem);
5023
5317
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
5024
5318
  color: var(--coloring-outline,var(--coloring-color));
5025
5319
  }
5026
5320
  &[data-coloringstyle="tonal"] {
5321
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
5027
5322
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
5028
5323
  @supports (color: color-mix(in lab, red, red)) {
5029
5324
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
5030
5325
  }
5031
5326
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
5032
5327
  }
5328
+ &[data-coloringstyle="tonal-outline"] {
5329
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
5330
+ color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
5331
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
5332
+ border-width: var(--coloring-outline-width, 0.125rem);
5333
+ border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
5334
+ }
5033
5335
  --coloring-color: initial;
5034
5336
  --coloring-on-color: initial;
5035
5337
  --coloring-hover: initial;
@@ -5051,7 +5353,7 @@
5051
5353
  --element-padding-direction: var(--spacing-element-padding-direction-xs);
5052
5354
  --element-border-radius: 0.25rem;
5053
5355
  --element-height: var(--spacing-element-xs);
5054
- &[data-coloringstyle="outline"] {
5356
+ &[data-coloringstyle="outline"], &[data-coloringstyle="tonal-outline"] {
5055
5357
  padding: calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width));
5056
5358
  }
5057
5359
  }
@@ -5060,7 +5362,7 @@
5060
5362
  --element-padding-direction: var(--spacing-element-padding-direction-sm);
5061
5363
  --element-border-radius: 0.375rem;
5062
5364
  --element-height: var(--spacing-element-sm);
5063
- &[data-coloringstyle="outline"] {
5365
+ &[data-coloringstyle="outline"], &[data-coloringstyle="tonal-outline"] {
5064
5366
  padding: calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width));
5065
5367
  }
5066
5368
  }
@@ -5069,7 +5371,7 @@
5069
5371
  --element-padding-direction: var(--spacing-element-padding-direction-md);
5070
5372
  --element-border-radius: 0.375rem;
5071
5373
  --element-height: var(--spacing-element-md);
5072
- &[data-coloringstyle="outline"] {
5374
+ &[data-coloringstyle="outline"], &[data-coloringstyle="tonal-outline"] {
5073
5375
  padding: calc(var(--spacing-element-padding-md) - var(--coloring-outline-width));
5074
5376
  }
5075
5377
  }
@@ -5078,7 +5380,7 @@
5078
5380
  --element-padding-direction: var(--spacing-element-padding-direction-lg);
5079
5381
  --element-border-radius: 0.5rem;
5080
5382
  --element-height: var(--spacing-element-lg);
5081
- &[data-coloringstyle="outline"] {
5383
+ &[data-coloringstyle="outline"], &[data-coloringstyle="tonal-outline"] {
5082
5384
  padding: calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width));
5083
5385
  }
5084
5386
  }
@@ -5099,10 +5401,11 @@
5099
5401
  --focus-box-shadow: none;
5100
5402
  --focus-border-color: inherit;
5101
5403
  --focus-border-color: var(--color-focus);
5102
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
5404
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
5103
5405
  @supports (color: color-mix(in lab, red, red)) {
5104
- --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
5406
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
5105
5407
  }
5408
+ transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
5106
5409
  &:not([data-disabled]):not([data-invalid]) {
5107
5410
  background-color: var(--color-input-background);
5108
5411
  &:hover {