@planningcenter/tapestry 1.5.0-rc.17 → 1.5.0-rc.19

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 (39) hide show
  1. package/dist/componentRegistration.d.ts +2 -0
  2. package/dist/componentRegistration.d.ts.map +1 -0
  3. package/dist/componentRegistration.js +12 -0
  4. package/dist/componentRegistration.js.map +1 -0
  5. package/dist/components/page-header/index.js +1 -1
  6. package/dist/components/sidenav/index.js +1 -1
  7. package/dist/tapestry-render/dist/index.js +21048 -0
  8. package/dist/tapestry-render/dist/index.js.map +1 -0
  9. package/dist/tapestry-wc/dist/components/{p-DIJkUYRO.js → p-4tlIqaGv.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/{p-DIJkUYRO.js.map → p-4tlIqaGv.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-CfU_LYGG.js → p-BNX1LB_i.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-CfU_LYGG.js.map → p-BNX1LB_i.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-Dj3aFWtM.js → p-BmFqQ4XV.js} +3 -3
  14. package/dist/tapestry-wc/dist/components/{p-Dj3aFWtM.js.map → p-BmFqQ4XV.js.map} +1 -1
  15. package/dist/tapestry-wc/dist/components/{p-CA7zK3SO.js → p-C-X5v71r.js} +3 -3
  16. package/dist/tapestry-wc/dist/components/{p-CA7zK3SO.js.map → p-C-X5v71r.js.map} +1 -1
  17. package/dist/tapestry-wc/dist/components/{p-Cwy_O_rw.js → p-CLJr8tyI.js} +2 -2
  18. package/dist/tapestry-wc/dist/components/{p-Cwy_O_rw.js.map → p-CLJr8tyI.js.map} +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  20. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  28. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  29. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  30. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  31. package/dist/unstable.css +1080 -1080
  32. package/dist/unstable.css.map +1 -1
  33. package/dist/unstable.d.ts +2 -0
  34. package/dist/unstable.d.ts.map +1 -1
  35. package/dist/unstable.js +14 -0
  36. package/dist/unstable.js.map +1 -1
  37. package/dist/webComponents.css +860 -860
  38. package/dist/webComponents.css.map +1 -1
  39. package/package.json +4 -3
package/dist/webComponents.css CHANGED
@@ -1,1032 +1,1032 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
-
4
- @media (prefers-reduced-motion: no-preference) {
5
-
6
- :root {
7
- interpolate-size: allow-keywords;
8
- }
3
+ @layer t-critical {
4
+ tds-page-header:not(.hydrated) {
5
+ display: none;
9
6
  }
7
+ }
10
8
 
11
- @layer tds-component {
12
- tds-sidenav {
13
- --tds-sidenav-indent: 12px;
14
- --tds-sidenav-item-depth: 0;
15
-
16
- --tds-sidenav-item-transition: background-color 0.2s
17
- cubic-bezier(0.19, 0.91, 0.38, 1);
9
+ @layer t-component {
10
+ .tds-page-header {
11
+ --tds-page-header-background-color: var(
12
+ --t-fill-color-product-current-gradient-tint,
13
+ var(--t-surface-color-card)
14
+ );
15
+ --tds-page-header-background-color-inactive: var(
16
+ --t-fill-color-transparency-dark-010
17
+ );
18
+ --tds-page-header-color: var(--t-text-color-default-secondary);
19
+ --tds-page-header-headline-color: var(--t-text-color-default-headline);
20
+ --tds-page-header-padding-x: var(--t-spacing-2);
21
+ --tds-page-header-padding-y: var(--t-spacing-2);
22
+ --tds-page-header-nav-padding-x: var(
23
+ --tds-page-header-padding-x,
24
+ var(--t-spacing-3)
25
+ );
26
+ --tds-page-header-nav-background: linear-gradient(
27
+ 180deg,
28
+ rgba(0, 0, 0, 0) 0%,
29
+ rgba(0, 0, 0, 0.1) 100%
30
+ );
31
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
32
+ --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
33
+ --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
34
+ --tds-page-header-nav-item-background-color: var(
35
+ --t-fill-color-transparency-light-060
36
+ );
37
+ --tds-page-header-nav-item-border-width: 0;
18
38
 
19
- --tds-sidenav-item-background-hover: var(
20
- --t-fill-color-button-interaction-ghost-hover
39
+ --tds-page-header-nav-item-border-color: var(
40
+ --tds-page-header-nav-item-background-color
21
41
  );
22
- --tds-sidenav-item-background-active: var(
23
- --t-fill-color-button-interaction-ghost-active
42
+ --tds-page-header-nav-item-border-bottom-color: var(
43
+ --t-border-color-default-base
24
44
  );
25
- --tds-sidenav-item-background-selected: var(
26
- --t-fill-color-button-interaction-ghost-active
45
+
46
+ --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
47
+ --tds-page-header-nav-item-background-color-hover: var(
48
+ --t-fill-color-neutral-080
49
+ );
50
+ --tds-page-header-nav-item-border-color-hover: var(
51
+ --tds-page-header-nav-item-background-color-hover
27
52
  );
28
53
 
29
- --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
30
- --tds-sidenav-item-nested-border-color-hover: var(
31
- --t-fill-color-neutral-050
54
+ --tds-page-header-nav-item-background-color-active: var(
55
+ --t-fill-color-neutral-060
32
56
  );
33
- --tds-sidenav-item-nested-border-color-selected: var(
34
- --t-border-color-status-info
57
+ --tds-page-header-nav-item-border-color-active: var(
58
+ --tds-page-header-nav-item-background-color-hover
35
59
  );
36
60
 
37
- --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
38
- --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
39
- }
61
+ --tds-page-header-nav-item-color-disabled: var(
62
+ --t-text-color-default-disabled
63
+ );
64
+ --tds-page-header-nav-item-background-color-disabled: var(
65
+ --t-fill-color-neutral-080
66
+ );
67
+ --tds-page-header-nav-item-border-color-disabled: var(
68
+ --tds-page-header-nav-item-background-color-disabled
69
+ );
40
70
 
41
- .is-classic tds-sidenav,
42
- .tds-sidenav--theme-gray {
43
- --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
44
- --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
45
- --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
46
- --tds-sidenav-item-nested-border-color-hover: var(
47
- --t-fill-color-neutral-050
71
+ --tds-page-header-nav-item-color-selected: var(
72
+ --t-text-color-default-primary
48
73
  );
49
- --tds-sidenav-item-nested-border-color-selected: var(
50
- --t-fill-color-neutral-010
74
+ --tds-page-header-nav-item-border-color-selected: var(
75
+ --t-border-color-default-base
76
+ );
77
+ --tds-page-header-nav-item-background-color-selected: var(
78
+ --t-fill-color-neutral-100
79
+ );
80
+ --tds-page-header-nav-item-border-bottom-color-selected: var(
81
+ --tds-page-header-nav-item-background-color-selected
82
+ );
83
+ --tds-page-header-nav-item-indicator-color: var(
84
+ --t-icon-color-status-warning-primary
51
85
  );
52
86
  }
53
- }
54
87
 
55
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
56
- display: flex;
88
+ @media (min-width: 720px) {
89
+ .tds-page-header {
90
+ --tds-page-header-background-color: var(--t-surface-color-card);
91
+ --tds-page-header-padding-x: var(--t-spacing-3);
92
+ --tds-page-header-nav-background: transparent;
93
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
94
+ --tds-page-header-nav-item-border-width: 1px;
95
+ --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
96
+ --tds-page-header-nav-item-background-color: var(
97
+ --t-fill-color-neutral-070
98
+ );
99
+ }
57
100
  }
101
+ }
58
102
 
59
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
60
- flex-direction: column;
61
- gap: var(--t-spacing-half);
62
- width: 100%;
63
- }
103
+ .tds-page-header {
104
+ display: flex;
105
+ flex-direction: column;
106
+ padding-top: var(--tds-page-header-padding-y);
107
+ color: var(--tds-page-header-color);
108
+ background: var(--tds-page-header-background-color);
109
+ border-bottom: 1px solid var(--t-border-color-default-base);
110
+ }
64
111
 
65
- .tds-sidenav-section-list {
66
- width: 100%;
67
- padding: 0;
68
- margin: 0;
69
- list-style: none;
112
+ .tds-page-header:not(.has-nav) {
113
+ padding-bottom: var(--tds-page-header-padding-y);
70
114
  }
71
115
 
72
- .tds-sidenav-section-header {
116
+ .tds-page-header.inactive {
117
+ background-color: var(--tds-page-header-background-color-inactive);
118
+ }
119
+
120
+ .tds-page-header__title-bar {
73
121
  display: flex;
74
- align-items: baseline;
122
+ flex-direction: column;
123
+ gap: var(--t-spacing-2) var(--t-spacing-half);
124
+ align-items: flex-start;
75
125
  justify-content: space-between;
76
- padding-top: var(--t-spacing-2);
126
+ padding: 0 var(--tds-page-header-padding-x);
77
127
  }
78
128
 
79
- .tds-sidenav-section-header h2 {
80
- margin: 0;
81
- font-size: var(--t-font-size-sm);
82
- font-weight: var(--t-font-weight-semibold);
83
- color: var(--t-text-color-default-secondary);
84
- text-transform: uppercase;
85
- line-height: 1.35;
86
- }
87
-
88
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
89
- margin-top: 0;
90
- }
129
+ .tds-page-header--profile > .tds-page-header__title-bar {
130
+ align-items: center;
131
+ }
91
132
 
92
- .tds-sidenav-section-list,
93
- .tds-sidenav-item {
133
+ .tds-page-header__primary {
134
+ flex: 1 1 auto;
94
135
  width: 100%;
95
- padding: 0;
96
- margin: 0;
97
136
  }
98
137
 
99
- .tds-sidenav-item :is(a,button) {
100
- position: relative;
101
- display: flex;
102
- gap: 12px;
103
- align-items: center;
104
- width: 100%;
105
- padding: 12px;
106
- overflow: hidden;
107
- font-size: var(--t-font-size-sm);
108
- line-height: 18px;
109
- color: var(--t-text-color-default-headline);
110
- white-space: nowrap;
111
- text-decoration: none;
112
- -webkit-appearance: none;
113
- -moz-appearance: none;
114
- appearance: none;
115
- cursor: pointer;
116
- background-color: var(--tds-sidenav-item-background, transparent);
117
- border: 0;
118
- border-radius: var(--t-border-radius-default);
119
- transition: var(--tds-sidenav-item-transition);
120
- }
121
-
122
- :is(.tds-sidenav-item :is(a,button)):not(:has([slot="prefix"],.prefix,[slot="suffix"],.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not([slot="prefix"],.prefix,[slot="suffix"],.suffix)) {
123
- display: block;
124
- flex: 1;
125
- overflow: hidden;
126
- text-overflow: ellipsis;
127
- text-align: left;
128
- white-space: nowrap;
129
- }
130
-
131
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
132
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
133
- color: var(--t-text-color-default-headline);
134
- text-decoration: none;
135
- }
136
-
137
- :is(.tds-sidenav-item :is(a,button)):active {
138
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
139
- }
140
-
141
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
142
- overflow: hidden;
143
- color: var(--tds-sidenav-item-icon-color);
144
- }
138
+ .tds-page-header__primary h1 {
139
+ margin: 0;
140
+ font-size: var(--t-font-size-3xl);
141
+ font-weight: var(--t-font-weight-normal);
142
+ line-height: 40px;
143
+ color: var(--tds-page-header-headline-color);
144
+ }
145
145
 
146
- :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 {
147
- display: block;
148
- width: var(--t-element-size-md);
149
- height: var(--t-element-size-md);
150
- }
146
+ .has-multi-actions.tds-page-header [slot="actions"],
147
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
148
+ display: flex;
149
+ flex-flow: row wrap;
150
+ gap: var(--t-spacing-half) var(--t-spacing-1);
151
+ align-items: flex-start;
152
+ justify-content: flex-start;
153
+ }
151
154
 
152
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
153
- --tds-sidenav-indent: 19px;
154
- }
155
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
156
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
157
+ .tds-page-header nav[slot="navigation"] ul,
158
+ .tds-page-header nav.tds-page-header__nav ul {
159
+ display: flex;
160
+ gap: var(--t-spacing-half);
161
+ padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
162
+ margin: 0 0 -1px;
163
+ overflow: auto;
164
+ list-style: none;
165
+ background: var(--tds-page-header-nav-background);
166
+ }
155
167
 
156
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list {
157
- visibility: visible;
158
- block-size: auto;
159
- opacity: 1;
160
- }
161
-
162
- .tds-sidenav-item.selected :is(a,button) {
163
- --tds-sidenav-item-nested-background: transparent;
164
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-selected);
165
- --tds-sidenav-item-icon-color: var(--tds-sidenav-item-icon-color-selected);
166
- font-weight: 600;
167
- }
168
-
169
- .tds-sidenav-item .tds-sidenav-section-list {
170
- --tds-sidenav-item-depth: 1;
171
- gap: 0;
172
- }
168
+ .tds-page-header nav[slot="navigation"] a,
169
+ .tds-page-header nav[slot="navigation"] button,
170
+ .tds-page-header nav.tds-page-header__nav a,
171
+ .tds-page-header nav.tds-page-header__nav button {
172
+ position: relative;
173
+ display: inline-flex;
174
+ padding: var(--tds-page-header-nav-item-padding-y)
175
+ var(--tds-page-header-nav-item-padding-x);
176
+ font-size: var(--t-font-size-md);
177
+ color: var(--tds-page-header-nav-item-color);
178
+ white-space: nowrap;
179
+ text-decoration: none;
180
+ -webkit-appearance: none;
181
+ -moz-appearance: none;
182
+ appearance: none;
183
+ cursor: pointer;
184
+ outline-offset: -2px;
185
+ background-color: var(--tds-page-header-nav-item-background-color);
186
+ border: var(--tds-page-header-nav-item-border-width) solid
187
+ var(--tds-page-header-nav-item-border-color);
188
+ border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
189
+ border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
190
+ }
173
191
 
174
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list) {
175
- visibility: hidden;
176
- block-size: 0;
177
- overflow-y: clip;
178
- opacity: 0;
179
- transition:
180
- content-visibility 0.2s allow-discrete,
181
- opacity 0.2s,
182
- block-size 0.2s;
183
- }
192
+ .tds-page-header
193
+ nav:is([slot="navigation"], .tds-page-header__nav)
194
+ li:has(.indicator) {
195
+ position: relative;
196
+ }
184
197
 
185
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
186
- --tds-sidenav-item-depth: 2;
187
- }
198
+ .tds-page-header
199
+ nav:is([slot="navigation"], .tds-page-header__nav)
200
+ li:has(.indicator)
201
+ :is(a, button) {
202
+ -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
203
+ mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
204
+ }
188
205
 
189
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
190
- height: 32px;
191
- padding-block: 9px;
192
- padding-left: calc(
193
- (var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) +
194
- var(--tds-sidenav-indent) + 2px
195
- );
196
- line-height: 1;
197
- background-color: transparent;
198
- }
206
+ .tds-page-header
207
+ nav:is([slot="navigation"], .tds-page-header__nav)
208
+ li:has(.indicator)::before,
209
+ .tds-page-header
210
+ nav:is([slot="navigation"], .tds-page-header__nav)
211
+ li:has(.indicator)::after {
212
+ position: absolute;
213
+ top: -5px;
214
+ right: -2px;
215
+ width: 10px;
216
+ height: 10px;
217
+ content: "";
218
+ background: var(--tds-page-header-nav-item-indicator-color);
219
+ border-radius: 50%;
220
+ }
199
221
 
200
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before {
201
- position: absolute;
202
- top: 0;
203
- bottom: 0;
204
- left: calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
205
- width: 2px;
206
- content: "";
207
- background-color: var(--tds-sidenav-item-nested-border-color);
208
- transition: var(--tds-sidenav-item-transition);
209
- }
222
+ @media (prefers-reduced-motion: no-preference) {
223
+ .tds-page-header
224
+ nav:is([slot="navigation"], .tds-page-header__nav)
225
+ li:has(.indicator)::after {
226
+ animation: indicator-pulse 1.25s ease infinite;
227
+ }
228
+ }
210
229
 
211
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
212
- position: absolute;
213
- inset: 0 0 0
214
- calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
215
- z-index: -1;
216
- height: 100%;
217
- content: "";
218
- background-color: var(--tds-sidenav-item-background);
219
- border-radius: 0 var(--t-border-radius-default)
220
- var(--t-border-radius-default) 0;
221
- transition: var(--tds-sidenav-item-transition);
222
- }
230
+ .tds-page-header nav[slot="navigation"] a.selected,
231
+ .tds-page-header nav[slot="navigation"] button.selected,
232
+ .tds-page-header nav.tds-page-header__nav a.selected,
233
+ .tds-page-header nav.tds-page-header__nav button.selected {
234
+ --tds-page-header-nav-item-color: var(
235
+ --tds-page-header-nav-item-color-selected
236
+ );
237
+ --tds-page-header-nav-item-border-color: var(
238
+ --tds-page-header-nav-item-border-color-selected
239
+ );
240
+ --tds-page-header-nav-item-background-color: var(
241
+ --tds-page-header-nav-item-background-color-selected
242
+ );
243
+ --tds-page-header-nav-item-border-bottom-color: var(
244
+ --tds-page-header-nav-item-background-color-selected
245
+ );
246
+ }
223
247
 
224
- :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 {
225
- --tds-sidenav-item-nested-border-color: var(
226
- --tds-sidenav-item-nested-border-color-hover
227
- );
228
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
229
- }
248
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
249
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
250
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
251
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
252
+ --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
253
+ --tds-page-header-nav-item-background-color: var(
254
+ --tds-page-header-nav-item-background-color-hover
255
+ );
256
+ --tds-page-header-nav-item-border-color: var(
257
+ --tds-page-header-nav-item-border-color-hover
258
+ );
259
+ }
230
260
 
231
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
232
- --tds-sidenav-item-nested-border-color: var(
233
- --tds-sidenav-item-nested-border-color-selected
234
- );
235
- }
261
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
262
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
263
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
264
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
265
+ background-color: var(--tds-page-header-nav-item-background-color-active);
266
+ }
236
267
 
