@planningcenter/tapestry 2.8.0-rc.1 → 2.8.0-rc.11

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 (49) hide show
  1. package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
  2. package/dist/components/checkbox/Checkbox.js +6 -4
  3. package/dist/components/checkbox/Checkbox.js.map +1 -1
  4. package/dist/components/page-header/PageHeader.d.ts.map +1 -1
  5. package/dist/components/page-header/PageHeader.js +39 -7
  6. package/dist/components/page-header/PageHeader.js.map +1 -1
  7. package/dist/components/page-header/index.js +1 -1
  8. package/dist/components/sidenav/index.js +1 -1
  9. package/dist/index.css +9 -9
  10. package/dist/index.css.map +1 -1
  11. package/dist/reactRender.css +446 -428
  12. package/dist/reactRender.css.map +1 -1
  13. package/dist/reactRenderLegacy.css +446 -428
  14. package/dist/reactRenderLegacy.css.map +1 -1
  15. package/dist/tapestry-wc/dist/components/{p-DyuxdWHB.js → p-B5ytoT1u.js} +2 -2
  16. package/dist/tapestry-wc/dist/components/p-B5ytoT1u.js.map +1 -0
  17. package/dist/tapestry-wc/dist/components/{p-DhVoKIg5.js → p-BbMC233n.js} +3 -3
  18. package/dist/tapestry-wc/dist/components/p-BbMC233n.js.map +1 -0
  19. package/dist/tapestry-wc/dist/components/{p-0A08CXL_.js → p-BedqK81s.js} +2 -2
  20. package/dist/tapestry-wc/dist/components/p-BedqK81s.js.map +1 -0
  21. package/dist/tapestry-wc/dist/components/{p-5mZYbcme.js → p-DR1nPBoM.js} +3 -3
  22. package/dist/tapestry-wc/dist/components/p-DR1nPBoM.js.map +1 -0
  23. package/dist/tapestry-wc/dist/components/{p-BhPfBZD-.js → p-oCoUE-Tb.js} +3 -3
  24. package/dist/tapestry-wc/dist/components/p-oCoUE-Tb.js.map +1 -0
  25. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  26. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  28. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  29. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  30. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  31. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  32. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  33. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  34. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  35. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  36. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  37. package/dist/tokens/tokens-deprecated.json +32 -16
  38. package/dist/tokens.css +7 -7
  39. package/dist/tokens.css.map +1 -1
  40. package/dist/unstable.css +77 -59
  41. package/dist/unstable.css.map +1 -1
  42. package/dist/unstable.js +1 -0
  43. package/dist/unstable.js.map +1 -1
  44. package/package.json +5 -4
  45. package/dist/tapestry-wc/dist/components/p-0A08CXL_.js.map +0 -1
  46. package/dist/tapestry-wc/dist/components/p-5mZYbcme.js.map +0 -1
  47. package/dist/tapestry-wc/dist/components/p-BhPfBZD-.js.map +0 -1
  48. package/dist/tapestry-wc/dist/components/p-DhVoKIg5.js.map +0 -1
  49. package/dist/tapestry-wc/dist/components/p-DyuxdWHB.js.map +0 -1
