@planningcenter/tapestry 3.3.0-rc.7 → 3.3.0-rc.8

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 (51) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/{tapestry-wc/dist/components/p-BuaBU6S6.js → packages/tapestry-wc/dist/components/p-CQ9rckMW.js} +3 -3
  4. package/dist/packages/tapestry-wc/dist/components/{p-BuaBU6S6.js.map → p-CQ9rckMW.js.map} +1 -1
  5. package/dist/packages/tapestry-wc/dist/components/{p-B9HEPAft.js → p-CSOohHUi.js} +3 -3
  6. package/dist/packages/tapestry-wc/dist/components/{p-B9HEPAft.js.map → p-CSOohHUi.js.map} +1 -1
  7. package/dist/packages/tapestry-wc/dist/components/{p-SowP3hcn.js → p-CUZotZ0O.js} +2 -2
  8. package/dist/packages/tapestry-wc/dist/components/{p-SowP3hcn.js.map → p-CUZotZ0O.js.map} +1 -1
  9. package/dist/packages/tapestry-wc/dist/components/{p-Di86YHM7.js → p-Dr-9ZNhc.js} +2 -2
  10. package/dist/packages/tapestry-wc/dist/components/{p-Di86YHM7.js.map → p-Dr-9ZNhc.js.map} +1 -1
  11. package/dist/packages/tapestry-wc/dist/components/{p-VfD3Nk7Q.js → p-DvYsgsSW.js} +3 -3
  12. package/dist/packages/tapestry-wc/dist/components/{p-VfD3Nk7Q.js.map → p-DvYsgsSW.js.map} +1 -1
  13. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  14. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  15. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +3 -3
  16. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  17. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  18. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  19. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  20. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  21. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  22. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  23. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  24. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  25. package/dist/reactRender.css +1457 -1457
  26. package/dist/reactRender.css.map +1 -1
  27. package/dist/reactRenderLegacy.css +1457 -1457
  28. package/dist/reactRenderLegacy.css.map +1 -1
  29. package/dist/{packages/tapestry-wc/dist/components/p-BuaBU6S6.js → tapestry-wc/dist/components/p-CQ9rckMW.js} +3 -3
  30. package/dist/tapestry-wc/dist/components/{p-BuaBU6S6.js.map → p-CQ9rckMW.js.map} +1 -1
  31. package/dist/tapestry-wc/dist/components/{p-B9HEPAft.js → p-CSOohHUi.js} +3 -3
  32. package/dist/tapestry-wc/dist/components/{p-B9HEPAft.js.map → p-CSOohHUi.js.map} +1 -1
  33. package/dist/tapestry-wc/dist/components/{p-SowP3hcn.js → p-CUZotZ0O.js} +2 -2
  34. package/dist/tapestry-wc/dist/components/{p-SowP3hcn.js.map → p-CUZotZ0O.js.map} +1 -1
  35. package/dist/tapestry-wc/dist/components/{p-Di86YHM7.js → p-Dr-9ZNhc.js} +2 -2
  36. package/dist/tapestry-wc/dist/components/{p-Di86YHM7.js.map → p-Dr-9ZNhc.js.map} +1 -1
  37. package/dist/tapestry-wc/dist/components/{p-VfD3Nk7Q.js → p-DvYsgsSW.js} +3 -3
  38. package/dist/tapestry-wc/dist/components/{p-VfD3Nk7Q.js.map → p-DvYsgsSW.js.map} +1 -1
  39. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  40. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  41. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  42. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  43. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  44. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  45. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  46. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  47. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  48. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  49. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  50. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  51. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,797 +1,991 @@
1
-
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
7
4
  }
5
+ }
8
6
 
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
14
-
15
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
16
-
17
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
- --tds-sidenav-collapse-closed-opacity:0;
20
- --tds-sidenav-collapse-open-opacity:1;
21
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
- --tds-sidenav-collapse-open-transform:translateY(0);
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-bottom-border-color:transparent;
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
23
25
 
24
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
28
28
 
29
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
- --tds-sidenav-item-nested-background-selected:transparent;
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
32
 
33
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
36
35
 
37
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
- }
36
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
40
39
 
41
- @media (prefers-reduced-motion: reduce){
42
- tds-sidenav,
43
- .tds-sidenav{
44
- --tds-sidenav-collapse-transition-enter:none;
45
- --tds-sidenav-collapse-transition-exit:none;
46
- --tds-sidenav-collapse-closed-transform:none;
47
- --tds-sidenav-collapse-open-transform:none;
40
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
48
45
  }
49
- }
50
46
 
51
- .tds-sidenav--theme-gray{
52
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
57
49
  }
58
- }
59
50
 
60
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
- display:flex;
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
62
56
  }
63
57
 
64
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
- flex-direction:column;
66
- gap:var(--t-spacing-half);
67
- width:100%;
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
76
+ }
68
77
  }
69
-
70
- .tds-sidenav-section-list{
71
- width:100%;
72
- padding:0;
73
- margin:0;
74
- list-style:none;
75
78
  }
76
79
 
77
- .tds-sidenav-section-header{
80
+ .tds-page-header{
78
81
  display:flex;
79
- align-items:baseline;
80
- justify-content:space-between;
81
- padding-top:var(--t-spacing-2);
82
+ flex-direction:column;
83
+ padding-top:var(--tds-page-header-padding-y);
84
+ color:var(--tds-page-header-color);
85
+ background:var(--tds-page-header-background-color);
86
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
82
87
  }
83
88
 
84
- .tds-sidenav-section-header h2{
85
- margin:0;
86
- font-size:var(--t-font-size-sm);
87
- font-weight:var(--t-font-weight-semibold);
88
- line-height:1.35;
89
- color:var(--t-text-color-secondary);
90
- text-transform:uppercase;
89
+ .tds-page-header:not(.has-nav){
90
+ padding-bottom:var(--tds-page-header-padding-y);
91
91
  }
92
92
 
93
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
- padding-top:0;
93
+ .tds-page-header.inactive{
94
+ background:var(--tds-page-header-background-color-inactive);
95
95
  }
96
96
 
97
- .tds-sidenav-section-header [slot="label-actions"]{
98
- display:flex;
99
- gap:var(--t-spacing-half);
100
- align-items:center;
97
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
+ width:100%;
101
99
  }
102
100
 
103
- .tds-sidenav-section [slot="section-actions"]{
104
- display:flex;
105
- gap:12px;
106
- align-items:center;
107
- min-height:42px;
108
- padding:var(--t-spacing-1) 0;
109
- }
110
-
111
- .tds-sidenav-section-list,
112
- .tds-sidenav-item{
113
- width:100%;
114
- padding:0;
115
- margin:0;
116
- }
117
-
118
- .tds-sidenav-item :is(a,button){
119
- position:relative;
101
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
120
102
  display:flex;
121
- gap:12px;
122
- align-items:center;
123
- width:100%;
124
- padding:12px;
125
- overflow:hidden;
126
- font-size:var(--t-font-size-sm);
127
- line-height:18px;
128
- color:var(--t-text-color-headline);
129
- white-space:nowrap;
130
- text-decoration:none;
131
- -webkit-appearance:none;
132
- -moz-appearance:none;
133
- appearance:none;
134
- cursor:pointer;
135
- background-color:var(--tds-sidenav-item-background, transparent);
136
- border:0;
137
- border-radius:var(--t-border-radius);
138
- transition:var(--tds-sidenav-item-transition);
103
+ flex-flow:row wrap;
104
+ gap:var(--t-spacing-half) var(--t-spacing-1);
105
+ align-items:flex-start;
106
+ justify-content:flex-start;
107
+ min-width:0;
139
108
  }
140
109
 
141
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
- display:block;
143
- flex:1;
144
- overflow:hidden;
145
- text-overflow:ellipsis;
146
- text-align:left;
147
- white-space:nowrap;
110
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
111
+ display:flex;
112
+ gap:var(--tds-page-header-nav-gap);
113
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
+ margin:0 0 -1px;
115
+ overflow:auto;
116
+ list-style:none;
117
+ background:var(--tds-page-header-nav-background);
148
118
  }
149
119
 
150
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
- color:var(--t-text-color-headline);
120
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
+ position:relative;
122
+ display:inline-flex;
123
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
+ font-size:var(--t-font-size-sm);
125
+ line-height:22px;
126
+ color:var(--tds-page-header-nav-item-color);
127
+ white-space:nowrap;
153
128
  text-decoration:none;
129
+ -webkit-appearance:none;
130
+ -moz-appearance:none;
131
+ appearance:none;
132
+ cursor:pointer;
133
+ outline-offset:-2px;
134
+ background-color:var(--tds-page-header-nav-item-background-color);
135
+ background-clip:padding-box;
136
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
154
139
  }
155
140
 
156
- :is(.tds-sidenav-item :is(a,button)):active{
157
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
- }
159
-
160
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
- overflow:hidden;
162
- color:var(--tds-sidenav-item-icon-color);
163
- }
164
-
165
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
- display:block;
167
- width:var(--tds-sidenav-item-icon-size);
168
- height:var(--tds-sidenav-item-icon-size);
141
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
169
146
  }
170
147
 
171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
- --tds-sidenav-indent:19px;
173
- }
148
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
+ }
174
154
 
175
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
- visibility:visible;
177
- block-size:auto;
178
- opacity:1;
179
- }
180
-
181
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
184
-
185
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
- font-weight:var(--t-font-weight-semibold);
187
- }
188
-
189
- .tds-sidenav-item:has(.tds-sidenav-section){
190
- display:flex;
191
- flex-direction:column;
192
- gap:var(--t-spacing-half);
193
- }
194
-
195
- .tds-sidenav-item .tds-sidenav-section-list{
196
- --tds-sidenav-item-depth:1;
197
- gap:0;
198
- }
155
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
+ background-color:var(--tds-page-header-nav-item-background-color-active);
157
+ border-color:var(--tds-page-header-nav-item-border-color-active);
158
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
+ }
199
160
 
200
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
- visibility:hidden;
202
- block-size:0;
203
- overflow-y:clip;
204
- opacity:0;
205
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
206
- }
161
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
+ color:var(--tds-page-header-nav-item-color-disabled);
164
+ cursor:not-allowed;
165
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
+ opacity:1;
167
+ }
207
168
 
208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
- --tds-sidenav-item-depth:2;
210
- }
169
+ @media (min-width: 600px){
170
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
+ position:absolute;
172
+ inset:auto -1px -1px;
173
+ height:1px;
174
+ pointer-events:none;
175
+ content:"";
176
+ background-color:var(--tds-page-header-bottom-border-color);
177
+ }
178
+ }
211
179
 
212
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
- min-height:var(--t-element-size-2xl);
214
- padding-block:9px;
215
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
- line-height:1;
217
- background-color:transparent;
180
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
+ position:relative;
218
182
  }
219
183
 
220
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
- position:absolute;
222
- top:0;
223
- bottom:0;
224
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
- width:2px;
226
- content:"";
227
- background-color:var(--tds-sidenav-item-nested-border-color);
228
- transition:var(--tds-sidenav-item-transition);
184
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
229
187
  }
230
188
 
231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
189
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
232
190
  position:absolute;
233
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
- z-index:-1;
235
- height:100%;
191
+ top:-5px;
192
+ right:-2px;
193
+ width:10px;
194
+ height:10px;
236
195
  content:"";
237
- background-color:var(--tds-sidenav-item-nested-background);
238
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
- transition:var(--tds-sidenav-item-transition);
240
- }
241
-
242
- :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)){
243
- display:block;
244
- text-align:left;
245
- white-space:normal;
246
- }
247
-
248
- :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{
249
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
196
+ background:var(--tds-page-header-nav-item-indicator-color);
197
+ border-radius:50%;
251
198
  }
252
199
 
253
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
200
+ @media (prefers-reduced-motion: no-preference){
201
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
+ animation:indicator-pulse 1.25s ease infinite;
203
+ }
255
204
  }
256
205
 
257
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
- font-weight:var(--t-font-weight-medium);
260
- }
261
-
262
- .tds-sidenav-responsive-header{
206
+ .tds-page-header__title-bar{
263
207
  display:flex;
264
- gap:var(--t-spacing-2);
265
- align-items:center;
266
- width:100%;
208
+ flex-direction:column;
209
+ gap:var(--t-spacing-2) var(--t-spacing-1);
210
+ align-items:flex-start;
211
+ justify-content:space-between;
212
+ padding:0 var(--tds-page-header-padding-x);
267
213
  }
268
214
 
269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
- order:0;
215
+ .tds-page-header--profile > .tds-page-header__title-bar{
216
+ align-items:center;
271
217
  }
272
218
 
273
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
- flex:1;
275
- order:1;
276
- margin:0;
277
- font-size:var(--t-font-size-lg);
278
- font-weight:var(--t-font-weight-medium);
279
- color:var(--t-text-color-headline);
280
- }
219
+ .tds-page-header__primary{
220
+ width:100%;
221
+ }
281
222
 