237
- .tds-sidenav-responsive-header {
238
- display: flex;
239
- gap: var(--t-spacing-2);
240
- align-items: center;
241
- width: 100%;
268
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
269
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
270
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
271
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
272
+ color: var(--tds-page-header-nav-item-color-disabled);
273
+ cursor: not-allowed;
274
+ background-color: var(--tds-page-header-nav-item-background-color-disabled);
275
+ opacity: 1;
242
276
  }
243
277
 
244
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
245
- display: flex;
246
- align-items: center;
247
- justify-content: center;
248
- order: 0;
249
- height: var(--t-container-size-md);
250
- padding: 3px var(--t-spacing-1);
251
- background-color: var(--t-fill-color-button-neutral-outline-dim-default);
252
- border: 1px solid var(--t-border-color-button-neutral);
253
- border-radius: var(--t-border-radius-md);
278
+ @media (min-width: 720px) {
279
+ .tds-page-header__title-bar,
280
+ .tds-page-header--profile .tds-page-header__title-bar {
281
+ flex-direction: row;
282
+ align-items: flex-start;
254
283
  }
255
284
 
256
- :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus-visible,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):hover {
257
- background-color: var(--t-fill-color-button-neutral-outline-dim-hover);
258
- }
259
-
260
- :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):active {
261
- background-color: var(--t-fill-color-button-neutral-outline-dim-active);
262
- }
263
-
264
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
265
- flex: 1;
266
- order: 1;
267
- margin: 0;
268
- font-size: var(--t-font-size-lg);
269
- font-weight: var(--t-font-weight-medium);
270
- color: var(--t-text-color-default-headline);
285
+ .tds-page-header__primary {
286
+ width: auto;
271
287
  }