@@ -1,274 +1,3 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
5
- }
6
-
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-headline-color:var(--t-text-color-headline);
13
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
14
- --tds-page-header-padding-x:var(--t-spacing-2);
15
- --tds-page-header-padding-y:var(--t-spacing-2);
16
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
17
- --tds-page-header-nav-gap:var(--t-spacing-1);
18
- --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
19
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
20
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
21
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
22
- --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
23
- --tds-page-header-nav-item-border-width:1px;
24
-
25
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
26
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
27
-
28
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
29
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
30
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
31
-
32
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
33
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
34
-
35
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
36
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
37
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
38
-
39
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
40
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
41
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
42
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
44
- }
45
-
46
- .tds-page-header--profile{
47
- --tds-page-header-padding-y:20px;
48
- }
49
- @media (min-width: 600px){
50
- .tds-page-header{
51
- --tds-page-header-background-color:var(--t-surface-color-canvas);
52
- --tds-page-header-color:var(--t-text-color-secondary);
53
- --tds-page-header-padding-x:var(--t-spacing-3);
54
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
55
- --tds-page-header-nav-gap:var(--t-spacing-half);
56
- --tds-page-header-nav-background:transparent;
57
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
58
- --tds-page-header-nav-item-border-width:1px;
59
- --tds-page-header-nav-item-color:var(--t-text-color);
60
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
61
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
62
- }
63
- }
64
- }
65
-
66
- .tds-page-header{
67
- display:flex;
68
- flex-direction:column;
69
- padding-top:var(--tds-page-header-padding-y);
70
- color:var(--tds-page-header-color);
71
- background:var(--tds-page-header-background-color);
72
- border-bottom:1px solid var(--t-border-color);
73
- }
74
-
75
- .tds-page-header:not(.has-nav){
76
- padding-bottom:var(--tds-page-header-padding-y);
77
- }
78
-
79
- .tds-page-header.inactive{
80
- background:var(--tds-page-header-background-color-inactive);
81
- }
82
-
83
- .tds-page-header__title-bar{
84
- display:flex;
85
- flex-direction:column;
86
- gap:var(--t-spacing-2) var(--t-spacing-1);
87
- align-items:flex-start;
88
- justify-content:space-between;
89
- padding:0 var(--tds-page-header-padding-x);
90
- }
91
-
92
- .tds-page-header--profile > .tds-page-header__title-bar{
93
- align-items:center;
94
- }
95
-
96
- .tds-page-header__primary{
97
- width:100%;
98
- }
99
-
100
- .tds-page-header__primary h1{
101
- margin:0;
102
- font-size:var(--tds-page-header-headline-font-size);
103
- font-weight:var(--t-font-weight-normal);
104
- line-height:32px;
105
- color:var(--tds-page-header-headline-color);
106
- overflow-wrap:break-word;
107
- }
108
-
109
- .tds-page-header [slot="actions"]{
110
- width:100%;
111
- }
112
-
113
- .has-multi-actions.tds-page-header [slot="actions"],
114
- .has-multi-actions.tds-page-header .tds-page-header__actions{
115
- display:flex;
116
- flex-flow:row wrap;
117
- gap:var(--t-spacing-half) var(--t-spacing-1);
118
- align-items:flex-start;
119
- justify-content:flex-start;
120
- min-width:0;
121
- }
122
-
123
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
124
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
125
- .tds-page-header nav[slot="navigation"] ul,
126
- .tds-page-header nav.tds-page-header__nav ul{
127
- display:flex;
128
- gap:var(--tds-page-header-nav-gap);
129
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
130
- margin:0 0 -1px;
131
- overflow:auto;
132
- list-style:none;
133
- background:var(--tds-page-header-nav-background);
134
- }
135
-
136
- .tds-page-header nav[slot="navigation"] a,
137
- .tds-page-header nav[slot="navigation"] button,
138
- .tds-page-header nav.tds-page-header__nav a,
139
- .tds-page-header nav.tds-page-header__nav button{
140
- position:relative;
141
- display:inline-flex;
142
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
143
- font-size:var(--t-font-size-sm);
144
- line-height:22px;
145
- color:var(--tds-page-header-nav-item-color);
146
- white-space:nowrap;
147
- text-decoration:none;
148
- -webkit-appearance:none;
149
- -moz-appearance:none;
150
- appearance:none;
151
- cursor:pointer;
152
- outline-offset:-2px;
153
- background-color:var(--tds-page-header-nav-item-background-color);
154
- background-clip:padding-box;
155
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
156
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
157
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
158
- }
159
-
160
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
161
- position:relative;
162
- }
163
-
164
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
165
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
166
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
167
- }
168
-
169
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
170
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
171
- position:absolute;
172
- top:-5px;
173
- right:-2px;
174
- width:10px;
175
- height:10px;
176
- content:"";
177
- background:var(--tds-page-header-nav-item-indicator-color);
178
- border-radius:50%;
179
- }
180
-
181
- @media (prefers-reduced-motion: no-preference){
182
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
183
- animation:indicator-pulse 1.25s ease infinite;
184
- }
185
- }
186
-
187
- .tds-page-header nav[slot="navigation"] a.selected,
188
- .tds-page-header nav[slot="navigation"] button.selected,
189
- .tds-page-header nav.tds-page-header__nav a.selected,
190
- .tds-page-header nav.tds-page-header__nav button.selected{
191
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
192
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
193
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
194
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
195
- }
196
-
197
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
198
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
199
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
200
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
201
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
202
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
203
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
204
- }
205
-
206
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
207
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
208
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
209
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
210
- background-color:var(--tds-page-header-nav-item-background-color-active);
211
- }
212
-
213
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
214
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
215
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
216
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
217
- color:var(--tds-page-header-nav-item-color-disabled);
218
- cursor:not-allowed;
219
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
220
- opacity:1;
221
- }
222
-
223
- @media (min-width: 960px){
224
- .tds-page-header__primary{
225
- flex:1 1 max-content;
226
- width:auto;
227
- min-width:0;
228
- max-width:100%;
229
- }
230
-
231
- .tds-page-header__title-bar,
232
- .tds-page-header--profile .tds-page-header__title-bar{
233
- flex-flow:row nowrap;
234
- row-gap:12px;
235
- align-items:flex-start;
236
- }
237
-
238
- .tds-page-header [slot="actions"]{
239
- width:auto;
240
- }
241
-
242
- .has-multi-actions.tds-page-header [slot="actions"],
243
- .has-multi-actions.tds-page-header .tds-page-header__actions{
244
- justify-content:flex-end;
245
- }
246
- }
247
-
248
- .tds-page-header-phone,
249
- .tds-page-header-email{
250
- color:var(--tds-page-header-color);
251
- white-space:nowrap;
252
- }
253
-
254
- .tds-page-header-email{
255
- max-width:100%;
256
- overflow:hidden;
257
- text-overflow:ellipsis;
258
- }
259
-
260
- @keyframes indicator-pulse{
261
- 0%{
262
- opacity:.3;
263
- transform:scale(.9);
264
- }
265
-
266
- 100%{
267
- opacity:0;
268
- transform:scale(1.75);
269
- }
270
- }
271
-
272
1
 
