@helpwave/hightide 0.12.5 → 0.12.7

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 (23) hide show
  1. package/dist/index.d.mts +64 -34
  2. package/dist/index.d.ts +64 -34
  3. package/dist/index.js +336 -258
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +445 -368
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/style/globals.css +190 -121
  8. package/dist/style/uncompiled/theme/colors/component.css +7 -0
  9. package/dist/style/uncompiled/theme/colors/semantic.css +4 -4
  10. package/dist/style/uncompiled/theme/components/app-page.css +2 -2
  11. package/dist/style/uncompiled/theme/components/avatar.css +12 -3
  12. package/dist/style/uncompiled/theme/components/button.css +1 -0
  13. package/dist/style/uncompiled/theme/components/card.css +16 -5
  14. package/dist/style/uncompiled/theme/components/checkbox.css +1 -7
  15. package/dist/style/uncompiled/theme/components/date-time-input.css +4 -0
  16. package/dist/style/uncompiled/theme/components/general.css +1 -0
  17. package/dist/style/uncompiled/theme/components/icon-button.css +1 -0
  18. package/dist/style/uncompiled/theme/components/switch.css +5 -1
  19. package/dist/style/uncompiled/theme/components/table.css +5 -1
  20. package/dist/style/uncompiled/theme/components/vertical-navigation.css +3 -2
  21. package/dist/style/uncompiled/utitlity/coloring.css +4 -8
  22. package/dist/style/uncompiled/utitlity/focus.css +14 -6
  23. package/package.json +1 -1
package/dist/style/globals.css CHANGED
@@ -30,7 +30,6 @@
30
30
  --color-purple-400: #8470C5;
31
31
  --color-purple-500: #694BB4;
32
32
  --color-purple-600: #56389B;
33
- --color-gray-50: #F2F2F2;
34
33
  --color-gray-100: #E6E6E6;
35
34
  --color-gray-200: #CCCCCC;
36
35
  --color-gray-300: #B3B3B3;
@@ -80,6 +79,7 @@
80
79
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
81
80
  --default-font-family: var(--font-sans);
82
81
  --default-mono-font-family: var(--font-mono);
82
+ --color-gray-25: #F8F8F8;
83
83
  --color-gray-75: #EEEEEE;
84
84
  --color-gray-150: #D8D8D8;
85
85
  --color-gray-750: #3F3F3F;
@@ -97,9 +97,9 @@
97
97
  --color-negative-hover: var(--color-red-600);
98
98
  --color-disabled: var(--color-gray-300);
99
99
  --color-on-disabled: var(--color-gray-500);
100
- --color-surface: var(--color-gray-50);
100
+ --color-surface: var(--color-gray-25);
101
101
  --color-on-surface: var(--color-text-primary);
102
- --color-surface-hover: var(--color-gray-100);
102
+ --color-surface-hover: var(--color-white);
103
103
  --color-surface-variant: var(--color-white);
104
104
  --color-surface-warning: var(--color-orange-100);
105
105
  --color-text-primary: var(--color-gray-900);
@@ -151,6 +151,8 @@
151
151
  --color-stepperbar-dot-active: var(--color-primary);
152
152
  --color-stepperbar-dot-normal: var(--color-purple-100);
153
153
  --color-stepperbar-dot-disabled: var(--color-description);
154
+ --color-switch-thumb-inactive: var(--color-on-surface);
155
+ --color-switch-thumb-active: var(--color-white);
154
156
  --color-table-background: var(--color-surface);
155
157
  --color-table-text: var(--color-on-surface);
156
158
  --color-table-header-background: var(--color-surface-variant);
@@ -930,14 +932,19 @@
930
932
  border-width: 2px;
931
933
  --focus-outline: none;
932
934
  --focus-outline-offset: 0;
933
- --focus-outline-transition: none;
934
935
  --focus-box-shadow: none;
935
936
  --focus-border-color: inherit;
936
- --focus-border-color: var(--color-focus);
937
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
937
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 35%, transparent);
938
938
  @supports (color: color-mix(in lab, red, red)) {
939
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
939
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 35%, transparent);
940
+ }
941
+ &:where([data-theme=dark], [data-theme=dark] *) {
942
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 60%, transparent);
943
+ @supports (color: color-mix(in lab, red, red)) {
944
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 60%, transparent);
945
+ }
940
946
  }
947
+ --focus-border-color: var(--color-focus);
941
948
  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;
942
949
  &:not([data-disabled]):not([data-invalid]) {
943
950
  background-color: var(--color-input-background);
@@ -1133,7 +1140,6 @@
1133
1140
  border-style: dashed;
1134
1141
  }
