@planningcenter/tapestry 3.2.3-rc.20 → 3.2.3-rc.22

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 (5) hide show
  1. package/dist/reactRender.css +824 -824
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +824 -824
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,218 +1,278 @@
1
- .tds-checkbox{
2
- --tds-checkbox-font-size:var(--t-font-size-md);
3
- --tds-checkbox-cursor:pointer;
4
- --tds-checkbox-line-height:1.4;
5
- --tds-checkbox-transition-property:background-color, border-color;
6
-
7
- --tds-checkbox-input-size:var(--t-element-size-md);
8
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
- --tds-checkbox-input-border-color:var(--t-form-border-color);
10
- --tds-checkbox-input-background-color:transparent;
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
4
+ }
5
+ }
11
6
 
12
- --tds-checkbox-input-icon:none;
13
- --tds-checkbox-input-icon-visibility:hidden;
14
- --tds-checkbox-input-icon-opacity:0;
15
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
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;
16
25
 
17
- --tds-checkbox-label-color:var(--t-form-color);
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);
18
28
 
19
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
- --tds-checkbox-description-line-height:1.35;
21
- --tds-checkbox-description-color:var(--t-text-color-secondary);
22
- --tds-checkbox-description-invalid-icon-display:none;
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);
23
32
 
24
- position:relative;
25
- display:inline-grid;
26
- grid-template-columns:auto;
27
- grid-auto-columns:1fr;
28
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
29
- line-height:var(--tds-checkbox-line-height);
30
- cursor:var(--tds-checkbox-cursor);
31
- -webkit-user-select:none;
32
- -moz-user-select:none;
33
- user-select:none;
34
- }
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);
35
35
 
36
- .tds-checkbox label{
37
- grid-area:1 / 2;
38
- font-size:var(--tds-checkbox-font-size);
39
- font-weight:var(--t-font-weight-normal);
40
- color:var(--tds-checkbox-label-color);
41
- cursor:var(--tds-checkbox-cursor);
42
- }
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);
43
39
 
44
- .tds-checkbox tds-indeterminate{
45
- display:flex;
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);
46
45
  }
47
46
 
48
- .tds-checkbox input[type="checkbox"]{
49
- position:relative;
50
- width:1em;
51
- height:1em;
52
- margin:calc((1lh - 1em) / 2) 0 0;
53
- font-size:var(--tds-checkbox-font-size);
54
- line-height:inherit;
55
- -webkit-appearance:none;
56
- -moz-appearance:none;
57
- appearance:none;
58
- cursor:var(--tds-checkbox-cursor);
59
- background-color:var(--tds-checkbox-input-background-color);
60
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
- border-radius:var(--tds-checkbox-input-border-radius);
62
- transition-timing-function:var(--t-ease-in-out);
63
- transition-duration:var(--t-duration-200);
64
- transition-property:var(--tds-checkbox-transition-property);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
65
49
  }
66
50
 
67
- :is(.tds-checkbox input[type="checkbox"])::before{
68
- position:absolute;
69
- top:50%;
70
- left:50%;
71
- visibility:var(--tds-checkbox-input-icon-visibility);
72
- width:100%;
73
- height:100%;
74
- content:"";
75
- background-color:var(--tds-checkbox-input-icon-fill);
76
- border-radius:var(--tds-checkbox-input-border-radius);
77
- opacity:var(--tds-checkbox-input-icon-opacity);
78
- -webkit-mask-image:var(--tds-checkbox-input-icon);
79
- mask-image:var(--tds-checkbox-input-icon);
80
- -webkit-mask-repeat:no-repeat;
81
- mask-repeat:no-repeat;
82
- -webkit-mask-size:contain;
83
- mask-size:contain;
84
- transform:translate(-50%, -50%);
85
- }
86
-
87
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
- }
91
-
92
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
- outline:var(--t-focus-ring-outline);
94
- outline-offset:var(--t-focus-ring-offset);
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));
95
55
  }
56
+ }
96
57
 
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
98
- pointer-events:none;
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);
99
76
  }
100
-
101
- @media (prefers-reduced-motion: reduce){
102
-
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
105
77
  }
106
- }
78
+ }
107
79
 
108
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
- --tds-checkbox-input-icon-visibility:visible;
112
- --tds-checkbox-input-icon-opacity:1;
113
- }
80
+ .tds-page-header{
81
+ display:flex;
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);
87
+ }
114
88
 
115
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
- }
89
+ .tds-page-header:not(.has-nav){
90
+ padding-bottom:var(--tds-page-header-padding-y);
91
+ }
119
92
 
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
93
+ .tds-page-header.inactive{
94
+ background:var(--tds-page-header-background-color-inactive);
122
95
  }
123
96
 
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
97
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
+ width:100%;
126
99
  }
127
100
 
128
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
- --tds-checkbox-description-color:var(--t-text-color-status-error);
131
- --tds-checkbox-description-invalid-icon-display:inline-block;
101
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
102
+ display:flex;
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;
132
108
  }
133
109
 
134
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
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);
137
118
  }
138
119
 
139
- :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{
140
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
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;
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;
142
139
  }
143
140
 
144
- :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){
145
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
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);
147
146
  }
148
147
 
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
153
- }
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
+ }
154
154
 
155
- .tds-checkbox:has(input:disabled){
156
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
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
+ }
158
160
 
159
- --tds-checkbox-label-color:var(--t-form-color-disabled);
160
- --tds-checkbox-description-color:var(--t-form-color-disabled);
161
- --tds-checkbox-cursor:not-allowed;
162
- }
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
+ }
163
168
 
164
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
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
+ }
179
+
180
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
+ position:relative;
166
182
  }
167
183
 
168
- .tds-checkbox-description{
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);
187
+ }
188
+
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{
190
+ position:absolute;
191
+ top:-5px;
192
+ right:-2px;
193
+ width:10px;
194
+ height:10px;
195
+ content:"";
196
+ background:var(--tds-page-header-nav-item-indicator-color);
197
+ border-radius:50%;
198
+ }
199
+
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
+ }
204
+ }
205
+
206
+ .tds-page-header__title-bar{
169
207
  display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
208
+ flex-direction:column;
209
+ gap:var(--t-spacing-2) var(--t-spacing-1);
172
210
  align-items:flex-start;
173
- margin:0;
174
- font-size:var(--tds-checkbox-description-font-size);
175
- line-height:var(--tds-checkbox-description-line-height);
176
- color:var(--tds-checkbox-description-color);
177
- cursor:text;
211
+ justify-content:space-between;
212
+ padding:0 var(--tds-page-header-padding-x);
178
213
  }