273
2
  @media (prefers-reduced-motion: no-preference){
274
3
 
@@ -470,128 +199,399 @@
470
199
  background-color:transparent;
471
200
  }
472
201
 
473
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
474
- position:absolute;
475
- top:0;
476
- bottom:0;
477
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
478
- width:2px;
479
- content:"";
480
- background-color:var(--tds-sidenav-item-nested-border-color);
481
- transition:var(--tds-sidenav-item-transition);
482
- }
202
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
203
+ position:absolute;
204
+ top:0;
205
+ bottom:0;
206
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
207
+ width:2px;
208
+ content:"";
209
+ background-color:var(--tds-sidenav-item-nested-border-color);
210
+ transition:var(--tds-sidenav-item-transition);
211
+ }
212
+
213
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
214
+ position:absolute;
215
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
216
+ z-index:-1;
217
+ height:100%;
218
+ content:"";
219
+ background-color:var(--tds-sidenav-item-nested-background);
220
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
221
+ transition:var(--tds-sidenav-item-transition);
222
+ }
223
+
224
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
225
+ display:block;
226
+ text-align:left;
227
+ white-space:normal;
228
+ }
229
+
230
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
231
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
232
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
233
+ }
234
+
235
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
236
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
237
+ }
238
+
239
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
240
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
241
+ font-weight:var(--t-font-weight-medium);
242
+ }
243
+
244
+ .tds-sidenav-responsive-header{
245
+ display:flex;
246
+ gap:var(--t-spacing-2);
247
+ align-items:center;
248
+ width:100%;
249
+ }
250
+
251
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
252
+ order:0;
253
+ }
254
+
255
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
256
+ flex:1;
257
+ order:1;
258
+ margin:0;
259
+ font-size:var(--t-font-size-lg);
260
+ font-weight:var(--t-font-weight-medium);
261
+ color:var(--t-text-color-headline);
262
+ }
263
+
264
+ @media (max-width: 719px){
265
+ .tds-sidenav-collapse{
266
+ z-index:10001;
267
+ display:none;
268
+ max-width:min(448px, calc(100vw - 48px));
269
+ padding:0;
270
+ margin:12px 0;
271
+ overflow:hidden;
272
+ outline:0;
273
+ background:var(--t-surface-color-card);
274
+ border:0;
275
+ border-radius:6px;
276
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
277
+ will-change:transform;
278
+ position-area:bottom span-right;
279
+ }
280
+
281
+ .tds-sidenav-scroll-container{
282
+ --webkit-overflow-scrolling:touch;
283
+ display:block;
284
+ width:100%;
285
+ height:-moz-fit-content;
286
+ height:fit-content;
287
+ padding:var(--t-spacing-2);
288
+ overflow-y:auto;
289
+ }
290
+
291
+ .tds-sidenav-item :is(a, button) :is(.prefix){
292
+ display:none;
293
+ }
294
+ @supports selector(:popover-open){
295
+ .tds-sidenav-collapse:popover-open{
296
+ display:flex;
297
+ }
298
+ }
299
+ @supports not selector(:popover-open){
300
+ .tds-sidenav-collapse.\:popover-open{
301
+ display:flex;
302
+ }
303
+ }
304
+ }
305
+
306
+ @media (min-width: 720px){
307
+ .tds-sidenav-responsive-header{
308
+ display:none;
309
+ }
310
+ }
311
+
312
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
313
+ display:none;
314
+ }
315
+
316
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
317
+ display:block;
318
+ }
319
+
320
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
321
+ display:flex;
322
+ flex-direction:column;
323
+ }
324
+
325
+ @layer t-critical{
326
+ tds-page-header:not(.hydrated){
327
+ display:none;
328
+ }
329
+ }
330
+
331
+ @layer t-component{
332
+ .tds-page-header{
333
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
334
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
335
+ --tds-page-header-color:var(--t-text-color);
336
+ --tds-page-header-headline-color:var(--t-text-color-headline);
337
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
338
+ --tds-page-header-padding-x:var(--t-spacing-2);
339
+ --tds-page-header-padding-y:var(--t-spacing-2);
340
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
341
+ --tds-page-header-nav-gap:var(--t-spacing-1);
342
+ --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
343
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
344
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
345
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
346
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
347
+ --tds-page-header-nav-item-border-width:1px;
348
+
349
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
350
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
351
+
352
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
353
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
354
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
355
+
356
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
357
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
358
+
359
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
360
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
361
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
362
+
363
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
364
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
365
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
366
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
367
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
368
+ }
369
+
370
+ .tds-page-header--profile{
371
+ --tds-page-header-padding-y:20px;
372
+ }
373
+ @media (min-width: 600px){
374
+ .tds-page-header{
375
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
376
+ --tds-page-header-color:var(--t-text-color-secondary);
377
+ --tds-page-header-padding-x:var(--t-spacing-3);
378
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
379
+ --tds-page-header-nav-gap:var(--t-spacing-half);
380
+ --tds-page-header-nav-background:transparent;
381
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
382
+ --tds-page-header-nav-item-border-width:1px;
383
+ --tds-page-header-nav-item-color:var(--t-text-color);
384
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
385
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
386
+ }
387
+ }
388
+ }
389
+
390
+ .tds-page-header{
391
+ display:flex;
392
+ flex-direction:column;
393
+ padding-top:var(--tds-page-header-padding-y);
394
+ color:var(--tds-page-header-color);
395
+ background:var(--tds-page-header-background-color);
396
+ border-bottom:1px solid var(--t-border-color);
397
+ }
398
+
399
+ .tds-page-header:not(.has-nav){
400
+ padding-bottom:var(--tds-page-header-padding-y);
401
+ }
402
+
403
+ .tds-page-header.inactive{
404
+ background:var(--tds-page-header-background-color-inactive);
405
+ }
406
+
407
+ .tds-page-header__title-bar{
408
+ display:flex;
409
+ flex-direction:column;
410
+ gap:var(--t-spacing-2) var(--t-spacing-1);
411
+ align-items:flex-start;
412
+ justify-content:space-between;
413
+ padding:0 var(--tds-page-header-padding-x);
414
+ }
415
+
416
+ .tds-page-header--profile > .tds-page-header__title-bar{
417
+ align-items:center;
418
+ }
419
+
420
+ .tds-page-header__primary{
421
+ width:100%;
422
+ }
423
+
424
+ .tds-page-header__primary h1{
425
+ margin:0;
426
+ font-size:var(--tds-page-header-headline-font-size);
427
+ font-weight:var(--t-font-weight-normal);
428
+ line-height:32px;
429
+ color:var(--tds-page-header-headline-color);
430
+ overflow-wrap:break-word;
431
+ }
432
+
433
+ .tds-page-header [slot="actions"], .tds-page-header .tds-page-header__actions{
434
+ width:100%;
435
+ }
436
+
437
+ .has-multi-actions.tds-page-header [slot="actions"],
438
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
439
+ display:flex;
440
+ flex-flow:row wrap;
441
+ gap:var(--t-spacing-half) var(--t-spacing-1);
442
+ align-items:flex-start;
443
+ justify-content:flex-start;
444
+ min-width:0;
445
+ }
446
+
447
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
448
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
449
+ .tds-page-header nav[slot="navigation"] ul,
450
+ .tds-page-header nav.tds-page-header__nav ul{
451
+ display:flex;
452
+ gap:var(--tds-page-header-nav-gap);
453
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
454
+ margin:0 0 -1px;
455
+ overflow:auto;
456
+ list-style:none;
457
+ background:var(--tds-page-header-nav-background);
458
+ }
459
+
460
+ .tds-page-header nav[slot="navigation"] a,
461
+ .tds-page-header nav[slot="navigation"] button,
462
+ .tds-page-header nav.tds-page-header__nav a,
463
+ .tds-page-header nav.tds-page-header__nav button{
464
+ position:relative;
465
+ display:inline-flex;
466
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
467
+ font-size:var(--t-font-size-sm);
468
+ line-height:22px;
469
+ color:var(--tds-page-header-nav-item-color);
470
+ white-space:nowrap;
471
+ text-decoration:none;
472
+ -webkit-appearance:none;
473
+ -moz-appearance:none;
474
+ appearance:none;
475
+ cursor:pointer;
476
+ outline-offset:-2px;
477
+ background-color:var(--tds-page-header-nav-item-background-color);
478
+ background-clip:padding-box;
479
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
480
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
481
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
482
+ }
483
483
 