282
- @media (max-width: 719px){
283
- .tds-sidenav-collapse{
284
- z-index:10001;
285
- display:none;
286
- max-width:min(448px, calc(100vw - 48px));
287
- padding:0;
288
- margin:12px 0;
289
- position-area:bottom span-right;
290
- overflow:hidden;
291
- outline:0;
292
- background:var(--t-surface-color-card);
293
- border:0;
294
- border-radius:6px;
295
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
- opacity:var(--tds-sidenav-collapse-open-opacity);
297
- transform:var(--tds-sidenav-collapse-open-transform);
298
- transition:var(--tds-sidenav-collapse-transition-enter);
299
- will-change:transform;
223
+ .tds-page-header__primary h1{
224
+ margin:0;
225
+ font-size:var(--tds-page-header-headline-font-size);
226
+ font-weight:var(--t-font-weight-normal);
227
+ line-height:32px;
228
+ color:var(--tds-page-header-headline-color);
229
+ overflow-wrap:break-word;
300
230
  }
301
231
 
302
- .tds-sidenav-scroll-container{
303
- --webkit-overflow-scrolling:touch;
304
- display:block;
305
- width:100%;
306
- height:-moz-fit-content;
307
- height:fit-content;
308
- padding:var(--t-spacing-2);
309
- overflow-y:auto;
232
+ @media (min-width: 960px){
233
+ .tds-page-header__primary{
234
+ flex:1 1 max-content;
235
+ width:auto;
236
+ min-width:0;
237
+ max-width:100%;
310
238
  }
311
239
 
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
240
+ .tds-page-header__title-bar,
241
+ .tds-page-header--profile .tds-page-header__title-bar{
242
+ flex-flow:row nowrap;
243
+ row-gap:12px;
244
+ align-items:flex-start;
314
245
  }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
246
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
+ width:auto;
318
248
  }
319
249
 
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
250
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
+ justify-content:flex-end;
323
252
  }
253
+ }
324
254
 
325
- @starting-style{
326
- .tds-sidenav-collapse:popover-open{
327
- opacity:var(--tds-sidenav-collapse-closed-opacity);
328
- transform:var(--tds-sidenav-collapse-closed-transform);
329
- }
330
- }
331
- }
332
- @supports not selector(:popover-open){
333
- .tds-sidenav-collapse.\:popover-open{
334
- display:flex;
335
- }
255
+ .tds-page-header-phone,
256
+ .tds-page-header-email{
257
+ color:var(--tds-page-header-color);
258
+ white-space:nowrap;
259
+ }
336
260
 
337
- .tds-sidenav-collapse:not(.\:popover-open){
338
- opacity:var(--tds-sidenav-collapse-closed-opacity);
339
- transition:var(--tds-sidenav-collapse-transition-exit);
340
- }
341
- }
261
+ .tds-page-header-email{
262
+ max-width:100%;
263
+ overflow:hidden;
264
+ text-overflow:ellipsis;
342
265
  }
343
266
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
267
+ @keyframes indicator-pulse{
268
+ 0%{
269
+ opacity:.3;
270
+ transform:scale(.9);
271
+ }
272
+
273
+ 100%{
274
+ opacity:0;
275
+ transform:scale(1.75);
347
276
  }
348
277
  }
349
278
 
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
353
279
 
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
280
+ @media (prefers-reduced-motion: no-preference){
357
281
 
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
282
+ :root{
283
+ interpolate-size:allow-keywords;
284
+ }
285
+ }
362
286
 
363
- .tds-radio{
364
- --tds-radio-font-size:var(--t-font-size-md);
365
- --tds-radio-cursor:pointer;
366
- --tds-radio-line-height:1.4;
367
- --tds-radio-transition-property:border-width;
287
+ @layer tds-component{
288
+ tds-sidenav,
289
+ .tds-sidenav{
290
+ --tds-sidenav-indent:12px;
291
+ --tds-sidenav-item-depth:0;
368
292
 
369
- --tds-radio-input-size:var(--t-element-size-md);
370
- --tds-radio-input-border-radius:var(--t-border-radius-round);
371
- --tds-radio-input-border-color:var(--t-form-border-color);
372
- --tds-radio-input-border-width:var(--t-form-border-width);
373
- --tds-radio-input-background-color:transparent;
293
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
374
294
 
375
- --tds-radio-label-color:var(--t-form-color);
295
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
296
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
297
+ --tds-sidenav-collapse-closed-opacity:0;
298
+ --tds-sidenav-collapse-open-opacity:1;
299
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
300
+ --tds-sidenav-collapse-open-transform:translateY(0);
376
301
 
377
- --tds-radio-description-font-size:var(--t-font-size-sm);
378
- --tds-radio-description-line-height:1.35;
379
- --tds-radio-description-color:var(--t-text-color-secondary);
302
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
303
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
304
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
305
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
380
306
 
381
- position:relative;
382
- display:inline-grid;
383
- grid-template-columns:auto;
384
- grid-auto-columns:1fr;
385
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
386
- line-height:var(--tds-radio-line-height);
387
- cursor:var(--tds-radio-cursor);
388
- -webkit-user-select:none;
389
- -moz-user-select:none;
390
- user-select:none;
307
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
308
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
309
+ --tds-sidenav-item-nested-background-selected:transparent;
310
+
311
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
312
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
313
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
314
+
315
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
316
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
317
+ }
318
+
319
+ @media (prefers-reduced-motion: reduce){
320
+ tds-sidenav,
321
+ .tds-sidenav{
322
+ --tds-sidenav-collapse-transition-enter:none;
323
+ --tds-sidenav-collapse-transition-exit:none;
324
+ --tds-sidenav-collapse-closed-transform:none;
325
+ --tds-sidenav-collapse-open-transform:none;
326
+ }
327
+ }
328
+
329
+ .tds-sidenav--theme-gray{
330
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
331
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
332
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
333
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
334
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
335
+ }
391
336
  }
392
337
 
393
- .tds-radio label{
394
- grid-area:1 / 2;
395
- font-size:var(--tds-radio-font-size);
396
- font-weight:var(--t-font-weight-normal);
397
- color:var(--tds-radio-label-color);
398
- cursor:var(--tds-radio-cursor);
338
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
339
+ display:flex;
399
340
  }
400
341
 
401
- .tds-radio input[type="radio"]{
342
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
343
+ flex-direction:column;
344
+ gap:var(--t-spacing-half);
345
+ width:100%;
346
+ }
347
+
348
+ .tds-sidenav-section-list{
349
+ width:100%;
350
+ padding:0;
351
+ margin:0;
352
+ list-style:none;
353
+ }
354
+
355
+ .tds-sidenav-section-header{
356
+ display:flex;
357
+ align-items:baseline;
358
+ justify-content:space-between;
359
+ padding-top:var(--t-spacing-2);
360
+ }
361
+
362
+ .tds-sidenav-section-header h2{
363
+ margin:0;
364
+ font-size:var(--t-font-size-sm);
365
+ font-weight:var(--t-font-weight-semibold);
366
+ line-height:1.35;
367
+ color:var(--t-text-color-secondary);
368
+ text-transform:uppercase;
369
+ }
370
+
371
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
372
+ padding-top:0;
373
+ }
374
+
375
+ .tds-sidenav-section-header [slot="label-actions"]{
376
+ display:flex;
377
+ gap:var(--t-spacing-half);
378
+ align-items:center;
379
+ }
380
+
381
+ .tds-sidenav-section [slot="section-actions"]{
382
+ display:flex;
383
+ gap:12px;
384
+ align-items:center;
385
+ min-height:42px;
386
+ padding:var(--t-spacing-1) 0;
387
+ }
388
+
389
+ .tds-sidenav-section-list,
390
+ .tds-sidenav-item{
391
+ width:100%;
392
+ padding:0;
393
+ margin:0;
394
+ }
395
+
396
+ .tds-sidenav-item :is(a,button){
402
397
  position:relative;
403
- width:1em;
404
- height:1em;
405
- margin:calc((1lh - 1em) / 2) 0 0;
406
- font-size:var(--tds-radio-font-size);
407
- line-height:inherit;
398
+ display:flex;
399
+ gap:12px;
400
+ align-items:center;
401
+ width:100%;
402
+ padding:12px;
403
+ overflow:hidden;
404
+ font-size:var(--t-font-size-sm);
405
+ line-height:18px;
406
+ color:var(--t-text-color-headline);
407
+ white-space:nowrap;
408
+ text-decoration:none;
408
409
  -webkit-appearance:none;
409
410
  -moz-appearance:none;
410
411
  appearance:none;
411
- cursor:var(--tds-radio-cursor);
412
- background-color:var(--tds-radio-input-background-color);
413
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
414
- border-radius:var(--tds-radio-input-border-radius);
415
- transition-timing-function:var(--t-ease-in-out);
416
- transition-duration:var(--t-duration-200);
417
- transition-property:var(--tds-radio-transition-property);
412
+ cursor:pointer;
413
+ background-color:var(--tds-sidenav-item-background, transparent);
414
+ border:0;
415
+ border-radius:var(--t-border-radius);
416
+ transition:var(--tds-sidenav-item-transition);
418
417
  }
419
418
 
420
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
421
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
422
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
419
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
420
+ display:block;
421
+ flex:1;
422
+ overflow:hidden;
423
+ text-overflow:ellipsis;
424
+ text-align:left;
425
+ white-space:nowrap;
423
426
  }
424
427
 
425
- :is(.tds-radio input[type="radio"]):focus-visible{
426
- outline:var(--t-focus-ring-outline);
427
- outline-offset:var(--t-focus-ring-offset);
428
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
429
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
430
+ color:var(--t-text-color-headline);
431
+ text-decoration:none;
428
432
  }
429
433
 
430
- :is(.tds-radio input[type="radio"]):disabled{
431
- pointer-events:none;
434
+ :is(.tds-sidenav-item :is(a,button)):active{
435
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
432
436
  }
433
437
 
434
- @media (prefers-reduced-motion: reduce){
435
-
436
- .tds-radio input[type="radio"]{
437
- --tds-radio-transition-property:none;
438
- }
438
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
439
+ overflow:hidden;
440
+ color:var(--tds-sidenav-item-icon-color);
439
441
  }
440
442
 
441
- .tds-radio:has(input:checked){
442
- --tds-radio-input-background-color:var(--t-form-background-color);
443
- --tds-radio-input-border-color:var(--t-border-color-control-info);
444
- --tds-radio-input-border-width:4px;
445
- }
443
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
444
+ display:block;
445
+ width:var(--tds-sidenav-item-icon-size);
446
+ height:var(--tds-sidenav-item-icon-size);
447
+ }
446
448
 
447
- .tds-radio:has(input:checked) input:hover:not(:disabled){
448
- --tds-radio-input-background-color:var(--t-form-background-color);
449
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
449
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
450
+ --tds-sidenav-indent:19px;
450
451
  }
451
452
 
452
- .tds-radio:has(input:user-invalid){
453
- --tds-radio-input-border-color:var(--t-form-border-color-error);
454
- }
455
-
456
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
457
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
458
- --tds-radio-input-background-color:var(--t-form-background-color-error);
453
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
454
+ visibility:visible;
455
+ block-size:auto;
456
+ opacity:1;
459
457
  }
460
458
 
461
- .tds-radio:has(input:disabled){
462
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
463
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
459
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
460
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
461
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
464
462
 
465
- --tds-radio-label-color:var(--t-form-color-disabled);
466
- --tds-radio-description-color:var(--t-form-color-disabled);
467
- --tds-radio-cursor:not-allowed;
463
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
464
+ font-weight:var(--t-font-weight-semibold);
468
465
  }
469
466
 
470
- .tds-radio:has(input:disabled) input:checked{
471
- --tds-radio-input-background-color:var(--t-form-background-color);
472
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
473
- }
474
-
475
- .tds-radio-description{
476
- display:flex;
477
- grid-area:2 / 2;
478
- gap:var(--t-spacing-half);
479
- align-items:flex-start;
480
- margin:0;
481
- font-size:var(--tds-radio-description-font-size);
482
- line-height:var(--tds-radio-description-line-height);
483
- color:var(--tds-radio-description-color);
484
- cursor:text;
485
- }
486
-
487
- .tds-radio--sm{
488
- --tds-radio-line-height:1.35;
489
- --tds-radio-input-size:var(--t-element-size-sm);
490
- --tds-radio-font-size:var(--t-font-size-sm);
491
- --tds-radio-description-font-size:var(--t-font-size-xs);
492
- --tds-radio-description-line-height:1.3;
493
- }
467
+ .tds-sidenav-item:has(.tds-sidenav-section){
468
+ display:flex;
469
+ flex-direction:column;
470
+ gap:var(--t-spacing-half);
471
+ }
494
472
 
495
- @layer t-critical{
496
- tds-page-header:not(.hydrated){
497
- display:none;
473
+ .tds-sidenav-item .tds-sidenav-section-list{
474
+ --tds-sidenav-item-depth:1;
475
+ gap:0;
498
476
  }
499
- }
500
477
 
501
- @layer t-component{
502
- .tds-page-header{
503
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
504
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
505
- --tds-page-header-color:var(--t-text-color);
506
- --tds-page-header-bottom-border-color:transparent;
507
- --tds-page-header-headline-color:var(--t-text-color-headline);
508
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
509
- --tds-page-header-padding-x:var(--t-spacing-2);
510
- --tds-page-header-padding-y:var(--t-spacing-2);
511
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
512
- --tds-page-header-nav-gap:var(--t-spacing-1);
513
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
514
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
515
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
516
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
517
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
518
- --tds-page-header-nav-item-border-width:1px;
478
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
479
+ visibility:hidden;
480
+ block-size:0;
481
+ overflow-y:clip;
482
+ opacity:0;
483
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
484
+ }
519
485
 
520
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
521
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
486
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
487
+ --tds-sidenav-item-depth:2;
488
+ }
522
489
 
523
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
524
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
525
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
490
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
491
+ min-height:var(--t-element-size-2xl);
492
+ padding-block:9px;
493
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
494
+ line-height:1;
495
+ background-color:transparent;
496
+ }
526
497
 