272
288
 
273
- @media (max-width: 719px) {
274
- .tds-sidenav-collapse {
275
- position: absolute;
276
- z-index: 10001;
277
- display: none;
278
- max-width: min(448px, calc(100vw - 48px));
279
- padding: 0;
280
- margin: 12px 0;
281
- overflow: hidden;
282
- outline: 0;
283
- background: var(--t-surface-color-card);
284
- border: 0;
285
- border-radius: 6px;
286
- box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.25);
287
- will-change: transform;
288
- position-area: bottom span-right;
289
+ [slot="actions"],
290
+ .tds-page-header__actions {
291
+ margin-left: auto;
289
292
  }
290
293
 
291
- .tds-sidenav-collapse:popover-open,
292
- .tds-sidenav-collapse.\:popover-open {
293
- display: flex;
294
+ .has-multi-actions.tds-page-header [slot="actions"],
295
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
296
+ flex-flow: row wrap;
297
+ margin-top: var(--t-spacing-half);
294
298
  }
299
+ }
295
300
 
296
- .tds-sidenav-scroll-container {
297
- --webkit-overflow-scrolling: touch;
298
- display: block;
299
- width: 100%;
300
- height: -moz-fit-content;
301
- height: fit-content;
302
- padding: var(--t-spacing-2);
303
- overflow-y: auto;
301
+ @keyframes indicator-pulse {
302
+ 0% {
303
+ opacity: 0.3;
304
+ transform: scale(0.9);
304
305
  }
305
-
306
- .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
307
- display: none;
306
+ 100% {
307
+ opacity: 0;
308
+ transform: scale(1.75);
308
309
  }
309
310
  }
310
311
 
311
- @media (min-width: 720px) {
312
- .tds-sidenav-responsive-header {
313
- display: none;
314
- }
312
+
313
+ @media (prefers-reduced-motion: no-preference) {
314
+
315
+ :root {
316
+ interpolate-size: allow-keywords;
315
317
  }
318
+ }
316
319
 
317
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
318
- display: none;
319
- }
320
+ @layer tds-component {
321
+ tds-sidenav {
322
+ --tds-sidenav-indent: 12px;
323
+ --tds-sidenav-item-depth: 0;
320
324
 
321
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
322
- display: block;
323
- }
325
+ --tds-sidenav-item-transition: background-color 0.2s
326
+ cubic-bezier(0.19, 0.91, 0.38, 1);
324
327
 
325
- tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
326
- display: flex;
327
- flex-direction: column;
328
- }
328
+ --tds-sidenav-item-background-hover: var(
329
+ --t-fill-color-button-interaction-ghost-hover
330
+ );
331
+ --tds-sidenav-item-background-active: var(
332
+ --t-fill-color-button-interaction-ghost-active
333
+ );
334
+ --tds-sidenav-item-background-selected: var(
335
+ --t-fill-color-button-interaction-ghost-active
336
+ );
329
337
 
330
- .tds-btn {
331
- --tds-btn-padding-x: 12px;
332
- --tds-btn-padding-truncated-x: 8px;
333
- --tds-btn-padding-y: 3px;
334
- --tds-btn-font-size: 16px;
335
- --tds-btn-font-weight: 400;
336
- --tds-btn-line-height: 1.5;
337
- --tds-btn-color: var(--t-text-color-default-headline);
338
- --tds-btn-bg: transparent;
339
- --tds-btn-border-width: var(--t-border-width-default);
340
- --tds-btn-border-color: transparent;
341
- --tds-btn-border-radius: var(--t-border-radius-md);
342
- --tds-btn-border-color-hover: transparent;
343
- --tds-btn-disabled-opacity: 1;
344
- --tds-btn-min-height: 32px;
345
- display: inline-flex;
346
- gap: 1ex;
347
- align-items: center;
348
- min-height: var(--tds-btn-min-height);
349
- padding: var(--tds-btn-padding-y) var(--tds-btn-padding-x);
350
- font-size: var(--tds-btn-font-size);
351
- font-weight: var(--tds-btn-font-weight);
352
- line-height: var(--tds-btn-line-height);
353
- vertical-align: middle;
354
- color: var(--tds-btn-color);
355
- text-align: center;
356
- text-decoration: none;
357
- cursor: pointer;
358
- -webkit-user-select: none;
359
- -moz-user-select: none;
360
- user-select: none;
361
- background-color: var(--tds-btn-bg);
362
- border: var(--tds-btn-border-width) solid var(--tds-btn-border-color);
363
- border-radius: var(--tds-btn-border-radius);
364
- transition:
365
- color 0.15s ease-in-out,
366
- background-color 0.15s ease-in-out,
367
- border-color 0.15s ease-in-out,
368
- box-shadow 0.15s ease-in-out;
369
- }
338
+ --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
339
+ --tds-sidenav-item-nested-border-color-hover: var(
340
+ --t-fill-color-neutral-050
341
+ );
342
+ --tds-sidenav-item-nested-border-color-selected: var(
343
+ --t-border-color-status-info
344
+ );
370
345
 
371
- .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))) {
372
- padding-left: var(--tds-btn-padding-truncated-x);
346
+ --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
347
+ --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
373
348
  }
374
349
 
375
- .tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))) {
376
- padding-right: var(--tds-btn-padding-truncated-x);
350
+ .is-classic tds-sidenav,
351
+ .tds-sidenav--theme-gray {
352
+ --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
353
+ --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
354
+ --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
355
+ --tds-sidenav-item-nested-border-color-hover: var(
356
+ --t-fill-color-neutral-050
357
+ );
358
+ --tds-sidenav-item-nested-border-color-selected: var(
359
+ --t-fill-color-neutral-010
360
+ );
377
361
  }
362
+ }
378
363
 
379
- .tds-btn:hover {
380
- color: var(--tds-btn-color-hover);
381
- background-color: var(--tds-btn-bg-hover);
382
- border-color: var(--tds-btn-border-color-hover);
364
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
365
+ display: flex;
383
366
  }
384
367
 
385
- .tds-btn:focus-visible {
386
- color: var(--tds-btn-color-hover);
387
- outline: solid 3px var(--t-border-color-status-info);
388
- outline-offset: 1px;
389
- background-color: var(--tds-btn-bg-hover);
390
- border-color: var(--tds-btn-border-color-hover);
368
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
369
+ flex-direction: column;
370
+ gap: var(--t-spacing-half);
371
+ width: 100%;
391
372
  }
392
373
 
393
- .tds-btn:active,.tds-btn.active {
394
- color: var(--tds-btn-color-active);
395
- background-color: var(--tds-btn-bg-active);
396
- border-color: var(--tds-btn-border-color-active);
397
- }
374
+ .tds-sidenav-section-list {
375
+ width: 100%;
376
+ padding: 0;
377
+ margin: 0;
378
+ list-style: none;
379
+ }
398
380
 
399
- .tds-btn:disabled,.tds-btn.disabled {
400
- color: var(--tds-btn-color-disabled);
401
- pointer-events: none;
402
- background-color: var(--tds-btn-bg-disabled);
403
- border-color: var(--tds-btn-border-color-disabled);
404
- opacity: var(--tds-btn-disabled-opacity);
405
- }
381
+ .tds-sidenav-section-header {
382
+ display: flex;
383
+ align-items: baseline;
384
+ justify-content: space-between;
385
+ padding-top: var(--t-spacing-2);
386
+ }
406
387
 