484
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
485
- position:absolute;
486
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
487
- z-index:-1;
488
- height:100%;
489
- content:"";
490
- background-color:var(--tds-sidenav-item-nested-background);
491
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
492
- transition:var(--tds-sidenav-item-transition);
493
- }
484
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
485
+ position:relative;
486
+ }
494
487
 
495
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
496
- display:block;
497
- text-align:left;
498
- white-space:normal;
499
- }
488
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
489
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
490
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
491
+ }
500
492
 
501
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
502
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
503
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
504
- }
493
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
494
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
495
+ position:absolute;
496
+ top:-5px;
497
+ right:-2px;
498
+ width:10px;
499
+ height:10px;
500
+ content:"";
501
+ background:var(--tds-page-header-nav-item-indicator-color);
502
+ border-radius:50%;
503
+ }
505
504
 
506
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
507
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
508
- }
505
+ @media (prefers-reduced-motion: no-preference){
506
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
507
+ animation:indicator-pulse 1.25s ease infinite;
508
+ }
509
+ }
509
510
 
510
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
511
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
512
- font-weight:var(--t-font-weight-medium);
513
- }
511
+ .tds-page-header nav[slot="navigation"] a.selected,
512
+ .tds-page-header nav[slot="navigation"] button.selected,
513
+ .tds-page-header nav.tds-page-header__nav a.selected,
514
+ .tds-page-header nav.tds-page-header__nav button.selected{
515
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
516
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
517
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
518
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
519
+ }
514
520
 