1135
1142
  .focusable {
1136
- transition: var(--focus-outline-transition);
1137
1143
  &:focus-visible {
1138
1144
  outline: var(--focus-outline);
1139
1145
  outline-offset: var(--focus-outline-offset);
@@ -1157,12 +1163,10 @@
1157
1163
  border-color: transparent;
1158
1164
  }
1159
1165
  .coloring-solid {
1160
- 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;
1161
1166
  background-color: var(--coloring-solid-color,var(--coloring-color));
1162
1167
  color: var(--coloring-solid-text,var(--coloring-on-color));
1163
1168
  }
1164
1169
  .coloring-text-hover {
1165
- 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;
1166
1170
  color: var(--coloring-text,var(--coloring-color));
1167
1171
  &:hover {
1168
1172
  @media (hover: hover) {
@@ -1359,6 +1363,9 @@
1359
1363
  .py-12 {
1360
1364
  padding-block: calc(var(--spacing) * 12);
1361
1365
  }
1366
+ .pr-0 {
1367
+ padding-right: calc(var(--spacing) * 0);
1368
+ }
1362
1369
  .pr-8 {
1363
1370
  padding-right: calc(var(--spacing) * 8);
1364
1371
  }
@@ -1814,14 +1821,24 @@
1814
1821
  .focus-style-none {
1815
1822
  --focus-outline: none;
1816
1823
  --focus-outline-offset: 0;
1817
- --focus-outline-transition: none;
1818
1824
  --focus-box-shadow: none;
1819
1825
  --focus-border-color: inherit;
1820
1826
  }
1821
1827
  .focus-style-outline {
1822
1828
  --focus-outline: 2px solid var(--color-focus);
1823
- --focus-outline-offset: calc(var(--spacing) * 0.25);
1824
- --focus-outline-transition: outline-offset var(--animation-duration-in, 250ms);
1829
+ --focus-outline-offset: calc(var(--spacing) * 0.5);
1830
+ }
1831
+ .focus-style-shadow {
1832
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 35%, transparent);
1833
+ @supports (color: color-mix(in lab, red, red)) {
1834
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 35%, transparent);
1835
+ }
1836
+ &:where([data-theme=dark], [data-theme=dark] *) {
1837
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 60%, transparent);
1838
+ @supports (color: color-mix(in lab, red, red)) {
1839
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 60%, transparent);
1840
+ }
1841
+ }
1825
1842
  }