407
- .tds-btn svg:not(.symbol) {
408
- display: block;
409
- inline-size: auto;
410
- block-size: auto;
411
- max-block-size: 0.66666667lh;
412
- color: var(--tds-btn-icon-color, currentColor);
388
+ .tds-sidenav-section-header h2 {
389
+ margin: 0;
390
+ font-size: var(--t-font-size-sm);
391
+ font-weight: var(--t-font-weight-semibold);
392
+ color: var(--t-text-color-default-secondary);
393
+ text-transform: uppercase;
394
+ line-height: 1.35;
413
395
  }
414
396
 
415
- @media (prefers-reduced-motion: reduce) {
397
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
398
+ margin-top: 0;
399
+ }
416
400
 
417
- .tds-btn {
418
- transition: none;
401
+ .tds-sidenav-section-list,
402
+ .tds-sidenav-item {
403
+ width: 100%;
404
+ padding: 0;
405
+ margin: 0;
419
406
  }
407
+
408
+ .tds-sidenav-item :is(a,button) {
409
+ position: relative;
410
+ display: flex;
411
+ gap: 12px;
412
+ align-items: center;
413
+ width: 100%;
414
+ padding: 12px;
415
+ overflow: hidden;
416
+ font-size: var(--t-font-size-sm);
417
+ line-height: 18px;
418
+ color: var(--t-text-color-default-headline);
419
+ white-space: nowrap;
420
+ text-decoration: none;
421
+ -webkit-appearance: none;
422
+ -moz-appearance: none;
423
+ appearance: none;
424
+ cursor: pointer;
425
+ background-color: var(--tds-sidenav-item-background, transparent);
426
+ border: 0;
427
+ border-radius: var(--t-border-radius-default);
428
+ transition: var(--tds-sidenav-item-transition);
420
429
  }
421
430
 
422
- /* Effective height 48px */
431
+ :is(.tds-sidenav-item :is(a,button)):not(:has([slot="prefix"],.prefix,[slot="suffix"],.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not([slot="prefix"],.prefix,[slot="suffix"],.suffix)) {
432
+ display: block;
433
+ flex: 1;
434
+ overflow: hidden;
435
+ text-overflow: ellipsis;
436
+ text-align: left;
437
+ white-space: nowrap;
438
+ }
423
439
 
424
- .tds-btn--xl {
425
- --tds-btn-padding-y: 11px;
426
- --tds-btn-padding-x: 18px;
427
- --tds-btn-padding-truncated-x: 12px;
428
- --tds-btn-min-height: 48px;
429
- }
440
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
441
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
442
+ color: var(--t-text-color-default-headline);
443
+ text-decoration: none;
444
+ }
430
445
 
431
- /* Effective height 40px */
446
+ :is(.tds-sidenav-item :is(a,button)):active {
447
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
448
+ }
432
449
 
433
- .tds-btn--lg {
434
- --tds-btn-padding-y: 7px;
435
- --tds-btn-padding-x: 14px;
436
- --tds-btn-min-height: 40px;
437
- }
450
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
451
+ overflow: hidden;
452
+ color: var(--tds-sidenav-item-icon-color);
453
+ }
438
454
 
439
- /* Effective height 24px */
455
+ :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 {
456
+ display: block;
457
+ width: var(--t-element-size-md);
458
+ height: var(--t-element-size-md);
459
+ }
440
460
 
441
- .tds-btn--sm {
442
- --tds-btn-padding-y: 0.5px;
443
- --tds-btn-padding-x: 7px;
444
- --tds-btn-padding-truncated-x: 4px;
445
- --tds-btn-min-height: 24px;
446
- --tds-btn-font-size: var(--t-font-size-sm);
447
- }
461
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
462
+ --tds-sidenav-indent: 19px;
463
+ }
448
464
 
449
- /* Effective height 20px */
465
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list {
466
+ visibility: visible;
467
+ block-size: auto;
468
+ opacity: 1;
469
+ }
450
470
 
451
- .tds-btn--xs {
452
- --tds-btn-padding-y: 0;
453
- --tds-btn-padding-x: 5px;
454
- --tds-btn-padding-truncated-x: 5px;
455
- --tds-btn-min-height: 20px;
456
- --tds-btn-font-size: var(--t-font-size-xs);
457
- }
471
+ .tds-sidenav-item.selected :is(a,button) {
472
+ --tds-sidenav-item-nested-background: transparent;
473
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-selected);
474
+ --tds-sidenav-item-icon-color: var(--tds-sidenav-item-icon-color-selected);
475
+ font-weight: 600;
476
+ }
458
477
 
459
- .tds-btn--neutral {
460
- --tds-btn-color: var(--t-text-color-default-inverted);
461
- --tds-btn-bg: var(--t-fill-color-button-neutral-solid-default);
462
- --tds-btn-border-color: var(--t-fill-color-button-neutral-solid-default);
463
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
464
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-solid-hover);
465
- --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-solid-hover);
466
- --tds-btn-color-active: var(--t-text-color-default-inverted);
467
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-solid-active);
468
- --tds-btn-border-color-active: var(
469
- --t-fill-color-button-neutral-solid-active
470
- );
471
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
472
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
473
- --tds-btn-border-color-disabled: var(
474
- --t-fill-color-button-neutral-solid-disabled
475
- );
476
- }
477
-
478
- .tds-btn--interaction {
479
- --tds-btn-color: var(--t-text-color-default-inverted);
480
- --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
481
- --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
482
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
483
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
484
- --tds-btn-border-color-hover: var(
485
- --t-fill-color-button-interaction-solid-hover
486
- );
487
- --tds-btn-color-active: var(--t-text-color-default-inverted);
488
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
489
- --tds-btn-border-color-active: var(
490
- --t-fill-color-button-interaction-solid-active
491
- );
492
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
493
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
494
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
495
- }
496
-
497
- .tds-btn--delete {
498
- --tds-btn-color: var(--t-text-color-default-inverted);
499
- --tds-btn-bg: var(--t-fill-color-button-delete-solid-default);
500
- --tds-btn-border-color: var(--t-fill-color-button-delete-solid-default);
501
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
502
- --tds-btn-bg-hover: var(--t-fill-color-button-delete-solid-hover);
503
- --tds-btn-border-color-hover: var(--t-fill-color-button-delete-solid-hover);
504
- --tds-btn-color-active: var(--t-text-color-default-inverted);
505
- --tds-btn-bg-active: var(--t-fill-color-button-delete-solid-active);
506
- --tds-btn-border-color-active: var(--t-fill-color-button-delete-solid-active);
507
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
508
- --tds-btn-bg-disabled: var(--t-fill-color-button-delete-solid-disabled);
509
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
510
- }
478
+ .tds-sidenav-item .tds-sidenav-section-list {
479
+ --tds-sidenav-item-depth: 1;
480
+ gap: 0;
481
+ }
511
482
 
512
- .tds-btn--outline-neutral {
513
- --tds-btn-color: var(--t-text-color-status-neutral);
514
- --tds-btn-border-color: var(--t-border-color-button-neutral);
515
- --tds-btn-color-hover: var(--tds-btn-color);
516
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
517
- --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
518
- --tds-btn-color-active: var(--tds-btn-color);
519
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
520
- --tds-btn-border-color-active: var(--t-border-color-button-neutral);
521
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
522
- --tds-btn-bg-disabled: var(
523
- --t-fill-color-button-neutral-outline-dim-disabled
524
- );
525
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
526
- }
483
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list) {
484
+ visibility: hidden;
485
+ block-size: 0;
486
+ overflow-y: clip;
487
+ opacity: 0;
488
+ transition:
489
+ content-visibility 0.2s allow-discrete,
490
+ opacity 0.2s,
491
+ block-size 0.2s;
492
+ }
527
493
 
528
- .tds-btn--outline-interaction {
529
- --tds-btn-color: var(--t-text-color-status-info);
530
- --tds-btn-border-color: var(--t-border-color-button-info);
531
- --tds-btn-color-hover: var(--tds-btn-color);
532
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
533
- --tds-btn-border-color-hover: var(--tds-btn-border-color);
534
- --tds-btn-color-active: var(--tds-btn-color);
535
- --tds-btn-bg-active: var(
536
- --t-fill-color-button-interaction-outline-dim-active
537
- );
538
- --tds-btn-border-color-active: var(--tds-btn-border-color);
539
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
540
- --tds-btn-bg-disabled: var(
541
- --t-fill-color-button-interaction-outline-dim-disabled
542
- );
543
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
544
- }
494
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
495
+ --tds-sidenav-item-depth: 2;
496
+ }
545
497
 
546
- .tds-btn--outline-delete {
547
- --tds-btn-color: var(--t-text-color-status-error);
548
- --tds-btn-border-color: var(--t-border-color-button-delete);
549
- --tds-btn-color-hover: var(--tds-btn-color);
550
- --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
551
- --tds-btn-border-color-hover: var(--tds-btn-border-color);
552
- --tds-btn-color-active: var(--tds-btn-color);
553
- --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
554
- --tds-btn-border-color-active: var(--tds-btn-border-color);
555
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
556
- --tds-btn-bg-disabled: var(--t-fill-color-button-delete-outline-dim-disabled);
557
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
558
- }
498
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
499
+ height: 32px;
500
+ padding-block: 9px;
501
+ padding-left: calc(
502
+ (var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) +
503
+ var(--tds-sidenav-indent) + 2px
504
+ );
505
+ line-height: 1;
506
+ background-color: transparent;
507
+ }
559
508
 