527
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
528
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
498
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
499
+ position:absolute;
500
+ top:0;
501
+ bottom:0;
502
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
503
+ width:2px;
504
+ content:"";
505
+ background-color:var(--tds-sidenav-item-nested-border-color);
506
+ transition:var(--tds-sidenav-item-transition);
507
+ }
529
508
 
530
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
531
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
532
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
509
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
510
+ position:absolute;
511
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
512
+ z-index:-1;
513
+ height:100%;
514
+ content:"";
515
+ background-color:var(--tds-sidenav-item-nested-background);
516
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
517
+ transition:var(--tds-sidenav-item-transition);
518
+ }
533
519
 
534
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
535
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
536
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
537
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
538
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
539
- }
520
+ :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)){
521
+ display:block;
522
+ text-align:left;
523
+ white-space:normal;
524
+ }
540
525
 
541
- .tds-page-header--profile{
542
- --tds-page-header-padding-y:20px;
543
- }
526
+ :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{
527
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
528
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
529
+ }
544
530
 
545
- @supports (color: light-dark(#fff, #000)){
546
- .tds-page-header{
547
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
548
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
549
- }
550
- }
531
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
532
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
533
+ }
551
534
 
552
- @media (min-width: 600px){
553
- .tds-page-header{
554
- --tds-page-header-background-color:var(--t-surface-color-canvas);
555
- --tds-page-header-color:var(--t-text-color-secondary);
556
- --tds-page-header-bottom-border-color:var(--t-border-color);
557
- --tds-page-header-padding-x:var(--t-spacing-3);
558
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
559
- --tds-page-header-nav-gap:var(--t-spacing-half);
560
- --tds-page-header-nav-background:transparent;
561
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
562
- --tds-page-header-nav-item-border-width:1px;
563
- --tds-page-header-nav-item-color:var(--t-text-color);
564
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
565
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
566
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
567
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
568
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
569
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
535
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
536
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
537
+ font-weight:var(--t-font-weight-medium);
570
538
  }
571
- }
572
- }
573
539
 
574
- .tds-page-header{
540
+ .tds-sidenav-responsive-header{
575
541
  display:flex;
576
- flex-direction:column;
577
- padding-top:var(--tds-page-header-padding-y);
578
- color:var(--tds-page-header-color);
579
- background:var(--tds-page-header-background-color);
580
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
542
+ gap:var(--t-spacing-2);
543
+ align-items:center;
544
+ width:100%;
581
545
  }
582
546
 
583
- .tds-page-header:not(.has-nav){
584
- padding-bottom:var(--tds-page-header-padding-y);
547
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
548
+ order:0;
585
549
  }
586
550
 
587
- .tds-page-header.inactive{
588
- background:var(--tds-page-header-background-color-inactive);
551
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
552
+ flex:1;
553
+ order:1;
554
+ margin:0;
555
+ font-size:var(--t-font-size-lg);
556
+ font-weight:var(--t-font-weight-medium);
557
+ color:var(--t-text-color-headline);
589
558
  }
590
559
 
591
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
592
- width:100%;
560
+ @media (max-width: 719px){
561
+ .tds-sidenav-collapse{
562
+ z-index:10001;
563
+ display:none;
564
+ max-width:min(448px, calc(100vw - 48px));
565
+ padding:0;
566
+ margin:12px 0;
567
+ position-area:bottom span-right;
568
+ overflow:hidden;
569
+ outline:0;
570
+ background:var(--t-surface-color-card);
571
+ border:0;
572
+ border-radius:6px;
573
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
574
+ opacity:var(--tds-sidenav-collapse-open-opacity);
575
+ transform:var(--tds-sidenav-collapse-open-transform);
576
+ transition:var(--tds-sidenav-collapse-transition-enter);
577
+ will-change:transform;
593
578
  }
594
579
 
595
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
596
- display:flex;
597
- flex-flow:row wrap;
598
- gap:var(--t-spacing-half) var(--t-spacing-1);
599
- align-items:flex-start;
600
- justify-content:flex-start;
601
- min-width:0;
580
+ .tds-sidenav-scroll-container{
581
+ --webkit-overflow-scrolling:touch;
582
+ display:block;
583
+ width:100%;
584
+ height:-moz-fit-content;
585
+ height:fit-content;
586
+ padding:var(--t-spacing-2);
587
+ overflow-y:auto;
602
588
  }
603
589
 
604
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
590
+ .tds-sidenav-item :is(a, button) :is(.prefix){
591
+ display:none;
592
+ }
593
+ @supports selector(:popover-open){
594
+ .tds-sidenav-collapse:popover-open{
605
595
  display:flex;
606
- gap:var(--tds-page-header-nav-gap);
607
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
608
- margin:0 0 -1px;
609
- overflow:auto;
610
- list-style:none;
611
- background:var(--tds-page-header-nav-background);
612
596
  }
613
597
 
614
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
615
- position:relative;
616
- display:inline-flex;
617
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
618
- font-size:var(--t-font-size-sm);
619
- line-height:22px;
620
- color:var(--tds-page-header-nav-item-color);
621
- white-space:nowrap;
622
- text-decoration:none;
623
- -webkit-appearance:none;
624
- -moz-appearance:none;
625
- appearance:none;
626
- cursor:pointer;
627
- outline-offset:-2px;
628
- background-color:var(--tds-page-header-nav-item-background-color);
629
- background-clip:padding-box;
630
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
631
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
632
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
598
+ .tds-sidenav-collapse:not(:popover-open){
599
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
600
+ transition:var(--tds-sidenav-collapse-transition-exit);
633
601
  }
634
602
 
635
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
636
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
637
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
638
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
639
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
603
+ @starting-style{
604
+ .tds-sidenav-collapse:popover-open{
605
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
606
+ transform:var(--tds-sidenav-collapse-closed-transform);
640
607
  }
608
+ }
609
+ }
610
+ @supports not selector(:popover-open){
611
+ .tds-sidenav-collapse.\:popover-open{
612
+ display:flex;
613
+ }
641
614
 
642
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
643
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
644
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
645
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
646
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
647
- }
615
+ .tds-sidenav-collapse:not(.\:popover-open){
616
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
617
+ transition:var(--tds-sidenav-collapse-transition-exit);
618
+ }
619
+ }
620
+ }
648
621
 
649
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
650
- background-color:var(--tds-page-header-nav-item-background-color-active);
651
- border-color:var(--tds-page-header-nav-item-border-color-active);
652
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
653
- }
622
+ @media (min-width: 720px){
623
+ .tds-sidenav-responsive-header{
624
+ display:none;
625
+ }
626
+ }
654
627
 
655
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
656
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
657
- color:var(--tds-page-header-nav-item-color-disabled);
658
- cursor:not-allowed;
659
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
660
- opacity:1;
661
- }
628
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
+ display:none;
630
+ }
662
631
 
663
- @media (min-width: 600px){
664
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
665
- position:absolute;
666
- inset:auto -1px -1px;
667
- height:1px;
668
- pointer-events:none;
669
- content:"";
670
- background-color:var(--tds-page-header-bottom-border-color);
671
- }
672
- }
632
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
+ display:block;
634
+ }
673
635
 
674
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
675
- position:relative;
636
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
+ display:flex;
638
+ flex-direction:column;
676
639
  }
677
640
 
678
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
679
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
680
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
681
- }
682
641
 
683
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
684
- position:absolute;
685
- top:-5px;
686
- right:-2px;
687
- width:10px;
688
- height:10px;
689
- content:"";
690
- background:var(--tds-page-header-nav-item-indicator-color);
691
- border-radius:50%;
692
- }
642
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
643
+ -webkit-appearance:none;
644
+ appearance:none;
645
+ }
693
646
 
694
- @media (prefers-reduced-motion: no-preference){
695
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
696
- animation:indicator-pulse 1.25s ease infinite;
697
- }
698
- }
647
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
648
+ inline-size:1em;
649
+ block-size:2em;
650
+ }
699
651
 
700
- .tds-page-header__title-bar{
701
- display:flex;
702
- flex-direction:column;
703
- gap:var(--t-spacing-2) var(--t-spacing-1);
704
- align-items:flex-start;
705
- justify-content:space-between;
706
- padding:0 var(--tds-page-header-padding-x);
707
- }
652
+ @supports (field-sizing: content){
653
+ .tds-input--auto-width{
654
+ inline-size:-moz-fit-content;
655
+ inline-size:fit-content;
656
+ min-inline-size:min(100%, 122px);
657
+ }
708
658
 
709
- .tds-page-header--profile > .tds-page-header__title-bar{
710
- align-items:center;
659
+ .tds-input--auto-width input{
660
+ field-sizing:content;
661
+ inline-size:auto;
711
662
  }
663
+ }
712
664
 
713
- .tds-page-header__primary{
714
- width:100%;
665
+ .tds-radio{
666
+ --tds-radio-font-size:var(--t-font-size-md);
667
+ --tds-radio-cursor:pointer;
668
+ --tds-radio-line-height:1.4;
669
+ --tds-radio-transition-property:border-width;
670
+
671
+ --tds-radio-input-size:var(--t-element-size-md);
672
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
673
+ --tds-radio-input-border-color:var(--t-form-border-color);
674
+ --tds-radio-input-border-width:var(--t-form-border-width);
675
+ --tds-radio-input-background-color:transparent;
676
+
677
+ --tds-radio-label-color:var(--t-form-color);
678
+
679
+ --tds-radio-description-font-size:var(--t-font-size-sm);
680
+ --tds-radio-description-line-height:1.35;
681
+ --tds-radio-description-color:var(--t-text-color-secondary);
682
+
683
+ position:relative;
684
+ display:inline-grid;
685
+ grid-template-columns:auto;
686
+ grid-auto-columns:1fr;
687
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
688
+ line-height:var(--tds-radio-line-height);
689
+ cursor:var(--tds-radio-cursor);
690
+ -webkit-user-select:none;
691
+ -moz-user-select:none;
692
+ user-select:none;
715
693
  }
716
694
 
717
- .tds-page-header__primary h1{
718
- margin:0;
719
- font-size:var(--tds-page-header-headline-font-size);
695
+ .tds-radio label{
696
+ grid-area:1 / 2;
697
+ font-size:var(--tds-radio-font-size);
720
698
  font-weight:var(--t-font-weight-normal);
721
- line-height:32px;
722
- color:var(--tds-page-header-headline-color);
723
- overflow-wrap:break-word;
699
+ color:var(--tds-radio-label-color);
700
+ cursor:var(--tds-radio-cursor);
724
701
  }
725
702
 
726
- @media (min-width: 960px){
727
- .tds-page-header__primary{
728
- flex:1 1 max-content;
729
- width:auto;
730
- min-width:0;
731
- max-width:100%;
703
+ .tds-radio input[type="radio"]{
704
+ position:relative;
705
+ width:1em;
706
+ height:1em;
707
+ margin:calc((1lh - 1em) / 2) 0 0;
708
+ font-size:var(--tds-radio-font-size);
709
+ line-height:inherit;
710
+ -webkit-appearance:none;
711
+ -moz-appearance:none;
712
+ appearance:none;
713
+ cursor:var(--tds-radio-cursor);
714
+ background-color:var(--tds-radio-input-background-color);
715
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
716
+ border-radius:var(--tds-radio-input-border-radius);
717
+ transition-timing-function:var(--t-ease-in-out);
718
+ transition-duration:var(--t-duration-200);
719
+ transition-property:var(--tds-radio-transition-property);
732
720
  }
733
721
 
734
- .tds-page-header__title-bar,
735
- .tds-page-header--profile .tds-page-header__title-bar{
736
- flex-flow:row nowrap;
737
- row-gap:12px;
738
- align-items:flex-start;
722
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
723
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
724
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
725
+ }
726
+
727
+ :is(.tds-radio input[type="radio"]):focus-visible{
728
+ outline:var(--t-focus-ring-outline);
729
+ outline-offset:var(--t-focus-ring-offset);
730
+ }
731
+
732
+ :is(.tds-radio input[type="radio"]):disabled{
733
+ pointer-events:none;
734
+ }
735
+
736
+ @media (prefers-reduced-motion: reduce){
737
+
738
+ .tds-radio input[type="radio"]{
739
+ --tds-radio-transition-property:none;
739
740
  }
740
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
741
- width:auto;
742
741
  }
743
742
 
744
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
745
- justify-content:flex-end;
743
+ .tds-radio:has(input:checked){
744
+ --tds-radio-input-background-color:var(--t-form-background-color);
745
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
746
+ --tds-radio-input-border-width:4px;
747
+ }
748
+
749
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
750
+ --tds-radio-input-background-color:var(--t-form-background-color);
751
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
752
+ }
753
+
754
+ .tds-radio:has(input:user-invalid){
755
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
756
+ }
757
+
758
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
759
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
760
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
761
+ }
762
+
763
+ .tds-radio:has(input:disabled){
764
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
765
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
766
+
767
+ --tds-radio-label-color:var(--t-form-color-disabled);
768
+ --tds-radio-description-color:var(--t-form-color-disabled);
769
+ --tds-radio-cursor:not-allowed;
770
+ }
771
+
772
+ .tds-radio:has(input:disabled) input:checked{
773
+ --tds-radio-input-background-color:var(--t-form-background-color);
774
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
746
775
  }
776
+
777
+ .tds-radio-description{
778
+ display:flex;
779
+ grid-area:2 / 2;
780
+ gap:var(--t-spacing-half);
781
+ align-items:flex-start;
782
+ margin:0;
783
+ font-size:var(--tds-radio-description-font-size);
784
+ line-height:var(--tds-radio-description-line-height);
785
+ color:var(--tds-radio-description-color);
786
+ cursor:text;
747
787
  }
748
788
 
749
- .tds-page-header-phone,
750
- .tds-page-header-email{
751
- color:var(--tds-page-header-color);
752
- white-space:nowrap;
789
+ .tds-radio--sm{
790
+ --tds-radio-line-height:1.35;
791
+ --tds-radio-input-size:var(--t-element-size-sm);
792
+ --tds-radio-font-size:var(--t-font-size-sm);
793
+ --tds-radio-description-font-size:var(--t-font-size-xs);
794
+ --tds-radio-description-line-height:1.3;
753
795
  }
754
796
 
755
- .tds-page-header-email{
756
- max-width:100%;
757
- overflow:hidden;
758
- text-overflow:ellipsis;
797
+ .tds-checkbox{
798
+ --tds-checkbox-font-size:var(--t-font-size-md);
799
+ --tds-checkbox-cursor:pointer;
800
+ --tds-checkbox-line-height:1.4;
801
+ --tds-checkbox-transition-property:background-color, border-color;
802
+
803
+ --tds-checkbox-input-size:var(--t-element-size-md);
804
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
805
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
806
+ --tds-checkbox-input-background-color:transparent;
807
+
808
+ --tds-checkbox-input-icon:none;
809
+ --tds-checkbox-input-icon-visibility:hidden;
810
+ --tds-checkbox-input-icon-opacity:0;
811
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
812
+
813
+ --tds-checkbox-label-color:var(--t-form-color);
814
+
815
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
816
+ --tds-checkbox-description-line-height:1.35;
817
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
818
+ --tds-checkbox-description-invalid-icon-display:none;
819
+
820
+ position:relative;
821
+ display:inline-grid;
822
+ grid-template-columns:auto;
823
+ grid-auto-columns:1fr;
824
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
825
+ line-height:var(--tds-checkbox-line-height);
826
+ cursor:var(--tds-checkbox-cursor);
827
+ -webkit-user-select:none;
828
+ -moz-user-select:none;
829
+ user-select:none;
759
830
  }
760
831
 
761
- @keyframes indicator-pulse{
762
- 0%{
763
- opacity:.3;
764
- transform:scale(.9);
765
- }
832
+ .tds-checkbox label{
833
+ grid-area:1 / 2;
834
+ font-size:var(--tds-checkbox-font-size);
835
+ font-weight:var(--t-font-weight-normal);
836
+ color:var(--tds-checkbox-label-color);
837
+ cursor:var(--tds-checkbox-cursor);
838
+ }
839
+
840
+ .tds-checkbox tds-indeterminate{
841
+ display:flex;
842
+ }
843
+
844
+ .tds-checkbox input[type="checkbox"]{
845
+ position:relative;
846
+ width:1em;
847
+ height:1em;
848
+ margin:calc((1lh - 1em) / 2) 0 0;
849
+ font-size:var(--tds-checkbox-font-size);
850
+ line-height:inherit;
851
+ -webkit-appearance:none;
852
+ -moz-appearance:none;
853
+ appearance:none;
854
+ cursor:var(--tds-checkbox-cursor);
855
+ background-color:var(--tds-checkbox-input-background-color);
856
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
857
+ border-radius:var(--tds-checkbox-input-border-radius);
858
+ transition-timing-function:var(--t-ease-in-out);
859
+ transition-duration:var(--t-duration-200);
860
+ transition-property:var(--tds-checkbox-transition-property);
861
+ }
862
+
863
+ :is(.tds-checkbox input[type="checkbox"])::before{
864
+ position:absolute;
865
+ top:50%;
866
+ left:50%;
867
+ visibility:var(--tds-checkbox-input-icon-visibility);
868
+ width:100%;
869
+ height:100%;
870
+ content:"";
871
+ background-color:var(--tds-checkbox-input-icon-fill);
872
+ border-radius:var(--tds-checkbox-input-border-radius);
873
+ opacity:var(--tds-checkbox-input-icon-opacity);
874
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
875
+ mask-image:var(--tds-checkbox-input-icon);
876
+ -webkit-mask-repeat:no-repeat;
877
+ mask-repeat:no-repeat;
878
+ -webkit-mask-size:contain;
879
+ mask-size:contain;
880
+ transform:translate(-50%, -50%);
881
+ }
882
+
883
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
884
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
885
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
886
+ }
887
+
888
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
889
+ outline:var(--t-focus-ring-outline);
890
+ outline-offset:var(--t-focus-ring-offset);
891
+ }
892
+
893
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
894
+ pointer-events:none;
895
+ }
896
+
897
+ @media (prefers-reduced-motion: reduce){
898
+
899
+ .tds-checkbox input[type="checkbox"]{
900
+ --tds-checkbox-transition-property:none;
901
+ }
902
+ }
903
+
904
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
905
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
906
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
907
+ --tds-checkbox-input-icon-visibility:visible;
908
+ --tds-checkbox-input-icon-opacity:1;
909
+ }
910
+
911
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
912
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
913
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
914
+ }
915
+
916
+ .tds-checkbox:has(input:checked){
917
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
918
+ }
919
+
920
+ .tds-checkbox:has(input:indeterminate){
921
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
922
+ }
923
+
924
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
925
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
926
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
927
+ --tds-checkbox-description-invalid-icon-display:inline-block;
928
+ }
929
+
930
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
931
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
932
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
933
+ }
934
+
935
+ :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{
936
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
937
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
938
+ }
939
+
940
+ :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){
941
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
942
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
943
+ }
944
+
945
+ .tds-checkbox:has(input:required) label::after{
946
+ margin-left:.25ch;
947
+ color:var(--t-text-color-status-error);
948
+ content:"*";
949
+ }
766
950
 