1826
1843
  .select-none {
1827
1844
  -webkit-user-select: none;
@@ -1836,12 +1853,6 @@
1836
1853
  .focus-style-border {
1837
1854
  --focus-border-color: var(--color-focus);
1838
1855
  }
1839
- .focus-style-shadow {
1840
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
1841
- @supports (color: color-mix(in lab, red, red)) {
1842
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
1843
- }
1844
- }
1845
1856
  .group-focus-within\/slide\:border-primary {
1846
1857
  &:is(:where(.group\/slide):focus-within *) {
1847
1858
  border-color: var(--color-primary);
@@ -2105,6 +2116,20 @@
2105
2116
  animation: shimmer 2s infinite;
2106
2117
  }
2107
2118
  }
2119
+ :root {
2120
+ --coloring-transitions: border-color var(--animation-duration-in, 250ms) ease-in-out,
2121
+ box-shadow var(--animation-duration-in, 250ms) ease-in-out,
2122
+ outline-color var(--animation-duration-in, 250ms) ease-in-out,
2123
+ outline-offset var(--animation-duration-in, 250ms),
2124
+ color var(--animation-duration-in, 250ms) ease-in-out,
2125
+ background-color var(--animation-duration-in, 250ms) ease-in-out;
2126
+ }
2127
+ :root {
2128
+ --focus-transitions: outline-offset var(--animation-duration-in, 250ms) ease-in-out,
2129
+ outline-color var(--animation-duration-in, 250ms) ease-in-out,
2130
+ border-color var(--animation-duration-in, 250ms) ease-in-out,
2131
+ shadow var(--animation-duration-in, 250ms) ease-in-out;
2132
+ }
2108
2133
  @layer base;
2109
2134
  @layer base;
2110
2135
  @layer base {
@@ -2125,8 +2150,8 @@
2125
2150
  --color-placeholder: var(--color-gray-500);
2126
2151
  --color-description: var(--color-gray-400);
2127
2152
  --color-label: var(--color-gray-300);
2128
- --color-primary: var(--color-purple-500);
2129
- --color-primary-hover: var(--color-purple-400);
2153
+ --color-primary: var(--color-purple-400);
2154
+ --color-primary-hover: var(--color-purple-500);
2130
2155
  --color-neutral: var(--color-gray-750);
2131
2156
  --color-neutral-hover: var(--color-gray-600);
2132
2157
  --color-on-neutral: var(--color-white);
@@ -2156,8 +2181,8 @@
2156
2181
  --color-placeholder: var(--color-gray-500);
2157
2182
  --color-description: var(--color-gray-400);
2158
2183
  --color-label: var(--color-gray-300);
2159
- --color-primary: var(--color-purple-500);
2160
- --color-primary-hover: var(--color-purple-400);
2184
+ --color-primary: var(--color-purple-400);
2185
+ --color-primary-hover: var(--color-purple-500);
2161
2186
  --color-neutral: var(--color-gray-750);
2162
2187
  --color-neutral-hover: var(--color-gray-600);
2163
2188
  --color-on-neutral: var(--color-white);
@@ -2179,6 +2204,7 @@
2179
2204
  --color-overlay-shadow: #00000060;
2180
2205
  --color-scrollbar-track: #ffffff33;
2181
2206
  --color-scrollbar-thumb: var(--color-gray-300);
2207
+ --color-switch-thumb-active: var(--color-on-surface);
2182
2208
  --color-border: var(--color-gray-600);
2183
2209
  --color-divider: var(--color-gray-700);
2184
2210
  --color-focus: var(--color-primary);
@@ -2195,10 +2221,10 @@
2195
2221
  flex-direction: row;
2196
2222
  align-items: center;
2197
2223
  justify-content: center;
2224
+ transition: var(--coloring-transitions), var(--focus-transitions);
2198
2225
  &:not([data-disabled]) {
2199
2226
  cursor: pointer;
2200
2227
  &[data-coloringstyle="solid"] {
2201
- 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;
2202
2228
  background-color: var(--coloring-solid-color,var(--coloring-color));
2203
2229
  color: var(--coloring-solid-text,var(--coloring-on-color));
2204
2230
  &:hover {
@@ -2208,7 +2234,6 @@
2208
2234
  }
2209
2235
  }
2210
2236
  &[data-coloringstyle="text"] {
2211
- 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;
2212
2237
  color: var(--coloring-text,var(--coloring-color));
2213
2238
  &:hover {
2214
2239
  @media (hover: hover) {
@@ -2220,7 +2245,6 @@
2220
2245
  }
2221
2246
  }
2222
2247
  &[data-coloringstyle="outline"] {
2223
- 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;
2224
2248
  border-width: var(--coloring-outline-width, 0.125rem);
2225
2249
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2226
2250
  color: var(--coloring-outline,var(--coloring-color));
@@ -2236,7 +2260,6 @@
2236
2260
  }
2237
2261
  }
2238
2262
  &[data-coloringstyle="tonal"] {
2239
- 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;
2240
2263
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
2241
2264
  @supports (color: color-mix(in lab, red, red)) {
2242
2265
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
@@ -2252,9 +2275,11 @@
2252
2275
  }
2253
2276
  }
2254
2277
  &[data-coloringstyle="tonal-outline"] {
2255
- background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2278
+ background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
2279
+ @supports (color: color-mix(in lab, red, red)) {
2280
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2281
+ }
2256
2282
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
2257
- 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;
2258
2283
  border-width: var(--coloring-outline-width, 0.125rem);
2259
2284
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2260
2285
  &:hover {
@@ -2436,22 +2461,18 @@
2436
2461
  &[data-disabled] {
2437
2462
  cursor: not-allowed;
2438
2463
  &[data-coloringstyle="solid"] {
2439
- 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;
2440
2464
  background-color: var(--coloring-solid-color,var(--coloring-color));
2441
2465
  color: var(--coloring-solid-text,var(--coloring-on-color));
2442
2466
  }
2443
2467
  &[data-coloringstyle="text"] {
2444
- 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;
2445
2468
  color: var(--coloring-text,var(--coloring-color));
2446
2469
  }
2447
2470
  &[data-coloringstyle="outline"] {
2448
- 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
2471
  border-width: var(--coloring-outline-width, 0.125rem);
2450
2472
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2451
2473
  color: var(--coloring-outline,var(--coloring-color));
2452
2474
  }
2453
2475
  &[data-coloringstyle="tonal"] {
2454
- 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;
2455
2476
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
2456
2477
  @supports (color: color-mix(in lab, red, red)) {
2457
2478
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
@@ -2459,9 +2480,11 @@
2459
2480
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
2460
2481
  }
2461
2482
  &[data-coloringstyle="tonal-outline"] {
2462
- background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2483
+ background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
2484
+ @supports (color: color-mix(in lab, red, red)) {
2485
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2486
+ }
2463
2487
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
2464
- 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;
2465
2488
  border-width: var(--coloring-outline-width, 0.125rem);
2466
2489
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2467
2490
  }
@@ -2538,7 +2561,6 @@
2538
2561
  row-gap: calc(var(--spacing) * 1);
2539
2562
  width: 100%;
2540
2563
  min-width: calc(var(--spacing) * 0);
2541
- 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;
2542
2564
  background-color: var(--coloring-solid-color,var(--coloring-color));
2543
2565
  color: var(--coloring-solid-text,var(--coloring-on-color));
2544
2566
  --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));
@@ -2579,7 +2601,12 @@
2579
2601
  row-gap: calc(var(--spacing) * 1);
2580
2602
  width: 100%;
2581
2603
  min-width: calc(var(--spacing) * 0);
2582
- 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;
2604
+ &:focus-visible {
2605
+ outline: var(--focus-outline);
2606
+ outline-offset: var(--focus-outline-offset);
2607
+ box-shadow: var(--focus-box-shadow);
2608
+ border-color: var(--focus-border-color);
2609
+ }
2583
2610
  background-color: var(--coloring-solid-color,var(--coloring-color));
2584
2611
  color: var(--coloring-solid-text,var(--coloring-on-color));
2585
2612
  &:hover {
@@ -2603,6 +2630,9 @@
2603
2630
  --coloring-color: var(--color-surface);
2604
2631
  --coloring-on-color: var(--color-on-surface);
2605
2632
  --coloring-hover: var(--color-surface-hover);
2633
+ --focus-outline: 2px solid var(--color-focus);
2634
+ --focus-outline-offset: calc(var(--spacing) * 0.5);
2635
+ transition: var(--coloring-transitions), var(--focus-transitions);
2606
2636
  &[data-size="sm"] {
2607
2637
  border-radius: 0.25rem;
2608
2638
  padding-inline: calc(var(--spacing) * 2);
@@ -2622,7 +2652,7 @@
2622
2652
  [data-name="card-header"] {
2623
2653
  display: flex;
2624
2654
  flex-direction: row;
2625
- column-gap: calc(var(--spacing) * 2);
2655
+ column-gap: calc(var(--spacing) * 4);
2626
2656
  width: 100%;
2627
2657
  min-width: calc(var(--spacing) * 0);
2628
2658
  align-items: center;
@@ -2634,13 +2664,14 @@
2634
2664
  min-width: calc(var(--spacing) * 0);
2635
2665
  flex: 1;
2636
2666
  }
2637
- [data-name="card-action"] {
2667
+ [data-name="card-leading"], [data-name="card-trailing"] {
2638
2668
  display: flex;
2639
2669
  flex-direction: column;
2640
2670
  row-gap: calc(var(--spacing) * 0);
2641
2671
  flex-shrink: 0;
2642
2672
  align-items: center;
2643
2673
  justify-content: center;
2674
+ align-self: center;
2644
2675
  color: var(--color-description);
2645
2676
  }
2646
2677
  [data-name="navigation-card-action"] {
@@ -2661,6 +2692,7 @@
2661
2692
  }
2662
2693
  }
2663
2694
  [data-name="card-title"] {
2695
+ min-width: calc(var(--spacing) * 0);
2664
2696
  font-family: var(--font-space);
2665
2697
  font-size: var(--text-lg);
2666
2698
  line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -2691,6 +2723,10 @@
2691
2723
  [data-name="action-card"] {
2692
2724
  &:not([data-disabled]) {
2693
2725
  cursor: pointer;
2726
+ &:hover {
2727
+ --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));
2728
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2729
+ }
2694
2730
  }
2695
2731
  &[data-disabled] {
2696
2732
  cursor: not-allowed;
@@ -2713,6 +2749,10 @@
2713
2749
  }
2714
2750
  [data-name="navigation-card"] {
2715
2751
  cursor: pointer;
2752
+ &:hover {
2753
+ --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));
2754
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2755
+ }
2716
2756
  }
2717
2757
  }
2718
2758
  @layer components {
@@ -2723,22 +2763,18 @@
2723
2763
  align-items: center;
2724
2764
  justify-content: center;
2725
2765
  &[data-coloringstyle="solid"] {
2726
- 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;
2727
2766
  background-color: var(--coloring-solid-color,var(--coloring-color));
2728
2767
  color: var(--coloring-solid-text,var(--coloring-on-color));
2729
2768
  }
2730
2769
  &[data-coloringstyle="text"] {
2731
- 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;
2732
2770
  color: var(--coloring-text,var(--coloring-color));
2733
2771
  }
2734
2772
  &[data-coloringstyle="outline"] {
2735
- 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;
2736
2773
  border-width: var(--coloring-outline-width, 0.125rem);
2737
2774
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2738
2775
  color: var(--coloring-outline,var(--coloring-color));
2739
2776
  }
2740
2777
  &[data-coloringstyle="tonal"] {
2741
- 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;
2742
2778
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
2743
2779
  @supports (color: color-mix(in lab, red, red)) {
2744
2780
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
@@ -2746,9 +2782,11 @@
2746
2782
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
2747
2783
  }
2748
2784
  &[data-coloringstyle="tonal-outline"] {
2749
- background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2785
+ background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
2786
+ @supports (color: color-mix(in lab, red, red)) {
2787
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
2788
+ }
2750
2789
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
2751
- 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;
2752
2790
  border-width: var(--coloring-outline-width, 0.125rem);
2753
2791
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
2754
2792
  }
@@ -2955,14 +2993,19 @@
2955
2993
  border-width: 2px;
2956
2994
  --focus-outline: none;
2957
2995
  --focus-outline-offset: 0;
2958
- --focus-outline-transition: none;
2959
2996
  --focus-box-shadow: none;
2960
2997
  --focus-border-color: inherit;
2961
- --focus-border-color: var(--color-focus);
2962
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
2998
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 35%, transparent);
2963
2999
  @supports (color: color-mix(in lab, red, red)) {
2964
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
3000
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 35%, transparent);
2965
3001
  }
3002
+ &:where([data-theme=dark], [data-theme=dark] *) {
3003
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 60%, transparent);
3004
+ @supports (color: color-mix(in lab, red, red)) {
3005
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 60%, transparent);
3006
+ }
3007
+ }
3008
+ --focus-border-color: var(--color-focus);
2966
3009
  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;
2967
3010
  &:not([data-disabled]):not([data-invalid]) {
2968
3011
  background-color: var(--color-input-background);
@@ -3020,7 +3063,6 @@
3020
3063
  all: unset;
3021
3064
  width: 100%;
3022
3065
  border-radius: var(--radius-md);
3023
- transition: var(--focus-outline-transition);
3024
3066
  &:focus-visible {
3025
3067
  outline: var(--focus-outline);
3026
3068
  outline-offset: var(--focus-outline-offset);
@@ -3029,12 +3071,10 @@
3029
3071
  }
3030
3072
  --focus-outline: none;
3031
3073
  --focus-outline-offset: 0;
3032
- --focus-outline-transition: none;
3033
3074
  --focus-box-shadow: none;
3034
3075
  --focus-border-color: inherit;
3035
3076
  --focus-outline: 2px solid var(--color-focus);
3036
- --focus-outline-offset: calc(var(--spacing) * 0.25);
3037
- --focus-outline-transition: outline-offset var(--animation-duration-in, 250ms);
3077
+ --focus-outline-offset: calc(var(--spacing) * 0.5);
3038
3078
  &:not([data-isediting]) {
3039
3079
  color: transparent;
3040
3080
  }
@@ -3077,13 +3117,11 @@
3077
3117
  }
3078
3118
  [data-name="table-header-cell"] {
3079
3119
  position: relative;
3080
- padding-inline: calc(var(--spacing) * 3);
3081
- padding-block: calc(var(--spacing) * 2.5);
3082
3120
  &:first-child {
3083
- padding-left: calc(var(--spacing) * 6);
3121
+ padding-left: calc(var(--spacing) * 3);
3084
3122
  }
3085
3123
  &:last-child {
3086
- padding-right: calc(var(--spacing) * 6);
3124
+ padding-right: calc(var(--spacing) * 3);
3087
3125
  }
3088
3126
  border-block-style: var(--tw-border-style);
3089
3127
  border-block-width: 1px;
@@ -3111,6 +3149,17 @@
3111
3149
  z-index: 10;
3112
3150
  }
3113
3151
  }
3152
+ .table-header-cell-content {
3153
+ display: flex;
3154
+ flex-direction: row;
3155
+ column-gap: calc(var(--spacing) * 1);
3156
+ align-items: center;
3157
+ overflow: hidden;
3158
+ text-overflow: ellipsis;
3159
+ white-space: nowrap;
3160
+ padding-inline: calc(var(--spacing) * 3);
3161
+ padding-block: calc(var(--spacing) * 2.5);
3162
+ }
3114
3163
  [data-name="table-body-row"] {
3115
3164
  &:hover {
3116
3165
  @media (hover: hover) {
@@ -3286,7 +3335,6 @@
3286
3335
  align-items: center;
3287
3336
  justify-content: center;
3288
3337
  border-radius: calc(infinity * 1px);
3289
- 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;
3290
3338
  background-color: var(--coloring-solid-color,var(--coloring-color));
3291
3339
  color: var(--coloring-solid-text,var(--coloring-on-color));
3292
3340
  --coloring-color: initial;
@@ -3429,6 +3477,9 @@
3429
3477
  border-radius: calc(infinity * 1px);
3430
3478
  --tw-border-style: solid;
3431
3479
  border-style: solid;
3480
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3481
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3482
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3432
3483
  border-color: var(--color-background);
3433
3484
  &[data-size="xs"] {
3434
3485
  width: calc(var(--spacing) * 3);
@@ -3454,12 +3505,18 @@
3454
3505
  border-style: var(--tw-border-style);
3455
3506
  border-width: 2px;
3456
3507
  }
3457
- &[data-online] {
3508
+ &[data-status="online"] {
3458
3509
  background-color: var(--color-positive);
3459
3510
  }
3460
- &:not([data-online]) {
3511
+ &[data-status="offline"], &[data-status="unknown"] {
3512
+ background-color: var(--color-gray-500);
3513
+ }
3514
+ &[data-status="busy"] {
3461
3515
  background-color: var(--color-negative);
3462
3516
  }
3517
+ &[data-status="away"] {
3518
+ background-color: var(--color-warning);
3519
+ }
3463
3520
  }
3464
3521
  }
3465
3522
  @layer components {
@@ -3470,22 +3527,18 @@
3470
3527
  align-items: center;
3471
3528
  justify-content: center;
3472
3529
  &[data-coloringstyle="solid"] {
3473
- 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;
3474
3530
  background-color: var(--coloring-solid-color,var(--coloring-color));
3475
3531
  color: var(--coloring-solid-text,var(--coloring-on-color));
3476
3532
  }
3477
3533
  &[data-coloringstyle="text"] {
3478
- 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;
3479
3534
  color: var(--coloring-text,var(--coloring-color));
3480
3535
  }
3481
3536
  &[data-coloringstyle="outline"] {
3482
- 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;
3483
3537
  border-width: var(--coloring-outline-width, 0.125rem);
3484
3538
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
3485
3539
  color: var(--coloring-outline,var(--coloring-color));
3486
3540
  }
3487
3541
  &[data-coloringstyle="tonal"] {
3488
- 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;
3489
3542
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
3490
3543
  @supports (color: color-mix(in lab, red, red)) {
3491
3544
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
@@ -3493,9 +3546,11 @@
3493
3546
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
3494
3547
  }
3495
3548
  &[data-coloringstyle="tonal-outline"] {
3496
- background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
3549
+ background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
3550
+ @supports (color: color-mix(in lab, red, red)) {
3551
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
3552
+ }
3497
3553
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
3498
- 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;
3499
3554
  border-width: var(--coloring-outline-width, 0.125rem);
3500
3555
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
3501
3556
  }
@@ -3716,7 +3771,6 @@
3716
3771
  border-radius: calc(var(--spacing) * 1.5);
3717
3772
  padding-inline: calc(var(--spacing) * 1.5);
3718
3773
  padding-block: calc(var(--spacing) * 1);
3719
- 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;
3720
3774
  color: var(--coloring-text,var(--coloring-color));
3721
3775
  &:hover {
3722
3776
  @media (hover: hover) {
@@ -3781,7 +3835,6 @@
3781
3835
  justify-content: center;
3782
3836
  border-bottom-style: var(--tw-border-style);
3783
3837
  border-bottom-width: 4px;
3784
- 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;
3785
3838
  color: var(--coloring-text,var(--coloring-color));
3786
3839
  &:hover {
3787
3840
  @media (hover: hover) {
@@ -3824,7 +3877,6 @@
3824
3877
  --coloring-tonal-hover: var(--color-neutral-tonal-hover);
3825
3878
  &[data-disabled] {
3826
3879
  cursor: not-allowed;
3827
- 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;
3828
3880
  color: var(--coloring-text,var(--coloring-color));
3829
3881
  --coloring-color: initial;
3830
3882
  --coloring-on-color: initial;
@@ -3873,7 +3925,6 @@
3873
3925
  flex-direction: column;
3874
3926
  row-gap: calc(var(--spacing) * 0);
3875
3927
  border-radius: var(--radius-lg);
3876
- 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;
3877
3928
  background-color: var(--coloring-solid-color,var(--coloring-color));
3878
3929
  color: var(--coloring-solid-text,var(--coloring-on-color));
3879
3930
  --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));
@@ -3909,7 +3960,6 @@
3909
3960
  user-select: none;
3910
3961
  &:not([data-disabled]) {
3911
3962
  cursor: pointer;
3912
- 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;
3913
3963
  background-color: var(--coloring-solid-color,var(--coloring-color));
3914
3964
  color: var(--coloring-solid-text,var(--coloring-on-color));
3915
3965
  &:hover {
@@ -3934,7 +3984,6 @@
3934
3984
  }
3935
3985
  &[data-disabled] {
3936
3986
  cursor: not-allowed;
3937
- 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;
3938
3987
  background-color: var(--coloring-solid-color,var(--coloring-color));
3939
3988
  color: var(--coloring-solid-text,var(--coloring-on-color));
3940
3989
  --coloring-color: initial;
@@ -4031,7 +4080,7 @@
4031
4080
  &[data-rounded] {
4032
4081
  border-radius: calc(infinity * 1px);
4033
4082
  }
4034
- 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;
4083
+ transition: var(--coloring-transitions), var(--focus-transitions);
4035
4084
  &:not([data-disabled]) {
4036
4085
  &:hover {
4037
4086
  @media (hover: hover) {
@@ -4150,6 +4199,7 @@
4150
4199
  border-style: var(--tw-border-style);
4151
4200
  border-width: 2px;
4152
4201
  padding: calc(var(--spacing) * 1);
4202
+ transition: var(--coloring-transitions), var(--focus-transitions);
4153
4203
  &:not([data-disabled]) {
4154
4204
  &:hover {
4155
4205
  @media (hover: hover) {
@@ -4206,7 +4256,6 @@
4206
4256
  height: calc(var(--spacing) * 3);
4207
4257
  width: calc(var(--spacing) * 3);
4208
4258
  border-radius: calc(infinity * 1px);
4209
- background-color: var(--color-on-surface);
4210
4259
  transition-property: all;
4211
4260
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4212
4261
  transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -4217,10 +4266,12 @@
4217
4266
  left: calc(var(--spacing) * 0.5);
4218
4267
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
4219
4268
  translate: var(--tw-translate-x) var(--tw-translate-y);
4269
+ background-color: var(--color-switch-thumb-inactive, var(--color-on-surface));
4220
4270
  &[data-active] {
4221
4271
  height: calc(var(--spacing) * 4);
4222
4272
  width: calc(var(--spacing) * 4);
4223
4273
  left: calc(100% - 4 * var(--spacing));
4274
+ background-color: var(--color-switch-thumb-active, var(--color-on-surface));
4224
4275
  }
4225
4276
  }
4226
4277
  }
@@ -4536,14 +4587,19 @@
4536
4587
  border-width: 2px;
4537
4588
  --focus-outline: none;
4538
4589
  --focus-outline-offset: 0;
4539
- --focus-outline-transition: none;
4540
4590
  --focus-box-shadow: none;
4541
4591
  --focus-border-color: inherit;
4542
- --focus-border-color: var(--color-focus);
4543
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
4592
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 35%, transparent);
4544
4593
  @supports (color: color-mix(in lab, red, red)) {
4545
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
4594
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 35%, transparent);
4546
4595
  }
4596
+ &:where([data-theme=dark], [data-theme=dark] *) {
4597
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 60%, transparent);
4598
+ @supports (color: color-mix(in lab, red, red)) {
4599
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 60%, transparent);
4600
+ }
4601
+ }
4602
+ --focus-border-color: var(--color-focus);
4547
4603
  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;
4548
4604
  &:not([data-disabled]):not([data-invalid]) {
4549
4605
  background-color: var(--color-input-background);
@@ -4679,7 +4735,6 @@
4679
4735
  }
4680
4736
  }
4681
4737
  &[data-selected] {
4682
- 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;
4683
4738
  background-color: var(--coloring-solid-color,var(--coloring-color));
4684
4739
  color: var(--coloring-solid-text,var(--coloring-on-color));
4685
4740
  &:hover {
@@ -4704,7 +4759,6 @@
4704
4759
  --color-focus: var(--color-primary);
4705
4760
  }
4706
4761
  &:not([data-selected]) {
4707
- 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;
4708
4762
  color: var(--coloring-text,var(--coloring-color));
4709
4763
  &:hover {
4710
4764
  @media (hover: hover) {
@@ -4763,12 +4817,10 @@
4763
4817
  }
4764
4818
  }
4765
4819
  &[data-selected] {
4766
- 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;
4767
4820
  background-color: var(--coloring-solid-color,var(--coloring-color));
4768
4821
  color: var(--coloring-solid-text,var(--coloring-on-color));
4769
4822
  }
4770
4823
  &:not([data-selected]) {
4771
- 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;
4772
4824
  color: var(--coloring-text,var(--coloring-color));
4773
4825
  }
4774
4826
  }
@@ -4989,7 +5041,6 @@
4989
5041
  border-style: var(--tw-border-style);
4990
5042
  border-width: 2px;
4991
5043
  border-color: var(--color-outline-variant);
4992
- 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;
4993
5044
  background-color: var(--coloring-solid-color,var(--coloring-color));
4994
5045
  color: var(--coloring-solid-text,var(--coloring-on-color));
4995
5046
  --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));
@@ -5032,14 +5083,19 @@
5032
5083
  border-width: 2px;
5033
5084
  --focus-outline: none;
5034
5085
  --focus-outline-offset: 0;
5035
- --focus-outline-transition: none;
5036
5086
  --focus-box-shadow: none;
5037
5087
  --focus-border-color: inherit;
5038
- --focus-border-color: var(--color-focus);
5039
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
5088
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 35%, transparent);
5040
5089
  @supports (color: color-mix(in lab, red, red)) {
5041
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
5090
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 35%, transparent);
5091
+ }
5092
+ &:where([data-theme=dark], [data-theme=dark] *) {
5093
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 60%, transparent);
5094
+ @supports (color: color-mix(in lab, red, red)) {
5095
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 60%, transparent);
5096
+ }
5042
5097
  }
5098
+ --focus-border-color: var(--color-focus);
5043
5099
  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;
5044
5100
  &:not([data-disabled]):not([data-invalid]) {
5045
5101
  background-color: var(--color-input-background);
@@ -5106,14 +5162,19 @@
5106
5162
  border-width: 2px;
5107
5163
  --focus-outline: none;
5108
5164
  --focus-outline-offset: 0;
5109
- --focus-outline-transition: none;
5110
5165
  --focus-box-shadow: none;
5111
5166
  --focus-border-color: inherit;
5112
- --focus-border-color: var(--color-focus);
5113
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
5167
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 35%, transparent);
5114
5168
  @supports (color: color-mix(in lab, red, red)) {
5115
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
5169
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 35%, transparent);
5116
5170
  }
5171
+ &:where([data-theme=dark], [data-theme=dark] *) {
5172
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 60%, transparent);
5173
+ @supports (color: color-mix(in lab, red, red)) {
5174
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 60%, transparent);
5175
+ }
5176
+ }
5177
+ --focus-border-color: var(--color-focus);
5117
5178
  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;
5118
5179
  &:not([data-disabled]):not([data-invalid]) {
5119
5180
  background-color: var(--color-input-background);
@@ -5182,7 +5243,6 @@
5182
5243
  height: calc(var(--spacing) * 9);
5183
5244
  align-items: center;
5184
5245
  border-radius: var(--radius-md);
5185
- 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;
5186
5246
  background-color: var(--coloring-solid-color,var(--coloring-color));
5187
5247
  color: var(--coloring-solid-text,var(--coloring-on-color));
5188
5248
  padding-right: calc(var(--spacing) * 1);
@@ -5256,14 +5316,19 @@
5256
5316
  border-width: 2px;
5257
5317
  --focus-outline: none;
5258
5318
  --focus-outline-offset: 0;
5259
- --focus-outline-transition: none;
5260
5319
  --focus-box-shadow: none;
5261
5320
  --focus-border-color: inherit;
5262
- --focus-border-color: var(--color-focus);
5263
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
5321
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 35%, transparent);
5264
5322
  @supports (color: color-mix(in lab, red, red)) {
5265
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
5323
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 35%, transparent);
5266
5324
  }
5325
+ &:where([data-theme=dark], [data-theme=dark] *) {
5326
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 60%, transparent);
5327
+ @supports (color: color-mix(in lab, red, red)) {
5328
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 60%, transparent);
5329
+ }
5330
+ }
5331
+ --focus-border-color: var(--color-focus);
5267
5332
  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;