560
- .tds-btn--ghost-neutral {
561
- --tds-btn-color: var(--t-text-color-status-neutral);
562
- --tds-btn-border-color: transparent;
563
- --tds-btn-color-hover: var(--tds-btn-color);
564
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
565
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
566
- --tds-btn-color-active: var(--tds-btn-color);
567
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
568
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
569
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
570
- --tds-btn-bg-disabled: transparent;
571
- --tds-btn-border-color-disabled: transparent;
572
- }
509
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before {
510
+ position: absolute;
511
+ top: 0;
512
+ bottom: 0;
513
+ left: calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
514
+ width: 2px;
515
+ content: "";
516
+ background-color: var(--tds-sidenav-item-nested-border-color);
517
+ transition: var(--tds-sidenav-item-transition);
518
+ }
573
519
 
574
- .tds-btn--ghost-interaction {
575
- --tds-btn-color: var(--t-text-color-status-info);
576
- --tds-btn-border-color: transparent;
577
- --tds-btn-color-hover: var(--tds-btn-color);
578
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
579
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
580
- --tds-btn-color-active: var(--tds-btn-color);
581
- --tds-btn-bg-active: var(
582
- --t-fill-color-button-interaction-outline-dim-active
583
- );
584
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
585
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
586
- --tds-btn-bg-disabled: transparent;
587
- --tds-btn-border-color-disabled: transparent;
588
- }
520
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
521
+ position: absolute;
522
+ inset: 0 0 0
523
+ calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
524
+ z-index: -1;
525
+ height: 100%;
526
+ content: "";
527
+ background-color: var(--tds-sidenav-item-background);
528
+ border-radius: 0 var(--t-border-radius-default)
529
+ var(--t-border-radius-default) 0;
530
+ transition: var(--tds-sidenav-item-transition);
531
+ }
589
532
 
590
- .tds-btn--ghost-delete {
591
- --tds-btn-color: var(--t-text-color-status-error);
592
- --tds-btn-border-color: transparent;
593
- --tds-btn-color-hover: var(--tds-btn-color);
594
- --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
595
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
596
- --tds-btn-color-active: var(--tds-btn-color);
597
- --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
598
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
599
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
600
- --tds-btn-bg-disabled: transparent;
601
- --tds-btn-border-color-disabled: transparent;
602
- }
533
+ :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 {
534
+ --tds-sidenav-item-nested-border-color: var(
535
+ --tds-sidenav-item-nested-border-color-hover
536
+ );
537
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
538
+ }
603
539
 
604
- .tds-btn--primary-page-header {
605
- --tds-btn-color: var(--t-text-color-default-inverted);
606
- --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
607
- --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
608
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
609
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
610
- --tds-btn-border-color-hover: var(
611
- --t-fill-color-button-interaction-solid-hover
612
- );
613
- --tds-btn-color-active: var(--t-text-color-default-inverted);
614
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
615
- --tds-btn-border-color-active: var(
616
- --t-fill-color-button-interaction-solid-active
617
- );
618
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
619
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
620
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
621
- }
540
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
541
+ --tds-sidenav-item-nested-border-color: var(
542
+ --tds-sidenav-item-nested-border-color-selected
543
+ );
544
+ }
622
545
 
623
- .tds-btn--secondary-page-header {
624
- --tds-btn-border-width: 0;
625
- --tds-btn-color: var(--t-text-color-status-neutral);
626
- --tds-btn-bg: var(--t-fill-color-button-neutral-responsive-header-default);
627
- --tds-btn-border-color: var(
628
- --t-fill-color-button-neutral-responsive-header-default
629
- );
630
- --tds-btn-color-hover: var(--t-text-color-status-neutral);
631
- --tds-btn-bg-hover: var(
632
- --t-fill-color-button-neutral-responsive-header-hover
633
- );
634
- --tds-btn-border-color-hover: var(
635
- --t-fill-color-button-neutral-responsive-header-hover
636
- );
637
- --tds-btn-color-active: var(--t-text-color-status-neutral);
638
- --tds-btn-bg-active: var(
639
- --t-fill-color-button-neutral-responsive-header-active
640
- );
641
- --tds-btn-border-color-active: var(
642
- --t-fill-color-button-neutral-responsive-header-active
643
- );
644
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
645
- --tds-btn-bg-disabled: var(
646
- --t-fill-color-button-neutral-responsive-header-disabled
647
- );
648
- --tds-btn-border-color-disabled: var(
649
- --t-fill-color-button-neutral-responsive-header-disabled
650
- );
546
+ .tds-sidenav-responsive-header {
547
+ display: flex;
548
+ gap: var(--t-spacing-2);
549
+ align-items: center;
550
+ width: 100%;
651
551
  }
652
552
 
653
- @media (min-width: 720px) {
654
-
655
- .tds-btn--secondary-page-header {
656
- --tds-btn-border-width: 1px;
657
- --tds-btn-color: var(--t-text-color-status-neutral);
658
- --tds-btn-bg: transparent;
659
- --tds-btn-border-color: var(--t-border-color-button-neutral);
660
- --tds-btn-color-hover: var(--tds-btn-color);
661
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
662
- --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
663
- --tds-btn-color-active: var(--tds-btn-color);
664
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
665
- --tds-btn-border-color-active: var(--t-border-color-button-neutral);
666
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
667
- --tds-btn-bg-disabled: var(
668
- --t-fill-color-button-neutral-outline-dim-disabled
669
- );
670
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
671
- }
553
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
554
+ display: flex;
555
+ align-items: center;
556
+ justify-content: center;
557
+ order: 0;
558
+ height: var(--t-container-size-md);
559
+ padding: 3px var(--t-spacing-1);
560
+ background-color: var(--t-fill-color-button-neutral-outline-dim-default);
561
+ border: 1px solid var(--t-border-color-button-neutral);
562
+ border-radius: var(--t-border-radius-md);
672
563
  }
673
564
 
674
- .tds-btn--pill {
675
- --tds-btn-border-radius: 999px;
676
- --tds-btn-padding-y: 4px;
677
- --tds-btn-padding-x: 13px;
565
+ :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus-visible,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):hover {
566
+ background-color: var(--t-fill-color-button-neutral-outline-dim-hover);
567
+ }
678
568
 
679
- --tds-btn-color: var(--t-text-color-default-primary);
680
- --tds-btn-bg: var(--t-fill-color-button-pill-default);
681
- --tds-btn-border-color: var(--tds-btn-bg);
682
- --tds-btn-color-hover: var(--tds-btn-color);
683
- --tds-btn-bg-hover: var(--t-fill-color-button-pill-hover);
684
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
569
+ :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):active {
570
+ background-color: var(--t-fill-color-button-neutral-outline-dim-active);
571
+ }
685
572
 
686
- --tds-btn-color-active: var(--tds-btn-color);
687
- --tds-btn-bg-active: var(--t-fill-color-button-pill-active);
688
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
689
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
690
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
691
- --tds-btn-border-color-disabled: var(
692
- --t-fill-color-button-neutral-solid-disabled
693
- );
694
- --tds-btn-icon-color: var(--t-icon-color-default-secondary);
695
- --tds-btn-min-height: 32px;
696
- }
573
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
574
+ flex: 1;
575
+ order: 1;
576
+ margin: 0;
577
+ font-size: var(--t-font-size-lg);
578
+ font-weight: var(--t-font-weight-medium);
579
+ color: var(--t-text-color-default-headline);
580
+ }
697
581
 