179
214
 
180
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
181
- display:var(--tds-checkbox-description-invalid-icon-display);
182
- flex-shrink:0;
183
- margin-top:calc(.5lh - .5em);
184
- line-height:var(--tds-checkbox-description-line-height);
215
+ .tds-page-header--profile > .tds-page-header__title-bar{
216
+ align-items:center;
185
217
  }
186
218
 
187
- .tds-checkbox--sm{
188
- --tds-checkbox-line-height:1.35;
189
- --tds-checkbox-input-size:var(--t-element-size-sm);
190
- --tds-checkbox-font-size:var(--t-font-size-sm);
191
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
192
- --tds-checkbox-description-line-height:1.3;
219
+ .tds-page-header__primary{
220
+ width:100%;
193
221
  }
194
222
 
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;
230
+ }
195
231
 
196
- :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{
197
- -webkit-appearance:none;
198
- appearance:none;
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%;
238
+ }
239
+
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;
245
+ }
246
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
+ width:auto;
248
+ }
249
+
250
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
+ justify-content:flex-end;
199
252
  }
253
+ }
254
+
255
+ .tds-page-header-phone,
256
+ .tds-page-header-email{
257
+ color:var(--tds-page-header-color);
258
+ white-space:nowrap;
259
+ }
200
260
 
201
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
202
- inline-size:1em;
203
- block-size:2em;
204
- }
261
+ .tds-page-header-email{
262
+ max-width:100%;
263
+ overflow:hidden;
264
+ text-overflow:ellipsis;
265
+ }
205
266
 
206
- @supports (field-sizing: content){
207
- .tds-input--auto-width{
208
- inline-size:-moz-fit-content;
209
- inline-size:fit-content;
210
- min-inline-size:min(100%, 122px);
267
+ @keyframes indicator-pulse{
268
+ 0%{
269
+ opacity:.3;
270
+ transform:scale(.9);
211
271
  }
212
272
 
213
- .tds-input--auto-width input{
214
- field-sizing:content;
215
- inline-size:auto;
273
+ 100%{
274
+ opacity:0;
275
+ transform:scale(1.75);
216
276
  }
217
277
  }
218
278
 
@@ -565,19 +625,237 @@
565
625
  }
566
626
  }
567
627
 
568
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
569
- display:none;
570
- }
571
-
572
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
573
- display:block;
574
- }
575
-
576
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
577
- display:flex;
578
- flex-direction:column;
579
- }
580
-
628
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
+ display:none;
630
+ }
631
+
632
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
+ display:block;
634
+ }
635
+
636
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
+ display:flex;
638
+ flex-direction:column;
639
+ }
640
+
641
+ .tds-checkbox{
642
+ --tds-checkbox-font-size:var(--t-font-size-md);
643
+ --tds-checkbox-cursor:pointer;
644
+ --tds-checkbox-line-height:1.4;
645
+ --tds-checkbox-transition-property:background-color, border-color;
646
+
647
+ --tds-checkbox-input-size:var(--t-element-size-md);
648
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
649
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
650
+ --tds-checkbox-input-background-color:transparent;
651
+
652
+ --tds-checkbox-input-icon:none;
653
+ --tds-checkbox-input-icon-visibility:hidden;
654
+ --tds-checkbox-input-icon-opacity:0;
655
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
656
+
657
+ --tds-checkbox-label-color:var(--t-form-color);
658
+
659
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
660
+ --tds-checkbox-description-line-height:1.35;
661
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
662
+ --tds-checkbox-description-invalid-icon-display:none;
663
+
664
+ position:relative;
665
+ display:inline-grid;
666
+ grid-template-columns:auto;
667
+ grid-auto-columns:1fr;
668
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
669
+ line-height:var(--tds-checkbox-line-height);
670
+ cursor:var(--tds-checkbox-cursor);
671
+ -webkit-user-select:none;
672
+ -moz-user-select:none;
673
+ user-select:none;
674
+ }
675
+
676
+ .tds-checkbox label{
677
+ grid-area:1 / 2;
678
+ font-size:var(--tds-checkbox-font-size);
679
+ font-weight:var(--t-font-weight-normal);
680
+ color:var(--tds-checkbox-label-color);
681
+ cursor:var(--tds-checkbox-cursor);
682
+ }
683
+
684
+ .tds-checkbox tds-indeterminate{
685
+ display:flex;
686
+ }
687
+
688
+ .tds-checkbox input[type="checkbox"]{
689
+ position:relative;
690
+ width:1em;
691
+ height:1em;
692
+ margin:calc((1lh - 1em) / 2) 0 0;
693
+ font-size:var(--tds-checkbox-font-size);
694
+ line-height:inherit;
695
+ -webkit-appearance:none;
696
+ -moz-appearance:none;
697
+ appearance:none;
698
+ cursor:var(--tds-checkbox-cursor);
699
+ background-color:var(--tds-checkbox-input-background-color);
700
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
701
+ border-radius:var(--tds-checkbox-input-border-radius);
702
+ transition-timing-function:var(--t-ease-in-out);
703
+ transition-duration:var(--t-duration-200);
704
+ transition-property:var(--tds-checkbox-transition-property);
705
+ }
706
+
707
+ :is(.tds-checkbox input[type="checkbox"])::before{
708
+ position:absolute;
709
+ top:50%;
710
+ left:50%;
711
+ visibility:var(--tds-checkbox-input-icon-visibility);
712
+ width:100%;
713
+ height:100%;
714
+ content:"";
715
+ background-color:var(--tds-checkbox-input-icon-fill);
716
+ border-radius:var(--tds-checkbox-input-border-radius);
717
+ opacity:var(--tds-checkbox-input-icon-opacity);
718
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
719
+ mask-image:var(--tds-checkbox-input-icon);
720
+ -webkit-mask-repeat:no-repeat;
721
+ mask-repeat:no-repeat;
722
+ -webkit-mask-size:contain;
723
+ mask-size:contain;
724
+ transform:translate(-50%, -50%);
725
+ }
726
+
727
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
728
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
729
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
730
+ }
731
+
732
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
733
+ outline:var(--t-focus-ring-outline);
734
+ outline-offset:var(--t-focus-ring-offset);
735
+ }
736
+
737
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
738
+ pointer-events:none;
739
+ }
740
+
741
+ @media (prefers-reduced-motion: reduce){
742
+
743
+ .tds-checkbox input[type="checkbox"]{
744
+ --tds-checkbox-transition-property:none;
745
+ }
746
+ }
747
+
748
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
749
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
750
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
751
+ --tds-checkbox-input-icon-visibility:visible;
752
+ --tds-checkbox-input-icon-opacity:1;
753
+ }
754
+
755
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
756
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
757
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
758
+ }
759
+
760
+ .tds-checkbox:has(input:checked){
761
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
762
+ }
763
+
764
+ .tds-checkbox:has(input:indeterminate){
765
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
766
+ }
767
+
768
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
769
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
770
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
771
+ --tds-checkbox-description-invalid-icon-display:inline-block;
772
+ }
773
+
774
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
775
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
776
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
777
+ }
778
+
779
+ :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{
780
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
781
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
782
+ }
783
+
784
+ :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){
785
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
786
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
787
+ }
788
+
789
+ .tds-checkbox:has(input:required) label::after{
790
+ margin-left:.25ch;
791
+ color:var(--t-text-color-status-error);
792
+ content:"*";
793
+ }
794
+
795
+ .tds-checkbox:has(input:disabled){
796
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
797
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
798
+
799
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
800
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
801
+ --tds-checkbox-cursor:not-allowed;
802
+ }
803
+
804
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
805
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
806
+ }
807
+
808
+ .tds-checkbox-description{
809
+ display:flex;
810
+ grid-area:2 / 2;
811
+ gap:var(--t-spacing-half);
812
+ align-items:flex-start;
813
+ margin:0;
814
+ font-size:var(--tds-checkbox-description-font-size);
815
+ line-height:var(--tds-checkbox-description-line-height);
816
+ color:var(--tds-checkbox-description-color);
817
+ cursor:text;
818
+ }
819
+
820
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
821
+ display:var(--tds-checkbox-description-invalid-icon-display);
822
+ flex-shrink:0;
823
+ margin-top:calc(.5lh - .5em);
824
+ line-height:var(--tds-checkbox-description-line-height);
825
+ }
826
+
827
+ .tds-checkbox--sm{
828
+ --tds-checkbox-line-height:1.35;
829
+ --tds-checkbox-input-size:var(--t-element-size-sm);
830
+ --tds-checkbox-font-size:var(--t-font-size-sm);
831
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
832
+ --tds-checkbox-description-line-height:1.3;
833
+ }
834
+
835
+
836
+ :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{
837
+ -webkit-appearance:none;
838
+ appearance:none;
839
+ }
840
+
841
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
842
+ inline-size:1em;
843
+ block-size:2em;
844
+ }
845
+
846
+ @supports (field-sizing: content){
847
+ .tds-input--auto-width{
848
+ inline-size:-moz-fit-content;
849
+ inline-size:fit-content;
850
+ min-inline-size:min(100%, 122px);
851
+ }
852
+
853
+ .tds-input--auto-width input{
854
+ field-sizing:content;
855
+ inline-size:auto;
856
+ }
857
+ }
858
+
581
859
  .tds-radio{
582
860
  --tds-radio-font-size:var(--t-font-size-md);
583
861
  --tds-radio-cursor:pointer;
@@ -710,282 +988,145 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
710
988
  --tds-radio-description-line-height:1.3;
711
989
  }