5268
5333
  &:not([data-disabled]):not([data-invalid]) {
5269
5334
  background-color: var(--color-input-background);
@@ -5372,7 +5437,7 @@
5372
5437
  outline-width: 0px;
5373
5438
  }
5374
5439
  * {
5375
- transition: var(--focus-outline-transition);
5440
+ transition: var(--focus-transitions);
5376
5441
  &:focus-visible {
5377
5442
  outline: var(--focus-outline);
5378
5443
  outline-offset: var(--focus-outline-offset);
@@ -5381,8 +5446,7 @@
5381
5446
  }
5382
5447
  outline-color: var(--color-focus);
5383
5448
  --focus-outline: 2px solid var(--color-focus);
5384
- --focus-outline-offset: calc(var(--spacing) * 0.25);
5385
- --focus-outline-transition: outline-offset var(--animation-duration-in, 250ms);
5449
+ --focus-outline-offset: calc(var(--spacing) * 0.5);
5386
5450
  }
5387
5451
  }
5388
5452
  @layer components {
@@ -5396,10 +5460,10 @@
5396
5460
  width: var(--element-height, var(--spacing-element-md));
5397
5461
  align-items: center;
5398
5462
  justify-content: center;
5463
+ transition: var(--coloring-transitions), var(--focus-transitions);
5399
5464
  &:not([data-disabled]) {
5400
5465
  cursor: pointer;
5401
5466
  &[data-coloringstyle="solid"] {
5402
- 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;
5403
5467
  background-color: var(--coloring-solid-color,var(--coloring-color));
5404
5468
  color: var(--coloring-solid-text,var(--coloring-on-color));
5405
5469
  &:hover {
@@ -5409,7 +5473,6 @@
5409
5473
  }
5410
5474
  }
5411
5475
  &[data-coloringstyle="text"] {
5412
- 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;
5413
5476
  color: var(--coloring-text,var(--coloring-color));
5414
5477
  &:hover {
5415
5478
  @media (hover: hover) {
@@ -5421,7 +5484,6 @@
5421
5484
  }
5422
5485
  }
5423
5486
  &[data-coloringstyle="outline"] {
5424
- 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;
5425
5487
  border-width: var(--coloring-outline-width, 0.125rem);
5426
5488
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
5427
5489
  color: var(--coloring-outline,var(--coloring-color));
@@ -5437,7 +5499,6 @@
5437
5499
  }
5438
5500
  }
5439
5501
  &[data-coloringstyle="tonal"] {
5440
- 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;
5441
5502
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
5442
5503
  @supports (color: color-mix(in lab, red, red)) {
5443
5504
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
@@ -5453,9 +5514,11 @@
5453
5514
  }
5454
5515
  }
5455
5516
  &[data-coloringstyle="tonal-outline"] {
5456
- background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
5517
+ background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
5518
+ @supports (color: color-mix(in lab, red, red)) {
5519
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
5520
+ }
5457
5521
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
5458
- 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;
5459
5522
  border-width: var(--coloring-outline-width, 0.125rem);
5460
5523
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
5461
5524
  &:hover {
@@ -5637,22 +5700,18 @@
5637
5700
  &[data-disabled] {
5638
5701
  cursor: not-allowed;
5639
5702
  &[data-coloringstyle="solid"] {
5640
- 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;
5641
5703
  background-color: var(--coloring-solid-color,var(--coloring-color));
5642
5704
  color: var(--coloring-solid-text,var(--coloring-on-color));
5643
5705
  }
5644
5706
  &[data-coloringstyle="text"] {
5645
- 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;
5646
5707
  color: var(--coloring-text,var(--coloring-color));
5647
5708
  }
5648
5709
  &[data-coloringstyle="outline"] {
5649
- 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;
5650
5710
  border-width: var(--coloring-outline-width, 0.125rem);
5651
5711
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
5652
5712
  color: var(--coloring-outline,var(--coloring-color));
5653
5713
  }
5654
5714
  &[data-coloringstyle="tonal"] {
5655
- 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;
5656
5715
  background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
5657
5716
  @supports (color: color-mix(in lab, red, red)) {
5658
5717
  background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
@@ -5660,9 +5719,11 @@
5660
5719
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
5661
5720
  }
5662
5721
  &[data-coloringstyle="tonal-outline"] {
5663
- background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
5722
+ background-color: var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)));
5723
+ @supports (color: color-mix(in lab, red, red)) {
5724
+ background-color: color-mix(in oklab, var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))) 20%, transparent);
5725
+ }
5664
5726
  color: var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)));
