@planningcenter/tapestry 4.2.0-rc.8 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/components/button/ToggleButton.d.ts +52 -0
  2. package/dist/components/button/ToggleButton.d.ts.map +1 -0
  3. package/dist/components/button/ToggleButton.js +56 -0
  4. package/dist/components/button/ToggleButton.js.map +1 -0
  5. package/dist/components/button/ToggleIconButton.d.ts +17 -0
  6. package/dist/components/button/ToggleIconButton.d.ts.map +1 -0
  7. package/dist/components/button/ToggleIconButton.js +32 -0
  8. package/dist/components/button/ToggleIconButton.js.map +1 -0
  9. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  10. package/dist/components/combo-box/ComboBox.js +2 -2
  11. package/dist/components/combo-box/ComboBox.js.map +1 -1
  12. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  13. package/dist/components/date-picker/DatePicker.js +3 -3
  14. package/dist/components/date-picker/DatePicker.js.map +1 -1
  15. package/dist/components/internal/tooltip/Tooltip.d.ts.map +1 -1
  16. package/dist/components/internal/tooltip/Tooltip.js +1 -1
  17. package/dist/components/internal/tooltip/Tooltip.js.map +1 -1
  18. package/dist/components/number-stepper/NumberStepper.d.ts.map +1 -1
  19. package/dist/components/number-stepper/NumberStepper.js +2 -2
  20. package/dist/components/number-stepper/NumberStepper.js.map +1 -1
  21. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  22. package/dist/components/time-field/TimeField.js +2 -2
  23. package/dist/components/time-field/TimeField.js.map +1 -1
  24. package/dist/index.css +13 -2
  25. package/dist/index.css.map +1 -1
  26. package/dist/reactRender.css +1016 -1005
  27. package/dist/reactRender.css.map +1 -1
  28. package/dist/reactRenderLegacy.css +1016 -1005
  29. package/dist/reactRenderLegacy.css.map +1 -1
  30. package/dist/unstable.css +848 -837
  31. package/dist/unstable.css.map +1 -1
  32. package/dist/unstable.d.ts +3 -0
  33. package/dist/unstable.d.ts.map +1 -1
  34. package/dist/unstable.js +2 -0
  35. package/dist/unstable.js.map +1 -1
  36. package/package.json +2 -2
package/dist/unstable.css CHANGED
@@ -73,557 +73,531 @@
73
73
  --t-banner-spacing:calc(var(--t-spacing-half) + var(--t-spacing-1));
74
74
  }
75
75
 