712
990
 
713
- @layer t-critical{
714
- tds-page-header:not(.hydrated){
715
- display:none;
716
- }
717
- }
718
-
719
- @layer t-component{
720
- .tds-page-header{
721
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
722
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
723
- --tds-page-header-color:var(--t-text-color);
724
- --tds-page-header-bottom-border-color:transparent;
725
- --tds-page-header-headline-color:var(--t-text-color-headline);
726
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
727
- --tds-page-header-padding-x:var(--t-spacing-2);
728
- --tds-page-header-padding-y:var(--t-spacing-2);
729
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
730
- --tds-page-header-nav-gap:var(--t-spacing-1);
731
- --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%);
732
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
733
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
734
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
735
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
736
- --tds-page-header-nav-item-border-width:1px;
737
-
738
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
739
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
740
-
741
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
742
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
743
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
744
-
745
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
746
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
747
-
748
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
749
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
750
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
751
-
752
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
753
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
754
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
755
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
756
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
757
- }
758
-
759
- .tds-page-header--profile{
760
- --tds-page-header-padding-y:20px;
761
- }
762
-
763
- @supports (color: light-dark(#fff, #000)){
764
- .tds-page-header{
765
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
766
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
767
- }
768
- }
769
-
770
- @media (min-width: 600px){
771
- .tds-page-header{
772
- --tds-page-header-background-color:var(--t-surface-color-canvas);
773
- --tds-page-header-color:var(--t-text-color-secondary);
774
- --tds-page-header-bottom-border-color:var(--t-border-color);
775
- --tds-page-header-padding-x:var(--t-spacing-3);
776
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
777
- --tds-page-header-nav-gap:var(--t-spacing-half);
778
- --tds-page-header-nav-background:transparent;
779
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
780
- --tds-page-header-nav-item-border-width:1px;
781
- --tds-page-header-nav-item-color:var(--t-text-color);
782
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
783
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
784
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
785
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
786
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
787
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
788
- }
789
- }
790
- }
791
-
792
- .tds-page-header{
793
- display:flex;
794
- flex-direction:column;
795
- padding-top:var(--tds-page-header-padding-y);
796
- color:var(--tds-page-header-color);
797
- background:var(--tds-page-header-background-color);
798
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
799
- }
800
-
801
- .tds-page-header:not(.has-nav){
802
- padding-bottom:var(--tds-page-header-padding-y);
803
- }
804
-
805
- .tds-page-header.inactive{
806
- background:var(--tds-page-header-background-color-inactive);
807
- }
808
-
809
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
810
- width:100%;
811
- }
812
-
813
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
814
- display:flex;
815
- flex-flow:row wrap;
816
- gap:var(--t-spacing-half) var(--t-spacing-1);
817
- align-items:flex-start;
818
- justify-content:flex-start;
819
- min-width:0;
820
- }
821
-
822
- :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{
823
- display:flex;
824
- gap:var(--tds-page-header-nav-gap);
825
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
826
- margin:0 0 -1px;
827
- overflow:auto;
828
- list-style:none;
829
- background:var(--tds-page-header-nav-background);
830
- }
831
-
832
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
833
- position:relative;
834
- display:inline-flex;
835
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
836
- font-size:var(--t-font-size-sm);
837
- line-height:22px;
838
- color:var(--tds-page-header-nav-item-color);
839
- white-space:nowrap;
840
- text-decoration:none;
841
- -webkit-appearance:none;
842
- -moz-appearance:none;
843
- appearance:none;
844
- cursor:pointer;
845
- outline-offset:-2px;
846
- background-color:var(--tds-page-header-nav-item-background-color);
847
- background-clip:padding-box;
848
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
849
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
850
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
851
- }
852
-
853
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
854
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
855
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
856
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
857
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
858
- }
859
-
860
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
861
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
862
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
863
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
864
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
865
- }
866
-
867
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
868
- background-color:var(--tds-page-header-nav-item-background-color-active);
869
- border-color:var(--tds-page-header-nav-item-border-color-active);
870
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
871
- }
872
-
873
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
874
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
875
- color:var(--tds-page-header-nav-item-color-disabled);
876
- cursor:not-allowed;
877
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
878
- opacity:1;
879
- }
880
-
881
- @media (min-width: 600px){
882
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
883
- position:absolute;
884
- inset:auto -1px -1px;
885
- height:1px;
886
- pointer-events:none;
887
- content:"";
888
- background-color:var(--tds-page-header-bottom-border-color);
889
- }
890
- }
991
+ .tds-toggle-switch{
992
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
993
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
994
+ --tds-toggle-switch-cursor:pointer;
995
+ --tds-toggle-switch-display:inline-grid;
996
+ --tds-toggle-switch-line-height:1.4;
891
997
 
892
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
893
- position:relative;
894
- }
998
+ --tds-toggle-switch-label-color:var(--t-form-color);
895
999
 