515
- .tds-sidenav-responsive-header{
516
- display:flex;
517
- gap:var(--t-spacing-2);
518
- align-items:center;
519
- width:100%;
521
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
522
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
523
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
524
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
525
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
526
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
527
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
520
528
  }
521
529
 
522
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
523
- order:0;
524
- }
530
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
531
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
532
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
533
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
534
+ background-color:var(--tds-page-header-nav-item-background-color-active);
535
+ }
525
536
 
526
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
527
- flex:1;
528
- order:1;
529
- margin:0;
530
- font-size:var(--t-font-size-lg);
531
- font-weight:var(--t-font-weight-medium);
532
- color:var(--t-text-color-headline);
533
- }
537
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
538
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
539
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
540
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
541
+ color:var(--tds-page-header-nav-item-color-disabled);
542
+ cursor:not-allowed;
543
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
544
+ opacity:1;
545
+ }
534
546
 
535
- @media (max-width: 719px){
536
- .tds-sidenav-collapse{
537
- z-index:10001;
538
- display:none;
539
- max-width:min(448px, calc(100vw - 48px));
540
- padding:0;
541
- margin:12px 0;
542
- overflow:hidden;
543
- outline:0;
544
- background:var(--t-surface-color-card);
545
- border:0;
546
- border-radius:6px;
547
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
548
- will-change:transform;
549
- position-area:bottom span-right;
547
+ @media (min-width: 960px){
548
+ .tds-page-header__primary{
549
+ flex:1 1 max-content;
550
+ width:auto;
551
+ min-width:0;
552
+ max-width:100%;
550
553
  }
551
554
 
552
- .tds-sidenav-scroll-container{
553
- --webkit-overflow-scrolling:touch;
554
- display:block;
555
- width:100%;
556
- height:-moz-fit-content;
557
- height:fit-content;
558
- padding:var(--t-spacing-2);
559
- overflow-y:auto;
555
+ .tds-page-header__title-bar,
556
+ .tds-page-header--profile .tds-page-header__title-bar{
557
+ flex-flow:row nowrap;
558
+ row-gap:12px;
559
+ align-items:flex-start;
560
560
  }
561
561
 
562
- .tds-sidenav-item :is(a, button) :is(.prefix){
563
- display:none;
564
- }
565
- @supports selector(:popover-open){
566
- .tds-sidenav-collapse:popover-open{
567
- display:flex;
568
- }
562
+ .tds-page-header [slot="actions"], .tds-page-header .tds-page-header__actions{
563
+ width:auto;
569
564
  }
570
- @supports not selector(:popover-open){
571
- .tds-sidenav-collapse.\:popover-open{
572
- display:flex;
573
- }
565
+
566
+ .has-multi-actions.tds-page-header [slot="actions"],
567
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
568
+ justify-content:flex-end;
574
569
  }
575
570
  }
576
571
 
577
- @media (min-width: 720px){
578
- .tds-sidenav-responsive-header{
579
- display:none;
580
- }
572
+ .tds-page-header-phone,
573
+ .tds-page-header-email{
574
+ color:var(--tds-page-header-color);
575
+ white-space:nowrap;
581
576
  }
582
577
 
583
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
584
- display:none;
585
- }
578
+ .tds-page-header-email{
579
+ max-width:100%;
580
+ overflow:hidden;
581
+ text-overflow:ellipsis;
582
+ }
586
583
 
587
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
588
- display:block;
589
- }
584
+ @keyframes indicator-pulse{
585
+ 0%{
586
+ opacity:.3;
587
+ transform:scale(.9);
588
+ }
590
589
 
591
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
592
- display:flex;
593
- flex-direction:column;
594
- }
590
+ 100%{
591
+ opacity:0;
592
+ transform:scale(1.75);
593
+ }
594
+ }
595
595
 
596
596
  .tds-loading-spinner{
597
597
  --tds-loading-spinner-size:1.25em;
@@ -1093,7 +1093,7 @@ a[class="tds-btn"]{
1093
1093
  --t-border-radius-lg:8px;
1094
1094
  --t-border-radius-xl:16px;
1095
1095
  --t-border-radius-round:56px;
1096
- --t-border-radius:4px;
1096
+ --t-border-radius:var(--t-border-radius-md);
1097
1097
  --t-border-width:1px;
1098
1098
  --t-border-width-thick:2px;
1099
1099
  --t-spacing-1:8px;
@@ -1206,8 +1206,8 @@ a[class="tds-btn"]{
1206
1206
  --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
1207
1207
  --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
1208
1208
  --t-fill-color-control:hsl(204, 100%, 40%);
1209
- --t-fill-color-control-secondary:hsl(97, 57%, 40%);
1210
1209
  --t-fill-color-control-error:hsl(8, 60%, 47%);
1210
+ --t-fill-color-control-secondary:hsl(97, 57%, 40%);
1211
1211
  --t-fill-color-control-disabled:hsl(0, 0%, 81%);
1212
1212
  --t-fill-color-status-neutral:hsl(0, 0%, 42%);
1213
1213
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
@@ -1405,9 +1405,9 @@ a[class="tds-btn"]{
1405
1405
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
1406
1406
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
1407
1407
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
1408
- --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
1409
- --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
1410
- --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
1408
+ --t-fill-color-button-neutral-responsive-header:var(--t-fill-color-transparency-dark-010);
1409
+ --t-fill-color-button-neutral-responsive-header-hover:var(--t-fill-color-transparency-dark-020);
1410
+ --t-fill-color-button-neutral-responsive-header-active:var(--t-fill-color-transparency-dark-030);
1411
1411
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
1412
1412
  --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
1413
1413
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
@@ -1464,8 +1464,8 @@ a[class="tds-btn"]{
1464
1464
  --t-fill-color-transparency-dark-static-070:hsla(0, 0%, 0%, 0.7);
1465
1465
  --t-fill-color-transparency-dark-static-080:hsla(0, 0%, 0%, 0.8);
1466
1466
  --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
1467
- --t-surface-color-card:hsl(0, 0%, 100%);
1468
- --t-surface-color-canvas:hsl(0, 0%, 100%);
1467
+ --t-surface-color-card:var(--t-fill-color-neutral-100);
1468
+ --t-surface-color-canvas:var(--t-fill-color-neutral-100);
1469
1469
  --t-border-color:hsl(0, 0%, 88%);
1470
1470
  --t-border-color-dark:hsl(0, 0%, 81%);
1471
1471
  --t-border-color-darker:hsl(0, 0%, 68%);
@@ -2057,35 +2057,28 @@ a[class="tds-btn"]{
2057
2057
  }
2058
2058
 
2059
2059
  .tds-checkbox{
2060
+ --tds-checkbox-font-size:var(--t-font-size-md);
2060
2061
  --tds-checkbox-column-gap:var(--t-spacing-1);
2061
2062
  --tds-checkbox-cursor:pointer;
2062
2063
  --tds-checkbox-line-height:1.4;
2063
2064
  --tds-checkbox-transition-property:background-color, border-color;
2064
2065
 
2065
2066
  --tds-checkbox-input-size:var(--t-element-size-md);
2066
- --tds-checkbox-input-border-radius:3px;
2067
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
2067
2068
  --tds-checkbox-input-border-color:var(--t-border-color-control-neutral);
2068
2069
  --tds-checkbox-input-background-color:transparent;
2069
- --tds-checkbox-input-border-color-hover:var(--t-border-color-button-info);
2070
- --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-hover);
2071
- --tds-checkbox-input-border-color-checked:var(--t-border-color-control-info);
2072
- --tds-checkbox-input-background-color-checked:var(--t-fill-color-control);
2073
- --tds-checkbox-input-border-color-disabled:var(--t-border-color-control-disabled);
2074
- --tds-checkbox-input-background-color-disabled:var(--t-fill-color-neutral-070);
2075
2070
 
2076
2071
  --tds-checkbox-input-icon:none;
2077
2072
  --tds-checkbox-input-icon-visibility:hidden;
2078
2073
  --tds-checkbox-input-icon-opacity:0;
2079
2074
  --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
2080
- --tds-checkbox-input-icon-checked:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2081
- --tds-checkbox-input-icon-indeterminate:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2082
2075
 
2083
- --tds-checkbox-font-size:var(--t-font-size-md);
2084
2076
  --tds-checkbox-label-color:var(--t-text-color);
2085
2077
 
2086
2078
  --tds-checkbox-description-font-size:var(--t-font-size-sm);
2087
2079
  --tds-checkbox-description-line-height:1.35;
2088
2080
  --tds-checkbox-description-color:var(--t-text-color-secondary);
2081
+ --tds-checkbox-description-invalid-icon-display:none;
2089
2082
 
2090
2083
  position:relative;
2091
2084
  display:inline-grid;
@@ -2146,9 +2139,9 @@ a[class="tds-btn"]{
2146
2139
  transform:translate(-50%, -50%);
2147
2140
  }
2148
2141
 
2149
- :is(.tds-checkbox input[type="checkbox"]):hover{
2150
- --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-hover);
2151
- --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-hover);
2142
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
2143
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2144
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2152
2145
  }
2153
2146
 
2154
2147
  :is(.tds-checkbox input[type="checkbox"]):focus-visible{
@@ -2156,45 +2149,82 @@ a[class="tds-btn"]{
2156
2149
  outline-offset:var(--t-spacing-fourth);
2157
2150
  }
2158
2151
 
2159
- :is(.tds-checkbox input[type="checkbox"]):checked,:is(.tds-checkbox input[type="checkbox"]):indeterminate{
2160
- --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-checked);
2161
- --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-checked);
2162
- --tds-checkbox-input-icon-visibility:visible;
2163
- --tds-checkbox-input-icon-opacity:1;
2164
- }
2165
-
2166
2152
  :is(.tds-checkbox input[type="checkbox"]):disabled{
2167
- --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-disabled);
2168
- --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-disabled);
2169
- --tds-checkbox-input-icon-fill:var(--t-icon-color-disabled);
2170
2153
  pointer-events:none;
2171
2154
  }
2172
2155
 
2173
- .tds-checkbox:has(input:disabled){
2174
- --tds-checkbox-label-color:var(--t-text-color-disabled);
2175
- --tds-checkbox-description-color:var(--t-text-color-disabled);
2176
- --tds-checkbox-cursor:not-allowed;
2177
- --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-disabled);
2178
- --tds-checkbox-input-border-color-checked:var(--tds-checkbox-input-border-color-disabled);
2156
+ @media (prefers-reduced-motion: reduce){
2157
+
2158
+ .tds-checkbox input[type="checkbox"]{
2159
+ --tds-checkbox-transition-property:none;
2160
+ }
2161
+ }
2162
+
2163
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
2164
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
2165
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
2166
+ --tds-checkbox-input-icon-visibility:visible;
2167
+ --tds-checkbox-input-icon-opacity:1;
2179
2168
  }
2180
2169
 
2170
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
2171
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2172
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
2173
+ }
2174
+
2181
2175
  .tds-checkbox:has(input:checked){
2182
- --tds-checkbox-input-icon:var(--tds-checkbox-input-icon-checked);
2176
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");;
2183
2177
  }