767
- 100%{
768
- opacity:0;
769
- transform:scale(1.75);
770
- }
771
- }
951
+ .tds-checkbox:has(input:disabled){
952
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
953
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
772
954
 
955
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
956
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
957
+ --tds-checkbox-cursor:not-allowed;
958
+ }
773
959
 
774
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
775
- -webkit-appearance:none;
776
- appearance:none;
960
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
961
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
777
962
  }
778
963
 
779
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
780
- inline-size:1em;
781
- block-size:2em;
782
- }
964
+ .tds-checkbox-description{
965
+ display:flex;
966
+ grid-area:2 / 2;
967
+ gap:var(--t-spacing-half);
968
+ align-items:flex-start;
969
+ margin:0;
970
+ font-size:var(--tds-checkbox-description-font-size);
971
+ line-height:var(--tds-checkbox-description-line-height);
972
+ color:var(--tds-checkbox-description-color);
973
+ cursor:text;
974
+ }
783
975
 
784
- @supports (field-sizing: content){
785
- .tds-input--auto-width{
786
- inline-size:-moz-fit-content;
787
- inline-size:fit-content;
788
- min-inline-size:min(100%, 122px);
976
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
977
+ display:var(--tds-checkbox-description-invalid-icon-display);
978
+ flex-shrink:0;
979
+ margin-top:calc(.5lh - .5em);
980
+ line-height:var(--tds-checkbox-description-line-height);
789
981
  }
790
982
 
791
- .tds-input--auto-width input{
792
- field-sizing:content;
793
- inline-size:auto;
794
- }
983
+ .tds-checkbox--sm{
984
+ --tds-checkbox-line-height:1.35;
985
+ --tds-checkbox-input-size:var(--t-element-size-sm);
986
+ --tds-checkbox-font-size:var(--t-font-size-sm);
987
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
988
+ --tds-checkbox-description-line-height:1.3;
795
989
  }
796
990
 
797
991
  .tds-radio-group{
@@ -1127,200 +1321,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1127
1321
  --tds-toggle-switch-display:inline-flex;
1128
1322
  }
1129
1323
 
1130
- .tds-checkbox{
1131
- --tds-checkbox-font-size:var(--t-font-size-md);
1132
- --tds-checkbox-cursor:pointer;
1133
- --tds-checkbox-line-height:1.4;
1134
- --tds-checkbox-transition-property:background-color, border-color;
1135
-
1136
- --tds-checkbox-input-size:var(--t-element-size-md);
1137
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1138
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1139
- --tds-checkbox-input-background-color:transparent;
1140
-
1141
- --tds-checkbox-input-icon:none;
1142
- --tds-checkbox-input-icon-visibility:hidden;
1143
- --tds-checkbox-input-icon-opacity:0;
1144
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1145
-
1146
- --tds-checkbox-label-color:var(--t-form-color);
1147
-
1148
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1149
- --tds-checkbox-description-line-height:1.35;
1150
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1151
- --tds-checkbox-description-invalid-icon-display:none;
1152
-
1153
- position:relative;
1154
- display:inline-grid;
1155
- grid-template-columns:auto;
1156
- grid-auto-columns:1fr;
1157
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1158
- line-height:var(--tds-checkbox-line-height);
1159
- cursor:var(--tds-checkbox-cursor);
1160
- -webkit-user-select:none;
1161
- -moz-user-select:none;
1162
- user-select:none;
1163
- }
1164
-
1165
- .tds-checkbox label{
1166
- grid-area:1 / 2;
1167
- font-size:var(--tds-checkbox-font-size);
1168
- font-weight:var(--t-font-weight-normal);
1169
- color:var(--tds-checkbox-label-color);
1170
- cursor:var(--tds-checkbox-cursor);
1171
- }
1172
-
1173
- .tds-checkbox tds-indeterminate{
1174
- display:flex;
1175
- }
1176
-
1177
- .tds-checkbox input[type="checkbox"]{
1178
- position:relative;
1179
- width:1em;
1180
- height:1em;
1181
- margin:calc((1lh - 1em) / 2) 0 0;
1182
- font-size:var(--tds-checkbox-font-size);
1183
- line-height:inherit;
1184
- -webkit-appearance:none;
1185
- -moz-appearance:none;
1186
- appearance:none;
1187
- cursor:var(--tds-checkbox-cursor);
1188
- background-color:var(--tds-checkbox-input-background-color);
1189
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1190
- border-radius:var(--tds-checkbox-input-border-radius);
1191
- transition-timing-function:var(--t-ease-in-out);
1192
- transition-duration:var(--t-duration-200);
1193
- transition-property:var(--tds-checkbox-transition-property);
1194
- }
1195
-
1196
- :is(.tds-checkbox input[type="checkbox"])::before{
1197
- position:absolute;
1198
- top:50%;
1199
- left:50%;
1200
- visibility:var(--tds-checkbox-input-icon-visibility);
1201
- width:100%;
1202
- height:100%;
1203
- content:"";
1204
- background-color:var(--tds-checkbox-input-icon-fill);
1205
- border-radius:var(--tds-checkbox-input-border-radius);
1206
- opacity:var(--tds-checkbox-input-icon-opacity);
1207
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1208
- mask-image:var(--tds-checkbox-input-icon);
1209
- -webkit-mask-repeat:no-repeat;
1210
- mask-repeat:no-repeat;
1211
- -webkit-mask-size:contain;
1212
- mask-size:contain;
1213
- transform:translate(-50%, -50%);
1214
- }
1215
-
1216
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1217
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1218
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1219
- }
1220
-
1221
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1222
- outline:var(--t-focus-ring-outline);
1223
- outline-offset:var(--t-focus-ring-offset);
1224
- }
1225
-
1226
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1227
- pointer-events:none;
1228
- }
1229
-
1230
- @media (prefers-reduced-motion: reduce){
1231
-
1232
- .tds-checkbox input[type="checkbox"]{
1233
- --tds-checkbox-transition-property:none;
1234
- }
1235
- }
1236
-
1237
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1238
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1239
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1240
- --tds-checkbox-input-icon-visibility:visible;
1241
- --tds-checkbox-input-icon-opacity:1;
1242
- }
1243
-
1244
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1245
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1246
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1247
- }
1248
-
1249
- .tds-checkbox:has(input:checked){
1250
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1251
- }
1252
-
1253
- .tds-checkbox:has(input:indeterminate){
1254
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1255
- }
1256
-
1257
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1258
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1259
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1260
- --tds-checkbox-description-invalid-icon-display:inline-block;
1261
- }
1262
-
1263
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1264
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1265
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1266
- }
1267
-
1268
- :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{
1269
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1270
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1271
- }
1272
-
1273
- :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){
1274
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1275
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1276
- }
1277
-
1278
- .tds-checkbox:has(input:required) label::after{
1279
- margin-left:.25ch;
1280
- color:var(--t-text-color-status-error);
1281
- content:"*";
1282
- }
1283
-
1284
- .tds-checkbox:has(input:disabled){
1285
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1286
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1287
-
1288
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1289
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1290
- --tds-checkbox-cursor:not-allowed;
1291
- }
1292
-
1293
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1294
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1295
- }
1296
-
1297
- .tds-checkbox-description{
1298
- display:flex;
1299
- grid-area:2 / 2;
1300
- gap:var(--t-spacing-half);
1301
- align-items:flex-start;
1302
- margin:0;
1303
- font-size:var(--tds-checkbox-description-font-size);
1304
- line-height:var(--tds-checkbox-description-line-height);
1305
- color:var(--tds-checkbox-description-color);
1306
- cursor:text;
1307
- }
1308
-
1309
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1310
- display:var(--tds-checkbox-description-invalid-icon-display);
1311
- flex-shrink:0;
1312
- margin-top:calc(.5lh - .5em);
1313
- line-height:var(--tds-checkbox-description-line-height);
1314
- }
1315
-
1316
- .tds-checkbox--sm{
1317
- --tds-checkbox-line-height:1.35;
1318
- --tds-checkbox-input-size:var(--t-element-size-sm);
1319
- --tds-checkbox-font-size:var(--t-font-size-sm);
1320
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1321
- --tds-checkbox-description-line-height:1.3;
1322
- }
1323
-
1324
1324
  .tds-select{
1325
1325
  --tds-select-border-color:var(--t-form-border-color);
1326
1326
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -3331,295 +3331,14 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3331
3331
  --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
3332
3332
  --t-border-color-control-neutral:hsl(0, 0%, 33%);
3333
3333
  --t-border-color-control-info:hsl(204, 100%, 35%);
3334
- --t-border-color-control-disabled:hsl(0, 0%, 24%);
3335
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
3336
- }
3337
- }
3338
-
3339
- @media (prefers-color-scheme: dark){
3340
- }
3341
-
3342
- .tds-combo-box{
3343
- --tds-combo-box-border-color:var(--t-form-border-color);
3344
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3345
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3346
- --tds-combo-box-background-color:var(--t-form-background-color);
3347
- --tds-combo-box-color:var(--t-form-color);
3348
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3349
- --tds-combo-box-font-size:var(--t-font-size-md);
3350
- --tds-combo-box-min-height:var(--t-container-size-md);
3351
- --tds-combo-box-padding-block:6px;
3352
- --tds-combo-box-button-offset:4px;
3353
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3354
- --tds-combo-box-description-invalid-icon-display:none;
3355
-
3356
- position:relative;
3357
- display:flex;
3358
- flex-direction:column;
3359
- gap:var(--t-spacing-half);
3360
- }
3361
-
3362
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3363
- margin-left:.25ch;
3364
- color:var(--t-text-color-status-error);
3365
- content:"*";
3366
- }
3367
-
3368
- .tds-combo-box[data-invalid]{
3369
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3370
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3371
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3372
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3373
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3374
- --tds-combo-box-description-invalid-icon-display:inline-block;
3375
- }
3376
-
3377
- .tds-combo-box[data-disabled]{
3378
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3379
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3380
- --tds-combo-box-color:var(--t-form-color-disabled);
3381
- }
3382
-
3383
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3384
- cursor:not-allowed;
3385
- }
3386
-
3387
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3388
- transform:rotate(.5turn);
3389
- }
3390
-
3391
- .tds-combo-box--lg{
3392
- --tds-combo-box-min-height:var(--t-container-size-lg);
3393
- --tds-combo-box-font-size:var(--t-font-size-lg);
3394
- --tds-combo-box-button-offset:5px;
3395
- }
3396
-
3397
- .tds-combo-box-label{
3398
- font-size:var(--t-font-size-md);
3399
- font-weight:var(--t-font-weight-normal);
3400
- color:var(--t-text-color);
3401
- cursor:default;
3402
- }
3403
-
3404
- .tds-combo-box-field{
3405
- display:flex;
3406
- align-items:center;
3407
- inline-size:100%;
3408
- min-block-size:var(--tds-combo-box-min-height);
3409
- font-family:inherit;
3410
- font-size:var(--tds-combo-box-font-size);
3411
- line-height:1;
3412
- color:var(--tds-combo-box-color);
3413
- -webkit-appearance:none;
3414
- -moz-appearance:none;
3415
- appearance:none;
3416
- cursor:default;
3417
- outline:var(--t-focus-ring-width) solid transparent;
3418
- outline-offset:0;
3419
- background-color:var(--tds-combo-box-background-color);
3420
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3421
- border-radius:var(--t-form-border-radius);
3422
- }
3423
-
3424
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3425
- border-color:var(--tds-combo-box-border-color-hover);
3426
- }
3427
-
3428
- .tds-combo-box-field[data-focus-within]{
3429
- outline-color:var(--t-focus-ring-color);
3430
- outline-offset:var(--t-focus-ring-offset);
3431
- border-color:var(--tds-combo-box-border-color-active);
3432
- }
3433
-
3434
- .tds-combo-box-field:has([readonly]){
3435
- --tds-combo-box-border-color:var(--t-form-border-color-readonly);
3436
- --tds-combo-box-border-color-hover:var(--t-form-border-color-readonly);
3437
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3438
- }
3439
-
3440
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3441
- border-color:var(--t-form-border-color-hover);
3442
- }
3443
-
3444
- .tds-combo-box-input{
3445
- display:flex;
3446
- flex:1;
3447
- align-items:center;
3448
- padding-block:var(--tds-combo-box-padding-block);
3449
- padding-inline:var(--t-spacing-1);
3450
- font-family:inherit;
3451
- font-size:inherit;
3452
- color:inherit;
3453
- outline:0;
3454
- background:transparent;
3455
- border:0;
3456
- }
3457
-
3458
- .tds-combo-box-input:has( + .tds-combo-box-button){
3459
- padding-inline-end:0;
3460
- }
3461
-
3462
- .tds-combo-box-input::-moz-placeholder{
3463
- color:var(--tds-combo-box-placeholder-color);
3464
- -moz-user-select:none;
3465
- user-select:none;
3466
- }
3467
-
3468
- .tds-combo-box-input::placeholder{
3469
- color:var(--tds-combo-box-placeholder-color);
3470
- -webkit-user-select:none;
3471
- -moz-user-select:none;
3472
- user-select:none;
3473
- }
3474
-
3475
- .tds-combo-box-button{
3476
- flex-shrink:0;
3477
- align-self:center;
3478
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3479
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3480
- padding:0;
3481
- margin-inline-end:var(--tds-combo-box-button-offset);
3482
- }
3483
-
3484
- .tds-combo-box-button > svg{
3485
- inline-size:var(--tds-combo-box-font-size);
3486
- block-size:var(--tds-combo-box-font-size);
3487
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3488
- }
3489
-
3490
- .tds-combo-box-popover{
3491
- width:var(--trigger-width);
3492
- max-block-size:inherit;
3493
- padding:var(--t-spacing-1);
3494
- overflow:auto;
3495
- outline:0;
3496
- scrollbar-color:#0004 #0000;
3497
- scrollbar-width:thin;
3498
- background:var(--t-surface-color-card);
3499
- background-clip:padding-box;
3500
- border:1px solid var(--t-border-color);
3501
- border-radius:var(--t-border-radius);
3502
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3503
- }
3504
-
3505
- .tds-combo-box-popover[data-entering]{
3506
- animation:tds-combo-box-popover-enter 160ms ease;
3507
- }
3508
-
3509
- .tds-combo-box-popover[data-exiting]{
3510
- animation:tds-combo-box-popover-exit 130ms ease;
3511
- }
3512
-
3513
- @keyframes tds-combo-box-popover-enter{
3514
- from{
3515
- opacity:0;
3516
- transform:translateY(-8px);
3517
- }
3518
- }
3519
-
3520
- @keyframes tds-combo-box-popover-exit{
3521
- to{
3522
- opacity:0;
3523
- transform:translateY(-8px);
3524
- }
3525
- }
3526
-
3527
- @media (prefers-reduced-motion: reduce){
3528
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3529
- animation:none;
3530
- }
3531
-
3532
- .tds-combo-box-button > svg{
3533
- transition:none;
3534
- }
3535
- }
3536
-
3537
- .tds-combo-box-list{
3538
- padding:0;
3539
- margin:0;
3540
- }
3541
-
3542
- .tds-combo-box-list-item{
3543
- display:block;
3544
- padding-block:var(--t-spacing-1);
3545
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3546
- overflow:hidden;
3547
- text-overflow:ellipsis;
3548
- font-size:1rem;
3549
- color:var(--t-text-color);
3550
- white-space:nowrap;
3551
- cursor:default;
3552
- border-radius:var(--t-border-radius);
3553
- }
3554
-
3555
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
3556
- background:var(--t-fill-color-neutral-070);
3557
- }
3558
-
3559
- .tds-combo-box-list-item[data-selected]{
3560
- background:var(--t-fill-color-button-interaction-ghost-active);
3561
- }
3562
-
3563
- .tds-combo-box-list-item[data-disabled]{
3564
- color:var(--t-form-color-disabled);
3565
- cursor:not-allowed;
3566
- }
3567
-
3568
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3569
- background:transparent;
3570
- }
3571
-
3572
- .tds-combo-box-empty-state{
3573
- position:relative;
3574
- min-block-size:var(--t-spacing-3);
3575
- padding-block:var(--t-spacing-1);
3576
- padding-inline:var(--t-spacing-2);
3577
- font-size:var(--t-font-size-md);
3578
- color:var(--t-text-color-secondary);
3579
- }
3580
-
3581
- .tds-combo-box-load-more{
3582
- position:relative;
3583
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
3584
- }
3585
-
3586
- .tds-combo-box-empty-state,
3587
- .tds-combo-box-load-more{
3588
- --tds-loading-spinner-visibility:visible;
3589
- --tds-loading-spinner-animation-play-state:running;
3334
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
3335
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
3590
3336
  }