896
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
897
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
898
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
899
- }
1000
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1001
+ --tds-toggle-switch-track-outline:none;
1002
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1003
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1004
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
900
1005
 
901
- :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{
902
- position:absolute;
903
- top:-5px;
904
- right:-2px;
905
- width:10px;
906
- height:10px;
907
- content:"";
908
- background:var(--tds-page-header-nav-item-indicator-color);
909
- border-radius:50%;
910
- }
1006
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1007
+ --tds-toggle-switch-thumb-transform:translateX(0);
1008
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
911
1009
 
912
- @media (prefers-reduced-motion: no-preference){
913
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
914
- animation:indicator-pulse 1.25s ease infinite;
915
- }
916
- }
1010
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1011
+ --tds-toggle-switch-description-line-height:1.35;
1012
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1013
+ position:relative;
917
1014
 
918
- .tds-page-header__title-bar{
919
- display:flex;
920
- flex-direction:column;
921
- gap:var(--t-spacing-2) var(--t-spacing-1);
922
- align-items:flex-start;
923
- justify-content:space-between;
924
- padding:0 var(--tds-page-header-padding-x);
1015
+ display:var(--tds-toggle-switch-display);
1016
+ grid-template-columns:auto;
1017
+ grid-auto-columns:1fr;
1018
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1019
+ -webkit-user-select:none;
1020
+ -moz-user-select:none;
1021
+ user-select:none;
925
1022
  }
926
1023
 
927
- .tds-page-header--profile > .tds-page-header__title-bar{
928
- align-items:center;
1024
+ .tds-toggle-switch input[type="checkbox"]{
1025
+ position:absolute;
1026
+ width:var(--tds-toggle-switch-track-width);
1027
+ height:var(--tds-toggle-switch-track-height);
1028
+ margin:0;
1029
+ -webkit-appearance:none;
1030
+ -moz-appearance:none;
1031
+ appearance:none;
1032
+ cursor:var(--tds-toggle-switch-cursor);
1033
+ outline:var(--tds-toggle-switch-track-outline);
1034
+ outline-offset:var(--t-focus-ring-offset);
1035
+ background-color:transparent;
1036
+ border:0;
1037
+ border-radius:var(--t-border-radius-round);
929
1038
  }
930
1039
 
931
- .tds-page-header__primary{
932
- width:100%;
933
- }
1040
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1041
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1042
+ }
934
1043
 
935
- .tds-page-header__primary h1{
936
- margin:0;
937
- font-size:var(--tds-page-header-headline-font-size);
1044
+ .tds-toggle-switch label{
1045
+ display:inline-flex;
1046
+ grid-area:1 / 2;
1047
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1048
+ column-gap:var(--tds-toggle-switch-column-gap);
1049
+ margin-top:-.09375em;
1050
+ font-size:var(--tds-toggle-switch-font-size);
938
1051
  font-weight:var(--t-font-weight-normal);
939
- line-height:32px;
940
- color:var(--tds-page-header-headline-color);
941
- overflow-wrap:break-word;
1052
+ line-height:var(--tds-toggle-switch-line-height);
1053
+ color:var(--tds-toggle-switch-label-color);
1054
+ cursor:var(--tds-toggle-switch-cursor);
942
1055
  }
943
1056
 
944
- @media (min-width: 960px){
945
- .tds-page-header__primary{
946
- flex:1 1 max-content;
947
- width:auto;
948
- min-width:0;
949
- max-width:100%;
1057
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1058
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
950
1059
  }
951
1060
 
952
- .tds-page-header__title-bar,
953
- .tds-page-header--profile .tds-page-header__title-bar{
954
- flex-flow:row nowrap;
955
- row-gap:12px;
956
- align-items:flex-start;
1061
+ .tds-toggle-switch:has(input:checked){
1062
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1063
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
957
1064
  }
958
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
959
- width:auto;
960
- }
961
1065
 
962
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
963
- justify-content:flex-end;
1066
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1067
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
964
1068
  }
965
- }
966
1069
 