2184
2178
 
2185
- .tds-checkbox .tds-checkbox--indeterminate,.tds-checkbox:has(input:indeterminate){
2186
- --tds-checkbox-input-icon:var(--tds-checkbox-input-icon-indeterminate);
2179
+ .tds-checkbox:has(input:indeterminate){
2180
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2187
2181
  }
2188
2182
 
2189
- @media (prefers-reduced-motion: reduce){
2183
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
2184
+ --tds-checkbox-input-border-color:var(--t-border-color-control-error);
2185
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
2186
+ --tds-checkbox-description-invalid-icon-display:inline-block;
2187
+ }
2190
2188
 
2191
- .tds-checkbox{
2192
- --tds-checkbox-transition-property:none;
2193
- }
2189
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
2190
+ --tds-checkbox-input-border-color:var(--t-border-color-control-error);
2191
+ --tds-checkbox-input-background-color:var(--t-fill-color-status-error-dim);
2192
+ }
2193
+
2194
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
2195
+ --tds-checkbox-input-border-color:var(--t-fill-color-control-error);
2196
+ --tds-checkbox-input-background-color:var(--t-fill-color-control-error);
2197
+ }
2198
+
2199
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
2200
+ --tds-checkbox-input-border-color:hsl(9 60% 40%);
2201
+ --tds-checkbox-input-background-color:hsl(9 60% 40%);
2202
+ }
2203
+
2204
+ .tds-checkbox:has(input:required) label::after{
2205
+ margin-left:.25ch;
2206
+ color:var(--t-text-color-status-error);
2207
+ content:"*";
2208
+ }
2209
+
2210
+ .tds-checkbox:has(input:disabled){
2211
+ --tds-checkbox-input-background-color:var(--t-fill-color-neutral-070);
2212
+ --tds-checkbox-input-border-color:var(--t-border-color-control-disabled);
2213
+
2214
+ --tds-checkbox-label-color:var(--t-text-color-disabled);
2215
+ --tds-checkbox-description-color:var(--t-text-color-disabled);
2216
+ --tds-checkbox-cursor:not-allowed;
2194
2217
  }