5665
- 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;
5666
5727
  border-width: var(--coloring-outline-width, 0.125rem);
5667
5728
  border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
5668
5729
  }
@@ -5731,14 +5792,19 @@
5731
5792
  border-width: 2px;
5732
5793
  --focus-outline: none;
5733
5794
  --focus-outline-offset: 0;
5734
- --focus-outline-transition: none;
5735
5795
  --focus-box-shadow: none;
5736
5796
  --focus-border-color: inherit;
5737
- --focus-border-color: var(--color-focus);
5738
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, #694BB4 70%, transparent);
5797
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 35%, transparent);
5739
5798
  @supports (color: color-mix(in lab, red, red)) {
5740
- --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
5799
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 35%, transparent);
5741
5800
  }
5801
+ &:where([data-theme=dark], [data-theme=dark] *) {
5802
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, #694BB4 60%, transparent);
5803
+ @supports (color: color-mix(in lab, red, red)) {
5804
+ --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 60%, transparent);
5805
+ }
5806
+ }
5807
+ --focus-border-color: var(--color-focus);
5742
5808
  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;
5743
5809
  &:not([data-disabled]):not([data-invalid]) {
5744
5810
  background-color: var(--color-input-background);
@@ -5794,6 +5860,9 @@
5794
5860
  box-shadow: var(--focus-box-shadow);
5795
5861
  border-color: var(--focus-border-color);
5796
5862
  }