967
- .tds-page-header-phone,
968
- .tds-page-header-email{
969
- color:var(--tds-page-header-color);
970
- white-space:nowrap;
971
- }
1070
+ .tds-toggle-switch:has(input:disabled){
1071
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1072
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1073
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1074
+ --tds-toggle-switch-cursor:not-allowed;
1075
+ }
972
1076
 
973
- .tds-page-header-email{
974
- max-width:100%;
975
- overflow:hidden;
976
- text-overflow:ellipsis;
1077
+ .tds-toggle-switch-track{
1078
+ position:relative;
1079
+ flex-shrink:0;
1080
+ width:var(--tds-toggle-switch-track-width);
1081
+ height:var(--tds-toggle-switch-track-height);
1082
+ background-color:var(--tds-toggle-switch-track-background-color);
1083
+ border-radius:var(--t-border-radius-round);
1084
+ transition:var(--tds-toggle-switch-track-transition);
977
1085
  }
978
1086
 
979
- @keyframes indicator-pulse{
980
- 0%{
981
- opacity:.3;
982
- transform:scale(.9);
1087
+ .tds-toggle-switch-track::before{
1088
+ position:absolute;
1089
+ top:var(--t-spacing-fourth);
1090
+ left:var(--t-spacing-fourth);
1091
+ width:var(--tds-toggle-switch-thumb-size);
1092
+ height:var(--tds-toggle-switch-thumb-size);
1093
+ content:"";
1094
+ background-color:#fff;
1095
+ border-radius:var(--t-border-radius-round);
1096
+ transform:var(--tds-toggle-switch-thumb-transform);
1097
+ transition:var(--tds-toggle-switch-thumb-transition);
983
1098
  }
984
1099
 
985
- 100%{
986
- opacity:0;
987
- transform:scale(1.75);
1100
+ @media (prefers-reduced-motion: reduce){
1101
+
1102
+ .tds-toggle-switch-track{
1103
+ --tds-toggle-switch-track-transition:none;
1104
+ --tds-toggle-switch-thumb-transition:none;
1105
+ }
988
1106
  }
1107
+
1108
+ .tds-toggle-switch-description{
1109
+ display:flex;
1110
+ grid-area:2 / 2;
1111
+ align-items:flex-start;
1112
+ margin:0;
1113
+ font-size:var(--tds-toggle-switch-description-font-size);
1114
+ line-height:var(--tds-toggle-switch-description-line-height);
1115
+ color:var(--tds-toggle-switch-description-color);
1116
+ cursor:text;
1117
+ }
1118
+
1119
+ .tds-toggle-switch--sm{
1120
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1121
+ --tds-toggle-switch-line-height:1.35;
1122
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1123
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1124
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1125
+ --tds-toggle-switch-description-line-height:1.3;
1126
+ }
1127
+
1128
+ .tds-toggle-switch--hide-label{
1129
+ --tds-toggle-switch-display:inline-flex;
989
1130
  }
990
1131
 
991
1132
  .tds-radio-group{
@@ -1121,205 +1262,64 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1121
1262
  scrollbar-color:initial;
1122
1263
  transition-timing-function:var(--t-ease-in-out);
1123
1264
  transition-duration:var(--t-duration-200);
1124
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1125
- }
1126
-
1127
- @media (pointer: fine){
1128
- :is(.tds-input textarea)::-webkit-scrollbar{
1129
- width:12px;
1130
- height:12px;
1131
- cursor:default;
1132
- }
1133
-
1134
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1135
- cursor:default;
1136
- background:var(--tds-input-scrollbar-thumb-color);
1137
- background-clip:content-box;
1138
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1139
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1140
- }
1141
-
1142
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1143
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1144
- }
1145
-
1146
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1147
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1148
- }
1149
-
1150
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1151
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1152
- }
1153
-
1154
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1155
- background:var(--tds-input-scrollbar-surface-color);
1156
- }
1157
-
1158
- :is(.tds-input textarea)::-webkit-resizer{
1159
- background:var(--tds-input-resizer-icon) no-repeat;
1160
- background-position:right bottom;
1161
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1162
- }
1163
-
1164
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1165
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1166
- cursor:default;
1167
- }
1168
-
1169
- @supports (-moz-appearance: none){
1170
- :is(.tds-input textarea){
1171
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1172
- scrollbar-width:thin;
1173
- }
1174
-
1175
- @media (hover){
1176
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1177
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1178
- }
1179
- }
1180
- }
1181
- }
1182
-
1183
- .tds-toggle-switch{
1184
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1185
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1186
- --tds-toggle-switch-cursor:pointer;
1187
- --tds-toggle-switch-display:inline-grid;
1188
- --tds-toggle-switch-line-height:1.4;
1189
-
1190
- --tds-toggle-switch-label-color:var(--t-form-color);
1191
-
1192
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1193
- --tds-toggle-switch-track-outline:none;
1194
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1195
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1196
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1197
-
1198
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1199
- --tds-toggle-switch-thumb-transform:translateX(0);
1200
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1201
-
1202
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1203
- --tds-toggle-switch-description-line-height:1.35;
1204
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1205
- position:relative;
1206
-
1207
- display:var(--tds-toggle-switch-display);
1208
- grid-template-columns:auto;
1209
- grid-auto-columns:1fr;
1210
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1211
- -webkit-user-select:none;
1212
- -moz-user-select:none;
1213
- user-select:none;
1214
- }
1215
-
1216
- .tds-toggle-switch input[type="checkbox"]{
1217
- position:absolute;
1218
- width:var(--tds-toggle-switch-track-width);
1219
- height:var(--tds-toggle-switch-track-height);
1220
- margin:0;
1221
- -webkit-appearance:none;
1222
- -moz-appearance:none;
1223
- appearance:none;
1224
- cursor:var(--tds-toggle-switch-cursor);
1225
- outline:var(--tds-toggle-switch-track-outline);
1226
- outline-offset:var(--t-focus-ring-offset);
1227
- background-color:transparent;
1228
- border:0;
1229
- border-radius:var(--t-border-radius-round);
1230
- }
1231
-
1232
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1233
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1234
- }
1235
-
1236
- .tds-toggle-switch label{
1237
- display:inline-flex;
1238
- grid-area:1 / 2;
1239
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1240
- column-gap:var(--tds-toggle-switch-column-gap);
1241
- margin-top:-.09375em;
1242
- font-size:var(--tds-toggle-switch-font-size);
1243
- font-weight:var(--t-font-weight-normal);
1244
- line-height:var(--tds-toggle-switch-line-height);
1245
- color:var(--tds-toggle-switch-label-color);
1246
- cursor:var(--tds-toggle-switch-cursor);
1247
- }
1248
-
1249
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1250
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1251
- }
1252
-
1253
- .tds-toggle-switch:has(input:checked){
1254
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1255
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1256
- }
1265
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1266
+ }
1257
1267
 