698
- .tds-btn--pill:is(.tds-btn--sm) {
699
- --tds-btn-padding-y: 1px;
700
- --tds-btn-padding-x: 7px;
701
- --tds-btn-min-height: auto;
582
+ @media (max-width: 719px) {
583
+ .tds-sidenav-collapse {
584
+ position: absolute;
585
+ z-index: 10001;
586
+ display: none;
587
+ max-width: min(448px, calc(100vw - 48px));
588
+ padding: 0;
589
+ margin: 12px 0;
590
+ overflow: hidden;
591
+ outline: 0;
592
+ background: var(--t-surface-color-card);
593
+ border: 0;
594
+ border-radius: 6px;
595
+ box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.25);
596
+ will-change: transform;
597
+ position-area: bottom span-right;
702
598
  }
703
599
 
704
- .tds-btn--pill:is(.tds-btn--xs) {
705
- --tds-btn-padding-y: 1px;
706
- --tds-btn-padding-x: 9px;
707
- --tds-btn-min-height: auto;
600
+ .tds-sidenav-collapse:popover-open,
601
+ .tds-sidenav-collapse.\:popover-open {
602
+ display: flex;
708
603
  }
709
604
 
710
- .tds-btn--pill:disabled,.tds-btn--pill.disabled {
711
- --tds-btn-icon-color: inherit;
605
+ .tds-sidenav-scroll-container {
606
+ --webkit-overflow-scrolling: touch;
607
+ display: block;
608
+ width: 100%;
609
+ height: -moz-fit-content;
610
+ height: fit-content;
611
+ padding: var(--t-spacing-2);
612
+ overflow-y: auto;
712
613
  }
713
614
 
714
- .tds-btn--dropdown .suffix {
715
- transition: transform 0.2s ease-in-out;
615
+ .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
616
+ display: none;
617
+ }
716
618
  }
717
619
 
718
- .tds-btn--dropdown[aria-expanded="true"] .suffix {
719
- transform: rotate(-180deg);
720
- }
721
- @layer t-critical {
722
- tds-page-header:not(.hydrated) {
620
+ @media (min-width: 720px) {
621
+ .tds-sidenav-responsive-header {
723
622
  display: none;
724
623
  }
725
624
  }
726
625
 
727
- @layer t-component {
728
- .tds-page-header {
729
- --tds-page-header-background-color: var(
730
- --t-fill-color-product-current-gradient-tint,
731
- var(--t-surface-color-card)
732
- );
733
- --tds-page-header-background-color-inactive: var(
734
- --t-fill-color-transparency-dark-010
735
- );
736
- --tds-page-header-color: var(--t-text-color-default-secondary);
737
- --tds-page-header-headline-color: var(--t-text-color-default-headline);
738
- --tds-page-header-padding-x: var(--t-spacing-2);
739
- --tds-page-header-padding-y: var(--t-spacing-2);
740
- --tds-page-header-nav-padding-x: var(
741
- --tds-page-header-padding-x,
742
- var(--t-spacing-3)
743
- );
744
- --tds-page-header-nav-background: linear-gradient(
745
- 180deg,
746
- rgba(0, 0, 0, 0) 0%,
747
- rgba(0, 0, 0, 0.1) 100%
748
- );
749
- --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
750
- --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
751
- --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
752
- --tds-page-header-nav-item-background-color: var(
753
- --t-fill-color-transparency-light-060
754
- );
755
- --tds-page-header-nav-item-border-width: 0;
626
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
627
+ display: none;
628
+ }
629
+
630
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
631
+ display: block;
632
+ }
633
+
634
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
635
+ display: flex;
636
+ flex-direction: column;
637
+ }
638
+
639
+ .tds-btn {
640
+ --tds-btn-padding-x: 12px;
641
+ --tds-btn-padding-truncated-x: 8px;
642
+ --tds-btn-padding-y: 3px;
643
+ --tds-btn-font-size: 16px;
644
+ --tds-btn-font-weight: 400;
645
+ --tds-btn-line-height: 1.5;
646
+ --tds-btn-color: var(--t-text-color-default-headline);
647
+ --tds-btn-bg: transparent;
648
+ --tds-btn-border-width: var(--t-border-width-default);
649
+ --tds-btn-border-color: transparent;
650
+ --tds-btn-border-radius: var(--t-border-radius-md);
651
+ --tds-btn-border-color-hover: transparent;
652
+ --tds-btn-disabled-opacity: 1;
653
+ --tds-btn-min-height: 32px;
654
+ display: inline-flex;
655
+ gap: 1ex;
656
+ align-items: center;
657
+ min-height: var(--tds-btn-min-height);
658
+ padding: var(--tds-btn-padding-y) var(--tds-btn-padding-x);
659
+ font-size: var(--tds-btn-font-size);
660
+ font-weight: var(--tds-btn-font-weight);
661
+ line-height: var(--tds-btn-line-height);
662
+ vertical-align: middle;
663
+ color: var(--tds-btn-color);
664
+ text-align: center;
665
+ text-decoration: none;
666
+ cursor: pointer;
667
+ -webkit-user-select: none;
668
+ -moz-user-select: none;
669
+ user-select: none;
670
+ background-color: var(--tds-btn-bg);
671
+ border: var(--tds-btn-border-width) solid var(--tds-btn-border-color);
672
+ border-radius: var(--tds-btn-border-radius);
673
+ transition:
674
+ color 0.15s ease-in-out,
675
+ background-color 0.15s ease-in-out,
676
+ border-color 0.15s ease-in-out,
677
+ box-shadow 0.15s ease-in-out;
678
+ }
756
679
 
757
- --tds-page-header-nav-item-border-color: var(
758
- --tds-page-header-nav-item-background-color
759
- );
760
- --tds-page-header-nav-item-border-bottom-color: var(
761
- --t-border-color-default-base
762
- );
680
+ .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))) {
681
+ padding-left: var(--tds-btn-padding-truncated-x);
682
+ }
763
683
 
764
- --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
765
- --tds-page-header-nav-item-background-color-hover: var(
766
- --t-fill-color-neutral-080
767
- );
768
- --tds-page-header-nav-item-border-color-hover: var(
769
- --tds-page-header-nav-item-background-color-hover
770
- );
684
+ .tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))) {
685
+ padding-right: var(--tds-btn-padding-truncated-x);
686
+ }
771
687
 
772
- --tds-page-header-nav-item-background-color-active: var(
773
- --t-fill-color-neutral-060
774
- );
775
- --tds-page-header-nav-item-border-color-active: var(
776
- --tds-page-header-nav-item-background-color-hover
777
- );
688
+ .tds-btn:hover {
689
+ color: var(--tds-btn-color-hover);
690
+ background-color: var(--tds-btn-bg-hover);
691
+ border-color: var(--tds-btn-border-color-hover);
692
+ }
778
693
 
779
- --tds-page-header-nav-item-color-disabled: var(
780
- --t-text-color-default-disabled
781
- );
782
- --tds-page-header-nav-item-background-color-disabled: var(
783
- --t-fill-color-neutral-080
784
- );
785
- --tds-page-header-nav-item-border-color-disabled: var(
786
- --tds-page-header-nav-item-background-color-disabled
787
- );
694
+ .tds-btn:focus-visible {
695
+ color: var(--tds-btn-color-hover);
696
+ outline: solid 3px var(--t-border-color-status-info);
697
+ outline-offset: 1px;
698
+ background-color: var(--tds-btn-bg-hover);
699
+ border-color: var(--tds-btn-border-color-hover);
700
+ }
788
701
 
789
- --tds-page-header-nav-item-color-selected: var(
790
- --t-text-color-default-primary
791
- );
792
- --tds-page-header-nav-item-border-color-selected: var(
793
- --t-border-color-default-base
794
- );
795
- --tds-page-header-nav-item-background-color-selected: var(
796
- --t-fill-color-neutral-100
797
- );
798
- --tds-page-header-nav-item-border-bottom-color-selected: var(
799
- --tds-page-header-nav-item-background-color-selected
800
- );
801
- --tds-page-header-nav-item-indicator-color: var(
802
- --t-icon-color-status-warning-primary
803
- );
702
+ .tds-btn:active,.tds-btn.active {
703
+ color: var(--tds-btn-color-active);
704
+ background-color: var(--tds-btn-bg-active);
705
+ border-color: var(--tds-btn-border-color-active);
804
706
  }
805
707
 
806
- @media (min-width: 720px) {
807
- .tds-page-header {
808
- --tds-page-header-background-color: var(--t-surface-color-card);
809
- --tds-page-header-padding-x: var(--t-spacing-3);
810
- --tds-page-header-nav-background: transparent;
811
- --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
812
- --tds-page-header-nav-item-border-width: 1px;
813
- --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
814
- --tds-page-header-nav-item-background-color: var(
815
- --t-fill-color-neutral-070
816
- );
817
- }
708
+ .tds-btn:disabled,.tds-btn.disabled {
709
+ color: var(--tds-btn-color-disabled);
710
+ pointer-events: none;
711
+ background-color: var(--tds-btn-bg-disabled);
712
+ border-color: var(--tds-btn-border-color-disabled);
713
+ opacity: var(--tds-btn-disabled-opacity);
818
714
  }
819
- }
820
715
 
821
- .tds-page-header {
822
- display: flex;
823
- flex-direction: column;
824
- padding-top: var(--tds-page-header-padding-y);
825
- color: var(--tds-page-header-color);
826
- background: var(--tds-page-header-background-color);
827
- border-bottom: 1px solid var(--t-border-color-default-base);
828
- }
716
+ .tds-btn svg:not(.symbol) {
717
+ display: block;
718
+ inline-size: auto;
719
+ block-size: auto;
720
+ max-block-size: 0.66666667lh;
721
+ color: var(--tds-btn-icon-color, currentColor);
722
+ }
829
723
 