5863
+ &[data-has-actions] {
5864
+ padding-right: calc(var(--spacing) * 0.5);
5865
+ }
5797
5866
  }
5798
5867
  [data-name="date-time-field"] {
5799
5868
  display: flex;
@@ -5813,7 +5882,6 @@
5813
5882
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
5814
5883
  --focus-outline: none;
5815
5884
  --focus-outline-offset: 0;
5816
- --focus-outline-transition: none;
5817
5885
  --focus-box-shadow: none;
5818
5886
  --focus-border-color: inherit;
5819
5887
  &:focus {
@@ -6124,6 +6192,7 @@
6124
6192
  border-radius: var(--radius-md);
6125
6193
  padding-inline: calc(var(--spacing) * 2.5);
6126
6194
  padding-block: calc(var(--spacing) * 1.5);
6195
+ transition: var(--focus-transitions);
6127
6196
  &:hover, &:focus-visible {
6128
6197
  background-color: color-mix(in srgb, #694BB4 15%, transparent);
6129
6198
  @supports (color: color-mix(in lab, red, red)) {
@@ -6133,7 +6202,7 @@
6133
6202
  }
6134
6203
  [data-name="vertical-navigation-node-header"] {
6135
6204
  justify-content: space-between;
6136
- transition: var(--focus-outline-transition);
6205
+ transition: var(--focus-transitions);
6137
6206
  &[data-focused] {
6138
6207
  background-color: color-mix(in srgb, #694BB4 15%, transparent);
6139
6208
  @supports (color: color-mix(in lab, red, red)) {
@@ -6261,8 +6330,8 @@
6261
6330
  }
6262
6331
  .app-sidebar-close-button {
6263
6332
  position: absolute;
6264
- top: calc(var(--spacing) * 0.5);
6265
- right: calc(var(--spacing) * 0.5);
6333
+ top: calc(var(--spacing) * 1);
6334
+ right: calc(var(--spacing) * 1);
6266
6335
  z-index: 10;
6267
6336
  @media (width >= 64rem) {
6268
6337
  display: none;
@@ -6292,8 +6361,8 @@
6292
6361
  flex: 1;
6293
6362
  overflow-y: scroll;
6294
6363
  overscroll-behavior-y: contain;
6295
- padding-block: calc(var(--spacing) * 0.75);
6296
- padding-right: calc(var(--spacing) * 0.75);
6364
+ padding-block: calc(var(--spacing) * 1);
6365
+ padding-right: calc(var(--spacing) * 1);
6297
6366
  padding-left: calc(var(--spacing) * 3.25);
6298
6367
  scrollbar-gutter: stable;
6299
6368
  }