1258
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1259
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1268
+ @media (pointer: fine){
1269
+ :is(.tds-input textarea)::-webkit-scrollbar{
1270
+ width:12px;
1271
+ height:12px;
1272
+ cursor:default;
1260
1273
  }
1261
1274
 
1262
- .tds-toggle-switch:has(input:disabled){
1263
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1264
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1265
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1266
- --tds-toggle-switch-cursor:not-allowed;
1267
- }
1275
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1276
+ cursor:default;
1277
+ background:var(--tds-input-scrollbar-thumb-color);
1278
+ background-clip:content-box;
1279
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1280
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1281
+ }
1268
1282
 
1269
- .tds-toggle-switch-track{
1270
- position:relative;
1271
- flex-shrink:0;
1272
- width:var(--tds-toggle-switch-track-width);
1273
- height:var(--tds-toggle-switch-track-height);
1274
- background-color:var(--tds-toggle-switch-track-background-color);
1275
- border-radius:var(--t-border-radius-round);
1276
- transition:var(--tds-toggle-switch-track-transition);
1277
- }
1283
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1284
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1285
+ }
1278
1286
 
1279
- .tds-toggle-switch-track::before{
1280
- position:absolute;
1281
- top:var(--t-spacing-fourth);
1282
- left:var(--t-spacing-fourth);
1283
- width:var(--tds-toggle-switch-thumb-size);
1284
- height:var(--tds-toggle-switch-thumb-size);
1285
- content:"";
1286
- background-color:#fff;
1287
- border-radius:var(--t-border-radius-round);
1288
- transform:var(--tds-toggle-switch-thumb-transform);
1289
- transition:var(--tds-toggle-switch-thumb-transition);
1290
- }
1287
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1288
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1289
+ }
1291
1290
 
1292
- @media (prefers-reduced-motion: reduce){
1291
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1292
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1293
+ }
1293
1294
 
1294
- .tds-toggle-switch-track{
1295
- --tds-toggle-switch-track-transition:none;
1296
- --tds-toggle-switch-thumb-transition:none;
1297
- }
1298
- }
1295
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1296
+ background:var(--tds-input-scrollbar-surface-color);
1297
+ }
1299
1298
 
1300
- .tds-toggle-switch-description{
1301
- display:flex;
1302
- grid-area:2 / 2;
1303
- align-items:flex-start;
1304
- margin:0;
1305
- font-size:var(--tds-toggle-switch-description-font-size);
1306
- line-height:var(--tds-toggle-switch-description-line-height);
1307
- color:var(--tds-toggle-switch-description-color);
1308
- cursor:text;
1309
- }
1299
+ :is(.tds-input textarea)::-webkit-resizer{
1300
+ background:var(--tds-input-resizer-icon) no-repeat;
1301
+ background-position:right bottom;
1302
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1303
+ }
1310
1304
 
1311
- .tds-toggle-switch--sm{
1312
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1313
- --tds-toggle-switch-line-height:1.35;
1314
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1315
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1316
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1317
- --tds-toggle-switch-description-line-height:1.3;
1318
- }
1305
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1306
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1307
+ cursor:default;
1308
+ }
1319
1309
 
1320
- .tds-toggle-switch--hide-label{
1321
- --tds-toggle-switch-display:inline-flex;
1322
- }
1310
+ @supports (-moz-appearance: none){
1311
+ :is(.tds-input textarea){
1312
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1313
+ scrollbar-width:thin;
1314
+ }
1315
+
1316
+ @media (hover){
1317
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1318
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1319
+ }
1320
+ }
1321
+ }
1322
+ }
1323
1323
 
1324
1324
  .tds-select{
1325
1325
  --tds-select-border-color:var(--t-form-border-color);
@@ -3336,161 +3336,83 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3336
3336
  @media (prefers-color-scheme: dark){
3337
3337
  }
3338
3338
 
3339
- .tds-number-stepper{
3340
- --tds-number-stepper-border-color:var(--t-form-border-color);
3341
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3342
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3343
- --tds-number-stepper-background-color:var(--t-form-background-color);
3344
- --tds-number-stepper-color:var(--t-form-color);
3345
- --tds-number-stepper-font-size:var(--t-font-size-md);
3346
- --tds-number-stepper-min-height:var(--t-container-size-md);
3347
- --tds-number-stepper-padding-block:6px;
3348
- --tds-number-stepper-button-offset:4px;
3349
- --tds-number-stepper-button-gap:2px;
3350
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
3351
- --tds-number-stepper-description-invalid-icon-display:none;
3339
+ .tds-checkbox-group{
3340
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3341
+ --tds-checkbox-group-line-height:1.4;
3342
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3352
3343
 
3353
- position:relative;
3344
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3345
+
3346
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3347
+ --tds-checkbox-group-description-line-height:1.35;
3348
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3349
+ --tds-checkbox-group-description-invalid-icon-display:none;
3354
3350
  display:flex;
3355
3351
  flex-direction:column;
3356
- gap:var(--t-spacing-half);
3357
- }
3358
-
3359
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3360
- margin-left:.25ch;
3361
- color:var(--t-text-color-status-error);
3362
- content:"*";
3363
- }
3364
-
3365
- .tds-number-stepper[data-invalid]{
3366
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
3367
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3368
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3369
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
3370
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
3371
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3372
- }
3373
-
3374
- .tds-number-stepper[data-disabled]{
3375
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3376
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3377
- --tds-number-stepper-color:var(--t-form-color-disabled);
3378
- }
3379
-
3380
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3381
- cursor:not-allowed;
3382
- }
3383
-
3384
- .tds-number-stepper--lg{
3385
- --tds-number-stepper-min-height:var(--t-container-size-lg);
3386
- --tds-number-stepper-font-size:var(--t-font-size-lg);
3387
- --tds-number-stepper-button-offset:5px;
3388
- --tds-number-stepper-button-gap:4px;
3389
- }
3390
-
3391
- .tds-number-stepper-label{
3392
- font-size:var(--t-font-size-md);
3393
- font-weight:var(--t-font-weight-normal);
3394
- color:var(--t-text-color);
3395
- cursor:default;
3396
- }
3352
+ gap:var(--tds-checkbox-group-gap);
3353
+ padding:0;
3354
+ margin:0;
3397
3355
 