3591
-
3592
- .tds-combo-box-list-section:not(:first-child){
3593
- margin-block-start:var(--t-spacing-half);
3594
- }
3595
-
3596
- .tds-combo-box-section-header{
3597
- padding-block:var(--t-spacing-1);
3598
- padding-inline:var(--t-spacing-1);
3599
- font-size:var(--t-font-size-sm);
3600
- font-weight:var(--t-font-weight-semibold);
3601
- color:var(--t-text-color-secondary);
3602
3337
  }
3603
3338
 
3604
- .tds-combo-box-description{
3605
- display:flex;
3606
- gap:var(--t-spacing-half);
3607
- align-items:flex-start;
3608
- margin:0;
3609
- font-size:var(--t-font-size-sm);
3610
- line-height:1.35;
3611
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3612
- cursor:text;
3339
+ @media (prefers-color-scheme: dark){
3613
3340
  }
3614
3341
 
3615
- .tds-combo-box-description .tds-combo-box-description-invalid-icon{
3616
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3617
- flex-shrink:0;
3618
- margin-block-start:calc(.5lh - .5em);
3619
- line-height:1.35;
3620
- }
3621
-
3622
-
3623
3342
  .tds-checkbox-group{
3624
3343
  --tds-checkbox-group-font-size:var(--t-font-size-md);
3625
3344
  --tds-checkbox-group-line-height:1.4;
@@ -3698,18 +3417,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3698
3417
  --tds-checkbox-group-description-line-height:1.3;
3699
3418
  }
3700
3419
 
3701
- .tds-time-field{
3702
- --tds-time-field-border-color:var(--t-form-border-color);
3703
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3704
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3705
- --tds-time-field-background-color:var(--t-form-background-color);
3706
- --tds-time-field-color:var(--t-form-color);
3707
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3708
- --tds-time-field-font-size:var(--t-font-size-md);
3709
- --tds-time-field-min-height:var(--t-container-size-md);
3710
- --tds-time-field-padding-block:6px;
3711
- --tds-time-field-description-color:var(--t-text-color-secondary);
3712
- --tds-time-field-description-invalid-icon-display:none;
3420
+ .tds-combo-box{
3421
+ --tds-combo-box-border-color:var(--t-form-border-color);
3422
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3423
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3424
+ --tds-combo-box-background-color:var(--t-form-background-color);
3425
+ --tds-combo-box-color:var(--t-form-color);
3426
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3427
+ --tds-combo-box-font-size:var(--t-font-size-md);
3428
+ --tds-combo-box-min-height:var(--t-container-size-md);
3429
+ --tds-combo-box-padding-block:6px;
3430
+ --tds-combo-box-button-offset:4px;
3431
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3432
+ --tds-combo-box-description-invalid-icon-display:none;
3713
3433
 
3714
3434
  position:relative;
3715
3435
  display:flex;
@@ -3717,281 +3437,261 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3717
3437
  gap:var(--t-spacing-half);
3718
3438
  }
3719
3439
 
3720
- .tds-time-field[data-required] .tds-time-field-label::after{
3440
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3721
3441
  margin-left:.25ch;
3722
3442
  color:var(--t-text-color-status-error);
3723
3443
  content:"*";
3724
3444
  }
3725
3445
 
3726
- .tds-time-field[data-invalid]{
3727
- --tds-time-field-border-color:var(--t-form-border-color-error);
3728
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3729
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3730
- --tds-time-field-background-color:var(--t-form-background-color-error);
3731
- --tds-time-field-description-color:var(--t-text-color-status-error);
3732
- --tds-time-field-description-invalid-icon-display:inline-block;
3446
+ .tds-combo-box[data-invalid]{
3447
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3448
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3449
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3450
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3451
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3452
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3733
3453
  }
3734
3454
 
3735
- .tds-time-field[data-disabled]{
3736
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3737
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3738
- --tds-time-field-color:var(--t-form-color-disabled);
3739
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3455
+ .tds-combo-box[data-disabled]{
3456
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3457
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3458
+ --tds-combo-box-color:var(--t-form-color-disabled);
3740
3459
  }
3741
3460
 
3742
- .tds-time-field[data-disabled] .tds-time-field-input{
3461
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3743
3462
  cursor:not-allowed;
3744
3463
  }
3745
3464
 
3746
- .tds-time-field--lg{
3747
- --tds-time-field-min-height:var(--t-container-size-lg);
3748
- --tds-time-field-font-size:var(--t-font-size-lg);
3465
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3466
+ transform:rotate(.5turn);
3467
+ }
3468
+
3469
+ .tds-combo-box--lg{
3470
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3471
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3472
+ --tds-combo-box-button-offset:5px;
3749
3473
  }
3750
3474
 
3751
- .tds-time-field-label{
3475
+ .tds-combo-box-label{
3752
3476
  font-size:var(--t-font-size-md);
3753
3477
  font-weight:var(--t-font-weight-normal);
3754
3478
  color:var(--t-text-color);
3755
3479
  cursor:default;
3756
3480
  }
3757
3481
 
3758
- .tds-time-field-input{
3482
+ .tds-combo-box-field{
3759
3483
  display:flex;
3760
3484
  align-items:center;
3761
3485
  inline-size:100%;
3762
- min-block-size:var(--tds-time-field-min-height);
3763
- padding-block:var(--tds-time-field-padding-block);
3764
- padding-inline:var(--t-spacing-1);
3486
+ min-block-size:var(--tds-combo-box-min-height);
3765
3487
  font-family:inherit;
3766
- font-size:var(--tds-time-field-font-size);
3767
- font-variant-numeric:tabular-nums;
3488
+ font-size:var(--tds-combo-box-font-size);
3768
3489
  line-height:1;
3769
- color:var(--tds-time-field-color);
3770
- cursor:text;
3490
+ color:var(--tds-combo-box-color);
3491
+ -webkit-appearance:none;
3492
+ -moz-appearance:none;
3493
+ appearance:none;
3494
+ cursor:default;
3771
3495
  outline:var(--t-focus-ring-width) solid transparent;
3772
3496
  outline-offset:0;
3773
- background-color:var(--tds-time-field-background-color);
3774
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3497
+ background-color:var(--tds-combo-box-background-color);
3498
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3775
3499
  border-radius:var(--t-form-border-radius);
3776
3500
  }
3777
3501
 
3778
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3779
- border-color:var(--tds-time-field-border-color-hover);
3502
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3503
+ border-color:var(--tds-combo-box-border-color-hover);
3780
3504
  }
3781
3505
 
3782
- .tds-time-field-input[data-focus-within]{
3506
+ .tds-combo-box-field[data-focus-within]{
3783
3507
  outline-color:var(--t-focus-ring-color);
3784
3508
  outline-offset:var(--t-focus-ring-offset);
3785
- border-color:var(--tds-time-field-border-color-active);
3509
+ border-color:var(--tds-combo-box-border-color-active);
3786
3510
  }
3787
3511
 
3788
- .tds-time-field-input[data-readonly]{
3789
- color:var(--t-form-color-readonly);
3790
- background-color:var(--t-form-background-color-readonly);
3791
- border-color:var(--t-form-border-color-readonly);
3512
+ .tds-combo-box-field:has([readonly]){
3513
+ --tds-combo-box-border-color:var(--t-form-border-color-readonly);
3514
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-readonly);
3515
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3792
3516
  }
3793
3517
 
3794
- .tds-time-field-input[data-readonly][data-hovered]{
3795
- border-color:var(--t-form-border-color-readonly);
3796
- }
3797
-
3798
- .tds-time-field-input[data-readonly][data-focus-within]{
3799
- outline-color:var(--t-focus-ring-color);
3800
- outline-offset:var(--t-focus-ring-offset);
3518
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3801
3519
  border-color:var(--t-form-border-color-hover);
3802
3520
  }
3803
3521
 
3804
- .tds-time-field-segment{
3805
- padding-inline:1px;
3806
- font-variant-numeric:tabular-nums;
3807
- cursor:text;
3808
- caret-color:transparent;
3809
- border-radius:var(--t-border-radius-sm);
3522
+ .tds-combo-box-input{
3523
+ display:flex;
3524
+ flex:1;
3525
+ align-items:center;
3526
+ padding-block:var(--tds-combo-box-padding-block);
3527
+ padding-inline:var(--t-spacing-1);
3528
+ font-family:inherit;
3529
+ font-size:inherit;
3530
+ color:inherit;
3531
+ outline:0;
3532
+ background:transparent;
3533
+ border:0;
3810
3534
  }
3811
3535
 
3812
- .tds-time-field-segment[data-placeholder]{
3813
- color:var(--tds-time-field-placeholder-color);
3536
+ .tds-combo-box-input:has( + .tds-combo-box-button){
3537
+ padding-inline-end:0;
3814
3538
  }
3815
3539
 
3816
- .tds-time-field-segment[data-focused]{
3817
- color:var(--t-text-color-inverted);
3818
- outline:0;
3819
- background:var(--t-fill-color-interaction);
3540
+ .tds-combo-box-input::-moz-placeholder{
3541
+ color:var(--tds-combo-box-placeholder-color);
3542
+ -moz-user-select:none;
3543
+ user-select:none;
3820
3544
  }
3821
3545
 
3822
- .tds-time-field-segment-separator{
3823
- padding-inline:0;
3824
- color:var(--tds-time-field-placeholder-color);
3825
- }
3546
+ .tds-combo-box-input::placeholder{
3547
+ color:var(--tds-combo-box-placeholder-color);
3548
+ -webkit-user-select:none;
3549
+ -moz-user-select:none;
3550
+ user-select:none;
3551
+ }
3826
3552
 
3827
- .tds-time-field-description{
3828
- display:flex;
3829
- gap:var(--t-spacing-half);
3830
- align-items:flex-start;
3831
- margin:0;
3832
- font-size:var(--t-font-size-sm);
3833
- line-height:1.35;
3834
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3835
- cursor:text;
3553
+ .tds-combo-box-button{
3554
+ flex-shrink:0;
3555
+ align-self:center;
3556
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3557
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3558
+ padding:0;
3559
+ margin-inline-end:var(--tds-combo-box-button-offset);
3836
3560
  }
3837
3561
 
3838
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3839
- display:var(--tds-time-field-description-invalid-icon-display, none);
3840
- flex-shrink:0;
3841
- margin-block-start:calc(.5lh - .5em);
3842
- line-height:1.35;
3562
+ .tds-combo-box-button > svg{
3563
+ inline-size:var(--tds-combo-box-font-size);
3564
+ block-size:var(--tds-combo-box-font-size);
3565
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3843
3566
  }
3844
3567
 
3845
- .tds-number-stepper{
3846
- --tds-number-stepper-border-color:var(--t-form-border-color);
3847
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3848
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3849
- --tds-number-stepper-background-color:var(--t-form-background-color);
3850
- --tds-number-stepper-color:var(--t-form-color);
3851
- --tds-number-stepper-font-size:var(--t-font-size-md);
3852
- --tds-number-stepper-min-height:var(--t-container-size-md);
3853
- --tds-number-stepper-padding-block:6px;
3854
- --tds-number-stepper-button-offset:4px;
3855
- --tds-number-stepper-button-gap:2px;
3856
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
3857
- --tds-number-stepper-description-invalid-icon-display:none;
3858
-
3859
- position:relative;
3860
- display:flex;
3861
- flex-direction:column;
3862
- gap:var(--t-spacing-half);
3568
+ .tds-combo-box-popover{
3569
+ width:var(--trigger-width);
3570
+ max-block-size:inherit;
3571
+ padding:var(--t-spacing-1);
3572
+ overflow:auto;
3573
+ outline:0;
3574
+ scrollbar-color:#0004 #0000;
3575
+ scrollbar-width:thin;
3576
+ background:var(--t-surface-color-card);
3577
+ background-clip:padding-box;
3578
+ border:1px solid var(--t-border-color);
3579
+ border-radius:var(--t-border-radius);
3580
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3863
3581
  }
3864
3582
 
3865
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3866
- margin-left:.25ch;
3867
- color:var(--t-text-color-status-error);
3868
- content:"*";
3583
+ .tds-combo-box-popover[data-entering]{
3584
+ animation:tds-combo-box-popover-enter 160ms ease;
3869
3585
  }
3870
3586
 
3871
- .tds-number-stepper[data-invalid]{
3872
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
3873
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3874
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3875
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
3876
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
3877
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3587
+ .tds-combo-box-popover[data-exiting]{
3588
+ animation:tds-combo-box-popover-exit 130ms ease;
3589
+ }
3590
+
3591
+ @keyframes tds-combo-box-popover-enter{
3592
+ from{
3593
+ opacity:0;
3594
+ transform:translateY(-8px);
3878
3595
  }
3596
+ }
3879
3597
 
3880
- .tds-number-stepper[data-disabled]{
3881
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3882
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3883
- --tds-number-stepper-color:var(--t-form-color-disabled);
3598
+ @keyframes tds-combo-box-popover-exit{
3599
+ to{
3600
+ opacity:0;
3601
+ transform:translateY(-8px);
3884
3602
  }
3603
+ }
3885
3604
 
3886
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3887
- cursor:not-allowed;
3605
+ @media (prefers-reduced-motion: reduce){
3606
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3607
+ animation:none;
3888
3608
  }
3889
3609
 
3890
- .tds-number-stepper--lg{
3891
- --tds-number-stepper-min-height:var(--t-container-size-lg);
3892
- --tds-number-stepper-font-size:var(--t-font-size-lg);
3893
- --tds-number-stepper-button-offset:5px;
3894
- --tds-number-stepper-button-gap:4px;
3610
+ .tds-combo-box-button > svg{
3611
+ transition:none;
3612
+ }
3895
3613
  }
3896
3614
 
3897
- .tds-number-stepper-label{
3898
- font-size:var(--t-font-size-md);
3899
- font-weight:var(--t-font-weight-normal);
3900
- color:var(--t-text-color);
3901
- cursor:default;
3615
+ .tds-combo-box-list{
3616
+ padding:0;
3617
+ margin:0;
3902
3618
  }
3903
3619
 
3904
- .tds-number-stepper-field{
3905
- display:flex;
3906
- gap:var(--tds-number-stepper-button-gap);
3907
- align-items:center;
3908
- inline-size:100%;
3909
- min-block-size:var(--tds-number-stepper-min-height);
3910
- font-family:inherit;
3911
- font-size:var(--tds-number-stepper-font-size);
3912
- line-height:1;
3913
- color:var(--tds-number-stepper-color);
3914
- -webkit-appearance:none;
3915
- -moz-appearance:none;
3916
- appearance:none;
3620
+ .tds-combo-box-list-item{
3621
+ display:block;
3622
+ padding-block:var(--t-spacing-1);
3623
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3624
+ overflow:hidden;
3625
+ text-overflow:ellipsis;
3626
+ font-size:1rem;
3627
+ color:var(--t-text-color);
3628
+ white-space:nowrap;
3917
3629
  cursor:default;
3918
- outline:var(--t-focus-ring-width) solid transparent;
3919
- outline-offset:0;
3920
- background-color:var(--tds-number-stepper-background-color);
3921
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3922
- border-radius:var(--t-form-border-radius);
3630
+ border-radius:var(--t-border-radius);
3923
3631
  }
3924
3632
 
3925
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3926
- border-color:var(--tds-number-stepper-border-color-hover);
3633
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
3634
+ background:var(--t-fill-color-neutral-070);
3927
3635
  }
3928
3636
 
3929
- .tds-number-stepper-field[data-focus-within]{
3930
- outline-color:var(--t-focus-ring-color);
3931
- outline-offset:var(--t-focus-ring-offset);
3932
- border-color:var(--tds-number-stepper-border-color-active);
3637
+ .tds-combo-box-list-item[data-selected]{
3638
+ background:var(--t-fill-color-button-interaction-ghost-active);
3933
3639
  }
3934
3640
 
3935
- .tds-number-stepper-field:has([readonly]){
3936
- --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3937
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3938
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3641
+ .tds-combo-box-list-item[data-disabled]{
3642
+ color:var(--t-form-color-disabled);
3643
+ cursor:not-allowed;
3939
3644
  }
3940
3645
 
3941
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3942
- border-color:var(--t-form-border-color-hover);
3943
- }
3944
-
3945
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3946
- display:none;
3646
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3647
+ background:transparent;
3947
3648
  }
3948
3649
 
3949
- .tds-number-stepper-input{
3950
- display:flex;
3951
- flex:1;
3952
- align-items:center;
3953
- min-inline-size:0;
3954
- padding-block:var(--tds-number-stepper-padding-block);
3955
- padding-inline:var(--t-spacing-1);
3956
- font-family:inherit;
3957
- font-size:inherit;
3958
- color:inherit;
3959
- outline:0;
3960
- background:transparent;
3961
- border:0;
3650
+ .tds-combo-box-empty-state{
3651
+ position:relative;
3652
+ min-block-size:var(--t-spacing-3);
3653
+ padding-block:var(--t-spacing-1);
3654
+ padding-inline:var(--t-spacing-2);
3655
+ font-size:var(--t-font-size-md);
3656
+ color:var(--t-text-color-secondary);
3962
3657
  }
3963
3658
 
3964
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3965
- margin:0;
3966
- -webkit-appearance:none;
3967
- appearance:none;
3968
- }
3659
+ .tds-combo-box-load-more{
3660
+ position:relative;
3661
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
3662
+ }
3969
3663
 
3970
- .tds-number-stepper-button{
3971
- flex-shrink:0;
3972
- align-self:center;
3973
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3974
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3975
- padding:0;
3664
+ .tds-combo-box-empty-state,
3665
+ .tds-combo-box-load-more{
3666
+ --tds-loading-spinner-visibility:visible;
3667
+ --tds-loading-spinner-animation-play-state:running;
3976
3668
  }
3977
3669
 
3978
- .tds-number-stepper-button:last-of-type{
3979
- margin-inline-end:var(--tds-number-stepper-button-offset);
3670
+ .tds-combo-box-list-section:not(:first-child){
3671
+ margin-block-start:var(--t-spacing-half);
3980
3672
  }
3981
3673
 
3982
- .tds-number-stepper-description{
3674
+ .tds-combo-box-section-header{
3675
+ padding-block:var(--t-spacing-1);
3676
+ padding-inline:var(--t-spacing-1);
3677
+ font-size:var(--t-font-size-sm);
3678
+ font-weight:var(--t-font-weight-semibold);
3679
+ color:var(--t-text-color-secondary);
3680
+ }
3681
+
3682
+ .tds-combo-box-description{
3983
3683
  display:flex;
3984
3684
  gap:var(--t-spacing-half);
3985
3685
  align-items:flex-start;
3986
3686
  margin:0;
3987
3687
  font-size:var(--t-font-size-sm);
3988
3688
  line-height:1.35;
3989
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3689
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3990
3690
  cursor:text;
3991
3691
  }
3992
3692
 
3993
- .tds-number-stepper-description .tds-number-stepper-description-invalid-icon{
3994
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
3693
+ .tds-combo-box-description .tds-combo-box-description-invalid-icon{
3694
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3995
3695
  flex-shrink:0;
3996
3696
  margin-block-start:calc(.5lh - .5em);
3997
3697
  line-height:1.35;
@@ -4234,24 +3934,140 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4234
3934
  scrollbar-width:thin;
4235
3935
  }
4236
3936
 
4237
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
4238
- grid-template-rows:repeat(4, 1fr);
4239
- padding-bottom:var(--tds-date-picker-popover-padding);
3937
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
3938
+ grid-template-rows:repeat(4, 1fr);
3939
+ padding-bottom:var(--tds-date-picker-popover-padding);
3940
+ }
3941
+
3942
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
3943
+ grid-auto-rows:var(--t-container-size-xl);
3944
+ padding-right:var(--t-spacing-1);
3945
+ overflow-y:auto;
3946
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
3947
+ }
3948
+
3949
+ .tds-date-picker-overlay-cell{
3950
+ display:flex;
3951
+ align-items:center;
3952
+ justify-content:center;
3953
+ font-family:inherit;
3954
+ font-size:var(--tds-date-picker-popover-font-size);
3955
+ color:var(--t-text-color);
3956
+ cursor:pointer;
3957
+ outline:0;
3958
+ background-color:transparent;
3959
+ border:0;
3960
+ border-radius:var(--t-border-radius-md);
3961
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
3962
+ transition-duration:var(--t-duration-100);
3963
+ transition-property:var(--tds-date-picker-popover-interactive-property);
3964
+ }
3965
+
3966
+ .tds-date-picker-overlay-cell[data-hovered]{
3967
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
3968
+ }
3969
+
3970
+ .tds-date-picker-overlay-cell[data-pressed]{
3971
+ background-color:var(--t-fill-color-button-neutral-outline-active);
3972
+ }
3973
+
3974
+ .tds-date-picker-overlay-cell[data-selected]{
3975
+ font-weight:var(--t-font-weight-semibold);
3976
+ color:var(--t-text-color-inverted);
3977
+ background-color:var(--t-fill-color-interaction);
3978
+ }
3979
+
3980
+ .tds-date-picker-overlay-cell[data-focus-visible]{
3981
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3982
+ }
3983
+
3984
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
3985
+ outline-offset:var(--t-focus-ring-offset);
3986
+ }
3987
+
3988
+ .tds-date-picker-calendar-heading{
3989
+ display:flex;
3990
+ flex:1;
3991
+ gap:var(--t-spacing-1);
3992
+ align-items:center;
3993
+ justify-content:flex-start;
3994
+ padding-inline-start:4px;
3995
+ }
3996
+
3997
+ .tds-date-picker-calendar-overlay-trigger{
3998
+ --_background-color:transparent;
3999
+ position:relative;
4000
+ padding:0;
4001
+ font-family:inherit;
4002
+ font-size:var(--tds-date-picker-popover-font-size);
4003
+ font-weight:var(--t-font-weight-semibold);
4004
+ font-feature-settings:"ss01", "ss02";
4005
+ color:var(--t-text-color);
4006
+ cursor:pointer;
4007
+ outline:0;
4008
+ background-color:transparent;
4009
+ border:0;
4010
+ border-radius:var(--t-border-radius-md);
4011
+ isolation:isolate;
4012
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4013
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
4014
+ transition-property:var(--tds-date-picker-popover-interactive-property);
4015
+ }
4016
+
4017
+ .tds-date-picker-calendar-overlay-trigger::before{
4018
+ position:absolute;
4019
+ inset:calc(var(--t-spacing-half) * -1);
4020
+ z-index:-1;
4021
+ pointer-events:inherit;
4022
+ content:"";
4023
+ background-color:var(--_background-color);
4024
+ border-radius:inherit;
4025
+ }
4026
+
4027
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
4028
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
4029
+ }
4030
+
4031
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
4032
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
4033
+ }
4034
+
4035
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
4036
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4037
+ outline-offset:var(--t-focus-ring-offset);
4038
+ }
4039
+
4040
+ .tds-date-picker-calendar{
4041
+ inline-size:-moz-fit-content;
4042
+ inline-size:fit-content;
4043
+ font-size:var(--tds-date-picker-popover-font-size);
4044
+ }
4045
+
4046
+ .tds-date-picker-calendar-body{
4047
+ position:relative;
4048
+ padding:var(--tds-date-picker-popover-padding);
4049
+ padding-block-start:0;
4050
+ }
4051
+
4052
+ .tds-date-picker-calendar-header{
4053
+ display:flex;
4054
+ align-items:center;
4055
+ justify-content:space-between;
4056
+ padding:var(--tds-date-picker-popover-padding);
4240
4057
  }
4241
4058
 
4242
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
4243
- grid-auto-rows:var(--t-container-size-xl);
4244
- padding-right:var(--t-spacing-1);
4245
- overflow-y:auto;
4246
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
4059
+ .tds-date-picker-calendar-title{
4060
+ padding:var(--t-spacing-half) var(--t-spacing-1);
4061
+ font-size:var(--tds-date-picker-popover-font-size);
4062
+ font-weight:var(--t-font-weight-semibold);
4247
4063
  }
4248
4064
 
4249
- .tds-date-picker-overlay-cell{
4065
+ .tds-date-picker-calendar-nav{
4250
4066
  display:flex;
4251
4067
  align-items:center;
4252
4068
  justify-content:center;
4253
- font-family:inherit;
4254
- font-size:var(--tds-date-picker-popover-font-size);
4069
+ padding:var(--t-spacing-half);
4070
+ font-size:.875em;
4255
4071
  color:var(--t-text-color);
4256
4072
  cursor:pointer;
4257
4073
  outline:0;
@@ -4259,235 +4075,419 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4259
4075
  border:0;
4260
4076
  border-radius:var(--t-border-radius-md);
4261
4077
  transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4262
- transition-duration:var(--t-duration-100);
4078
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
4263
4079
  transition-property:var(--tds-date-picker-popover-interactive-property);
4264
4080
  }
4265
4081
 
4266
- .tds-date-picker-overlay-cell[data-hovered]{
4082
+ .tds-date-picker-calendar-nav[data-hovered]{
4267
4083
  background-color:var(--t-fill-color-button-neutral-outline-hover);
4268
4084
  }
4269
4085
 
4270
- .tds-date-picker-overlay-cell[data-pressed]{
4086
+ .tds-date-picker-calendar-nav[data-pressed]{
4271
4087
  background-color:var(--t-fill-color-button-neutral-outline-active);
4272
4088
  }
4273
4089
 
4274
- .tds-date-picker-overlay-cell[data-selected]{
4275
- font-weight:var(--t-font-weight-semibold);
4276
- color:var(--t-text-color-inverted);
4277
- background-color:var(--t-fill-color-interaction);
4090
+ .tds-date-picker-calendar-nav[data-focus-visible]{
4091
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4092
+ outline-offset:var(--t-focus-ring-offset);
4278
4093
  }
4279
4094
 
4280
- .tds-date-picker-overlay-cell[data-focus-visible]{
4281
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4095
+ .tds-date-picker-calendar-nav[data-disabled]{
4096
+ color:var(--t-text-color-disabled);
4097
+ cursor:not-allowed;
4282
4098
  }
4283
4099
 
4284
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
4285
- outline-offset:var(--t-focus-ring-offset);
4100
+ .tds-date-picker-calendar-grid{
4101
+ font-feature-settings:"ss01", "ss02";
4102
+ border-collapse:collapse;
4103
+ }
4104
+
4105
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
4106
+ padding:0;
4107
+ border:0;
4286
4108
  }
4287
4109
 
4288
- .tds-date-picker-calendar-heading{
4289
- display:flex;
4290
- flex:1;
4291
- gap:var(--t-spacing-1);
4292
- align-items:center;
4293
- justify-content:flex-start;
4294
- padding-inline-start:4px;
4110
+ .tds-date-picker-calendar-header-cell{
4111
+ padding-block-end:var(--t-spacing-1);
4112
+ font-size:.875em;
4113
+ font-weight:var(--t-font-weight-medium);
4114
+ color:var(--t-text-color-secondary);
4115
+ text-align:center;
4116
+ -webkit-user-select:none;
4117
+ -moz-user-select:none;
4118
+ user-select:none;
4295
4119
  }
4296
4120
 
4297
- .tds-date-picker-calendar-overlay-trigger{
4298
- --_background-color:transparent;
4121
+ .tds-date-picker-calendar-cell-button{
4299
4122
  position:relative;
4300
- padding:0;
4301
- font-family:inherit;
4302
- font-size:var(--tds-date-picker-popover-font-size);
4303
- font-weight:var(--t-font-weight-semibold);
4304
- font-feature-settings:"ss01", "ss02";
4123
+ display:flex;
4124
+ align-items:center;
4125
+ justify-content:center;
4126
+ inline-size:2.25em;
4127
+ block-size:2.25em;
4305
4128
  color:var(--t-text-color);
4306
4129
  cursor:pointer;
4130
+ -webkit-user-select:none;
4131
+ -moz-user-select:none;
4132
+ user-select:none;
4307
4133
  outline:0;
4308
- background-color:transparent;
4309
- border:0;
4310
- border-radius:var(--t-border-radius-md);
4311
- isolation:isolate;
4312
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4313
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4314
- transition-property:var(--tds-date-picker-popover-interactive-property);
4315
4134
  }
4316
4135
 
4317
- .tds-date-picker-calendar-overlay-trigger::before{
4136
+ .tds-date-picker-calendar-cell-button::before{
4318
4137
  position:absolute;
4319
- inset:calc(var(--t-spacing-half) * -1);
4138
+ inset:0;
4320
4139
  z-index:-1;
4321
- pointer-events:inherit;
4322
4140
  content:"";
4323
4141
  background-color:var(--_background-color);
4324
- border-radius:inherit;
4142
+ border-radius:50%;
4325
4143
  }
4326
4144
 
4327
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
4145
+ .tds-date-picker-calendar-cell-button[data-today]::before{
4146
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
4147
+ }
4148
+
4149
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
4150
+ display:none;
4151
+ }
4152
+
4153
+ .tds-date-picker-calendar-cell-button[data-hovered]{
4328
4154
  --_background-color:var(--t-fill-color-button-neutral-outline-hover);
4329
4155
  }
4330
4156
 
4331
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
4157
+ .tds-date-picker-calendar-cell-button[data-pressed]{
4332
4158
  --_background-color:var(--t-fill-color-button-neutral-outline-active);
4333
4159
  }
4334
4160
 
4335
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
4336
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4337
- outline-offset:var(--t-focus-ring-offset);
4161
+ .tds-date-picker-calendar-cell-button[data-selected]{
4162
+ --_background-color:var(--t-fill-color-interaction);
4163
+ font-weight:var(--t-font-weight-semibold);
4164
+ color:var(--t-text-color-inverted);
4165
+ border-color:transparent;
4166
+ }
4167
+
4168
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
4169
+ color:var(--t-text-color-disabled);
4170
+ text-decoration:line-through;
4171
+ cursor:not-allowed;
4172
+ }
4173
+
4174
+ .tds-date-picker-calendar-cell-button[data-disabled]{
4175
+ color:var(--t-text-color-disabled);
4176
+ }
4177
+
4178
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
4179
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4180
+ outline-offset:-2px;
4181
+ }
4182
+
4183
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
4184
+ outline-offset:var(--t-focus-ring-offset);
4185
+ }
4186
+
4187
+ .tds-date-picker-popover--lg{
4188
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
4189
+ }
4190
+
4191
+ .tds-number-stepper{
4192
+ --tds-number-stepper-border-color:var(--t-form-border-color);
4193
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
4194
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
4195
+ --tds-number-stepper-background-color:var(--t-form-background-color);
4196
+ --tds-number-stepper-color:var(--t-form-color);
4197
+ --tds-number-stepper-font-size:var(--t-font-size-md);
4198
+ --tds-number-stepper-min-height:var(--t-container-size-md);
4199
+ --tds-number-stepper-padding-block:6px;
4200
+ --tds-number-stepper-button-offset:4px;
4201
+ --tds-number-stepper-button-gap:2px;
4202
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
4203
+ --tds-number-stepper-description-invalid-icon-display:none;
4204
+
4205
+ position:relative;
4206
+ display:flex;
4207
+ flex-direction:column;
4208
+ gap:var(--t-spacing-half);
4209
+ }
4210
+
4211
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4212
+ margin-left:.25ch;
4213
+ color:var(--t-text-color-status-error);
4214
+ content:"*";
4215
+ }
4216
+
4217
+ .tds-number-stepper[data-invalid]{
4218
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
4219
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4220
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4221
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
4222
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
4223
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
4224
+ }
4225
+
4226
+ .tds-number-stepper[data-disabled]{
4227
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4228
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4229
+ --tds-number-stepper-color:var(--t-form-color-disabled);
4230
+ }
4231
+
4232
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4233
+ cursor:not-allowed;
4234
+ }
4235
+
4236
+ .tds-number-stepper--lg{
4237
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
4238
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
4239
+ --tds-number-stepper-button-offset:5px;
4240
+ --tds-number-stepper-button-gap:4px;
4241
+ }
4242
+
4243
+ .tds-number-stepper-label{
4244
+ font-size:var(--t-font-size-md);
4245
+ font-weight:var(--t-font-weight-normal);
4246
+ color:var(--t-text-color);
4247
+ cursor:default;
4248
+ }
4249
+
4250
+ .tds-number-stepper-field{
4251
+ display:flex;
4252
+ gap:var(--tds-number-stepper-button-gap);
4253
+ align-items:center;
4254
+ inline-size:100%;
4255
+ min-block-size:var(--tds-number-stepper-min-height);
4256
+ font-family:inherit;
4257
+ font-size:var(--tds-number-stepper-font-size);
4258
+ line-height:1;
4259
+ color:var(--tds-number-stepper-color);
4260
+ -webkit-appearance:none;
4261
+ -moz-appearance:none;
4262
+ appearance:none;
4263
+ cursor:default;
4264
+ outline:var(--t-focus-ring-width) solid transparent;
4265
+ outline-offset:0;
4266
+ background-color:var(--tds-number-stepper-background-color);
4267
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4268
+ border-radius:var(--t-form-border-radius);
4269
+ }
4270
+
4271
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4272
+ border-color:var(--tds-number-stepper-border-color-hover);
4273
+ }
4274
+
4275
+ .tds-number-stepper-field[data-focus-within]{
4276
+ outline-color:var(--t-focus-ring-color);
4277
+ outline-offset:var(--t-focus-ring-offset);
4278
+ border-color:var(--tds-number-stepper-border-color-active);
4279
+ }
4280
+
4281
+ .tds-number-stepper-field:has([readonly]){
4282
+ --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
4283
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
4284
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4285
+ }
4286
+
4287
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
4288
+ border-color:var(--t-form-border-color-hover);
4289
+ }
4290
+
4291
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
4292
+ display:none;
4293
+ }
4294
+
4295
+ .tds-number-stepper-input{
4296
+ display:flex;
4297
+ flex:1;
4298
+ align-items:center;
4299
+ min-inline-size:0;
4300
+ padding-block:var(--tds-number-stepper-padding-block);
4301
+ padding-inline:var(--t-spacing-1);
4302
+ font-family:inherit;
4303
+ font-size:inherit;
4304
+ color:inherit;
4305
+ outline:0;
4306
+ background:transparent;
4307
+ border:0;
4308
+ }
4309
+
4310
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4311
+ margin:0;
4312
+ -webkit-appearance:none;
4313
+ appearance:none;
4338
4314
  }
4339
4315
 
4340
- .tds-date-picker-calendar{
4341
- inline-size:-moz-fit-content;
4342
- inline-size:fit-content;
4343
- font-size:var(--tds-date-picker-popover-font-size);
4316
+ .tds-number-stepper-button{
4317
+ flex-shrink:0;
4318
+ align-self:center;
4319
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4320
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4321
+ padding:0;
4344
4322
  }
4345
4323
 
4346
- .tds-date-picker-calendar-body{
4347
- position:relative;
4348
- padding:var(--tds-date-picker-popover-padding);
4349
- padding-block-start:0;
4350
- }
4324
+ .tds-number-stepper-button:last-of-type{
4325
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4326
+ }
4351
4327
 
4352
- .tds-date-picker-calendar-header{
4328
+ .tds-number-stepper-description{
4353
4329
  display:flex;
4354
- align-items:center;
4355
- justify-content:space-between;
4356
- padding:var(--tds-date-picker-popover-padding);
4330
+ gap:var(--t-spacing-half);
4331
+ align-items:flex-start;
4332
+ margin:0;
4333
+ font-size:var(--t-font-size-sm);
4334
+ line-height:1.35;
4335
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4336
+ cursor:text;
4357
4337
  }
4358
4338
 
4359
- .tds-date-picker-calendar-title{
4360
- padding:var(--t-spacing-half) var(--t-spacing-1);
4361
- font-size:var(--tds-date-picker-popover-font-size);
4362
- font-weight:var(--t-font-weight-semibold);
4363
- }
4339
+ .tds-number-stepper-description .tds-number-stepper-description-invalid-icon{
4340
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4341
+ flex-shrink:0;
4342
+ margin-block-start:calc(.5lh - .5em);
4343
+ line-height:1.35;
4344
+ }
4364
4345
 
4365
- .tds-date-picker-calendar-nav{
4346
+
4347
+ .tds-time-field{
4348
+ --tds-time-field-border-color:var(--t-form-border-color);
4349
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4350
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4351
+ --tds-time-field-background-color:var(--t-form-background-color);
4352
+ --tds-time-field-color:var(--t-form-color);
4353
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4354
+ --tds-time-field-font-size:var(--t-font-size-md);
4355
+ --tds-time-field-min-height:var(--t-container-size-md);
4356
+ --tds-time-field-padding-block:6px;
4357
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4358
+ --tds-time-field-description-invalid-icon-display:none;
4359
+
4360
+ position:relative;
4366
4361
  display:flex;
4367
- align-items:center;
4368
- justify-content:center;
4369
- padding:var(--t-spacing-half);
4370
- font-size:.875em;
4371
- color:var(--t-text-color);
4372
- cursor:pointer;
4373
- outline:0;
4374
- background-color:transparent;
4375
- border:0;
4376
- border-radius:var(--t-border-radius-md);
4377
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4378
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4379
- transition-property:var(--tds-date-picker-popover-interactive-property);
4362
+ flex-direction:column;
4363
+ gap:var(--t-spacing-half);
4380
4364
  }
4381
4365
 
4382
- .tds-date-picker-calendar-nav[data-hovered]{
4383
- background-color:var(--t-fill-color-button-neutral-outline-hover);
4366
+ .tds-time-field[data-required] .tds-time-field-label::after{
4367
+ margin-left:.25ch;
4368
+ color:var(--t-text-color-status-error);
4369
+ content:"*";
4384
4370
  }
4385
4371
 
4386
- .tds-date-picker-calendar-nav[data-pressed]{
4387
- background-color:var(--t-fill-color-button-neutral-outline-active);
4372
+ .tds-time-field[data-invalid]{
4373
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4374
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4375
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4376
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4377
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4378
+ --tds-time-field-description-invalid-icon-display:inline-block;
4388
4379
  }
4389
4380
 
4390
- .tds-date-picker-calendar-nav[data-focus-visible]{
4391
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4392
- outline-offset:var(--t-focus-ring-offset);
4381
+ .tds-time-field[data-disabled]{
4382
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4383
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4384
+ --tds-time-field-color:var(--t-form-color-disabled);
4385
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4393
4386
  }
4394
4387
 
4395
- .tds-date-picker-calendar-nav[data-disabled]{
4396
- color:var(--t-text-color-disabled);
4397
- cursor:not-allowed;
4398
- }
4388
+ .tds-time-field[data-disabled] .tds-time-field-input{
4389
+ cursor:not-allowed;
4390
+ }
4399
4391
 
4400
- .tds-date-picker-calendar-grid{
4401
- font-feature-settings:"ss01", "ss02";
4402
- border-collapse:collapse;
4392
+ .tds-time-field--lg{
4393
+ --tds-time-field-min-height:var(--t-container-size-lg);
4394
+ --tds-time-field-font-size:var(--t-font-size-lg);
4403
4395
  }
4404
4396
 
4405
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
4406
- padding:0;
4407
- border:0;
4408
- }
4409
-
4410
- .tds-date-picker-calendar-header-cell{
4411
- padding-block-end:var(--t-spacing-1);
4412
- font-size:.875em;
4413
- font-weight:var(--t-font-weight-medium);
4414
- color:var(--t-text-color-secondary);
4415
- text-align:center;
4416
- -webkit-user-select:none;
4417
- -moz-user-select:none;
4418
- user-select:none;
4397
+ .tds-time-field-label{
4398
+ font-size:var(--t-font-size-md);
4399
+ font-weight:var(--t-font-weight-normal);
4400
+ color:var(--t-text-color);
4401
+ cursor:default;
4419
4402
  }
4420
4403
 
4421
- .tds-date-picker-calendar-cell-button{
4422
- position:relative;
4404
+ .tds-time-field-input{
4423
4405
  display:flex;
4424
4406
  align-items:center;
4425
- justify-content:center;
4426
- inline-size:2.25em;
4427
- block-size:2.25em;
4428
- color:var(--t-text-color);
4429
- cursor:pointer;
4430
- -webkit-user-select:none;
4431
- -moz-user-select:none;
4432
- user-select:none;
4433
- outline:0;
4407
+ inline-size:100%;
4408
+ min-block-size:var(--tds-time-field-min-height);
4409
+ padding-block:var(--tds-time-field-padding-block);
4410
+ padding-inline:var(--t-spacing-1);
4411
+ font-family:inherit;
4412
+ font-size:var(--tds-time-field-font-size);
4413
+ font-variant-numeric:tabular-nums;
4414
+ line-height:1;
4415
+ color:var(--tds-time-field-color);
4416
+ cursor:text;
4417
+ outline:var(--t-focus-ring-width) solid transparent;
4418
+ outline-offset:0;
4419
+ background-color:var(--tds-time-field-background-color);
4420
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4421
+ border-radius:var(--t-form-border-radius);
4434
4422
  }
4435
4423
 
4436
- .tds-date-picker-calendar-cell-button::before{
4437
- position:absolute;
4438
- inset:0;
4439
- z-index:-1;
4440
- content:"";
4441
- background-color:var(--_background-color);
4442
- border-radius:50%;
4424
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4425
+ border-color:var(--tds-time-field-border-color-hover);
4443
4426
  }
4444
4427
 
4445
- .tds-date-picker-calendar-cell-button[data-today]::before{
4446
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
4447
- }
4448
-
4449
- .tds-date-picker-calendar-cell-button[data-outside-month]{
4450
- display:none;
4428
+ .tds-time-field-input[data-focus-within]{
4429
+ outline-color:var(--t-focus-ring-color);
4430
+ outline-offset:var(--t-focus-ring-offset);
4431
+ border-color:var(--tds-time-field-border-color-active);
4451
4432
  }
4452
4433
 
4453
- .tds-date-picker-calendar-cell-button[data-hovered]{
4454
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
4434
+ .tds-time-field-input[data-readonly]{
4435
+ color:var(--t-form-color-readonly);
4436
+ background-color:var(--t-form-background-color-readonly);
4437
+ border-color:var(--t-form-border-color-readonly);
4455
4438
  }
4456
4439
 
4457
- .tds-date-picker-calendar-cell-button[data-pressed]{
4458
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
4459
- }
4440
+ .tds-time-field-input[data-readonly][data-hovered]{
4441
+ border-color:var(--t-form-border-color-readonly);
4442
+ }
4460
4443
 
4461
- .tds-date-picker-calendar-cell-button[data-selected]{
4462
- --_background-color:var(--t-fill-color-interaction);
4463
- font-weight:var(--t-font-weight-semibold);
4464
- color:var(--t-text-color-inverted);
4465
- border-color:transparent;
4466
- }
4444
+ .tds-time-field-input[data-readonly][data-focus-within]{
4445
+ outline-color:var(--t-focus-ring-color);
4446
+ outline-offset:var(--t-focus-ring-offset);
4447
+ border-color:var(--t-form-border-color-hover);
4448
+ }
4467
4449
 
4468
- .tds-date-picker-calendar-cell-button[data-unavailable]{
4469
- color:var(--t-text-color-disabled);
4470
- text-decoration:line-through;
4471
- cursor:not-allowed;
4472
- }
4450
+ .tds-time-field-segment{
4451
+ padding-inline:1px;
4452
+ font-variant-numeric:tabular-nums;
4453
+ cursor:text;
4454
+ caret-color:transparent;
4455
+ border-radius:var(--t-border-radius-sm);
4456
+ }
4473
4457
 
4474
- .tds-date-picker-calendar-cell-button[data-disabled]{
4475
- color:var(--t-text-color-disabled);
4458
+ .tds-time-field-segment[data-placeholder]{
4459
+ color:var(--tds-time-field-placeholder-color);
4476
4460
  }
4477
4461
 
4478
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
4479
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4480
- outline-offset:-2px;
4462
+ .tds-time-field-segment[data-focused]{
4463
+ color:var(--t-text-color-inverted);
4464
+ outline:0;
4465
+ background:var(--t-fill-color-interaction);
4481
4466
  }
4482
4467
 
4483
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
4484
- outline-offset:var(--t-focus-ring-offset);
4485
- }
4468
+ .tds-time-field-segment-separator{
4469
+ padding-inline:0;
4470
+ color:var(--tds-time-field-placeholder-color);
4471
+ }
4486
4472
 
4487
- .tds-date-picker-popover--lg{
4488
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
4473
+ .tds-time-field-description{
4474
+ display:flex;
4475
+ gap:var(--t-spacing-half);
4476
+ align-items:flex-start;
4477
+ margin:0;
4478
+ font-size:var(--t-font-size-sm);
4479
+ line-height:1.35;
4480
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4481
+ cursor:text;
4489
4482
  }
4490
4483
 
4484
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4485
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4486
+ flex-shrink:0;
4487
+ margin-block-start:calc(.5lh - .5em);
4488
+ line-height:1.35;
4489
+ }
4490
+
4491
4491
  .t-banner{
4492
4492
  --t-banner-font-size:var(--t-font-size-md);
4493
4493
  --t-banner-font-color:var(--t-text-color);