830
- .tds-page-header:not(.has-nav) {
831
- padding-bottom: var(--tds-page-header-padding-y);
724
+ @media (prefers-reduced-motion: reduce) {
725
+
726
+ .tds-btn {
727
+ transition: none;
832
728
  }
729
+ }
833
730
 
834
- .tds-page-header.inactive {
835
- background-color: var(--tds-page-header-background-color-inactive);
731
+ /* Effective height 48px */
732
+
733
+ .tds-btn--xl {
734
+ --tds-btn-padding-y: 11px;
735
+ --tds-btn-padding-x: 18px;
736
+ --tds-btn-padding-truncated-x: 12px;
737
+ --tds-btn-min-height: 48px;
836
738
  }
837
739
 
838
- .tds-page-header__title-bar {
839
- display: flex;
840
- flex-direction: column;
841
- gap: var(--t-spacing-2) var(--t-spacing-half);
842
- align-items: flex-start;
843
- justify-content: space-between;
844
- padding: 0 var(--tds-page-header-padding-x);
740
+ /* Effective height 40px */
741
+
742
+ .tds-btn--lg {
743
+ --tds-btn-padding-y: 7px;
744
+ --tds-btn-padding-x: 14px;
745
+ --tds-btn-min-height: 40px;
845
746
  }
846
747
 
847
- .tds-page-header--profile > .tds-page-header__title-bar {
848
- align-items: center;
748
+ /* Effective height 24px */
749
+
750
+ .tds-btn--sm {
751
+ --tds-btn-padding-y: 0.5px;
752
+ --tds-btn-padding-x: 7px;
753
+ --tds-btn-padding-truncated-x: 4px;
754
+ --tds-btn-min-height: 24px;
755
+ --tds-btn-font-size: var(--t-font-size-sm);
849
756
  }
850
757
 
851
- .tds-page-header__primary {
852
- flex: 1 1 auto;
853
- width: 100%;
758
+ /* Effective height 20px */
759
+
760
+ .tds-btn--xs {
761
+ --tds-btn-padding-y: 0;
762
+ --tds-btn-padding-x: 5px;
763
+ --tds-btn-padding-truncated-x: 5px;
764
+ --tds-btn-min-height: 20px;
765
+ --tds-btn-font-size: var(--t-font-size-xs);
854
766
  }
855
767
 
856
- .tds-page-header__primary h1 {
857
- margin: 0;
858
- font-size: var(--t-font-size-3xl);
859
- font-weight: var(--t-font-weight-normal);
860
- line-height: 40px;
861
- color: var(--tds-page-header-headline-color);
768
+ .tds-btn--neutral {
769
+ --tds-btn-color: var(--t-text-color-default-inverted);
770
+ --tds-btn-bg: var(--t-fill-color-button-neutral-solid-default);
771
+ --tds-btn-border-color: var(--t-fill-color-button-neutral-solid-default);
772
+ --tds-btn-color-hover: var(--t-text-color-default-inverted);
773
+ --tds-btn-bg-hover: var(--t-fill-color-button-neutral-solid-hover);
774
+ --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-solid-hover);
775
+ --tds-btn-color-active: var(--t-text-color-default-inverted);
776
+ --tds-btn-bg-active: var(--t-fill-color-button-neutral-solid-active);
777
+ --tds-btn-border-color-active: var(
778
+ --t-fill-color-button-neutral-solid-active
779
+ );
780
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
781
+ --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
782
+ --tds-btn-border-color-disabled: var(
783
+ --t-fill-color-button-neutral-solid-disabled
784
+ );
862
785
  }
863
786
 
864
- .has-multi-actions.tds-page-header [slot="actions"],
865
- .has-multi-actions.tds-page-header .tds-page-header__actions {
866
- display: flex;
867
- flex-flow: row wrap;
868
- gap: var(--t-spacing-half) var(--t-spacing-1);
869
- align-items: flex-start;
870
- justify-content: flex-start;
787
+ .tds-btn--interaction {
788
+ --tds-btn-color: var(--t-text-color-default-inverted);
789
+ --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
790
+ --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
791
+ --tds-btn-color-hover: var(--t-text-color-default-inverted);
792
+ --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
793
+ --tds-btn-border-color-hover: var(
794
+ --t-fill-color-button-interaction-solid-hover
795
+ );
796
+ --tds-btn-color-active: var(--t-text-color-default-inverted);
797
+ --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
798
+ --tds-btn-border-color-active: var(
799
+ --t-fill-color-button-interaction-solid-active
800
+ );
801
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
802
+ --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
803
+ --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
871
804
  }
872
805
 
873
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
874
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
875
- .tds-page-header nav[slot="navigation"] ul,
876
- .tds-page-header nav.tds-page-header__nav ul {
877
- display: flex;
878
- gap: var(--t-spacing-half);
879
- padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
880
- margin: 0 0 -1px;
881
- overflow: auto;
882
- list-style: none;
883
- background: var(--tds-page-header-nav-background);
806
+ .tds-btn--delete {
807
+ --tds-btn-color: var(--t-text-color-default-inverted);
808
+ --tds-btn-bg: var(--t-fill-color-button-delete-solid-default);
809
+ --tds-btn-border-color: var(--t-fill-color-button-delete-solid-default);
810
+ --tds-btn-color-hover: var(--t-text-color-default-inverted);
811
+ --tds-btn-bg-hover: var(--t-fill-color-button-delete-solid-hover);
812
+ --tds-btn-border-color-hover: var(--t-fill-color-button-delete-solid-hover);
813
+ --tds-btn-color-active: var(--t-text-color-default-inverted);
814
+ --tds-btn-bg-active: var(--t-fill-color-button-delete-solid-active);
815
+ --tds-btn-border-color-active: var(--t-fill-color-button-delete-solid-active);
816
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
817
+ --tds-btn-bg-disabled: var(--t-fill-color-button-delete-solid-disabled);
818
+ --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
884
819
  }
885
820
 
886
- .tds-page-header nav[slot="navigation"] a,
887
- .tds-page-header nav[slot="navigation"] button,
888
- .tds-page-header nav.tds-page-header__nav a,
889
- .tds-page-header nav.tds-page-header__nav button {
890
- position: relative;
891
- display: inline-flex;
892
- padding: var(--tds-page-header-nav-item-padding-y)
893
- var(--tds-page-header-nav-item-padding-x);
894
- font-size: var(--t-font-size-md);
895
- color: var(--tds-page-header-nav-item-color);
896
- white-space: nowrap;
897
- text-decoration: none;
898
- -webkit-appearance: none;
899
- -moz-appearance: none;
900
- appearance: none;
901
- cursor: pointer;
902
- outline-offset: -2px;
903
- background-color: var(--tds-page-header-nav-item-background-color);
904
- border: var(--tds-page-header-nav-item-border-width) solid
905
- var(--tds-page-header-nav-item-border-color);
906
- border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
907
- border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
821
+ .tds-btn--outline-neutral {
822
+ --tds-btn-color: var(--t-text-color-status-neutral);
823
+ --tds-btn-border-color: var(--t-border-color-button-neutral);
824
+ --tds-btn-color-hover: var(--tds-btn-color);
825
+ --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
826
+ --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
827
+ --tds-btn-color-active: var(--tds-btn-color);
828
+ --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
829
+ --tds-btn-border-color-active: var(--t-border-color-button-neutral);
830
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
831
+ --tds-btn-bg-disabled: var(
832
+ --t-fill-color-button-neutral-outline-dim-disabled
833
+ );
834
+ --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
908
835
  }
909
836
 
910
- .tds-page-header
911
- nav:is([slot="navigation"], .tds-page-header__nav)
912
- li:has(.indicator) {
913
- position: relative;
837
+ .tds-btn--outline-interaction {
838
+ --tds-btn-color: var(--t-text-color-status-info);
839
+ --tds-btn-border-color: var(--t-border-color-button-info);
840
+ --tds-btn-color-hover: var(--tds-btn-color);
841
+ --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
842
+ --tds-btn-border-color-hover: var(--tds-btn-border-color);
843
+ --tds-btn-color-active: var(--tds-btn-color);
844
+ --tds-btn-bg-active: var(
845
+ --t-fill-color-button-interaction-outline-dim-active
846
+ );
847
+ --tds-btn-border-color-active: var(--tds-btn-border-color);
848
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
849
+ --tds-btn-bg-disabled: var(
850
+ --t-fill-color-button-interaction-outline-dim-disabled
851
+ );
852
+ --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
914
853
  }
915
854
 
916
- .tds-page-header
917
- nav:is([slot="navigation"], .tds-page-header__nav)
918
- li:has(.indicator)
919
- :is(a, button) {
920
- -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
921
- mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
855
+ .tds-btn--outline-delete {
856
+ --tds-btn-color: var(--t-text-color-status-error);
857
+ --tds-btn-border-color: var(--t-border-color-button-delete);
858
+ --tds-btn-color-hover: var(--tds-btn-color);
859
+ --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
860
+ --tds-btn-border-color-hover: var(--tds-btn-border-color);
861
+ --tds-btn-color-active: var(--tds-btn-color);
862
+ --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
863
+ --tds-btn-border-color-active: var(--tds-btn-border-color);
864
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
865
+ --tds-btn-bg-disabled: var(--t-fill-color-button-delete-outline-dim-disabled);
866
+ --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
922
867
  }
923
868
 
924
- .tds-page-header
925
- nav:is([slot="navigation"], .tds-page-header__nav)
926
- li:has(.indicator)::before,
927
- .tds-page-header
928
- nav:is([slot="navigation"], .tds-page-header__nav)
929
- li:has(.indicator)::after {
930
- position: absolute;
931
- top: -5px;
932
- right: -2px;
933
- width: 10px;
934
- height: 10px;
935
- content: "";
936
- background: var(--tds-page-header-nav-item-indicator-color);
937
- border-radius: 50%;
869
+ .tds-btn--ghost-neutral {
870
+ --tds-btn-color: var(--t-text-color-status-neutral);
871
+ --tds-btn-border-color: transparent;
872
+ --tds-btn-color-hover: var(--tds-btn-color);
873
+ --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
874
+ --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
875
+ --tds-btn-color-active: var(--tds-btn-color);
876
+ --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
877
+ --tds-btn-border-color-active: var(--tds-btn-bg-active);
878
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
879
+ --tds-btn-bg-disabled: transparent;
880
+ --tds-btn-border-color-disabled: transparent;
938
881
  }
939
882
 
940
- @media (prefers-reduced-motion: no-preference) {
941
- .tds-page-header
942
- nav:is([slot="navigation"], .tds-page-header__nav)
943
- li:has(.indicator)::after {
944
- animation: indicator-pulse 1.25s ease infinite;
945
- }
883
+ .tds-btn--ghost-interaction {
884
+ --tds-btn-color: var(--t-text-color-status-info);
885
+ --tds-btn-border-color: transparent;
886
+ --tds-btn-color-hover: var(--tds-btn-color);
887
+ --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
888
+ --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
889
+ --tds-btn-color-active: var(--tds-btn-color);
890
+ --tds-btn-bg-active: var(
891
+ --t-fill-color-button-interaction-outline-dim-active
892
+ );
893
+ --tds-btn-border-color-active: var(--tds-btn-bg-active);
894
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
895
+ --tds-btn-bg-disabled: transparent;
896
+ --tds-btn-border-color-disabled: transparent;
946
897
  }
947
898
 
948
- .tds-page-header nav[slot="navigation"] a.selected,
949
- .tds-page-header nav[slot="navigation"] button.selected,
950
- .tds-page-header nav.tds-page-header__nav a.selected,
951
- .tds-page-header nav.tds-page-header__nav button.selected {
952
- --tds-page-header-nav-item-color: var(
953
- --tds-page-header-nav-item-color-selected
954
- );
955
- --tds-page-header-nav-item-border-color: var(
956
- --tds-page-header-nav-item-border-color-selected
957
- );
958
- --tds-page-header-nav-item-background-color: var(
959
- --tds-page-header-nav-item-background-color-selected
899
+ .tds-btn--ghost-delete {
900
+ --tds-btn-color: var(--t-text-color-status-error);
901
+ --tds-btn-border-color: transparent;
902
+ --tds-btn-color-hover: var(--tds-btn-color);
903
+ --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
904
+ --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
905
+ --tds-btn-color-active: var(--tds-btn-color);
906
+ --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
907
+ --tds-btn-border-color-active: var(--tds-btn-bg-active);
908
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
909
+ --tds-btn-bg-disabled: transparent;
910
+ --tds-btn-border-color-disabled: transparent;
911
+ }
912
+
913
+ .tds-btn--primary-page-header {
914
+ --tds-btn-color: var(--t-text-color-default-inverted);
915
+ --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
916
+ --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
917
+ --tds-btn-color-hover: var(--t-text-color-default-inverted);
918
+ --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
919
+ --tds-btn-border-color-hover: var(
920
+ --t-fill-color-button-interaction-solid-hover
960
921
  );
961
- --tds-page-header-nav-item-border-bottom-color: var(
962
- --tds-page-header-nav-item-background-color-selected
922
+ --tds-btn-color-active: var(--t-text-color-default-inverted);
923
+ --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
924
+ --tds-btn-border-color-active: var(
925
+ --t-fill-color-button-interaction-solid-active
963
926
  );
927
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
928
+ --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
929
+ --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
964
930
  }
965
931
 
966
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
967
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
968
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
969
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
970
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
971
- --tds-page-header-nav-item-background-color: var(
972
- --tds-page-header-nav-item-background-color-hover
932
+ .tds-btn--secondary-page-header {
933
+ --tds-btn-border-width: 0;
934
+ --tds-btn-color: var(--t-text-color-status-neutral);
935
+ --tds-btn-bg: var(--t-fill-color-button-neutral-responsive-header-default);
936
+ --tds-btn-border-color: var(
937
+ --t-fill-color-button-neutral-responsive-header-default
973
938
  );
974
- --tds-page-header-nav-item-border-color: var(
975
- --tds-page-header-nav-item-border-color-hover
939
+ --tds-btn-color-hover: var(--t-text-color-status-neutral);
940
+ --tds-btn-bg-hover: var(
941
+ --t-fill-color-button-neutral-responsive-header-hover
942
+ );
943
+ --tds-btn-border-color-hover: var(
944
+ --t-fill-color-button-neutral-responsive-header-hover
945
+ );
946
+ --tds-btn-color-active: var(--t-text-color-status-neutral);
947
+ --tds-btn-bg-active: var(
948
+ --t-fill-color-button-neutral-responsive-header-active
949
+ );
950
+ --tds-btn-border-color-active: var(
951
+ --t-fill-color-button-neutral-responsive-header-active
952
+ );
953
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
954
+ --tds-btn-bg-disabled: var(
955
+ --t-fill-color-button-neutral-responsive-header-disabled
956
+ );
957
+ --tds-btn-border-color-disabled: var(
958
+ --t-fill-color-button-neutral-responsive-header-disabled
976
959
  );
977
960
  }
978
961
 
979
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
980
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
981
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
982
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
983
- background-color: var(--tds-page-header-nav-item-background-color-active);
962
+ @media (min-width: 720px) {
963
+
964
+ .tds-btn--secondary-page-header {
965
+ --tds-btn-border-width: 1px;
966
+ --tds-btn-color: var(--t-text-color-status-neutral);
967
+ --tds-btn-bg: transparent;
968
+ --tds-btn-border-color: var(--t-border-color-button-neutral);
969
+ --tds-btn-color-hover: var(--tds-btn-color);
970
+ --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
971
+ --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
972
+ --tds-btn-color-active: var(--tds-btn-color);
973
+ --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
974
+ --tds-btn-border-color-active: var(--t-border-color-button-neutral);
975
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
976
+ --tds-btn-bg-disabled: var(
977
+ --t-fill-color-button-neutral-outline-dim-disabled
978
+ );
979
+ --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
984
980
  }
981
+ }
985
982
 
986
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
987
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
988
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
989
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
990
- color: var(--tds-page-header-nav-item-color-disabled);
991
- cursor: not-allowed;
992
- background-color: var(--tds-page-header-nav-item-background-color-disabled);
993
- opacity: 1;
983
+ .tds-btn--pill {
984
+ --tds-btn-border-radius: 999px;
985
+ --tds-btn-padding-y: 4px;
986
+ --tds-btn-padding-x: 13px;
987
+
988
+ --tds-btn-color: var(--t-text-color-default-primary);
989
+ --tds-btn-bg: var(--t-fill-color-button-pill-default);
990
+ --tds-btn-border-color: var(--tds-btn-bg);
991
+ --tds-btn-color-hover: var(--tds-btn-color);
992
+ --tds-btn-bg-hover: var(--t-fill-color-button-pill-hover);
993
+ --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
994
+
995
+ --tds-btn-color-active: var(--tds-btn-color);
996
+ --tds-btn-bg-active: var(--t-fill-color-button-pill-active);
997
+ --tds-btn-border-color-active: var(--tds-btn-bg-active);
998
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
999
+ --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1000
+ --tds-btn-border-color-disabled: var(
1001
+ --t-fill-color-button-neutral-solid-disabled
1002
+ );
1003
+ --tds-btn-icon-color: var(--t-icon-color-default-secondary);
1004
+ --tds-btn-min-height: 32px;
994
1005
  }
995
1006
 
996
- @media (min-width: 720px) {
997
- .tds-page-header__title-bar,
998
- .tds-page-header--profile .tds-page-header__title-bar {
999
- flex-direction: row;
1000
- align-items: flex-start;
1007
+ .tds-btn--pill:is(.tds-btn--sm) {
1008
+ --tds-btn-padding-y: 1px;
1009
+ --tds-btn-padding-x: 7px;
1010
+ --tds-btn-min-height: auto;
1001
1011
  }
1002
1012
 
1003
- .tds-page-header__primary {
1004
- width: auto;
1013
+ .tds-btn--pill:is(.tds-btn--xs) {
1014
+ --tds-btn-padding-y: 1px;
1015
+ --tds-btn-padding-x: 9px;
1016
+ --tds-btn-min-height: auto;
1005
1017
  }
1006
1018
 
1007
- [slot="actions"],
1008
- .tds-page-header__actions {
1009
- margin-left: auto;
1019
+ .tds-btn--pill:disabled,.tds-btn--pill.disabled {
1020
+ --tds-btn-icon-color: inherit;
1010
1021
  }
1011
1022
 
1012
- .has-multi-actions.tds-page-header [slot="actions"],
1013
- .has-multi-actions.tds-page-header .tds-page-header__actions {
1014
- flex-flow: row wrap;
1015
- margin-top: var(--t-spacing-half);
1016
- }
1023
+ .tds-btn--dropdown .suffix {
1024
+ transition: transform 0.2s ease-in-out;
1017
1025
  }
1018
1026
 
1019
- @keyframes indicator-pulse {
1020
- 0% {
1021
- opacity: 0.3;
1022
- transform: scale(0.9);
1023
- }
1024
- 100% {
1025
- opacity: 0;
1026
- transform: scale(1.75);
1027
- }
1027
+ .tds-btn--dropdown[aria-expanded="true"] .suffix {
1028
+ transform: rotate(-180deg);
1028
1029
  }
1029
-
1030
1030
  /**
1031
1031
  * Do not edit directly, this file was auto-generated.
1032
1032
  */