3398
- .tds-number-stepper-field{
3399
- display:flex;
3400
- gap:var(--tds-number-stepper-button-gap);
3401
- align-items:center;
3402
- inline-size:100%;
3403
- min-block-size:var(--tds-number-stepper-min-height);
3404
- font-family:inherit;
3405
- font-size:var(--tds-number-stepper-font-size);
3406
- line-height:1;
3407
- color:var(--tds-number-stepper-color);
3408
- -webkit-appearance:none;
3409
- -moz-appearance:none;
3410
- appearance:none;
3411
- cursor:default;
3412
- outline:var(--t-focus-ring-width) solid transparent;
3413
- outline-offset:0;
3414
- background-color:var(--tds-number-stepper-background-color);
3415
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3416
- border-radius:var(--t-form-border-radius);
3356
+ font-size:var(--tds-checkbox-group-font-size);
3357
+ line-height:var(--tds-checkbox-group-line-height);
3358
+ border:0;
3417
3359
  }
3418
3360
 
3419
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3420
- border-color:var(--tds-number-stepper-border-color-hover);
3361
+ .tds-checkbox-group legend{
3362
+ padding:0;
3363
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3421
3364
  }
3422
3365
 
3423
- .tds-number-stepper-field[data-focus-within]{
3424
- outline-color:var(--t-focus-ring-color);
3425
- outline-offset:var(--t-focus-ring-offset);
3426
- border-color:var(--tds-number-stepper-border-color-active);
3366
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3367
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3427
3368
  }
3428
3369
 
3429
- .tds-number-stepper-field:has([readonly]){
3430
- --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3431
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3432
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3370
+ .tds-checkbox-group[aria-invalid="true"]{
3371
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3372
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3433
3373
  }
3434
3374
 
3435
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3436
- border-color:var(--t-form-border-color-hover);
3375
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3376
+ margin-left:.25ch;
3377
+ color:var(--t-text-color-status-error);
3378
+ content:"*";
3437
3379
  }
3438
3380
 
3439
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3440
- display:none;
3381
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3382
+ content:none;
3441
3383
  }
3442
3384
 
3443
- .tds-number-stepper-input{
3385
+ .tds-checkbox-group-fields{
3444
3386
  display:flex;
3445
- flex:1;
3446
- align-items:center;
3447
- min-inline-size:0;
3448
- padding-block:var(--tds-number-stepper-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-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3459
- margin:0;
3460
- -webkit-appearance:none;
3461
- appearance:none;
3462
- }
3463
-
3464
- .tds-number-stepper-button{
3465
- flex-shrink:0;
3466
- align-self:center;
3467
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3468
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3469
- padding:0;
3387
+ flex-direction:column;
3388
+ gap:var(--tds-checkbox-group-gap);
3389
+ align-items:flex-start;
3470
3390
  }
3471
3391
 
3472
- .tds-number-stepper-button:last-of-type{
3473
- margin-inline-end:var(--tds-number-stepper-button-offset);
3474
- }
3475
-
3476
- .tds-number-stepper-description{
3392
+ .tds-checkbox-group-description{
3477
3393
  display:flex;
3478
3394
  gap:var(--t-spacing-half);
3479
3395
  align-items:flex-start;
3480
3396
  margin:0;
3481
- font-size:var(--t-font-size-sm);
3482
- line-height:1.35;
3483
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3397
+ font-size:var(--tds-checkbox-group-description-font-size);
3398
+ line-height:var(--tds-checkbox-group-description-line-height);
3399
+ color:var(--tds-checkbox-group-description-color);
3484
3400
  cursor:text;
3485
3401
  }
3486
3402
 
3487
- .tds-number-stepper-description .tds-number-stepper-description-invalid-icon{
3488
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
3403
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3404
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3489
3405
  flex-shrink:0;
3490
- margin-block-start:calc(.5lh - .5em);
3491
- line-height:1.35;
3406
+ margin-top:calc(.5lh - .5em);
3407
+ line-height:var(--tds-checkbox-group-description-line-height);
3492
3408
  }
3493
3409
 
3410
+ .tds-checkbox-group--sm{
3411
+ --tds-checkbox-group-line-height:1.35;
3412
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3413
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3414
+ --tds-checkbox-group-description-line-height:1.3;
3415
+ }
3494
3416
 
3495
3417
  .tds-date-picker{
3496
3418
  --tds-date-picker-border-color:var(--t-form-border-color);
@@ -3959,6 +3881,162 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3959
3881
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
3960
3882
  }
3961
3883
 
3884
+ .tds-number-stepper{
3885
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3886
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3887
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3888
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3889
+ --tds-number-stepper-color:var(--t-form-color);
3890
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3891
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3892
+ --tds-number-stepper-padding-block:6px;
3893
+ --tds-number-stepper-button-offset:4px;
3894
+ --tds-number-stepper-button-gap:2px;
3895
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
3896
+ --tds-number-stepper-description-invalid-icon-display:none;
3897
+
3898
+ position:relative;
3899
+ display:flex;
3900
+ flex-direction:column;
3901
+ gap:var(--t-spacing-half);
3902
+ }
3903
+
3904
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3905
+ margin-left:.25ch;
3906
+ color:var(--t-text-color-status-error);
3907
+ content:"*";
3908
+ }
3909
+
3910
+ .tds-number-stepper[data-invalid]{
3911
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
3912
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3913
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3914
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
3915
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
3916
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3917
+ }
3918
+
3919
+ .tds-number-stepper[data-disabled]{
3920
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3921
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3922
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3923
+ }
3924
+
3925
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3926
+ cursor:not-allowed;
3927
+ }
3928
+
3929
+ .tds-number-stepper--lg{
3930
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
3931
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
3932
+ --tds-number-stepper-button-offset:5px;
3933
+ --tds-number-stepper-button-gap:4px;
3934
+ }
3935
+
3936
+ .tds-number-stepper-label{
3937
+ font-size:var(--t-font-size-md);
3938
+ font-weight:var(--t-font-weight-normal);
3939
+ color:var(--t-text-color);
3940
+ cursor:default;
3941
+ }
3942
+
3943
+ .tds-number-stepper-field{
3944
+ display:flex;
3945
+ gap:var(--tds-number-stepper-button-gap);
3946
+ align-items:center;
3947
+ inline-size:100%;
3948
+ min-block-size:var(--tds-number-stepper-min-height);
3949
+ font-family:inherit;
3950
+ font-size:var(--tds-number-stepper-font-size);
3951
+ line-height:1;
3952
+ color:var(--tds-number-stepper-color);
3953
+ -webkit-appearance:none;
3954
+ -moz-appearance:none;
3955
+ appearance:none;
3956
+ cursor:default;
3957
+ outline:var(--t-focus-ring-width) solid transparent;
3958
+ outline-offset:0;
3959
+ background-color:var(--tds-number-stepper-background-color);
3960
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3961
+ border-radius:var(--t-form-border-radius);
3962
+ }
3963
+
3964
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3965
+ border-color:var(--tds-number-stepper-border-color-hover);
3966
+ }
3967
+
3968
+ .tds-number-stepper-field[data-focus-within]{
3969
+ outline-color:var(--t-focus-ring-color);
3970
+ outline-offset:var(--t-focus-ring-offset);
3971
+ border-color:var(--tds-number-stepper-border-color-active);
3972
+ }
3973
+
3974
+ .tds-number-stepper-field:has([readonly]){
3975
+ --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3976
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3977
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3978
+ }
3979
+
3980
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3981
+ border-color:var(--t-form-border-color-hover);
3982
+ }
3983
+
3984
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3985
+ display:none;
3986
+ }
3987
+
3988
+ .tds-number-stepper-input{
3989
+ display:flex;
3990
+ flex:1;
3991
+ align-items:center;
3992
+ min-inline-size:0;
3993
+ padding-block:var(--tds-number-stepper-padding-block);
3994
+ padding-inline:var(--t-spacing-1);
3995
+ font-family:inherit;
3996
+ font-size:inherit;
3997
+ color:inherit;
3998
+ outline:0;
3999
+ background:transparent;
4000
+ border:0;
4001
+ }
4002
+
4003
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4004
+ margin:0;
4005
+ -webkit-appearance:none;
4006
+ appearance:none;
4007
+ }
4008
+
4009
+ .tds-number-stepper-button{
4010
+ flex-shrink:0;
4011
+ align-self:center;
4012
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4013
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4014
+ padding:0;
4015
+ }
4016
+
4017
+ .tds-number-stepper-button:last-of-type{
4018
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4019
+ }
4020
+
4021
+ .tds-number-stepper-description{
4022
+ display:flex;
4023
+ gap:var(--t-spacing-half);
4024
+ align-items:flex-start;
4025
+ margin:0;
4026
+ font-size:var(--t-font-size-sm);
4027
+ line-height:1.35;
4028
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4029
+ cursor:text;
4030
+ }
4031
+
4032
+ .tds-number-stepper-description .tds-number-stepper-description-invalid-icon{
4033
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4034
+ flex-shrink:0;
4035
+ margin-block-start:calc(.5lh - .5em);
4036
+ line-height:1.35;
4037
+ }
4038
+
4039
+
3962
4040
  .tds-combo-box{
3963
4041
  --tds-combo-box-border-color:var(--t-form-border-color);
3964
4042
  --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
@@ -4261,84 +4339,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4261
4339
  }