2195
2218
 
2219
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
2220
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
2221
+ }
2222
+
2196
2223
  .tds-checkbox-description{
2224
+ display:flex;
2197
2225
  grid-area:description;
2226
+ gap:4px;
2227
+ align-items:center;
2198
2228
  margin:0;
2199
2229
  margin-top:var(--t-spacing-fourth);
2200
2230
  font-size:var(--tds-checkbox-description-font-size);
@@ -2203,22 +2233,10 @@ a[class="tds-btn"]{
2203
2233
  cursor:text;
2204
2234
  }
2205
2235
 
2206
- .tds-checkbox--invalid,
2207
- .tds-checkbox:has(input:invalid){
2208
- --tds-checkbox-input-border-color:var(--t-border-color-button-delete);
2209
- --tds-checkbox-input-border-color-hover:var(--t-border-color-button-delete);
2210
- --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-hover);
2211
- --tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid);
2212
- --tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid);
2213
- --tds-checkbox-description-color:var(--t-text-color-status-error);
2236
+ .tds-checkbox-description-invalid-icon{
2237
+ display:var(--tds-checkbox-description-invalid-icon-display);
2214
2238
  }
2215
2239
 
2216
- .tds-checkbox:has(input:required) label::after{
2217
- margin-left:.25ch;
2218
- color:var(--t-text-color-status-error);
2219
- content:"*";
2220
- }
2221
-
2222
2240
  .tds-checkbox--sm{
2223
2241
  --tds-checkbox-column-gap:6px;
2224
2242
  --tds-checkbox-line-height:1.35;