76
- .tds-data-table{
77
- --tds-data-table-background-color:var(--t-surface-color-canvas);
78
- --tds-data-table-border-color:var(--t-border-color);
79
- --tds-data-table-column-background-color:var(--t-fill-color-neutral-090);
80
- --tds-data-table-cell-padding-inline:var(--t-spacing-2);
81
- --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
76
+ .symbol{
77
+ display:inline-block;
78
+ vertical-align:text-top;
79
+ fill:currentColor;
80
+ height:1em;
81
+ width:1em;
82
82
  }
83
- .tds-data-table-frame{
84
- overflow:hidden;
85
83
 
86
- border:1px solid var(--tds-data-table-border-color);
87
- border-radius:var(--t-border-radius);
88
- }
89
- .tds-data-table-frame-header{
90
- display:flex;
91
- gap:var(--t-spacing-1-half);
84
+ .tds-btn{
85
+ --tds-btn-padding-x:12px;
86
+ --tds-btn-padding-truncated-x:8px;
87
+ --tds-btn-padding-y:3px;
88
+ --tds-btn-font-size:16px;
89
+ --tds-btn-font-weight:400;
90
+ --tds-btn-line-height:1.5;
91
+ --tds-btn-color:var(--t-text-color-headline);
92
+ --tds-btn-bg:transparent;
93
+ --tds-btn-border-width:var(--t-border-width);
94
+ --tds-btn-border-color:transparent;
95
+ --tds-btn-border-radius:var(--t-border-radius-md);
96
+ --tds-btn-border-color-hover:transparent;
97
+ --tds-btn-disabled-opacity:1;
98
+ --tds-btn-min-height:32px;
99
+ --tds-btn-text-decoration:none;
100
+ --tds-btn-attention-icon-size:1em;
101
+ display:inline-flex;
102
+ gap:1ex;
92
103
  align-items:center;
93
- padding-block:var(--tds-data-table-cell-padding-block);
94
- padding-inline:var(--tds-data-table-cell-padding-inline);
104
+ justify-content:center;
105
+ width:auto;
106
+ min-height:var(--tds-btn-min-height);
107
+ padding:var(--tds-btn-padding-y) var(--tds-btn-padding-x);
108
+ font-size:var(--tds-btn-font-size);
109
+ font-weight:var(--tds-btn-font-weight);
110
+ line-height:var(--tds-btn-line-height);
111
+ vertical-align:middle;
112
+ color:var(--tds-btn-color);
113
+ text-align:center;
114
+ -webkit-text-decoration:var(--tds-btn-text-decoration);
115
+ text-decoration:var(--tds-btn-text-decoration);
116
+ cursor:pointer;
117
+ -webkit-user-select:none;
118
+ -moz-user-select:none;
119
+ user-select:none;
120
+ background-color:var(--tds-btn-bg);
121
+ background-clip:padding-box;
122
+ border:var(--tds-btn-border-width) solid var(--tds-btn-border-color);
123
+ border-radius:var(--tds-btn-border-radius);
124
+ transition-timing-function:var(--t-ease-in-out);
125
+ transition-duration:var(--t-duration-200);
126
+ transition-property:color, background-color, border-color, box-shadow, fill, stroke, opacity;
95
127
  }
96
128
 
97
- .tds-data-table-results-count{
98
- margin:0;
99
- font-size:var(--t-font-size-md);
100
- line-height:1;
101
- color:var(--t-text-color-secondary);
102
- }
103
- .tds-data-table-scroll-wrapper{
104
- position:relative;
105
- overflow:hidden;
106
- background-color:var(--tds-data-table-column-background-color);
107
- }
108
- .tds-data-table-scroll-wrapper:not(:first-child){
109
- border-top:1px solid var(--tds-data-table-border-color);
129
+ .tds-btn:where(.tds-btn--icononly,.tds-btn--prefix){
130
+ padding-left:var(--tds-btn-padding-truncated-x);
110
131
  }
111
- .tds-data-table-scroll{
112
- overflow-x:auto;
113
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
114
- }
115
- @supports (animation-timeline: scroll()){
116
- .tds-data-table--sticky-header .tds-data-table-scroll-wrapper{
117
- overflow:clip;
118
- }
119
132
 
120
- .tds-data-table--sticky-header .tds-data-table-scroll{
121
- overflow-y:clip;
122
- }
133
+ .tds-btn:where(.tds-btn--icononly,.tds-btn--suffix){
134
+ padding-right:var(--tds-btn-padding-truncated-x);
135
+ }
123
136
 
124
- .tds-data-table--sticky-header .tds-data-table-header{
125
- z-index:1;
126
- animation-name:tds-data-table-sticky-header;
127
- animation-duration:auto;
128
- animation-timing-function:linear;
129
- animation-fill-mode:both;
130
- animation-timeline:--_sticky-header-scroll;
131
- animation-range:var(--_sticky-header-scroll-start, 0) calc(var(--_sticky-header-scroll-start, 0) + var(--_sticky-header-scroll-max, 0));
132
- }
137
+ .tds-btn.tds-btn--icononly,.tds-btn.tds-btn--prefix{
138
+ padding-left:var(--tds-btn-padding-truncated-x);
139
+ }
133
140
 
134
- @keyframes tds-data-table-sticky-header{
135
- from{ transform:translateY(0); }
136
- to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
141
+ .tds-btn.tds-btn--icononly,.tds-btn.tds-btn--suffix{
142
+ padding-right:var(--tds-btn-padding-truncated-x);
137
143
  }
138
- }
139
- @supports (timeline-scope: --tds){
140
- .tds-data-table-scroll-wrapper{
141
- --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
142
144
 
143
- timeline-scope:--tds-data-table-scroll-timeline;
145
+ .tds-btn:hover{
146
+ color:var(--tds-btn-color-hover);
147
+ background-color:var(--tds-btn-bg-hover);
148
+ border-color:var(--tds-btn-border-color-hover);
144
149
  }
145
- .tds-data-table-scroll-wrapper:has(.tds-data-table-column--actions)::after{
146
- content:none;
147
- }
148
150
 
149
- .tds-data-table-scroll{
150
- scroll-timeline:--tds-data-table-scroll-timeline inline;
151
+ .tds-btn:focus-visible{
152
+ color:var(--tds-btn-color-hover);
153
+ outline:var(--t-focus-ring-outline);
154
+ outline-offset:var(--t-focus-ring-offset);
155
+ background-color:var(--tds-btn-bg-hover);
156
+ border-color:var(--tds-btn-border-color-hover);
151
157
  }
152
- .tds-data-table-scroll-wrapper::before,
153
- .tds-data-table-scroll-wrapper::after,
154
- .tds-data-table-column--actions::before,
155
- .tds-data-table-cell--actions::before{
156
- position:absolute;
157
- inset-block:0;
158
- z-index:1;
159
- width:var(--tds-data-table-scroll-shadow-size);
160
- pointer-events:none;
161
- content:"";
162
- opacity:0;
163
- animation-name:tds-data-table-scroll-shadow;
164
- animation-duration:auto;
165
- animation-timeline:--tds-data-table-scroll-timeline;
166
- animation-timing-function:linear;
167
- animation-fill-mode:both;
158
+
159
+ .tds-btn:active,.tds-btn.active{
160
+ color:var(--tds-btn-color-active);
161
+ background-color:var(--tds-btn-bg-active);
162
+ border-color:var(--tds-btn-border-color-active);
168
163
  }
169
164
 
170
- .tds-data-table-scroll-wrapper::before{
171
- inset-inline-start:0;
172
- background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
173
- animation-range:0 var(--tds-data-table-scroll-shadow-size);
165
+ .tds-btn[aria-pressed="true"]{
166
+ color:var(--tds-btn-color-active);
167
+ background-color:var(--tds-btn-bg-active);
168
+ border-color:var(--tds-btn-border-color-active);
174
169
  }
175
170
 
176
- .tds-data-table-scroll-wrapper::after,
177
- .tds-data-table-column--actions::before,
178
- .tds-data-table-cell--actions::before{
179
- background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
180
- animation-direction:reverse;
181
- animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
171
+ .tds-btn[aria-pressed="true"]:hover,.tds-btn[aria-pressed="true"]:focus-visible{
172
+ background-color:hsl(from var(--tds-btn-bg-active) h s calc(l - 5));
173
+ border-color:hsl(from var(--tds-btn-border-color-active) h s calc(l - 5));
174
+ }
175
+
176
+ .tds-btn:disabled,.tds-btn.disabled{
177
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-dark-020);
178
+ --tds-btn-loading-spinner-color:var(--t-text-color-status-neutral);
179
+ color:var(--tds-btn-color-disabled);
180
+ pointer-events:none;
181
+ background-color:var(--tds-btn-bg-disabled);
182
+ border-color:var(--tds-btn-border-color-disabled);
183
+ opacity:var(--tds-btn-disabled-opacity);
182
184
  }
183
185
 
184
- .tds-data-table-scroll-wrapper::after{
185
- inset-inline-end:0;
186
+ .tds-btn svg:not(.symbol){
187
+ display:block;
188
+ width:.66666667lh;
189
+ height:.66666667lh;
190
+ color:var(--tds-btn-icon-color, currentColor);
186
191
  }
187
192
 
188
- .tds-data-table-column--actions::before,
189
- .tds-data-table-cell--actions::before{
190
- inset-inline-start:calc(-1 * var(--tds-data-table-scroll-shadow-size));
193
+ .tds-btn .tds-loading-spinner{
194
+ --tds-loading-spinner-track-color:var(--tds-btn-loading-spinner-track-color);
195
+ --tds-loading-spinner-track-width:var(--tds-btn-loading-spinner-track-width);
196
+ --tds-loading-spinner-color:var(--tds-btn-loading-spinner-color);
197
+ --tds-loading-spinner-visibility:var(--tds-btn-loading-spinner-visibility);
198
+ --tds-loading-spinner-animation-play-state:var(--tds-btn-loading-spinner-animation-play-state);
191
199
  }
192
200
 
193
- @keyframes tds-data-table-scroll-shadow{
194
- from{ opacity:0; }
195
- to{ opacity:1; }
201
+ @media (prefers-reduced-motion: reduce){
202
+
203
+ .tds-btn{
204
+ transition:none;
205
+ }
196
206
  }
207
+ .tds-btn--xl{
208
+ --tds-btn-padding-y:11px;
209
+ --tds-btn-padding-x:18px;
210
+ --tds-btn-padding-truncated-x:12px;
211
+ --tds-btn-min-height:48px;
197
212
  }
198
- .tds-data-table-grid{
199
- width:100%;
200
- font-size:var(--t-font-size-md);
201
- color:var(--t-text-color);
202
- border-spacing:0;
203
- border-collapse:separate;
204
- background-color:var(--tds-data-table-background-color);
213
+ .tds-btn--lg{
214
+ --tds-btn-padding-y:7px;
215
+ --tds-btn-padding-x:14px;
216
+ --tds-btn-min-height:40px;
205
217
  }
206
- .tds-data-table-grid th,.tds-data-table-grid td{
207
- white-space:nowrap;
208
- }
209
- .tds-data-table-column{
210
- padding:var(--tds-data-table-cell-padding-block);
211
- padding-inline:var(--tds-data-table-cell-padding-inline);
212
- font-weight:var(--t-font-weight-medium);
213
- color:var(--t-text-color-secondary);
214
- cursor:default;
215
- background-color:var(--tds-data-table-column-background-color);
216
- border-top:0;
217
- border-bottom:1px solid var(--tds-data-table-border-color);
218
+ .tds-btn--sm{
219
+ --tds-btn-padding-y:.5px;
220
+ --tds-btn-padding-x:7px;
221
+ --tds-btn-padding-truncated-x:4px;
222
+ --tds-btn-min-height:24px;
223
+ --tds-btn-font-size:var(--t-font-size-sm);
224
+ --tds-btn-loading-spinner-track-width:3px;
225
+ }
226
+ .tds-btn--xs{
227
+ --tds-btn-padding-y:0;
228
+ --tds-btn-padding-x:5px;
229
+ --tds-btn-padding-truncated-x:5px;
230
+ --tds-btn-min-height:20px;
231
+ --tds-btn-font-size:var(--t-font-size-xs);
232
+ --tds-btn-loading-spinner-track-width:3px;
218
233
  }
219
- .tds-data-table-column[data-allows-sorting="true"]{
220
- --_sort-icon-color:var(--t-text-color-disabled);
221
- --_sort-icon-opacity:.5;
222
- --_sort-icon-rotate:0;
223
- cursor:pointer;
224
- }
225
- .tds-data-table-column[data-allows-sorting="true"][data-hovered]{
226
- --_sort-icon-opacity:1;
227
- }
228
- .tds-data-table-column[data-sort-direction]{
229
- --_sort-icon-color:inherit;
230
- --_sort-icon-opacity:1;
231
- }
232
- .tds-data-table-column[data-sort-direction="descending"]{
233
- --_sort-icon-rotate:.5turn;
234
- }
235
234
 
236
- .tds-data-table-column-icon{
237
- margin-inline-start:var(--t-spacing-1);
238
- }
239
- .tds-data-table-column-icon--sort{
240
- color:var(--_sort-icon-color);
241
- opacity:var(--_sort-icon-opacity);
242
- transform:translateY(1px) rotate(var(--_sort-icon-rotate));
243
- transition-timing-function:var(--t-ease-in-out);
244
- transition-duration:var(--t-duration-300);
245
- transition-property:color, opacity, transform;
246
- }
247
-
248
- .tds-data-table-column-label--hidden,
249
- .tds-data-table-cell-label--hidden,
250
- .tds-data-table-results-count-label--hidden{
251
- position:absolute;
252
- width:1px;
253
- height:1px;
254
- overflow:hidden;
255
- white-space:nowrap;
256
- clip-path:inset(50%);
257
- }
258
- .tds-data-table-cell{
259
- padding:var(--tds-data-table-cell-padding-block);
260
- padding-inline:var(--tds-data-table-cell-padding-inline);
261
- border-bottom:1px solid var(--tds-data-table-border-color);
262
- }
263
- .tds-data-table-row:last-of-type .tds-data-table-cell{
264
- border-bottom-width:0;
265
- }
266
- .tds-data-table-row--interactive{
267
- --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
268
- cursor:default;
269
- }
270
- .tds-data-table-row--interactive[data-hovered],.tds-data-table-row--interactive[data-hovered] .tds-data-table-cell--actions{
271
- background-color:var(--tds-data-table-row-background-hover);
272
- }
273
- .tds-data-table-row--interactive[data-focus-visible]{
274
- outline:var(--t-focus-ring-outline);
275
- outline-offset:calc(-1 * var(--t-focus-ring-width));
276
- }
277
-
278
- .tds-data-table-empty{
279
- padding:var(--tds-data-table-cell-padding-block);
280
- padding-inline:var(--tds-data-table-cell-padding-inline);
281
- text-align:center;
282
- white-space:normal;
235
+ .tds-btn--neutral{
236
+ --tds-btn-color:var(--t-text-color-status-neutral);
237
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
238
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
239
+ --tds-btn-color-hover:var(--t-text-color-status-neutral);
240
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
241
+ --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
242
+ --tds-btn-color-active:var(--t-text-color-status-neutral);
243
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
244
+ --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
245
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
246
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
247
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
283
248
  }
284
249
 
285
- .tds-data-table-loading{
286
- display:flex;
287
- align-items:center;
288
- justify-content:center;
289
- padding:var(--tds-data-table-cell-padding-block);
290
- padding-inline:var(--tds-data-table-cell-padding-inline);
250
+ .tds-btn--neutral-inline{
251
+ --tds-btn-color:var(--t-text-color-status-neutral);
252
+ --tds-btn-bg:transparent;
253
+ --tds-btn-border-color:transparent;
254
+ --tds-btn-color-hover:var(--t-text-color-status-neutral);
255
+ --tds-btn-bg-hover:transparent;
256
+ --tds-btn-border-color-hover:transparent;
257
+ --tds-btn-padding-y:0;
258
+ --tds-btn-padding-x:0;
259
+ --tds-btn-min-height:auto;
260
+ --tds-btn-text-decoration:none;
261
+ --tds-btn-border-width:0;
262
+ --tds-btn-font-size:inherit;
263
+ --tds-btn-font-weight:inherit;
264
+ --tds-btn-line-height:inherit;
265
+ font-family:inherit;
266
+ font-style:inherit;
267
+ vertical-align:inherit;
291
268
  }
292
269
 
293
- @keyframes tds-data-table-loading-fade-in{
294
- from{
295
- opacity:0;
270
+ .tds-btn--neutral-inline:hover,.tds-btn--neutral-inline:focus-visible{
271
+ --tds-btn-text-decoration:underline;
296
272
  }
297
273
 
298
- to{
299
- opacity:1;
300
- }
274
+ .tds-btn--interaction{
275
+ --tds-btn-color:var(--t-text-color-inverted);
276
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
277
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
278
+ --tds-btn-color-hover:var(--t-text-color-inverted);
279
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
280
+ --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
281
+ --tds-btn-color-active:var(--t-text-color-inverted);
282
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
283
+ --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
284
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
285
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
286
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
287
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
301
288
  }
302
- .tds-data-table-loading-spinner{
303
- --tds-loading-spinner-size:48px;
304
- --tds-loading-spinner-track-width:6px;
305
- --tds-loading-spinner-visibility:visible;
306
- --tds-loading-spinner-animation-play-state:running;
307
289
 
308
- position:relative;
309
- display:block;
310
- width:var(--tds-loading-spinner-size);
311
- height:var(--tds-loading-spinner-size);
312
- margin-block:min(calc(var(--tds-loading-spinner-size) * 1.25), 25vh);
313
- opacity:0;
314
- animation-name:tds-data-table-loading-fade-in;
315
- animation-duration:1s;
316
- animation-timing-function:ease-in-out;
317
- animation-fill-mode:forwards;
290
+ .tds-btn--delete{
291
+ --tds-btn-color:var(--t-text-color-inverted);
292
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid);
293
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid);
294
+ --tds-btn-color-hover:var(--t-text-color-inverted);
295
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
296
+ --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
297
+ --tds-btn-color-active:var(--t-text-color-inverted);
298
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
299
+ --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
300
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
301
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
302
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
303
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
318
304
  }
319
- .tds-data-table-loading-spinner .tds-loading-spinner{
320
- inset:0;
321
- }
322
- @media (prefers-reduced-motion: reduce){
323
- .tds-data-table-loading-spinner{
324
- --tds-loading-spinner-animation-play-state:paused;
325
305
 
326
- opacity:1;
327
- animation:none;
328
- }
329
- }
330
- .tds-data-table-column,
331
- .tds-data-table-cell{
332
- text-align:start;
306
+ .tds-btn--outline-neutral{
307
+ --tds-btn-color:var(--t-text-color-status-neutral);
308
+ --tds-btn-bg:var(--t-fill-color-button-neutral-outline);
309
+ --tds-btn-border-color:var(--t-border-color-button-neutral);
310
+ --tds-btn-color-hover:var(--tds-btn-color);
311
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
312
+ --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
313
+ --tds-btn-color-active:var(--tds-btn-color);
314
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
315
+ --tds-btn-border-color-active:var(--t-border-color-button-neutral);
316
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
317
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
318
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
333
319
  }
334
320
 
335
- .tds-data-table-column--align-center,
336
- .tds-data-table-cell--align-center{
337
- text-align:center;
321
+ .tds-btn--outline-interaction{
322
+ --tds-btn-color:var(--t-text-color-interaction);
323
+ --tds-btn-bg:var(--t-fill-color-button-interaction-outline);
324
+ --tds-btn-border-color:var(--t-border-color-button-info);
325
+ --tds-btn-color-hover:var(--tds-btn-color);
326
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
327
+ --tds-btn-border-color-hover:var(--tds-btn-border-color);
328
+ --tds-btn-color-active:var(--tds-btn-color);
329
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
330
+ --tds-btn-border-color-active:var(--tds-btn-border-color);
331
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
332
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
333
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
334
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
338
335
  }
339
336
 
340
- .tds-data-table-column--align-end,
341
- .tds-data-table-cell--align-end{
342
- text-align:end;
337
+ .tds-btn--outline-delete{
338
+ --tds-btn-color:var(--t-text-color-status-error);
339
+ --tds-btn-bg:var(--t-fill-color-button-delete-outline);
340
+ --tds-btn-border-color:var(--t-border-color-button-delete);
341
+ --tds-btn-color-hover:var(--tds-btn-color);
342
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
343
+ --tds-btn-border-color-hover:var(--tds-btn-border-color);
344
+ --tds-btn-color-active:var(--tds-btn-color);
345
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
346
+ --tds-btn-border-color-active:var(--tds-btn-border-color);
347
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
348
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
349
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
350
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
343
351
  }
344
352
 
345
- .tds-data-table-cell--numeric{
346
- font-variant-numeric:tabular-nums;
353
+ .tds-btn--ghost-neutral{
354
+ --tds-btn-color:var(--t-text-color-status-neutral);
355
+ --tds-btn-border-color:transparent;
356
+ --tds-btn-color-hover:var(--tds-btn-color);
357
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
358
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
359
+ --tds-btn-color-active:var(--tds-btn-color);
360
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
361
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
362
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
363
+ --tds-btn-bg-disabled:transparent;
364
+ --tds-btn-border-color-disabled:transparent;
347
365
  }
348
366
 
349
- .tds-data-table-column--selectable,
350
- .tds-data-table-cell--selectable{
351
- width:var(--t-element-size-md);
352
- text-align:center;
353
- }
354
- .tds-data-table-column--actions,
355
- .tds-data-table-cell--actions{
356
- position:sticky;
357
- inset-inline-end:0;
358
- width:1%;
359
- text-align:right;
367
+ .tds-btn--ghost-interaction{
368
+ --tds-btn-color:var(--t-text-color-interaction);
369
+ --tds-btn-border-color:transparent;
370
+ --tds-btn-color-hover:var(--tds-btn-color);
371
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
372
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
373
+ --tds-btn-color-active:var(--tds-btn-color);
374
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
375
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
376
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
377
+ --tds-btn-bg-disabled:transparent;
378
+ --tds-btn-border-color-disabled:transparent;
379
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
360
380
  }
361
381
 
362
- .tds-data-table-cell--actions{
363
- padding-inline:var(--tds-data-table-cell-padding-block);
364
- background-color:var(--tds-data-table-background-color);
382
+ .tds-btn--ghost-delete{
383
+ --tds-btn-color:var(--t-text-color-status-error);
384
+ --tds-btn-border-color:transparent;
385
+ --tds-btn-color-hover:var(--tds-btn-color);
386
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
387
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
388
+ --tds-btn-color-active:var(--tds-btn-color);
389
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
390
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
391
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
392
+ --tds-btn-bg-disabled:transparent;
393
+ --tds-btn-border-color-disabled:transparent;
394
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
365
395
  }
366
- .tds-data-table-selectable-checkbox{
367
- --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
368
- --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
369
- --tds-data-table-selectable-checkbox-border-radius:var(--t-border-radius-sm);
370
- --tds-data-table-selectable-checkbox-cursor:pointer;
371
- --tds-data-table-selectable-checkbox-size:var(--t-element-size-md);
372
- --tds-data-table-selectable-checkbox-transition-property:background-color, border-color;
373
396
 
374
- --tds-data-table-selectable-checkbox-icon:none;
375
- --tds-data-table-selectable-checkbox-icon-visibility:hidden;
376
- --tds-data-table-selectable-checkbox-icon-opacity:0;
377
- --tds-data-table-selectable-checkbox-icon-fill:var(--t-icon-color-inverted);
378
-
379
- position:relative;
380
- display:block;
381
- width:var(--tds-data-table-selectable-checkbox-size);
382
- height:var(--tds-data-table-selectable-checkbox-size);
383
- margin:0;
384
- cursor:var(--tds-data-table-selectable-checkbox-cursor);
385
- background-color:var(--tds-data-table-selectable-checkbox-background-color);
386
- border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
387
- border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
388
- transition-timing-function:var(--t-ease-in-out);
389
- transition-duration:var(--t-duration-200);
390
- transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
391
- }
392
- .tds-data-table-selectable-checkbox::after{
393
- position:absolute;
394
- inset:calc(-1 * var(--tds-data-table-cell-padding-block)) calc(-1 * var(--tds-data-table-cell-padding-inline));
395
- content:"";
396
- }
397
- .tds-data-table-selectable-checkbox::before{
398
- position:absolute;
399
- inset:0;
400
- visibility:var(--tds-data-table-selectable-checkbox-icon-visibility);
401
- content:"";
402
- background-color:var(--tds-data-table-selectable-checkbox-icon-fill);
403
- border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
404
- opacity:var(--tds-data-table-selectable-checkbox-icon-opacity);
405
- -webkit-mask-image:var(--tds-data-table-selectable-checkbox-icon);
406
- mask-image:var(--tds-data-table-selectable-checkbox-icon);
407
- -webkit-mask-repeat:no-repeat;
408
- mask-repeat:no-repeat;
409
- -webkit-mask-size:contain;
410
- mask-size:contain;
411
- }
412
- .tds-data-table-selectable-checkbox[data-hovered],.tds-data-table-row--press-selects[data-hovered] .tds-data-table-selectable-checkbox:not([data-disabled]){
413
- --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
414
- --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-button-interaction-outline-hover);
415
- }
416
- .tds-data-table-selectable-checkbox[data-focus-visible]{
417
- outline:var(--t-focus-ring-outline);
418
- outline-offset:var(--t-focus-ring-offset);
419
- }
420
- .tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]{
421
- --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-control);
422
- --tds-data-table-selectable-checkbox-border-color:var(--t-border-color-control-info);
423
- --tds-data-table-selectable-checkbox-icon-visibility:visible;
424
- --tds-data-table-selectable-checkbox-icon-opacity:1;
425
- }
426
- [data-hovered]:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]),.tds-data-table-row--press-selects[data-hovered] :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]):not([data-disabled]){
427
- --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
428
- --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-interaction-hover);
429
- }
430
- .tds-data-table-selectable-checkbox[data-selected]{
431
- --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
432
- }
433
- .tds-data-table-selectable-checkbox[data-indeterminate]{
434
- --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
435
- }
436
- .tds-data-table-selectable-checkbox[data-disabled]{
437
- --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color-disabled);
438
- --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color-disabled);
439
- --tds-data-table-selectable-checkbox-cursor:not-allowed;
440
- }
441
- .tds-data-table-selectable-checkbox[data-disabled][data-selected],.tds-data-table-selectable-checkbox[data-disabled][data-indeterminate]{
442
- --tds-data-table-selectable-checkbox-background-color:var(--t-border-color-control-disabled);
443
- }
444
- @media (prefers-reduced-motion: reduce){
445
- .tds-data-table-selectable-checkbox{
446
- --tds-data-table-selectable-checkbox-transition-property:none;
397
+ .tds-btn--inline-text{
398
+ --tds-btn-color:var(--t-text-color-interaction);
399
+ --tds-btn-color-hover:var(--t-text-color-interaction-hover);
400
+ --tds-btn-color-active:var(--t-text-color-interaction-active);
401
+ --tds-btn-bg:transparent;
402
+ --tds-btn-bg-hover:transparent;
403
+ --tds-btn-padding-y:0;
404
+ --tds-btn-padding-x:0;
405
+ --tds-btn-min-height:auto;
406
+ --tds-btn-text-decoration:underline;
407
+ --tds-btn-border-width:0;
408
+ --tds-btn-border-color:transparent;
409
+ --tds-btn-font-size:inherit;
410
+ --tds-btn-font-weight:inherit;
411
+ --tds-btn-line-height:inherit;
412
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
413
+ font-family:inherit;
414
+ font-style:inherit;
415
+ vertical-align:inherit;
416
+ text-align:inherit;
417
+ -webkit-user-select:auto;
418
+ -moz-user-select:auto;
419
+ user-select:auto;
447
420
  }
421
+
422
+ .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible{
423
+ --tds-btn-text-decoration:none;
448
424
  }
449
425
 
450
- .tds-loading-spinner{
451
- position:absolute;
452
- right:0;
453
- left:0;
454
- visibility:var(--tds-loading-spinner-visibility, hidden);
455
- width:var(--tds-loading-spinner-size, 1.25em);
456
- height:var(--tds-loading-spinner-size, 1.25em);
457
- margin:auto;
458
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
459
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
460
- border-radius:50%;
461
- animation:spinner-rotate 500ms infinite linear;
462
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
426
+ .tds-btn--primary-page-header{
427
+ --tds-btn-color:var(--t-text-color-inverted);
428
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
429
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
430
+ --tds-btn-color-hover:var(--t-text-color-inverted);
431
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
432
+ --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
433
+ --tds-btn-color-active:var(--t-text-color-inverted);
434
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
435
+ --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
436
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
437
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
438
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
439
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
463
440
  }
464
441
 
465
- @keyframes spinner-rotate{
466
- to{
467
- transform:rotate(360deg);
468
- }
442
+ .tds-btn--secondary-page-header{
443
+ --tds-btn-color:var(--t-text-color-status-neutral);
444
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
445
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
446
+ --tds-btn-color-hover:var(--t-text-color-status-neutral);
447
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
448
+ --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
449
+ --tds-btn-color-active:var(--t-text-color-status-neutral);
450
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
451
+ --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
452
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
453
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
454
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
469
455
  }
470
456
 
471
- @media (prefers-reduced-motion: reduce){
472
- [class*="--loading"] .tds-loading-spinner{
473
- --tds-loading-spinner-animation-play-state:paused;
457
+ @media (min-width: 600px){
458
+
459
+ .tds-btn--secondary-page-header{
460
+ --tds-btn-color:var(--t-text-color-status-neutral);
461
+ --tds-btn-bg:transparent;
462
+ --tds-btn-border-color:var(--t-border-color-button-neutral);
463
+ --tds-btn-color-hover:var(--tds-btn-color);
464
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
465
+ --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
466
+ --tds-btn-color-active:var(--tds-btn-color);
467
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
468
+ --tds-btn-border-color-active:var(--t-border-color-button-neutral);
469
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
470
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
471
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
472
+ }
474
473
  }
474
+
475
+ .tds-btn--staff-only{
476
+ --tds-btn-color:var(--t-text-color-inverted);
477
+ --tds-btn-bg:var(--t-fill-color-product-staff);
478
+ --tds-btn-border-color:var(--t-border-color-white);
479
+ --tds-btn-color-hover:var(--t-text-color-inverted);
480
+ --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
481
+ --tds-btn-border-color-hover:var(--t-border-color-white);
482
+ --tds-btn-color-active:var(--t-text-color-inverted);
483
+ --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
484
+ --tds-btn-border-color-active:var(--t-border-color-white);
485
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
486
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
487
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
488
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
475
489
  }
476
490
 
477
- .tds-tooltip{
478
- --tds-tooltip-arrow-depth:var(--tds-tooltip-arrow-depth-raw);
479
- --tds-tooltip-arrow-size:var(--tds-tooltip-arrow-size-raw);
480
- --tds-tooltip-visibility:hidden;
491
+ .tds-btn--pill{
492
+ --tds-btn-border-radius:999px;
493
+ --tds-btn-padding-y:4px;
494
+ --tds-btn-padding-x:13px;
481
495
 
482
- display:flex;
483
- visibility:var(--tds-tooltip-visibility);
484
- flex-direction:column;
485
- align-items:flex-start;
486
- max-inline-size:15rem;
487
- padding:var(--t-spacing-half) var(--t-spacing-1);
488
- font-size:var(--t-font-size-sm);
489
- color:var(--t-text-color-inverted);
490
- background:var(--t-fill-color-tooltip);
491
- border-radius:var(--t-border-radius-md);
492
- box-shadow:0 2px 4px 0 rgba(0, 0, 0, .15);
496
+ --tds-btn-color:var(--t-text-color);
497
+ --tds-btn-bg:var(--t-fill-color-button-pill);
498
+ --tds-btn-border-color:var(--tds-btn-bg);
499
+ --tds-btn-color-hover:var(--tds-btn-color);
500
+ --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
501
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
502
+
503
+ --tds-btn-color-active:var(--tds-btn-color);
504
+ --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
505
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
506
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
507
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
508
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
509
+ --tds-btn-icon-color:var(--t-icon-color-secondary);
510
+ --tds-btn-min-height:32px;
493
511
  }
494
512
 
495
- .tds-tooltip[data-placement="top"]{
496
- --tds-tooltip-arrow-top:100%;
497
- --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-size);
498
- --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-depth);
499
- --tds-tooltip-arrow-translate:translateX(-50%);
500
- --tds-tooltip-arrow-rotate:rotate(180deg);
513
+ .tds-btn--pill:is(.tds-btn--sm){
514
+ --tds-btn-padding-y:1px;
515
+ --tds-btn-padding-x:7px;
516
+ --tds-btn-min-height:auto;
501
517
  }
502
518
 
503
- .tds-tooltip[data-placement="bottom"]{
504
- --tds-tooltip-arrow-bottom:100%;
505
- --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-size);
506
- --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-depth);
507
- --tds-tooltip-arrow-translate:translateX(-50%);
508
- --tds-tooltip-arrow-rotate:rotate(0deg);
519
+ .tds-btn--pill:is(.tds-btn--xs){
520
+ --tds-btn-padding-y:1px;
521
+ --tds-btn-padding-x:9px;
522
+ --tds-btn-min-height:auto;
509
523
  }
510
524
 
511
- .tds-tooltip[data-placement="left"]{
512
- --tds-tooltip-arrow-left:100%;
513
- --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-depth);
514
- --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-size);
515
- --tds-tooltip-arrow-translate:translateY(-50%);
516
- --tds-tooltip-arrow-rotate:rotate(90deg);
525
+ .tds-btn--pill:disabled,.tds-btn--pill.disabled{
526
+ --tds-btn-icon-color:inherit;
517
527
  }
518
528
 
519
- .tds-tooltip[data-placement="right"]{
520
- --tds-tooltip-arrow-right:100%;
521
- --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-depth);
522
- --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-size);
523
- --tds-tooltip-arrow-translate:translateY(-50%);
524
- --tds-tooltip-arrow-rotate:rotate(-90deg);
525
- }
529
+ .tds-btn--dropdown .suffix{
530
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
531
+ }
526
532
 
527
- .tds-tooltip--open{
528
- --tds-tooltip-visibility:visible;
533
+ .tds-btn--dropdown[aria-expanded="true"] .suffix{
534
+ transform:rotate(.5turn);
529
535
  }
530
536
 
531
- .tds-tooltip-arrow{
532
- position:absolute;
533
- inset:var(--tds-tooltip-arrow-top, auto) var(--tds-tooltip-arrow-right, auto) var(--tds-tooltip-arrow-bottom, auto) var(--tds-tooltip-arrow-left, auto);
534
- display:flex;
535
- align-items:center;
536
- justify-content:center;
537
- width:var(--tds-tooltip-arrow-width);
538
- height:var(--tds-tooltip-arrow-height);
539
- pointer-events:none;
540
- transform:var(--tds-tooltip-arrow-translate);
541
- }
537
+ .tds-btn--actions-dropdown .actions-icon{
538
+ transform:rotate(.25turn);
539
+ }
542
540
 
543
- .tds-tooltip-arrow-icon{
544
- flex-shrink:0;
545
- width:var(--tds-tooltip-arrow-size);
546
- height:var(--tds-tooltip-arrow-depth);
547
- fill:var(--t-fill-color-tooltip);
548
- transform:var(--tds-tooltip-arrow-rotate);
549
- }
541
+ .tds-btn--actions-dropdown[aria-expanded="true"]{
542
+ color:var(--tds-btn-color-active);
543
+ background-color:var(--tds-btn-bg-active);
544
+ border-color:var(--tds-btn-border-color-active);
545
+ }
550
546
 
551
- .symbol{
552
- display:inline-block;
553
- vertical-align:text-top;
554
- fill:currentColor;
555
- height:1em;
556
- width:1em;
547
+ .tds-btn--full-width{
548
+ width:100%;
557
549
  }
558
550
 
559
- .tds-btn{
560
- --tds-btn-padding-x:12px;
561
- --tds-btn-padding-truncated-x:8px;
562
- --tds-btn-padding-y:3px;
563
- --tds-btn-font-size:16px;
564
- --tds-btn-font-weight:400;
565
- --tds-btn-line-height:1.5;
566
- --tds-btn-color:var(--t-text-color-headline);
567
- --tds-btn-bg:transparent;
568
- --tds-btn-border-width:var(--t-border-width);
569
- --tds-btn-border-color:transparent;
570
- --tds-btn-border-radius:var(--t-border-radius-md);
571
- --tds-btn-border-color-hover:transparent;
572
- --tds-btn-disabled-opacity:1;
573
- --tds-btn-min-height:32px;
574
- --tds-btn-text-decoration:none;
575
- --tds-btn-attention-icon-size:1em;
576
- display:inline-flex;
577
- gap:1ex;
578
- align-items:center;
579
- justify-content:center;
580
- width:auto;
581
- min-height:var(--tds-btn-min-height);
582
- padding:var(--tds-btn-padding-y) var(--tds-btn-padding-x);
583
- font-size:var(--tds-btn-font-size);
584
- font-weight:var(--tds-btn-font-weight);
585
- line-height:var(--tds-btn-line-height);
586
- vertical-align:middle;
587
- color:var(--tds-btn-color);
588
- text-align:center;
589
- -webkit-text-decoration:var(--tds-btn-text-decoration);
590
- text-decoration:var(--tds-btn-text-decoration);
591
- cursor:pointer;
592
- -webkit-user-select:none;
593
- -moz-user-select:none;
594
- user-select:none;
595
- background-color:var(--tds-btn-bg);
596
- background-clip:padding-box;
597
- border:var(--tds-btn-border-width) solid var(--tds-btn-border-color);
598
- border-radius:var(--tds-btn-border-radius);
599
- transition-timing-function:var(--t-ease-in-out);
600
- transition-duration:var(--t-duration-200);
601
- transition-property:color, background-color, border-color, box-shadow, fill, stroke, opacity;
551
+ .tds-btn--loading{
552
+ --tds-btn-loading-spinner-visibility:visible;
553
+ --tds-btn-loading-spinner-animation-play-state:running;
554
+
555
+ position:relative;
602
556
  }
603
557
 
604
- .tds-btn:where(.tds-btn--icononly,.tds-btn--prefix){
605
- padding-left:var(--tds-btn-padding-truncated-x);
558
+ .tds-btn--loading :not(.tds-loading-spinner){
559
+ visibility:hidden;
606
560
  }
607
561
 
608
- .tds-btn:where(.tds-btn--icononly,.tds-btn--suffix){
609
- padding-right:var(--tds-btn-padding-truncated-x);
610
- }
562
+ .tds-btn--attention .attention-icon{
563
+ display:inline-block;
564
+ width:var(--tds-btn-attention-icon-size);
565
+ height:var(--tds-btn-attention-icon-size);
566
+ background-color:var(--t-icon-color-status-warning);
567
+ border:.125em solid var(--t-border-color-white);
568
+ border-radius:var(--t-border-radius-round);
569
+ }
611
570
 
612
- .tds-btn.tds-btn--icononly,.tds-btn.tds-btn--prefix{
613
- padding-left:var(--tds-btn-padding-truncated-x);
614
- }
571
+ .tds-btn--infield{
572
+ --tds-btn-color:var(--t-text-color-status-neutral);
573
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
574
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
575
+ --tds-btn-color-hover:var(--t-text-color-status-neutral);
576
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
577
+ --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
578
+ --tds-btn-color-active:var(--t-text-color-status-neutral);
579
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
580
+ --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
581
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
582
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
583
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
584
+ --tds-btn-padding-x:0;
585
+ --tds-btn-padding-y:0;
586
+ --tds-btn-font-size:.66lh;
587
+ --tds-btn-min-height:auto;
588
+ --tds-btn-border-width:var(--t-border-width);
615
589
 
616
- .tds-btn.tds-btn--icononly,.tds-btn.tds-btn--suffix{
617
- padding-right:var(--tds-btn-padding-truncated-x);
618
- }
590
+ aspect-ratio:1;
591
+ cursor:pointer;
592
+ }
619
593
 
620
- .tds-btn:hover{
594
+ .tds-btn--infield[data-hovered]:not([data-disabled]){
621
595
  color:var(--tds-btn-color-hover);
622
596
  background-color:var(--tds-btn-bg-hover);
623
597
  border-color:var(--tds-btn-border-color-hover);
624
598
  }
625
599
 
626
- .tds-btn:focus-visible{
600
+ .tds-btn--infield[data-focus-visible]{
627
601
  color:var(--tds-btn-color-hover);
628
602
  outline:var(--t-focus-ring-outline);
629
603
  outline-offset:var(--t-focus-ring-offset);
@@ -631,456 +605,493 @@
631
605
  border-color:var(--tds-btn-border-color-hover);
632
606
  }
633
607
 
634
- .tds-btn:active,.tds-btn.active,.tds-btn[aria-pressed="true"]{
608
+ .tds-btn--infield[data-pressed]:not([data-disabled]){
635
609
  color:var(--tds-btn-color-active);
636
610
  background-color:var(--tds-btn-bg-active);
637
611
  border-color:var(--tds-btn-border-color-active);
638
612
  }
639
613
 
640
- .tds-btn:disabled,.tds-btn.disabled{
641
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-dark-020);
642
- --tds-btn-loading-spinner-color:var(--t-text-color-status-neutral);
614
+ .tds-btn--infield[data-disabled]{
643
615
  color:var(--tds-btn-color-disabled);
644
- pointer-events:none;
616
+ pointer-events:auto;
617
+ cursor:default;
645
618
  background-color:var(--tds-btn-bg-disabled);
646
619
  border-color:var(--tds-btn-border-color-disabled);
647
- opacity:var(--tds-btn-disabled-opacity);
648
620
  }
649
621
 
650
- .tds-btn svg:not(.symbol){
651
- display:block;
652
- width:.66666667lh;
653
- height:.66666667lh;
654
- color:var(--tds-btn-icon-color, currentColor);
655
- }
622
+ .tds-loading-spinner{
623
+ position:absolute;
624
+ right:0;
625
+ left:0;
626
+ visibility:var(--tds-loading-spinner-visibility, hidden);
627
+ width:var(--tds-loading-spinner-size, 1.25em);
628
+ height:var(--tds-loading-spinner-size, 1.25em);
629
+ margin:auto;
630
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
631
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
632
+ border-radius:50%;
633
+ animation:spinner-rotate 500ms infinite linear;
634
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
635
+ }
656
636
 
657
- .tds-btn .tds-loading-spinner{
658
- --tds-loading-spinner-track-color:var(--tds-btn-loading-spinner-track-color);
659
- --tds-loading-spinner-track-width:var(--tds-btn-loading-spinner-track-width);
660
- --tds-loading-spinner-color:var(--tds-btn-loading-spinner-color);
661
- --tds-loading-spinner-visibility:var(--tds-btn-loading-spinner-visibility);
662
- --tds-loading-spinner-animation-play-state:var(--tds-btn-loading-spinner-animation-play-state);
637
+ @keyframes spinner-rotate{
638
+ to{
639
+ transform:rotate(360deg);
663
640
  }
641
+ }
664
642
 
665
643
  @media (prefers-reduced-motion: reduce){
666
-
667
- .tds-btn{
668
- transition:none;
669
- }
644
+ [class*="--loading"] .tds-loading-spinner{
645
+ --tds-loading-spinner-animation-play-state:paused;
670
646
  }
671
- .tds-btn--xl{
672
- --tds-btn-padding-y:11px;
673
- --tds-btn-padding-x:18px;
674
- --tds-btn-padding-truncated-x:12px;
675
- --tds-btn-min-height:48px;
676
- }
677
- .tds-btn--lg{
678
- --tds-btn-padding-y:7px;
679
- --tds-btn-padding-x:14px;
680
- --tds-btn-min-height:40px;
681
- }
682
- .tds-btn--sm{
683
- --tds-btn-padding-y:.5px;
684
- --tds-btn-padding-x:7px;
685
- --tds-btn-padding-truncated-x:4px;
686
- --tds-btn-min-height:24px;
687
- --tds-btn-font-size:var(--t-font-size-sm);
688
- --tds-btn-loading-spinner-track-width:3px;
689
- }
690
- .tds-btn--xs{
691
- --tds-btn-padding-y:0;
692
- --tds-btn-padding-x:5px;
693
- --tds-btn-padding-truncated-x:5px;
694
- --tds-btn-min-height:20px;
695
- --tds-btn-font-size:var(--t-font-size-xs);
696
- --tds-btn-loading-spinner-track-width:3px;
697
647
  }
698
648
 
699
- .tds-btn--neutral{
700
- --tds-btn-color:var(--t-text-color-status-neutral);
701
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
702
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
703
- --tds-btn-color-hover:var(--t-text-color-status-neutral);
704
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
705
- --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
706
- --tds-btn-color-active:var(--t-text-color-status-neutral);
707
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
708
- --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
709
- --tds-btn-color-disabled:var(--t-text-color-disabled);
710
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
711
- --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
712
- }
649
+ .tds-tooltip{
650
+ --tds-tooltip-arrow-depth:var(--tds-tooltip-arrow-depth-raw);
651
+ --tds-tooltip-arrow-size:var(--tds-tooltip-arrow-size-raw);
652
+ --tds-tooltip-visibility:hidden;
713
653
 
714
- .tds-btn--neutral-inline{
715
- --tds-btn-color:var(--t-text-color-status-neutral);
716
- --tds-btn-bg:transparent;
717
- --tds-btn-border-color:transparent;
718
- --tds-btn-color-hover:var(--t-text-color-status-neutral);
719
- --tds-btn-bg-hover:transparent;
720
- --tds-btn-border-color-hover:transparent;
721
- --tds-btn-padding-y:0;
722
- --tds-btn-padding-x:0;
723
- --tds-btn-min-height:auto;
724
- --tds-btn-text-decoration:none;
725
- --tds-btn-border-width:0;
726
- --tds-btn-font-size:inherit;
727
- --tds-btn-font-weight:inherit;
728
- --tds-btn-line-height:inherit;
729
- font-family:inherit;
730
- font-style:inherit;
731
- vertical-align:inherit;
654
+ display:flex;
655
+ visibility:var(--tds-tooltip-visibility);
656
+ flex-direction:column;
657
+ align-items:flex-start;
658
+ max-inline-size:15rem;
659
+ padding:var(--t-spacing-half) var(--t-spacing-1);
660
+ font-size:var(--t-font-size-sm);
661
+ color:var(--t-text-color-inverted);
662
+ background:var(--t-fill-color-tooltip);
663
+ border-radius:var(--t-border-radius-md);
664
+ box-shadow:0 2px 4px 0 rgba(0, 0, 0, .15);
732
665
  }
733
666
 
734
- .tds-btn--neutral-inline:hover,.tds-btn--neutral-inline:focus-visible{
735
- --tds-btn-text-decoration:underline;
667
+ .tds-tooltip[data-placement="top"]{
668
+ --tds-tooltip-arrow-top:100%;
669
+ --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-size);
670
+ --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-depth);
671
+ --tds-tooltip-arrow-translate:translateX(-50%);
672
+ --tds-tooltip-arrow-rotate:rotate(180deg);
736
673
  }
737
674
 
738
- .tds-btn--interaction{
739
- --tds-btn-color:var(--t-text-color-inverted);
740
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
741
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
742
- --tds-btn-color-hover:var(--t-text-color-inverted);
743
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
744
- --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
745
- --tds-btn-color-active:var(--t-text-color-inverted);
746
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
747
- --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
748
- --tds-btn-color-disabled:var(--t-text-color-disabled);
749
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
750
- --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
751
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
752
- }
675
+ .tds-tooltip[data-placement="bottom"]{
676
+ --tds-tooltip-arrow-bottom:100%;
677
+ --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-size);
678
+ --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-depth);
679
+ --tds-tooltip-arrow-translate:translateX(-50%);
680
+ --tds-tooltip-arrow-rotate:rotate(0deg);
681
+ }
753
682
 
754
- .tds-btn--delete{
755
- --tds-btn-color:var(--t-text-color-inverted);
756
- --tds-btn-bg:var(--t-fill-color-button-delete-solid);
757
- --tds-btn-border-color:var(--t-fill-color-button-delete-solid);
758
- --tds-btn-color-hover:var(--t-text-color-inverted);
759
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
760
- --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
761
- --tds-btn-color-active:var(--t-text-color-inverted);
762
- --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
763
- --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
764
- --tds-btn-color-disabled:var(--t-text-color-disabled);
765
- --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
766
- --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
767
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
768
- }
683
+ .tds-tooltip[data-placement="left"]{
684
+ --tds-tooltip-arrow-left:100%;
685
+ --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-depth);
686
+ --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-size);
687
+ --tds-tooltip-arrow-translate:translateY(-50%);
688
+ --tds-tooltip-arrow-rotate:rotate(90deg);
689
+ }
769
690
 
770
- .tds-btn--outline-neutral{
771
- --tds-btn-color:var(--t-text-color-status-neutral);
772
- --tds-btn-bg:var(--t-fill-color-button-neutral-outline);
773
- --tds-btn-border-color:var(--t-border-color-button-neutral);
774
- --tds-btn-color-hover:var(--tds-btn-color);
775
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
776
- --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
777
- --tds-btn-color-active:var(--tds-btn-color);
778
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
779
- --tds-btn-border-color-active:var(--t-border-color-button-neutral);
780
- --tds-btn-color-disabled:var(--t-text-color-disabled);
781
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
782
- --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
691
+ .tds-tooltip[data-placement="right"]{
692
+ --tds-tooltip-arrow-right:100%;
693
+ --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-depth);
694
+ --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-size);
695
+ --tds-tooltip-arrow-translate:translateY(-50%);
696
+ --tds-tooltip-arrow-rotate:rotate(-90deg);
697
+ }
698
+
699
+ .tds-tooltip--open{
700
+ --tds-tooltip-visibility:visible;
783
701
  }
784
702
 
785
- .tds-btn--outline-interaction{
786
- --tds-btn-color:var(--t-text-color-interaction);
787
- --tds-btn-bg:var(--t-fill-color-button-interaction-outline);
788
- --tds-btn-border-color:var(--t-border-color-button-info);
789
- --tds-btn-color-hover:var(--tds-btn-color);
790
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
791
- --tds-btn-border-color-hover:var(--tds-btn-border-color);
792
- --tds-btn-color-active:var(--tds-btn-color);
793
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
794
- --tds-btn-border-color-active:var(--tds-btn-border-color);
795
- --tds-btn-color-disabled:var(--t-text-color-disabled);
796
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
797
- --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
798
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
703
+ .tds-tooltip-arrow{
704
+ position:absolute;
705
+ inset:var(--tds-tooltip-arrow-top, auto) var(--tds-tooltip-arrow-right, auto) var(--tds-tooltip-arrow-bottom, auto) var(--tds-tooltip-arrow-left, auto);
706
+ display:flex;
707
+ align-items:center;
708
+ justify-content:center;
709
+ width:var(--tds-tooltip-arrow-width);
710
+ height:var(--tds-tooltip-arrow-height);
711
+ pointer-events:none;
712
+ transform:var(--tds-tooltip-arrow-translate);
799
713
  }
800
714
 
801
- .tds-btn--outline-delete{
802
- --tds-btn-color:var(--t-text-color-status-error);
803
- --tds-btn-bg:var(--t-fill-color-button-delete-outline);
804
- --tds-btn-border-color:var(--t-border-color-button-delete);
805
- --tds-btn-color-hover:var(--tds-btn-color);
806
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
807
- --tds-btn-border-color-hover:var(--tds-btn-border-color);
808
- --tds-btn-color-active:var(--tds-btn-color);
809
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
810
- --tds-btn-border-color-active:var(--tds-btn-border-color);
811
- --tds-btn-color-disabled:var(--t-text-color-disabled);
812
- --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
813
- --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
814
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
715
+ .tds-tooltip-arrow-icon{
716
+ flex-shrink:0;
717
+ width:var(--tds-tooltip-arrow-size);
718
+ height:var(--tds-tooltip-arrow-depth);
719
+ fill:var(--t-fill-color-tooltip);
720
+ transform:var(--tds-tooltip-arrow-rotate);
815
721
  }
816
722
 
817
- .tds-btn--ghost-neutral{
818
- --tds-btn-color:var(--t-text-color-status-neutral);
819
- --tds-btn-border-color:transparent;
820
- --tds-btn-color-hover:var(--tds-btn-color);
821
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
822
- --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
823
- --tds-btn-color-active:var(--tds-btn-color);
824
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
825
- --tds-btn-border-color-active:var(--tds-btn-bg-active);
826
- --tds-btn-color-disabled:var(--t-text-color-disabled);
827
- --tds-btn-bg-disabled:transparent;
828
- --tds-btn-border-color-disabled:transparent;
723
+ .tds-data-table{
724
+ --tds-data-table-background-color:var(--t-surface-color-canvas);
725
+ --tds-data-table-border-color:var(--t-border-color);
726
+ --tds-data-table-column-background-color:var(--t-fill-color-neutral-090);
727
+ --tds-data-table-cell-padding-inline:var(--t-spacing-2);
728
+ --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
829
729
  }
730
+ .tds-data-table-frame{
731
+ overflow:hidden;
830
732
 
831
- .tds-btn--ghost-interaction{
832
- --tds-btn-color:var(--t-text-color-interaction);
833
- --tds-btn-border-color:transparent;
834
- --tds-btn-color-hover:var(--tds-btn-color);
835
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
836
- --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
837
- --tds-btn-color-active:var(--tds-btn-color);
838
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
839
- --tds-btn-border-color-active:var(--tds-btn-bg-active);
840
- --tds-btn-color-disabled:var(--t-text-color-disabled);
841
- --tds-btn-bg-disabled:transparent;
842
- --tds-btn-border-color-disabled:transparent;
843
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
733
+ border:1px solid var(--tds-data-table-border-color);
734
+ border-radius:var(--t-border-radius);
735
+ }
736
+ .tds-data-table-frame-header{
737
+ display:flex;
738
+ gap:var(--t-spacing-1-half);
739
+ align-items:center;
740
+ padding-block:var(--tds-data-table-cell-padding-block);
741
+ padding-inline:var(--tds-data-table-cell-padding-inline);
844
742
  }
845
743
 
846
- .tds-btn--ghost-delete{
847
- --tds-btn-color:var(--t-text-color-status-error);
848
- --tds-btn-border-color:transparent;
849
- --tds-btn-color-hover:var(--tds-btn-color);
850
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
851
- --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
852
- --tds-btn-color-active:var(--tds-btn-color);
853
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
854
- --tds-btn-border-color-active:var(--tds-btn-bg-active);
855
- --tds-btn-color-disabled:var(--t-text-color-disabled);
856
- --tds-btn-bg-disabled:transparent;
857
- --tds-btn-border-color-disabled:transparent;
858
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
744
+ .tds-data-table-results-count{
745
+ margin:0;
746
+ font-size:var(--t-font-size-md);
747
+ line-height:1;
748
+ color:var(--t-text-color-secondary);
749
+ }
750
+ .tds-data-table-scroll-wrapper{
751
+ position:relative;
752
+ overflow:hidden;
753
+ background-color:var(--tds-data-table-column-background-color);
859
754
  }
755
+ .tds-data-table-scroll-wrapper:not(:first-child){
756
+ border-top:1px solid var(--tds-data-table-border-color);
757
+ }
758
+ .tds-data-table-scroll{
759
+ overflow-x:auto;
760
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
761
+ }
762
+ @supports (animation-timeline: scroll()){
763
+ .tds-data-table--sticky-header .tds-data-table-scroll-wrapper{
764
+ overflow:clip;
765
+ }
860
766
 
861
- .tds-btn--inline-text{
862
- --tds-btn-color:var(--t-text-color-interaction);
863
- --tds-btn-color-hover:var(--t-text-color-interaction-hover);
864
- --tds-btn-color-active:var(--t-text-color-interaction-active);
865
- --tds-btn-bg:transparent;
866
- --tds-btn-bg-hover:transparent;
867
- --tds-btn-padding-y:0;
868
- --tds-btn-padding-x:0;
869
- --tds-btn-min-height:auto;
870
- --tds-btn-text-decoration:underline;
871
- --tds-btn-border-width:0;
872
- --tds-btn-border-color:transparent;
873
- --tds-btn-font-size:inherit;
874
- --tds-btn-font-weight:inherit;
875
- --tds-btn-line-height:inherit;
876
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
877
- font-family:inherit;
878
- font-style:inherit;
879
- vertical-align:inherit;
880
- text-align:inherit;
881
- -webkit-user-select:auto;
882
- -moz-user-select:auto;
883
- user-select:auto;
767
+ .tds-data-table--sticky-header .tds-data-table-scroll{
768
+ overflow-y:clip;
769
+ }
770
+
771
+ .tds-data-table--sticky-header .tds-data-table-header{
772
+ z-index:1;
773
+ animation-name:tds-data-table-sticky-header;
774
+ animation-duration:auto;
775
+ animation-timing-function:linear;
776
+ animation-fill-mode:both;
777
+ animation-timeline:--_sticky-header-scroll;
778
+ animation-range:var(--_sticky-header-scroll-start, 0) calc(var(--_sticky-header-scroll-start, 0) + var(--_sticky-header-scroll-max, 0));
779
+ }
780
+
781
+ @keyframes tds-data-table-sticky-header{
782
+ from{ transform:translateY(0); }
783
+ to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
784
+ }
884
785
  }
786
+ @supports (timeline-scope: --tds){
787
+ .tds-data-table-scroll-wrapper{
788
+ --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
885
789
 
886
- .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible{
887
- --tds-btn-text-decoration:none;
790
+ timeline-scope:--tds-data-table-scroll-timeline;
888
791
  }
792
+ .tds-data-table-scroll-wrapper:has(.tds-data-table-column--actions)::after{
793
+ content:none;
794
+ }
889
795
 
890
- .tds-btn--primary-page-header{
891
- --tds-btn-color:var(--t-text-color-inverted);
892
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
893
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
894
- --tds-btn-color-hover:var(--t-text-color-inverted);
895
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
896
- --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
897
- --tds-btn-color-active:var(--t-text-color-inverted);
898
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
899
- --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
900
- --tds-btn-color-disabled:var(--t-text-color-disabled);
901
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
902
- --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
903
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
904
- }
796
+ .tds-data-table-scroll{
797
+ scroll-timeline:--tds-data-table-scroll-timeline inline;
798
+ }
799
+ .tds-data-table-scroll-wrapper::before,
800
+ .tds-data-table-scroll-wrapper::after,
801
+ .tds-data-table-column--actions::before,
802
+ .tds-data-table-cell--actions::before{
803
+ position:absolute;
804
+ inset-block:0;
805
+ z-index:1;
806
+ width:var(--tds-data-table-scroll-shadow-size);
807
+ pointer-events:none;
808
+ content:"";
809
+ opacity:0;
810
+ animation-name:tds-data-table-scroll-shadow;
811
+ animation-duration:auto;
812
+ animation-timeline:--tds-data-table-scroll-timeline;
813
+ animation-timing-function:linear;
814
+ animation-fill-mode:both;
815
+ }
905
816
 
906
- .tds-btn--secondary-page-header{
907
- --tds-btn-color:var(--t-text-color-status-neutral);
908
- --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
909
- --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
910
- --tds-btn-color-hover:var(--t-text-color-status-neutral);
911
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
912
- --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
913
- --tds-btn-color-active:var(--t-text-color-status-neutral);
914
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
915
- --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
916
- --tds-btn-color-disabled:var(--t-text-color-disabled);
917
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
918
- --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
919
- }
817
+ .tds-data-table-scroll-wrapper::before{
818
+ inset-inline-start:0;
819
+ background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
820
+ animation-range:0 var(--tds-data-table-scroll-shadow-size);
821
+ }
920
822
 
921
- @media (min-width: 600px){
823
+ .tds-data-table-scroll-wrapper::after,
824
+ .tds-data-table-column--actions::before,
825
+ .tds-data-table-cell--actions::before{
826
+ background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
827
+ animation-direction:reverse;
828
+ animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
829
+ }
922
830
 
923
- .tds-btn--secondary-page-header{
924
- --tds-btn-color:var(--t-text-color-status-neutral);
925
- --tds-btn-bg:transparent;
926
- --tds-btn-border-color:var(--t-border-color-button-neutral);
927
- --tds-btn-color-hover:var(--tds-btn-color);
928
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
929
- --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
930
- --tds-btn-color-active:var(--tds-btn-color);
931
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
932
- --tds-btn-border-color-active:var(--t-border-color-button-neutral);
933
- --tds-btn-color-disabled:var(--t-text-color-disabled);
934
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
935
- --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
831
+ .tds-data-table-scroll-wrapper::after{
832
+ inset-inline-end:0;
833
+ }
834
+
835
+ .tds-data-table-column--actions::before,
836
+ .tds-data-table-cell--actions::before{
837
+ inset-inline-start:calc(-1 * var(--tds-data-table-scroll-shadow-size));
838
+ }
839
+
840
+ @keyframes tds-data-table-scroll-shadow{
841
+ from{ opacity:0; }
842
+ to{ opacity:1; }
843
+ }
844
+ }
845
+ .tds-data-table-grid{
846
+ width:100%;
847
+ font-size:var(--t-font-size-md);
848
+ color:var(--t-text-color);
849
+ border-spacing:0;
850
+ border-collapse:separate;
851
+ background-color:var(--tds-data-table-background-color);
936
852
  }
853
+ .tds-data-table-grid th,.tds-data-table-grid td{
854
+ white-space:nowrap;
855
+ }
856
+ .tds-data-table-column{
857
+ padding:var(--tds-data-table-cell-padding-block);
858
+ padding-inline:var(--tds-data-table-cell-padding-inline);
859
+ font-weight:var(--t-font-weight-medium);
860
+ color:var(--t-text-color-secondary);
861
+ cursor:default;
862
+ background-color:var(--tds-data-table-column-background-color);
863
+ border-top:0;
864
+ border-bottom:1px solid var(--tds-data-table-border-color);
865
+ }
866
+ .tds-data-table-column[data-allows-sorting="true"]{
867
+ --_sort-icon-color:var(--t-text-color-disabled);
868
+ --_sort-icon-opacity:.5;
869
+ --_sort-icon-rotate:0;
870
+ cursor:pointer;
871
+ }
872
+ .tds-data-table-column[data-allows-sorting="true"][data-hovered]{
873
+ --_sort-icon-opacity:1;
874
+ }
875
+ .tds-data-table-column[data-sort-direction]{
876
+ --_sort-icon-color:inherit;
877
+ --_sort-icon-opacity:1;
878
+ }
879
+ .tds-data-table-column[data-sort-direction="descending"]{
880
+ --_sort-icon-rotate:.5turn;
937
881
  }
938
882
 
939
- .tds-btn--staff-only{
940
- --tds-btn-color:var(--t-text-color-inverted);
941
- --tds-btn-bg:var(--t-fill-color-product-staff);
942
- --tds-btn-border-color:var(--t-border-color-white);
943
- --tds-btn-color-hover:var(--t-text-color-inverted);
944
- --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
945
- --tds-btn-border-color-hover:var(--t-border-color-white);
946
- --tds-btn-color-active:var(--t-text-color-inverted);
947
- --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
948
- --tds-btn-border-color-active:var(--t-border-color-white);
949
- --tds-btn-color-disabled:var(--t-text-color-disabled);
950
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
951
- --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
952
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
883
+ .tds-data-table-column-icon{
884
+ margin-inline-start:var(--t-spacing-1);
885
+ }
886
+ .tds-data-table-column-icon--sort{
887
+ color:var(--_sort-icon-color);
888
+ opacity:var(--_sort-icon-opacity);
889
+ transform:translateY(1px) rotate(var(--_sort-icon-rotate));
890
+ transition-timing-function:var(--t-ease-in-out);
891
+ transition-duration:var(--t-duration-300);
892
+ transition-property:color, opacity, transform;
893
+ }
894
+
895
+ .tds-data-table-column-label--hidden,
896
+ .tds-data-table-cell-label--hidden,
897
+ .tds-data-table-results-count-label--hidden{
898
+ position:absolute;
899
+ width:1px;
900
+ height:1px;
901
+ overflow:hidden;
902
+ white-space:nowrap;
903
+ clip-path:inset(50%);
904
+ }
905
+ .tds-data-table-cell{
906
+ padding:var(--tds-data-table-cell-padding-block);
907
+ padding-inline:var(--tds-data-table-cell-padding-inline);
908
+ border-bottom:1px solid var(--tds-data-table-border-color);
909
+ }
910
+ .tds-data-table-row:last-of-type .tds-data-table-cell{
911
+ border-bottom-width:0;
953
912
  }
913
+ .tds-data-table-row--interactive{
914
+ --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
915
+ cursor:default;
916
+ }
917
+ .tds-data-table-row--interactive[data-hovered],.tds-data-table-row--interactive[data-hovered] .tds-data-table-cell--actions{
918
+ background-color:var(--tds-data-table-row-background-hover);
919
+ }
920
+ .tds-data-table-row--interactive[data-focus-visible]{
921
+ outline:var(--t-focus-ring-outline);
922
+ outline-offset:calc(-1 * var(--t-focus-ring-width));
923
+ }
954
924
 
955
- .tds-btn--pill{
956
- --tds-btn-border-radius:999px;
957
- --tds-btn-padding-y:4px;
958
- --tds-btn-padding-x:13px;
959
-
960
- --tds-btn-color:var(--t-text-color);
961
- --tds-btn-bg:var(--t-fill-color-button-pill);
962
- --tds-btn-border-color:var(--tds-btn-bg);
963
- --tds-btn-color-hover:var(--tds-btn-color);
964
- --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
965
- --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
966
-
967
- --tds-btn-color-active:var(--tds-btn-color);
968
- --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
969
- --tds-btn-border-color-active:var(--tds-btn-bg-active);
970
- --tds-btn-color-disabled:var(--t-text-color-disabled);
971
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
972
- --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
973
- --tds-btn-icon-color:var(--t-icon-color-secondary);
974
- --tds-btn-min-height:32px;
925
+ .tds-data-table-empty{
926
+ padding:var(--tds-data-table-cell-padding-block);
927
+ padding-inline:var(--tds-data-table-cell-padding-inline);
928
+ text-align:center;
929
+ white-space:normal;
975
930
  }
976
931
 
977
- .tds-btn--pill:is(.tds-btn--sm){
978
- --tds-btn-padding-y:1px;
979
- --tds-btn-padding-x:7px;
980
- --tds-btn-min-height:auto;
981
- }
932
+ .tds-data-table-loading{
933
+ display:flex;
934
+ align-items:center;
935
+ justify-content:center;
936
+ padding:var(--tds-data-table-cell-padding-block);
937
+ padding-inline:var(--tds-data-table-cell-padding-inline);
938
+ }
982
939
 
983
- .tds-btn--pill:is(.tds-btn--xs){
984
- --tds-btn-padding-y:1px;
985
- --tds-btn-padding-x:9px;
986
- --tds-btn-min-height:auto;
940
+ @keyframes tds-data-table-loading-fade-in{
941
+ from{
942
+ opacity:0;
987
943
  }
988
944
 
989
- .tds-btn--pill:disabled,.tds-btn--pill.disabled{
990
- --tds-btn-icon-color:inherit;
945
+ to{
946
+ opacity:1;
991
947
  }
992
-
993
- .tds-btn--dropdown .suffix{
994
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
995
948
  }
949
+ .tds-data-table-loading-spinner{
950
+ --tds-loading-spinner-size:48px;
951
+ --tds-loading-spinner-track-width:6px;
952
+ --tds-loading-spinner-visibility:visible;
953
+ --tds-loading-spinner-animation-play-state:running;
996
954
 
997
- .tds-btn--dropdown[aria-expanded="true"] .suffix{
998
- transform:rotate(.5turn);
955
+ position:relative;
956
+ display:block;
957
+ width:var(--tds-loading-spinner-size);
958
+ height:var(--tds-loading-spinner-size);
959
+ margin-block:min(calc(var(--tds-loading-spinner-size) * 1.25), 25vh);
960
+ opacity:0;
961
+ animation-name:tds-data-table-loading-fade-in;
962
+ animation-duration:1s;
963
+ animation-timing-function:ease-in-out;
964
+ animation-fill-mode:forwards;
999
965
  }
1000
-
1001
- .tds-btn--actions-dropdown .actions-icon{
1002
- transform:rotate(.25turn);
966
+ .tds-data-table-loading-spinner .tds-loading-spinner{
967
+ inset:0;
1003
968
  }
969
+ @media (prefers-reduced-motion: reduce){
970
+ .tds-data-table-loading-spinner{
971
+ --tds-loading-spinner-animation-play-state:paused;
1004
972
 
1005
- .tds-btn--actions-dropdown[aria-expanded="true"]{
1006
- color:var(--tds-btn-color-active);
1007
- background-color:var(--tds-btn-bg-active);
1008
- border-color:var(--tds-btn-border-color-active);
973
+ opacity:1;
974
+ animation:none;
1009
975
  }
976
+ }
977
+ .tds-data-table-column,
978
+ .tds-data-table-cell{
979
+ text-align:start;
980
+ }
1010
981
 
1011
- .tds-btn--full-width{
1012
- width:100%;
982
+ .tds-data-table-column--align-center,
983
+ .tds-data-table-cell--align-center{
984
+ text-align:center;
1013
985
  }
1014
986
 
1015
- .tds-btn--loading{
1016
- --tds-btn-loading-spinner-visibility:visible;
1017
- --tds-btn-loading-spinner-animation-play-state:running;
987
+ .tds-data-table-column--align-end,
988
+ .tds-data-table-cell--align-end{
989
+ text-align:end;
990
+ }
1018
991
 
1019
- position:relative;
992
+ .tds-data-table-cell--numeric{
993
+ font-variant-numeric:tabular-nums;
1020
994
  }
1021
995
 
1022
- .tds-btn--loading :not(.tds-loading-spinner){
1023
- visibility:hidden;
1024
- }
996
+ .tds-data-table-column--selectable,
997
+ .tds-data-table-cell--selectable{
998
+ width:var(--t-element-size-md);
999
+ text-align:center;
1000
+ }
1001
+ .tds-data-table-column--actions,
1002
+ .tds-data-table-cell--actions{
1003
+ position:sticky;
1004
+ inset-inline-end:0;
1005
+ width:1%;
1006
+ text-align:right;
1007
+ }
1025
1008
 
1026
- .tds-btn--attention .attention-icon{
1027
- display:inline-block;
1028
- width:var(--tds-btn-attention-icon-size);
1029
- height:var(--tds-btn-attention-icon-size);
1030
- background-color:var(--t-icon-color-status-warning);
1031
- border:.125em solid var(--t-border-color-white);
1032
- border-radius:var(--t-border-radius-round);
1009
+ .tds-data-table-cell--actions{
1010
+ padding-inline:var(--tds-data-table-cell-padding-block);
1011
+ background-color:var(--tds-data-table-background-color);
1033
1012
  }
1013
+ .tds-data-table-selectable-checkbox{
1014
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
1015
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
1016
+ --tds-data-table-selectable-checkbox-border-radius:var(--t-border-radius-sm);
1017
+ --tds-data-table-selectable-checkbox-cursor:pointer;
1018
+ --tds-data-table-selectable-checkbox-size:var(--t-element-size-md);
1019
+ --tds-data-table-selectable-checkbox-transition-property:background-color, border-color;
1034
1020
 
1035
- .tds-btn--infield{
1036
- --tds-btn-color:var(--t-text-color-status-neutral);
1037
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
1038
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
1039
- --tds-btn-color-hover:var(--t-text-color-status-neutral);
1040
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1041
- --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1042
- --tds-btn-color-active:var(--t-text-color-status-neutral);
1043
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1044
- --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1045
- --tds-btn-color-disabled:var(--t-text-color-disabled);
1046
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1047
- --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1048
- --tds-btn-padding-x:0;
1049
- --tds-btn-padding-y:0;
1050
- --tds-btn-font-size:.66lh;
1051
- --tds-btn-min-height:auto;
1052
- --tds-btn-border-width:var(--t-border-width);
1021
+ --tds-data-table-selectable-checkbox-icon:none;
1022
+ --tds-data-table-selectable-checkbox-icon-visibility:hidden;
1023
+ --tds-data-table-selectable-checkbox-icon-opacity:0;
1024
+ --tds-data-table-selectable-checkbox-icon-fill:var(--t-icon-color-inverted);
1053
1025
 
1054
- aspect-ratio:1;
1055
- cursor:pointer;
1026
+ position:relative;
1027
+ display:block;
1028
+ width:var(--tds-data-table-selectable-checkbox-size);
1029
+ height:var(--tds-data-table-selectable-checkbox-size);
1030
+ margin:0;
1031
+ cursor:var(--tds-data-table-selectable-checkbox-cursor);
1032
+ background-color:var(--tds-data-table-selectable-checkbox-background-color);
1033
+ border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
1034
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
1035
+ transition-timing-function:var(--t-ease-in-out);
1036
+ transition-duration:var(--t-duration-200);
1037
+ transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
1056
1038
  }
1057
-
1058
- .tds-btn--infield[data-hovered]:not([data-disabled]){
1059
- color:var(--tds-btn-color-hover);
1060
- background-color:var(--tds-btn-bg-hover);
1061
- border-color:var(--tds-btn-border-color-hover);
1039
+ .tds-data-table-selectable-checkbox::after{
1040
+ position:absolute;
1041
+ inset:calc(-1 * var(--tds-data-table-cell-padding-block)) calc(-1 * var(--tds-data-table-cell-padding-inline));
1042
+ content:"";
1062
1043
  }
1063
-
1064
- .tds-btn--infield[data-focus-visible]{
1065
- color:var(--tds-btn-color-hover);
1044
+ .tds-data-table-selectable-checkbox::before{
1045
+ position:absolute;
1046
+ inset:0;
1047
+ visibility:var(--tds-data-table-selectable-checkbox-icon-visibility);
1048
+ content:"";
1049
+ background-color:var(--tds-data-table-selectable-checkbox-icon-fill);
1050
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
1051
+ opacity:var(--tds-data-table-selectable-checkbox-icon-opacity);
1052
+ -webkit-mask-image:var(--tds-data-table-selectable-checkbox-icon);
1053
+ mask-image:var(--tds-data-table-selectable-checkbox-icon);
1054
+ -webkit-mask-repeat:no-repeat;
1055
+ mask-repeat:no-repeat;
1056
+ -webkit-mask-size:contain;
1057
+ mask-size:contain;
1058
+ }
1059
+ .tds-data-table-selectable-checkbox[data-hovered],.tds-data-table-row--press-selects[data-hovered] .tds-data-table-selectable-checkbox:not([data-disabled]){
1060
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
1061
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-button-interaction-outline-hover);
1062
+ }
1063
+ .tds-data-table-selectable-checkbox[data-focus-visible]{
1066
1064
  outline:var(--t-focus-ring-outline);
1067
1065
  outline-offset:var(--t-focus-ring-offset);
1068
- background-color:var(--tds-btn-bg-hover);
1069
- border-color:var(--tds-btn-border-color-hover);
1070
1066
  }
1071
-
1072
- .tds-btn--infield[data-pressed]:not([data-disabled]){
1073
- color:var(--tds-btn-color-active);
1074
- background-color:var(--tds-btn-bg-active);
1075
- border-color:var(--tds-btn-border-color-active);
1067
+ .tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]{
1068
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-control);
1069
+ --tds-data-table-selectable-checkbox-border-color:var(--t-border-color-control-info);
1070
+ --tds-data-table-selectable-checkbox-icon-visibility:visible;
1071
+ --tds-data-table-selectable-checkbox-icon-opacity:1;
1076
1072
  }
1077
-
1078
- .tds-btn--infield[data-disabled]{
1079
- color:var(--tds-btn-color-disabled);
1080
- pointer-events:auto;
1081
- cursor:default;
1082
- background-color:var(--tds-btn-bg-disabled);
1083
- border-color:var(--tds-btn-border-color-disabled);
1073
+ [data-hovered]:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]),.tds-data-table-row--press-selects[data-hovered] :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]):not([data-disabled]){
1074
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
1075
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-interaction-hover);
1076
+ }
1077
+ .tds-data-table-selectable-checkbox[data-selected]{
1078
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1079
+ }
1080
+ .tds-data-table-selectable-checkbox[data-indeterminate]{
1081
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1082
+ }
1083
+ .tds-data-table-selectable-checkbox[data-disabled]{
1084
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color-disabled);
1085
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color-disabled);
1086
+ --tds-data-table-selectable-checkbox-cursor:not-allowed;
1087
+ }
1088
+ .tds-data-table-selectable-checkbox[data-disabled][data-selected],.tds-data-table-selectable-checkbox[data-disabled][data-indeterminate]{
1089
+ --tds-data-table-selectable-checkbox-background-color:var(--t-border-color-control-disabled);
1090
+ }
1091
+ @media (prefers-reduced-motion: reduce){
1092
+ .tds-data-table-selectable-checkbox{
1093
+ --tds-data-table-selectable-checkbox-transition-property:none;
1094
+ }
1084
1095
  }
1085
1096
 
1086
1097
  .tds-dropdown-popover{
@@ -4001,7 +4012,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4001
4012
  content:"*" / "";
4002
4013
  }
4003
4014
 
4004
- .tds-field[data-invalid]{
4015
+ .tds-field:has([aria-invalid="true"]),.tds-field[data-invalid]{
4005
4016
  --tds-field-border-color:var(--t-form-border-color-error);
4006
4017
  --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
4007
4018
  --tds-field-border-color-active:var(--t-form-border-color-error-hover);