4262
4340
 
4263
4341
 
4264
- .tds-checkbox-group{
4265
- --tds-checkbox-group-font-size:var(--t-font-size-md);
4266
- --tds-checkbox-group-line-height:1.4;
4267
- --tds-checkbox-group-gap:var(--t-spacing-1);
4268
-
4269
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4270
-
4271
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4272
- --tds-checkbox-group-description-line-height:1.35;
4273
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4274
- --tds-checkbox-group-description-invalid-icon-display:none;
4275
- display:flex;
4276
- flex-direction:column;
4277
- gap:var(--tds-checkbox-group-gap);
4278
- padding:0;
4279
- margin:0;
4280
-
4281
- font-size:var(--tds-checkbox-group-font-size);
4282
- line-height:var(--tds-checkbox-group-line-height);
4283
- border:0;
4284
- }
4285
-
4286
- .tds-checkbox-group legend{
4287
- padding:0;
4288
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4289
- }
4290
-
4291
- .tds-checkbox-group:has(.tds-checkbox-group-description){
4292
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4293
- }
4294
-
4295
- .tds-checkbox-group[aria-invalid="true"]{
4296
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4297
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
4298
- }
4299
-
4300
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4301
- margin-left:.25ch;
4302
- color:var(--t-text-color-status-error);
4303
- content:"*";
4304
- }
4305
-
4306
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4307
- content:none;
4308
- }
4309
-
4310
- .tds-checkbox-group-fields{
4311
- display:flex;
4312
- flex-direction:column;
4313
- gap:var(--tds-checkbox-group-gap);
4314
- align-items:flex-start;
4315
- }
4316
-
4317
- .tds-checkbox-group-description{
4318
- display:flex;
4319
- gap:var(--t-spacing-half);
4320
- align-items:flex-start;
4321
- margin:0;
4322
- font-size:var(--tds-checkbox-group-description-font-size);
4323
- line-height:var(--tds-checkbox-group-description-line-height);
4324
- color:var(--tds-checkbox-group-description-color);
4325
- cursor:text;
4326
- }
4327
-
4328
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4329
- display:var(--tds-checkbox-group-description-invalid-icon-display);
4330
- flex-shrink:0;
4331
- margin-top:calc(.5lh - .5em);
4332
- line-height:var(--tds-checkbox-group-description-line-height);
4333
- }
4334
-
4335
- .tds-checkbox-group--sm{
4336
- --tds-checkbox-group-line-height:1.35;
4337
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
4338
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4339
- --tds-checkbox-group-description-line-height:1.3;
4340
- }
4341
-
4342
4342
  .tds-time-field{
4343
4343
  --tds-time-field-border-color:var(--t-form-border-color);
4344
4344
  --tds-time-field-border-color-hover:var(--t-form-border-color-hover);