@planningcenter/tapestry 0.5.1-rc.1 → 0.5.2-qa-133.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +11 -0
  2. package/dist/components/page-header/index.d.ts +2 -0
  3. package/dist/components/page-header/index.d.ts.map +1 -0
  4. package/dist/components/page-header/index.js +5 -0
  5. package/dist/components/page-header/index.js.map +1 -0
  6. package/dist/ext/@stencil/core/internal/app-data/index.js +87 -0
  7. package/dist/ext/@stencil/core/internal/app-data/index.js.map +1 -0
  8. package/dist/ext/@stencil/core/internal/client/index.js +1724 -0
  9. package/dist/ext/@stencil/core/internal/client/index.js.map +1 -0
  10. package/dist/index.css +225 -82
  11. package/dist/index.css.map +1 -1
  12. package/dist/index.d.ts +2 -1
  13. package/dist/index.d.ts.map +1 -1
  14. package/dist/index.js +1 -0
  15. package/dist/index.js.map +1 -1
  16. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +52 -0
  17. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -0
  18. package/dist/unstable.css +224 -81
  19. package/dist/unstable.css.map +1 -1
  20. package/dist/webComponents.css +224 -81
  21. package/dist/webComponents.css.map +1 -1
  22. package/package.json +3 -3
  23. package/react-types/index.d.ts +22 -47
package/dist/webComponents.css CHANGED
@@ -1,124 +1,267 @@
1
- @layer tds-critical, tds-component;
1
+ @layer t-critical, t-component;
2
2
 
3
- /* Critical CSS for Pre-hydrated Components */
4
-
5
- @layer tds-critical {
3
+ @layer t-critical {
6
4
  tds-page-header:not(.hydrated) {
5
+ display: none;
6
+ }
7
+ }
8
+
9
+ @layer t-component {
10
+ .tds-page-header {
7
11
  --tds-page-header-background-color: var(--t-surface-color-card);
8
- --tds-page-header-color: var(--t-text-color-default-primary);
12
+ --tds-page-header-background-color-inactive: var(
13
+ --t-fill-color-transparency-dark-010
14
+ );
15
+ --tds-page-header-color: var(--t-text-color-default-secondary);
9
16
  --tds-page-header-headline-color: var(--t-text-color-default-headline);
10
17
  --tds-page-header-padding-x: var(--t-spacing-2);
11
18
  --tds-page-header-padding-y: var(--t-spacing-2);
12
- --tds-page-header-justify-content: flex-start;
19
+ --tds-page-header-nav-padding-x: var(
20
+ --tds-page-header-padding-x,
21
+ var(--t-spacing-3)
22
+ );
23
+ --tds-page-header-nav-background: linear-gradient(
24
+ 180deg,
25
+ rgba(0, 0, 0, 0) 0%,
26
+ rgba(0, 0, 0, 0.1) 100%
27
+ );
28
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
29
+ --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
30
+ --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
31
+ --tds-page-header-nav-item-background-color: var(
32
+ --t-fill-color-transparency-light-060
33
+ );
34
+ --tds-page-header-nav-item-border-width: 0;
35
+
36
+ --tds-page-header-nav-item-border-color: var(
37
+ --tds-page-header-nav-item-background-color
38
+ );
39
+ --tds-page-header-nav-item-border-bottom-color: var(
40
+ --t-border-color-default-base
41
+ );
42
+
43
+ --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
44
+ --tds-page-header-nav-item-background-color-hover: var(
45
+ --t-fill-color-neutral-080
46
+ );
47
+ --tds-page-header-nav-item-border-color-hover: var(
48
+ --tds-page-header-nav-item-background-color-hover
49
+ );
50
+
51
+ --tds-page-header-nav-item-background-color-active: var(
52
+ --t-fill-color-neutral-060
53
+ );
54
+ --tds-page-header-nav-item-border-color-active: var(
55
+ --tds-page-header-nav-item-background-color-hover
56
+ );
57
+
58
+ --tds-page-header-nav-item-color-disabled: var(
59
+ --t-text-color-default-disabled
60
+ );
61
+ --tds-page-header-nav-item-background-color-disabled: var(
62
+ --t-fill-color-neutral-080
63
+ );
64
+ --tds-page-header-nav-item-border-color-disabled: var(
65
+ --tds-page-header-nav-item-background-color-disabled
66
+ );
67
+
68
+ --tds-page-header-nav-item-color-selected: var(
69
+ --t-text-color-interaction-primary
70
+ );
71
+ --tds-page-header-nav-item-border-color-selected: var(
72
+ --t-border-color-default-base
73
+ );
74
+ --tds-page-header-nav-item-background-color-selected: var(
75
+ --t-fill-color-neutral-100
76
+ );
77
+ --tds-page-header-nav-item-border-bottom-color-selected: var(
78
+ --tds-page-header-nav-item-background-color-selected
79
+ );
80
+ }
13
81
 
14
- --tds-page-header-col-gutter: calc(var(--tds-page-header-padding-x) - var(--t-spacing-half));
82
+ .tds-page-header nav[slot="navigation"],
83
+ .tds-page-header .tds-page-header__nav a,
84
+ .tds-page-header nav[slot="navigation"],
85
+ .tds-page-header .tds-page-header__nav button {
86
+ position: relative;
15
87
  }
16
88
 
17
- @media (width >= 600px) {
18
- tds-page-header:not(.hydrated) {
89
+ @media (width >= 600px) {
90
+ .tds-page-header {
19
91
  --tds-page-header-padding-x: var(--t-spacing-3);
20
- }
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
+ --tds-page-header-nav-item-color-selected: var(
100
+ --t-text-color-default-primary
101
+ );
21
102
  }
103
+ }
22
104
  }
23
105
 
24
- tds-page-header:not(.hydrated) {
25
- display: grid;
26
- grid-template-columns: 0 1fr 0;
27
- gap: var(--t-spacing-2) var(--tds-page-header-padding-x);
28
- align-items: flex-start;
29
- padding: var(--tds-page-header-padding-y) 0 0;
106
+ .tds-page-header {
107
+ display: flex;
108
+ flex-direction: column;
109
+ gap: var(--t-spacing-2);
110
+ padding-top: var(--tds-page-header-padding-y);
30
111
  color: var(--tds-page-header-color);
31
112
  background-color: var(--tds-page-header-background-color);
32
113
  border-bottom: 1px solid var(--t-border-color-default-base);
114
+ }
33
115
 
34
-
116
+ .tds-page-header:not(.has-nav) {
117
+ padding-bottom: var(--tds-page-header-padding-y);
35
118
  }
36
119
 
37
- tds-page-header[profile]:not(.hydrated) {
38
- --tds-page-header-justify-content: center;
39
- }
120
+ .tds-page-header.inactive {
121
+ background-color: var(--tds-page-header-background-color-inactive);
122
+ }
40
123
 
41
- tds-page-header:not(.hydrated) :is(h1[slot="primary"]) {
42
- margin: 0;
43
- font-size: var(--t-font-size-3xl);
44
- font-weight: var(--t-font-weight-normal);
45
- color: var(--tds-page-header-headline-color);
46
- }
124
+ .tds-page-header__title-bar {
125
+ display: flex;
126
+ flex-direction: column;
127
+ gap: var(--t-spacing-2) var(--t-spacing-half);
128
+ align-items: flex-start;
129
+ justify-content: space-between;
130
+ padding: 0 var(--tds-page-header-padding-x);
131
+ }
47
132
 
48
- tds-page-header:not(.hydrated) :is([slot="primary"]) {
49
- flex: 1 1 auto;
50
- grid-column-start: 2;
51
- width: 100%;
52
- }
133
+ .tds-page-header--profile > .tds-page-header__title-bar {
134
+ align-items: center;
135
+ }
53
136
 
54
- tds-page-header:not(.hydrated) :is([slot="actions"]) {
55
- grid-row: 2;
56
- grid-column: 2;
57
- }
137
+ .tds-page-header__primary {
138
+ flex: 1 1 auto;
139
+ width: 100%;
140
+ }
58
141
 
59
- /* This is to attempt to avoid mistakenly applying style to individual buttons */
142
+ .tds-page-header__primary > h1 {
143
+ margin: 0;
144
+ font-size: var(--t-font-size-3xl);
145
+ font-weight: var(--t-font-weight-normal);
146
+ color: var(--tds-page-header-headline-color);
147
+ }
60
148
 
61
- tds-page-header:not(.hydrated) :is(div[slot="actions"]) {
62
- display: flex;
63
- flex-direction: row;
64
- gap: var(--t-spacing-1);
65
- align-items: flex-start;
66
- justify-content: var(--tds-page-header-justify-content);
67
- }
149
+ .has-multi-actions.tds-page-header [slot="actions"],
150
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
151
+ display: flex;
152
+ flex-flow: row wrap;
153
+ gap: var(--t-spacing-half) var(--t-spacing-1);
154
+ align-items: flex-start;
155
+ justify-content: flex-start;
156
+ color: blue;
157
+ }
68
158
 
69
- tds-page-header:not(.hydrated) :is([slot="navigation"]) {
70
- grid-column: 1 / -1;
71
- min-height: 39px;
72
- }
159
+ .tds-page-header nav[slot="navigation"],
160
+ .tds-page-header nav.tds-page-header__nav {
161
+ display: flex;
162
+ gap: var(--t-spacing-half);
163
+ padding: 0 var(--tds-page-header-nav-padding-x);
164
+ margin-bottom: -1px;
165
+ overflow: auto;
166
+ background: var(--tds-page-header-nav-background);
167
+ }
73
168
 
74
- tds-page-header:not(.hydrated, :has([slot="actions"])) :is([slot="primary"]) {
75
- grid-column: 2 / -2;
169
+ .tds-page-header nav[slot="navigation"] a,
170
+ .tds-page-header nav[slot="navigation"] button,
171
+ .tds-page-header nav.tds-page-header__nav a,
172
+ .tds-page-header nav.tds-page-header__nav button {
173
+ position: relative;
174
+ display: inline-flex;
175
+ gap: var(--t-spacing-1);
176
+ align-items: center;
177
+ min-height: var(--t-spacing-5);
178
+ padding: var(--tds-page-header-nav-item-padding-y)
179
+ var(--tds-page-header-nav-item-padding-x);
180
+ font-size: var(--t-font-size-md);
181
+ color: var(--tds-page-header-nav-item-color);
182
+ white-space: nowrap;
183
+ text-decoration: none;
184
+ -webkit-appearance: none;
185
+ -moz-appearance: none;
186
+ appearance: none;
187
+ cursor: pointer;
188
+ outline-offset: -2px;
189
+ background-color: var(--tds-page-header-nav-item-background-color);
190
+ border: var(--tds-page-header-nav-item-border-width) solid
191
+ var(--tds-page-header-nav-item-border-color);
192
+ border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
193
+ border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
76
194
  }
77
195
 
78
- tds-page-header:not(.hydrated, :has([slot="navigation"])) {
79
- padding-bottom: var(--tds-page-header-padding-y);
196
+ .tds-page-header nav[slot="navigation"] a.selected,
197
+ .tds-page-header nav[slot="navigation"] button.selected,
198
+ .tds-page-header nav.tds-page-header__nav a.selected,
199
+ .tds-page-header nav.tds-page-header__nav button.selected {
200
+ --tds-page-header-nav-item-color: var(
201
+ --tds-page-header-nav-item-color-selected
202
+ );
203
+ --tds-page-header-nav-item-border-color: var(
204
+ --tds-page-header-nav-item-border-color-selected
205
+ );
206
+ --tds-page-header-nav-item-background-color: var(
207
+ --tds-page-header-nav-item-background-color-selected
208
+ );
209
+ --tds-page-header-nav-item-border-bottom-color: var(
210
+ --tds-page-header-nav-item-background-color-selected
211
+ );
80
212
  }
81
213
 
82
- @media (width >= 720px) {
83
- tds-page-header:not(.hydrated) {
84
- display: grid;
85
- grid-template-columns: var(--tds-page-header-col-gutter) 1fr min-content var(--tds-page-header-col-gutter);
86
- gap: var(--t-spacing-2) var(--t-spacing-half);
87
- padding-right: 0;
88
- padding-left: 0;
89
- }
214
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
215
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
216
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
217
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
218
+ --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
219
+ --tds-page-header-nav-item-background-color: var(
220
+ --tds-page-header-nav-item-background-color-hover
221
+ );
222
+ --tds-page-header-nav-item-border-color: var(
223
+ --tds-page-header-nav-item-border-color-hover
224
+ );
225
+ }
90
226
 
91
- tds-page-header:not(.hydrated) :is([slot="actions"]) {
92
- grid-row: 1/-1;
93
- grid-column: 3;
94
- }
227
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
228
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
229
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
230
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
231
+ background-color: var(--tds-page-header-nav-item-background-color-active);
95
232
  }
96
233
 
97
- @layer tds-critical {
98
- tds-page-header-nav:not(.hydrated) {
99
- display: flex;
100
- gap: var(--t-spacing-half);
101
- padding: 0 var(--tds-page-header-padding-x, 0);
102
- overflow-x: auto;
103
- }
234
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
235
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
236
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
237
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
238
+ color: var(--tds-page-header-nav-item-color-disabled);
239
+ cursor: not-allowed;
240
+ background-color: var(--tds-page-header-nav-item-background-color-disabled);
241
+ opacity: 1;
104
242
  }
105
243
 
106
- @layer tds-critical {
107
- tds-page-header-nav-item:not(.hydrated) {
108
- display: inline-block;
109
- padding: var(--tds-page-header-nav-item-padding-y, var(--t-spacing-1)) calc(var(--tds-page-header-nav-item-padding-x, var(--t-spacing-1)) + 1px);
110
- font-size: var(--t-font-size-md);
111
- color: transparent;
244
+ @media (width >= 720px) {
245
+ .tds-page-header__title-bar,
246
+ .tds-page-header--profile .tds-page-header__title-bar {
247
+ flex-direction: row;
248
+ align-items: flex-start;
112
249
  }
113
250
 
114
- @media (width >= 600px) {
115
- tds-page-header-nav-item:not(.hydrated) {
116
- --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
251
+ .tds-page-header__primary {
252
+ width: auto;
117
253
  }
118
- }
119
- }
120
254
 
255
+ [slot="actions"],
256
+ .tds-page-header__actions {
257
+ margin-left: auto;
258
+ }
121
259
 
260
+ .has-multi-actions.tds-page-header [slot="actions"],
261
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
262
+ flex-flow: row wrap;
263
+ }
264
+ }
122
265
 
123
266
  /**
124
267
  * Do not edit directly, this file was auto-generated.
package/dist/webComponents.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["tapestry.css","tokens-alias.css","tokens-alias-deprecated.css","../../tokens/css/components/banner.css","Banner.css"],"names":[],"mappings":"AAAA,kCAAkC;;AAElC,6CAA6C;;AAE7C;EACE;IACE,+DAA+D;IAC/D,4DAA4D;IAC5D,sEAAsE;IACtE,+CAA+C;IAC/C,+CAA+C;IAC/C,6CAA6C;;IAE7C,4FAA4F;EAC9F;;IAEE;EACF;MACI,+CAA+C;EACnD;IACE;AACJ;;AAEA;EACE,aAAa;EACb,8BAA8B;EAC9B,wDAAwD;EACxD,uBAAuB;EACvB,6CAA6C;EAC7C,mCAAmC;EACnC,yDAAyD;EACzD,2DAA2D;;;AAG7D;;AAEA;IACI,yCAAyC;EAC3C;;AAEF;IACI,SAAS;IACT,iCAAiC;IACjC,wCAAwC;IACxC,4CAA4C;EAC9C;;AAEF;IACI,cAAc;IACd,oBAAoB;IACpB,WAAW;EACb;;AAEF;IACI,WAAW;IACX,cAAc;EAChB;;AAEF,gFAAgF;;AAEhF;IACI,aAAa;IACb,mBAAmB;IACnB,uBAAuB;IACvB,uBAAuB;IACvB,uDAAuD;EACzD;;AAEF;IACI,mBAAmB;IACnB,gBAAgB;EAClB;;AAEF;EACE,mBAAmB;AACrB;;AAEA;EACE,gDAAgD;AAClD;;AAEA;EACE;IACE,aAAa;IACb,0GAA0G;IAC1G,6CAA6C;IAC7C,gBAAgB;IAChB,eAAe;EACjB;;IAEE;MACE,cAAc;MACd,cAAc;IAChB;AACJ;;AAEA;EACE;IACE,aAAa;IACb,0BAA0B;IAC1B,8CAA8C;IAC9C,gBAAgB;EAClB;AACF;;AAEA;EACE;IACE,qBAAqB;IACrB,gJAAgJ;IAChJ,gCAAgC;IAChC,kBAAkB;EACpB;;IAEE;EACF;MACI,wDAAwD;EAC5D;IACE;AACJ;;;;ACtHA;;EAEE;;AAEF;EACE,yBAAyB;EACzB,yBAAyB;EACzB,yBAAyB;EACzB,0BAA0B;EAC1B,6BAA6B;EAC7B,8BAA8B;EAC9B,4BAA4B;EAC5B,0BAA0B;EAC1B,kBAAkB;EAClB,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,uBAAuB;EACvB,qBAAqB;EACrB,0BAA0B;EAC1B,0BAA0B;EAC1B,yBAAyB;EACzB,yBAAyB;EACzB,yBAAyB;EACzB,yBAAyB;EACzB,yBAAyB;EACzB,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;EACvB,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;EACtB,uBAAuB;EACvB,2BAA2B;EAC3B,2BAA2B;EAC3B,8BAA8B;EAC9B,yBAAyB;EACzB,2BAA2B;EAC3B,2BAA2B;EAC3B,2BAA2B;EAC3B,2BAA2B;EAC3B,2BAA2B;EAC3B,wBAAwB;EACxB,wBAAwB;EACxB,wBAAwB;EACxB,wBAAwB;EACxB,wBAAwB;EACxB,0BAA0B;EAC1B,gDAAgD;EAChD,+CAA+C;EAC/C,iDAAiD;EACjD,gDAAgD;EAChD,mDAAmD;EACnD,iDAAiD;EACjD,uDAAuD;EACvD,qDAAqD;EACrD,sDAAsD;EACtD,uDAAuD;EACvD,8CAA8C;EAC9C,+CAA+C;EAC/C,gDAAgD;EAChD,iDAAiD;EACjD,6CAA6C;EAC7C,+CAA+C;EAC/C,kDAAkD;EAClD,kDAAkD;EAClD,kDAAkD;EAClD,mDAAmD;EACnD,oDAAoD;EACpD,oDAAoD;EACpD,kDAAkD;EAClD,oDAAoD;EACpD,qDAAqD;EACrD,6CAA6C;EAC7C,gDAAgD;EAChD,gDAAgD;EAChD,gDAAgD;EAChD,iDAAiD;EACjD,kDAAkD;EAClD,kDAAkD;EAClD,gDAAgD;EAChD,kDAAkD;EAClD,mDAAmD;EACnD,+CAA+C;EAC/C,iDAAiD;EACjD,2CAA2C;EAC3C,gDAAgD;EAChD,iDAAiD;EACjD,sDAAsD;EACtD,wDAAwD;EACxD,mDAAmD;EACnD,uDAAuD;EACvD,wDAAwD;EACxD,0DAA0D;EAC1D,wDAAwD;EACxD,qDAAqD;EACrD,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,4CAA4C;EAC5C,uDAAuD;EACvD,qDAAqD;EACrD,sDAAsD;EACtD,oDAAoD;EACpD,mDAAmD;EACnD,kDAAkD;EAClD,mDAAmD;EACnD,mDAAmD;EACnD,8CAA8C;EAC9C,gDAAgD;EAChD,oDAAoD;EACpD,oDAAoD;EACpD,kDAAkD;EAClD,qDAAqD;EACrD,oDAAoD;EACpD,mDAAmD;EACnD,sDAAsD;EACtD,sDAAsD;EACtD,oDAAoD;EACpD,sDAAsD;EACtD,sDAAsD;EACtD,oDAAoD;EACpD,mDAAmD;EACnD,mDAAmD;EACnD,iDAAiD;EACjD,sDAAsD;EACtD,+CAA+C;EAC/C,mDAAmD;EACnD,qDAAqD;EACrD,yDAAyD;EACzD,wDAAwD;EACxD,wDAAwD;EACxD,wDAAwD;EACxD,yDAAyD;EACzD,yDAAyD;EACzD,wDAAwD;EACxD,0DAA0D;EAC1D,2DAA2D;EAC3D,kDAAkD;EAClD,kDAAkD;EAClD,kDAAkD;EAClD,mDAAmD;EACnD,mDAAmD;EACnD,kDAAkD;EAClD,oDAAoD;EACpD,qDAAqD;EACrD,6CAA6C;EAC7C,gDAAgD;EAChD,gDAAgD;EAChD,gDAAgD;EAChD,iDAAiD;EACjD,iDAAiD;EACjD,iDAAiD;EACjD,gDAAgD;EAChD,kDAAkD;EAClD,mDAAmD;EACnD,mDAAmD;EACnD,sDAAsD;EACtD,sDAAsD;EACtD,sDAAsD;EACtD,uDAAuD;EACvD,uDAAuD;EACvD,uDAAuD;EACvD,sDAAsD;EACtD,wDAAwD;EACxD,yDAAyD;EACzD,4DAA4D;EAC5D,0DAA0D;EAC1D,2DAA2D;EAC3D,6DAA6D;EAC7D,uEAAuE;EACvE,gEAAgE;EAChE,iEAAiE;EACjE,wEAAwE;EACxE,yEAAyE;EACzE,iEAAiE;EACjE,0DAA0D;EAC1D,2DAA2D;EAC3D,kEAAkE;EAClE,mEAAmE;EACnE,oEAAoE;EACpE,kEAAkE;EAClE,mEAAmE;EACnE,iEAAiE;EACjE,2EAA2E;EAC3E,wEAAwE;EACxE,wEAAwE;EACxE,4EAA4E;EAC5E,qEAAqE;EACrE,kEAAkE;EAClE,kEAAkE;EAClE,sEAAsE;EACtE,4DAA4D;EAC5D,0DAA0D;EAC1D,2DAA2D;EAC3D,4DAA4D;EAC5D,sEAAsE;EACtE,gEAAgE;EAChE,iEAAiE;EACjE,uEAAuE;EACvE,gEAAgE;EAChE,0DAA0D;EAC1D,2DAA2D;EAC3D,iEAAiE;EACjE,mDAAmD;EACnD,iDAAiD;EACjD,kDAAkD;EAClD,oDAAoD;EACpD,wDAAwD;EACxD,yDAAyD;EACzD,2DAA2D;EAC3D,4DAA4D;EAC5D,wDAAwD;EACxD,0DAA0D;EAC1D,2DAA2D;EAC3D,sDAAsD;EACtD,uDAAuD;EACvD,yDAAyD;EACzD,0DAA0D;EAC1D,sDAAsD;EACtD,wDAAwD;EACxD,yDAAyD;EACzD,wDAAwD;EACxD,yDAAyD;EACzD,2DAA2D;EAC3D,4DAA4D;EAC5D,wDAAwD;EACxD,0DAA0D;EAC1D,2DAA2D;EAC3D,qDAAqD;EACrD,sDAAsD;EACtD,wDAAwD;EACxD,yDAAyD;EACzD,qDAAqD;EACrD,uDAAuD;EACvD,yDAAyD;EACzD,qDAAqD;EACrD,sDAAsD;EACtD,wDAAwD;EACxD,yDAAyD;EACzD,qDAAqD;EACrD,uDAAuD;EACvD,wDAAwD;EACxD,oDAAoD;EACpD,qDAAqD;EACrD,uDAAuD;EACvD,wDAAwD;EACxD,oDAAoD;EACpD,sDAAsD;EACtD,uDAAuD;EACvD,sDAAsD;EACtD,uDAAuD;EACvD,yDAAyD;EACzD,0DAA0D;EAC1D,sDAAsD;EACtD,wDAAwD;EACxD,yDAAyD;EACzD,0DAA0D;EAC1D,2DAA2D;EAC3D,6DAA6D;EAC7D,8DAA8D;EAC9D,0DAA0D;EAC1D,4DAA4D;EAC5D,6DAA6D;EAC7D,6DAA6D;EAC7D,8DAA8D;EAC9D,gEAAgE;EAChE,iEAAiE;EACjE,6DAA6D;EAC7D,+DAA+D;EAC/D,gEAAgE;EAChE,uDAAuD;EACvD,wDAAwD;EACxD,0DAA0D;EAC1D,2DAA2D;EAC3D,uDAAuD;EACvD,yDAAyD;EACzD,0DAA0D;EAC1D,sDAAsD;EACtD,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,yCAAyC;EACzC,wCAAwC;EACxC,8CAA8C;EAC9C,8CAA8C;EAC9C,gDAAgD;EAChD,iDAAiD;EACjD,kDAAkD;EAClD,6CAA6C;EAC7C,gDAAgD;EAChD,gDAAgD;EAChD,iDAAiD;EACjD,kDAAkD;EAClD,kDAAkD;EAClD,+CAA+C;EAC/C,gDAAgD;EAChD,iDAAiD;EACjD,iDAAiD;EACjD,gDAAgD;EAChD,iDAAiD;EACjD,kDAAkD;EAClD,mDAAmD;EACnD,mDAAmD;EACnD,gDAAgD;EAChD,kDAAkD;ECvUlD,wCAAwC;EACxC,8CAA8C;EAC9C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,4CAA4C;EAC5C,6CAA6C;EAC7C,6CAA6C;EAC7C,2CAA2C;EAC3C,6CAA6C;EAC7C,mDAAmD;EACnD,yDAAyD;EACzD,6CAA6C;EAC7C,gDAAgD;EAChD,+CAA+C;EAC/C,4CAA4C;EAC5C,qEAAqE;EACrE,mEAAmE;EACnE,oEAAoE;EACpE,kEAAkE;EAClE,4EAA4E;EAC5E,yEAAyE;EACzE,yEAAyE;EACzE,6EAA6E;EAC7E,sEAAsE;EACtE,mEAAmE;EACnE,mEAAmE;EACnE,uEAAuE;EACvE,6DAA6D;EAC7D,2DAA2D;EAC3D,4DAA4D;EAC5D,4DAA4D;EAC5D,gEAAgE;EAChE,2DAA2D;EAC3D,4DAA4D;EAC5D,iEAAiE;ADqSnE;;AC7UA;;EAEE;;ACFF;;EAEE;;AAEF;EACE,2CAA2C;EAC3C,0DAA0D;EAC1D,qEAAqE;EACrE,sCAAsC;EACtC,mDAAmD;EACnD,iEAAiE;EACjE,iDAAiD;EACjD,4DAA4D;EAC5D,8CAA8C;EAC9C,uEAAuE;EACvE,wEAAwE;EACxE,6EAA6E;EAC7E,8EAA8E;EAC9E,yEAAyE;EACzE,0EAA0E;EAC1E,6EAA6E;EAC7E,8EAA8E;EAC9E,sEAAsE;ECnBtE,oCAAoC;EACpC,iCAAiC;EACjC,gBAAgB;EAChB,kDAAkD;EAClD,gCAAgC;EAChC,4CAA4C;EAC5C,aAAa;EACb,4BAA4B;ADa9B;;ACVA;EACE,0CAA0C;EAC1C,8CAA8C;EAC9C,uCAAuC;EACvC,oCAAoC;EACpC,cAAc;AAChB;;AAEA;EACE,eAAe;AACjB;;AACA;EACE,qCAAqC;AACvC;;AAEA;EACE,cAAc;EACd,0BAA0B;EAC1B,0BAA0B;EAC1B,6BAA6B;AAC/B;;AACA;EACE,2CAA2C;AAC7C;;AAEA;EACE,kEAAkE;EAClE,gEAAgE;AAClE;;AAEA;EACE,qEAAqE;EACrE,mEAAmE;AACrE;;AAEA;EACE,mEAAmE;EACnE,iEAAiE;AACnE;;AAEA;EACE,qEAAqE;EACrE,mEAAmE;AACrE;;AAEA;EACE,oEAAoE;AACtE","file":"webComponents.css","sourcesContent":["@layer tds-critical, tds-component;\n\n/* Critical CSS for Pre-hydrated Components */\n\n@layer tds-critical {\n tds-page-header:not(.hydrated) {\n --tds-page-header-background-color: var(--t-surface-color-card);\n --tds-page-header-color: var(--t-text-color-default-primary);\n --tds-page-header-headline-color: var(--t-text-color-default-headline);\n --tds-page-header-padding-x: var(--t-spacing-2);\n --tds-page-header-padding-y: var(--t-spacing-2);\n --tds-page-header-justify-content: flex-start;\n\n --tds-page-header-col-gutter: calc(var(--tds-page-header-padding-x) - var(--t-spacing-half));\n }\n\n @media (width >= 600px) {\n tds-page-header:not(.hydrated) {\n --tds-page-header-padding-x: var(--t-spacing-3);\n }\n }\n}\n\ntds-page-header:not(.hydrated) {\n display: grid;\n grid-template-columns: 0 1fr 0;\n gap: var(--t-spacing-2) var(--tds-page-header-padding-x);\n align-items: flex-start;\n padding: var(--tds-page-header-padding-y) 0 0;\n color: var(--tds-page-header-color);\n background-color: var(--tds-page-header-background-color);\n border-bottom: 1px solid var(--t-border-color-default-base);\n\n\n}\n\ntds-page-header[profile]:not(.hydrated) {\n --tds-page-header-justify-content: center;\n }\n\ntds-page-header:not(.hydrated) :is(h1[slot=\"primary\"]) {\n margin: 0;\n font-size: var(--t-font-size-3xl);\n font-weight: var(--t-font-weight-normal);\n color: var(--tds-page-header-headline-color);\n }\n\ntds-page-header:not(.hydrated) :is([slot=\"primary\"]) {\n flex: 1 1 auto;\n grid-column-start: 2;\n width: 100%;\n }\n\ntds-page-header:not(.hydrated) :is([slot=\"actions\"]) {\n grid-row: 2;\n grid-column: 2;\n }\n\n/* This is to attempt to avoid mistakenly applying style to individual buttons */\n\ntds-page-header:not(.hydrated) :is(div[slot=\"actions\"]) {\n display: flex;\n flex-direction: row;\n gap: var(--t-spacing-1);\n align-items: flex-start;\n justify-content: var(--tds-page-header-justify-content);\n }\n\ntds-page-header:not(.hydrated) :is([slot=\"navigation\"]) {\n grid-column: 1 / -1;\n min-height: 39px;\n }\n\ntds-page-header:not(.hydrated, :has([slot=\"actions\"])) :is([slot=\"primary\"]) {\n grid-column: 2 / -2;\n}\n\ntds-page-header:not(.hydrated, :has([slot=\"navigation\"])) {\n padding-bottom: var(--tds-page-header-padding-y);\n}\n\n@media (width >= 720px) {\n tds-page-header:not(.hydrated) {\n display: grid;\n grid-template-columns: var(--tds-page-header-col-gutter) 1fr min-content var(--tds-page-header-col-gutter);\n gap: var(--t-spacing-2) var(--t-spacing-half);\n padding-right: 0;\n padding-left: 0;\n }\n\n tds-page-header:not(.hydrated) :is([slot=\"actions\"]) {\n grid-row: 1/-1;\n grid-column: 3;\n }\n}\n\n@layer tds-critical {\n tds-page-header-nav:not(.hydrated) {\n display: flex;\n gap: var(--t-spacing-half);\n padding: 0 var(--tds-page-header-padding-x, 0);\n overflow-x: auto;\n }\n}\n\n@layer tds-critical {\n tds-page-header-nav-item:not(.hydrated) {\n display: inline-block;\n padding: var(--tds-page-header-nav-item-padding-y, var(--t-spacing-1)) calc(var(--tds-page-header-nav-item-padding-x, var(--t-spacing-1)) + 1px);\n font-size: var(--t-font-size-md);\n color: transparent;\n }\n\n @media (width >= 600px) {\n tds-page-header-nav-item:not(.hydrated) {\n --tds-page-header-nav-item-padding-x: var(--t-spacing-2);\n }\n }\n}\n\n\n","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --t-border-radius-sm: 2px;\n --t-border-radius-md: 4px;\n --t-border-radius-lg: 8px;\n --t-border-radius-xl: 16px;\n --t-border-radius-round: 56px;\n --t-border-radius-default: 4px;\n --t-border-size-default: 1px;\n --t-border-size-thick: 2px;\n --t-spacing-1: 8px;\n --t-spacing-2: 16px;\n --t-spacing-3: 24px;\n --t-spacing-4: 32px;\n --t-spacing-5: 40px;\n --t-spacing-6: 48px;\n --t-spacing-7: 56px;\n --t-spacing-fourth: 2px;\n --t-spacing-half: 4px;\n --t-element-size-3xl: 48px;\n --t-element-size-2xl: 32px;\n --t-element-size-xl: 24px;\n --t-element-size-lg: 18px;\n --t-element-size-md: 16px;\n --t-element-size-sm: 14px;\n --t-element-size-xs: 12px;\n --t-font-size-4xl: 32px;\n --t-font-size-3xl: 28px;\n --t-font-size-2xl: 24px;\n --t-font-size-xl: 20px;\n --t-font-size-lg: 18px;\n --t-font-size-md: 16px;\n --t-font-size-sm: 14px;\n --t-font-size-xs: 12px;\n --t-font-size-2xs: 10px;\n --t-font-weight-normal: 400;\n --t-font-weight-medium: 500;\n --t-font-weight-semi-bold: 600;\n --t-font-weight-bold: 700;\n --t-container-size-xl: 48px;\n --t-container-size-lg: 40px;\n --t-container-size-md: 32px;\n --t-container-size-sm: 24px;\n --t-container-size-xs: 20px;\n --t-avatar-size-20: 20px;\n --t-avatar-size-24: 24px;\n --t-avatar-size-36: 36px;\n --t-avatar-size-48: 48px;\n --t-avatar-size-72: 72px;\n --t-avatar-size-112: 112px;\n --t-text-color-default-headline: hsl(0, 0%, 12%);\n --t-text-color-default-primary: hsl(0, 0%, 24%);\n --t-text-color-default-secondary: hsl(0, 0%, 45%);\n --t-text-color-default-disabled: hsl(0, 0%, 81%);\n --t-text-color-default-placeholder: hsl(0, 0%, 62%);\n --t-text-color-default-inverted: hsl(0, 0%, 100%);\n --t-text-color-interaction-primary: hsl(204, 100%, 40%);\n --t-text-color-interaction-hover: hsl(204, 100%, 35%);\n --t-text-color-interaction-active: hsl(204, 100%, 30%);\n --t-text-color-interaction-visited: hsl(204, 100%, 30%);\n --t-text-color-status-neutral: hsl(0, 0%, 24%);\n --t-text-color-status-info: hsl(204, 100%, 35%);\n --t-text-color-status-success: hsl(97, 57%, 28%);\n --t-text-color-status-warning: hsl(42, 100%, 29%);\n --t-text-color-status-error: hsl(8, 60%, 45%);\n --t-text-color-tag-subtle-gray: hsl(0, 0%, 24%);\n --t-text-color-tag-subtle-blue: hsl(224, 47%, 31%);\n --t-text-color-tag-subtle-aqua: hsl(209, 77%, 22%);\n --t-text-color-tag-subtle-teal: hsl(180, 95%, 15%);\n --t-text-color-tag-subtle-green: hsl(100, 93%, 17%);\n --t-text-color-tag-subtle-yellow: hsl(29, 100%, 23%);\n --t-text-color-tag-subtle-orange: hsl(18, 100%, 18%);\n --t-text-color-tag-subtle-pink: hsl(327, 88%, 20%);\n --t-text-color-tag-subtle-purple: hsl(268, 71%, 27%);\n --t-text-color-tag-subtle-magenta: hsl(285, 71%, 20%);\n --t-text-color-tag-bold-gray: hsl(0, 0%, 24%);\n --t-text-color-tag-bold-blue: hsl(224, 47%, 31%);\n --t-text-color-tag-bold-aqua: hsl(209, 77%, 22%);\n --t-text-color-tag-bold-teal: hsl(180, 95%, 15%);\n --t-text-color-tag-bold-green: hsl(100, 93%, 17%);\n --t-text-color-tag-bold-yellow: hsl(29, 100%, 23%);\n --t-text-color-tag-bold-orange: hsl(18, 100%, 18%);\n --t-text-color-tag-bold-pink: hsl(327, 88%, 20%);\n --t-text-color-tag-bold-purple: hsl(268, 71%, 27%);\n --t-text-color-tag-bold-magenta: hsl(285, 71%, 20%);\n --t-icon-color-default-primary: hsl(0, 0%, 24%);\n --t-icon-color-default-secondary: hsl(0, 0%, 45%);\n --t-icon-color-default-dim: hsl(0, 0%, 62%);\n --t-icon-color-default-disabled: hsl(0, 0%, 81%);\n --t-icon-color-default-inverted: hsl(0, 0%, 100%);\n --t-icon-color-status-neutral-primary: hsl(0, 0%, 45%);\n --t-icon-color-status-neutral-secondary: hsl(0, 0%, 62%);\n --t-icon-color-status-neutral-bold: hsl(0, 0%, 24%);\n --t-icon-color-status-info-primary: hsl(204, 100%, 40%);\n --t-icon-color-status-success-primary: hsl(96, 57%, 33%);\n --t-icon-color-status-success-secondary: hsl(97, 57%, 40%);\n --t-icon-color-status-warning-primary: hsl(42, 84%, 49%);\n --t-icon-color-status-error-primary: hsl(8, 60%, 47%);\n --t-fill-color-neutral-000: hsl(0, 0%, 12%);\n --t-fill-color-neutral-010: hsl(0, 0%, 24%);\n --t-fill-color-neutral-020: hsl(0, 0%, 45%);\n --t-fill-color-neutral-030: hsl(0, 0%, 62%);\n --t-fill-color-neutral-040: hsl(0, 0%, 81%);\n --t-fill-color-neutral-050: hsl(0, 0%, 88%);\n --t-fill-color-neutral-060: hsl(0, 0%, 93%);\n --t-fill-color-neutral-070: hsl(0, 0%, 95%);\n --t-fill-color-neutral-080: hsl(0, 0%, 97%);\n --t-fill-color-neutral-090: hsl(0, 0%, 98%);\n --t-fill-color-neutral-100: hsl(0, 0%, 100%);\n --t-fill-color-interaction-default: hsl(204, 100%, 40%);\n --t-fill-color-interaction-hover: hsl(204, 100%, 35%);\n --t-fill-color-interaction-active: hsl(204, 100%, 30%);\n --t-fill-color-interaction-disabled: hsl(0, 0%, 81%);\n --t-fill-color-control-neutral-off: hsl(0, 0%, 62%);\n --t-fill-color-control-neutral-on: hsl(0, 0%, 24%);\n --t-fill-color-control-primary: hsl(204, 100%, 40%);\n --t-fill-color-control-secondary: hsl(97, 57%, 40%);\n --t-fill-color-control-error: hsl(8, 60%, 47%);\n --t-fill-color-control-disabled: hsl(0, 0%, 81%);\n --t-fill-color-status-neutral-solid: hsl(0, 0%, 45%);\n --t-fill-color-status-neutral-ghost: hsl(0, 0%, 93%);\n --t-fill-color-status-neutral-dim: hsl(0, 0%, 97%);\n --t-fill-color-status-info-solid: hsl(204, 100%, 40%);\n --t-fill-color-status-info-ghost: hsl(203, 94%, 94%);\n --t-fill-color-status-info-dim: hsl(204, 100%, 97%);\n --t-fill-color-status-success-solid: hsl(96, 57%, 33%);\n --t-fill-color-status-success-ghost: hsl(97, 57%, 90%);\n --t-fill-color-status-success-dim: hsl(96, 60%, 95%);\n --t-fill-color-status-warning-solid: hsl(42, 84%, 63%);\n --t-fill-color-status-warning-ghost: hsl(42, 87%, 94%);\n --t-fill-color-status-warning-dim: hsl(42, 87%, 97%);\n --t-fill-color-status-error-solid: hsl(8, 60%, 47%);\n --t-fill-color-status-error-ghost: hsl(9, 59%, 93%);\n --t-fill-color-status-error-dim: hsl(7, 60%, 97%);\n --t-fill-color-tooltip-primary: hsla(0, 0%, 12%, 0.77);\n --t-fill-color-tag-subtle-gray: hsl(0, 0%, 93%);\n --t-fill-color-tag-subtle-blue: hsl(220, 100%, 95%);\n --t-fill-color-tag-subtle-label-gray: hsl(0, 0%, 88%);\n --t-fill-color-tag-subtle-label-blue: hsl(221, 100%, 81%);\n --t-fill-color-tag-subtle-label-aqua: hsl(200, 82%, 82%);\n --t-fill-color-tag-subtle-label-teal: hsl(164, 52%, 76%);\n --t-fill-color-tag-subtle-label-green: hsl(99, 59%, 78%);\n --t-fill-color-tag-subtle-label-yellow: hsl(44, 78%, 77%);\n --t-fill-color-tag-subtle-label-orange: hsl(21, 89%, 82%);\n --t-fill-color-tag-subtle-label-pink: hsl(310, 64%, 85%);\n --t-fill-color-tag-subtle-label-purple: hsl(259, 74%, 85%);\n --t-fill-color-tag-subtle-label-magenta: hsl(291, 40%, 83%);\n --t-fill-color-tag-subtle-aqua: hsl(200, 82%, 89%);\n --t-fill-color-tag-subtle-teal: hsl(163, 53%, 83%);\n --t-fill-color-tag-subtle-green: hsl(98, 59%, 85%);\n --t-fill-color-tag-subtle-yellow: hsl(45, 77%, 85%);\n --t-fill-color-tag-subtle-orange: hsl(22, 89%, 89%);\n --t-fill-color-tag-subtle-pink: hsl(311, 66%, 92%);\n --t-fill-color-tag-subtle-purple: hsl(259, 74%, 93%);\n --t-fill-color-tag-subtle-magenta: hsl(294, 37%, 90%);\n --t-fill-color-tag-bold-gray: hsl(0, 0%, 88%);\n --t-fill-color-tag-bold-blue: hsl(220, 98%, 81%);\n --t-fill-color-tag-bold-aqua: hsl(201, 76%, 71%);\n --t-fill-color-tag-bold-teal: hsl(169, 62%, 64%);\n --t-fill-color-tag-bold-green: hsl(112, 57%, 65%);\n --t-fill-color-tag-bold-yellow: hsl(44, 92%, 69%);\n --t-fill-color-tag-bold-orange: hsl(21, 86%, 72%);\n --t-fill-color-tag-bold-pink: hsl(324, 78%, 77%);\n --t-fill-color-tag-bold-purple: hsl(273, 62%, 76%);\n --t-fill-color-tag-bold-magenta: hsl(291, 48%, 70%);\n --t-fill-color-tag-bold-label-gray: hsl(0, 0%, 81%);\n --t-fill-color-tag-bold-label-blue: hsl(220, 98%, 74%);\n --t-fill-color-tag-bold-label-aqua: hsl(200, 75%, 64%);\n --t-fill-color-tag-bold-label-teal: hsl(169, 62%, 56%);\n --t-fill-color-tag-bold-label-green: hsl(112, 57%, 57%);\n --t-fill-color-tag-bold-label-yellow: hsl(44, 93%, 61%);\n --t-fill-color-tag-bold-label-orange: hsl(21, 86%, 64%);\n --t-fill-color-tag-bold-label-pink: hsl(324, 76%, 70%);\n --t-fill-color-tag-bold-label-purple: hsl(273, 62%, 70%);\n --t-fill-color-tag-bold-label-magenta: hsl(292, 48%, 63%);\n --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 45%);\n --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 24%);\n --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 12%);\n --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 95%);\n --t-fill-color-button-neutral-outline-dim-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-neutral-outline-dim-hover: hsl(0, 0%, 95%);\n --t-fill-color-button-neutral-outline-dim-active: hsl(0, 0%, 93%);\n --t-fill-color-button-neutral-outline-dim-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);\n --t-fill-color-button-neutral-ghost-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-neutral-ghost-hover: hsl(0, 0%, 95%);\n --t-fill-color-button-neutral-ghost-active: hsl(0, 0%, 93%);\n --t-fill-color-button-neutral-ghost-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);\n --t-fill-color-button-interaction-solid-default: hsl(204, 100%, 40%);\n --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 35%);\n --t-fill-color-button-interaction-solid-active: hsl(204, 100%, 30%);\n --t-fill-color-button-interaction-solid-disabled: hsl(0, 0%, 81%);\n --t-fill-color-button-interaction-outline-dim-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-interaction-outline-dim-hover: hsl(204, 100%, 97%);\n --t-fill-color-button-interaction-outline-dim-active: hsl(203, 94%, 94%);\n --t-fill-color-button-interaction-outline-dim-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-interaction-ghost-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-interaction-ghost-hover: hsl(204, 100%, 97%);\n --t-fill-color-button-interaction-ghost-active: hsl(203, 94%, 94%);\n --t-fill-color-button-interaction-ghost-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-delete-solid-default: hsl(8, 60%, 47%);\n --t-fill-color-button-delete-solid-hover: hsl(8, 60%, 45%);\n --t-fill-color-button-delete-solid-active: hsl(8, 60%, 40%);\n --t-fill-color-button-delete-solid-disabled: hsl(0, 0%, 81%);\n --t-fill-color-button-delete-outline-dim-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-delete-outline-dim-hover: hsl(7, 60%, 97%);\n --t-fill-color-button-delete-outline-dim-active: hsl(9, 59%, 93%);\n --t-fill-color-button-delete-outline-dim-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-delete-ghost-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-delete-ghost-hover: hsl(7, 60%, 97%);\n --t-fill-color-button-delete-ghost-active: hsl(9, 59%, 93%);\n --t-fill-color-button-delete-ghost-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-pill-default: hsl(0, 0%, 93%);\n --t-fill-color-button-pill-hover: hsl(0, 0%, 88%);\n --t-fill-color-button-pill-active: hsl(0, 0%, 88%);\n --t-fill-color-button-pill-disabled: hsl(0, 0%, 93%);\n --t-fill-color-product-accounts-base: hsl(210, 55%, 50%);\n --t-fill-color-product-accounts-light: hsl(210, 54%, 60%);\n --t-fill-color-product-accounts-lighter: hsl(209, 53%, 90%);\n --t-fill-color-product-accounts-lightest: hsl(212, 54%, 93%);\n --t-fill-color-product-accounts-dark: hsl(210, 65%, 40%);\n --t-fill-color-product-accounts-darker: hsl(211, 70%, 32%);\n --t-fill-color-product-accounts-darkest: hsl(210, 75%, 25%);\n --t-fill-color-product-calendar-base: hsl(9, 61%, 50%);\n --t-fill-color-product-calendar-light: hsl(8, 65%, 55%);\n --t-fill-color-product-calendar-lighter: hsl(8, 72%, 59%);\n --t-fill-color-product-calendar-lightest: hsl(8, 61%, 70%);\n --t-fill-color-product-calendar-dark: hsl(8, 65%, 42%);\n --t-fill-color-product-calendar-darker: hsl(7, 65%, 34%);\n --t-fill-color-product-calendar-darkest: hsl(9, 61%, 27%);\n --t-fill-color-product-checkins-base: hsl(283, 22%, 48%);\n --t-fill-color-product-checkins-light: hsl(283, 22%, 55%);\n --t-fill-color-product-checkins-lighter: hsl(284, 22%, 64%);\n --t-fill-color-product-checkins-lightest: hsl(283, 22%, 75%);\n --t-fill-color-product-checkins-dark: hsl(283, 27%, 42%);\n --t-fill-color-product-checkins-darker: hsl(284, 33%, 34%);\n --t-fill-color-product-checkins-darkest: hsl(283, 33%, 27%);\n --t-fill-color-product-giving-base: hsl(43, 88%, 64%);\n --t-fill-color-product-giving-light: hsl(43, 88%, 70%);\n --t-fill-color-product-giving-lighter: hsl(43, 95%, 75%);\n --t-fill-color-product-giving-lightest: hsl(42, 95%, 83%);\n --t-fill-color-product-giving-dark: hsl(42, 84%, 55%);\n --t-fill-color-product-giving-darker: hsl(42, 84%, 48%);\n --t-fill-color-product-giving-darkest: hsl(42, 100%, 40%);\n --t-fill-color-product-groups-base: hsl(17, 88%, 55%);\n --t-fill-color-product-groups-light: hsl(17, 96%, 63%);\n --t-fill-color-product-groups-lighter: hsl(17, 96%, 70%);\n --t-fill-color-product-groups-lightest: hsl(17, 96%, 80%);\n --t-fill-color-product-groups-dark: hsl(12, 70%, 48%);\n --t-fill-color-product-groups-darker: hsl(12, 70%, 40%);\n --t-fill-color-product-groups-darkest: hsl(14, 70%, 34%);\n --t-fill-color-product-home-base: hsl(221, 91%, 55%);\n --t-fill-color-product-home-light: hsl(221, 91%, 62%);\n --t-fill-color-product-home-lighter: hsl(221, 91%, 87%);\n --t-fill-color-product-home-lightest: hsl(221, 91%, 91%);\n --t-fill-color-product-home-dark: hsl(221, 90%, 50%);\n --t-fill-color-product-home-darker: hsl(221, 90%, 45%);\n --t-fill-color-product-home-darkest: hsl(218, 84%, 25%);\n --t-fill-color-product-people-base: hsl(220, 74%, 57%);\n --t-fill-color-product-people-light: hsl(221, 73%, 65%);\n --t-fill-color-product-people-lighter: hsl(221, 73%, 71%);\n --t-fill-color-product-people-lightest: hsl(220, 69%, 81%);\n --t-fill-color-product-people-dark: hsl(220, 68%, 51%);\n --t-fill-color-product-people-darker: hsl(220, 68%, 41%);\n --t-fill-color-product-people-darkest: hsl(221, 68%, 31%);\n --t-fill-color-product-publishing-base: hsl(220, 12%, 31%);\n --t-fill-color-product-publishing-light: hsl(222, 12%, 39%);\n --t-fill-color-product-publishing-lighter: hsl(221, 11%, 50%);\n --t-fill-color-product-publishing-lightest: hsl(222, 10%, 60%);\n --t-fill-color-product-publishing-dark: hsl(220, 11%, 26%);\n --t-fill-color-product-publishing-darker: hsl(217, 12%, 22%);\n --t-fill-color-product-publishing-darkest: hsl(214, 11%, 12%);\n --t-fill-color-product-registrations-base: hsl(175, 36%, 43%);\n --t-fill-color-product-registrations-light: hsl(176, 37%, 60%);\n --t-fill-color-product-registrations-lighter: hsl(176, 37%, 68%);\n --t-fill-color-product-registrations-lightest: hsl(176, 38%, 78%);\n --t-fill-color-product-registrations-dark: hsl(175, 51%, 34%);\n --t-fill-color-product-registrations-darker: hsl(174, 51%, 28%);\n --t-fill-color-product-registrations-darkest: hsl(175, 52%, 22%);\n --t-fill-color-product-services-base: hsl(88, 45%, 41%);\n --t-fill-color-product-services-light: hsl(88, 40%, 54%);\n --t-fill-color-product-services-lighter: hsl(88, 39%, 66%);\n --t-fill-color-product-services-lightest: hsl(88, 39%, 75%);\n --t-fill-color-product-services-dark: hsl(89, 62%, 32%);\n --t-fill-color-product-services-darker: hsl(89, 62%, 26%);\n --t-fill-color-product-services-darkest: hsl(89, 63%, 21%);\n --t-fill-color-product-staff-base: hsl(328, 100%, 45%);\n --t-fill-color-transparency-light-010: hsla(0, 0%, 100%, 0.1);\n --t-fill-color-transparency-light-020: hsla(0, 0%, 100%, 0.2);\n --t-fill-color-transparency-light-030: hsla(0, 0%, 100%, 0.3);\n --t-fill-color-transparency-light-040: hsla(0, 0%, 100%, 0.4);\n --t-fill-color-transparency-light-050: hsla(0, 0%, 100%, 0.5);\n --t-fill-color-transparency-light-060: hsla(0, 0%, 100%, 0.6);\n --t-fill-color-transparency-light-070: hsla(0, 0%, 100%, 0.7);\n --t-fill-color-transparency-light-080: hsla(0, 0%, 100%, 0.8);\n --t-fill-color-transparency-light-090: hsla(0, 0%, 100%, 0.9);\n --t-fill-color-transparency-dark-010: hsla(0, 0%, 0%, 0.1);\n --t-fill-color-transparency-dark-020: hsla(0, 0%, 0%, 0.2);\n --t-fill-color-transparency-dark-030: hsla(0, 0%, 0%, 0.3);\n --t-fill-color-transparency-dark-040: hsla(0, 0%, 0%, 0.4);\n --t-fill-color-transparency-dark-050: hsla(0, 0%, 0%, 0.5);\n --t-fill-color-transparency-dark-060: hsla(0, 0%, 0%, 0.6);\n --t-fill-color-transparency-dark-070: hsla(0, 0%, 0%, 0.7);\n --t-fill-color-transparency-dark-080: hsla(0, 0%, 0%, 0.8);\n --t-fill-color-transparency-dark-090: hsla(0, 0%, 0%, 0.9);\n --t-surface-color-canvas: hsl(0, 0%, 98%);\n --t-surface-color-card: hsl(0, 0%, 100%);\n --t-border-color-default-base: hsl(0, 0%, 88%);\n --t-border-color-default-dark: hsl(0, 0%, 81%);\n --t-border-color-default-darker: hsl(0, 0%, 68%);\n --t-border-color-default-darkest: hsl(0, 0%, 62%);\n --t-border-color-default-disabled: hsl(0, 0%, 88%);\n --t-border-color-default-dim: hsl(0, 0%, 95%);\n --t-border-color-default-white: hsl(0, 0%, 100%);\n --t-border-color-status-neutral: hsl(0, 0%, 62%);\n --t-border-color-status-info: hsl(204, 100%, 40%);\n --t-border-color-status-success: hsl(97, 57%, 40%);\n --t-border-color-status-warning: hsl(42, 84%, 63%);\n --t-border-color-status-error: hsl(8, 60%, 47%);\n --t-border-color-button-neutral: hsl(0, 0%, 88%);\n --t-border-color-button-info: hsl(204, 100%, 40%);\n --t-border-color-button-create: hsl(96, 57%, 33%);\n --t-border-color-button-delete: hsl(8, 60%, 47%);\n --t-border-color-control-neutral: hsl(0, 0%, 68%);\n --t-border-color-control-info: hsl(204, 100%, 40%);\n --t-border-color-control-success: hsl(97, 57%, 40%);\n --t-border-color-control-warning: hsl(42, 84%, 63%);\n --t-border-color-control-error: hsl(8, 60%, 47%);\n --t-border-color-control-disabled: hsl(0, 0%, 88%);\n}\n","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --t-text-color-tag-gray: hsl(0, 0%, 24%);\n --t-text-color-tag-magenta: hsl(285, 71%, 20%);\n --t-text-color-tag-blue: hsl(224, 47%, 31%);\n --t-text-color-tag-aqua: hsl(209, 77%, 22%);\n --t-text-color-tag-teal: hsl(180, 95%, 15%);\n --t-text-color-tag-green: hsl(100, 93%, 17%);\n --t-text-color-tag-yellow: hsl(29, 100%, 23%);\n --t-text-color-tag-orange: hsl(18, 100%, 18%);\n --t-text-color-tag-pink: hsl(327, 88%, 20%);\n --t-text-color-tag-purple: hsl(268, 71%, 27%);\n --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);\n --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);\n --t-fill-color-alert-info: hsl(204, 94%, 49%);\n --t-fill-color-alert-success: hsl(122, 60%, 41%);\n --t-fill-color-alert-warning: hsl(43, 96%, 58%);\n --t-fill-color-alert-error: hsl(4, 77%, 59%);\n --t-fill-color-button-default-info-solid-default: hsl(204, 100%, 40%);\n --t-fill-color-button-default-info-solid-hover: hsl(204, 100%, 35%);\n --t-fill-color-button-default-info-solid-active: hsl(204, 100%, 30%);\n --t-fill-color-button-default-info-solid-disabled: hsl(0, 0%, 81%);\n --t-fill-color-button-default-info-outline-dim-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-default-info-outline-dim-hover: hsl(204, 100%, 97%);\n --t-fill-color-button-default-info-outline-dim-active: hsl(203, 94%, 94%);\n --t-fill-color-button-default-info-outline-dim-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-default-info-ghost-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-default-info-ghost-hover: hsl(204, 100%, 97%);\n --t-fill-color-button-default-info-ghost-active: hsl(203, 94%, 94%);\n --t-fill-color-button-default-info-ghost-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);\n --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);\n --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);\n --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);\n --t-fill-color-button-create-ghost-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);\n --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);\n --t-fill-color-button-create-ghost-disabled: hsla(0, 0%, 100%, 0);\n}\n","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n.t-banner {\n --t-banner-font-size: var(--t-font-size-md);\n --t-banner-font-color: var(--t-text-color-default-primary);\n --t-banner-background-color: var(--t-fill-color-status-neutral-ghost);\n --t-banner-spacing: var(--t-spacing-2);\n --t-banner-border-radius: var(--t-border-radius-md);\n --t-banner-title-font-color: var(--t-text-color-default-headline);\n --t-banner-title-font-size: var(--t-font-size-md);\n --t-banner-title-font-weight: var(--t-font-weight-semi-bold);\n --t-banner-icon-fill-color: hsla(0, 0%, 0%, 0);\n --t-banner-background-color-info: var(--t-fill-color-status-info-ghost);\n --t-banner-icon-fill-color-info: var(--t-icon-color-status-info-primary);\n --t-banner-background-color-warning: var(--t-fill-color-status-warning-ghost);\n --t-banner-icon-fill-color-warning: var(--t-icon-color-status-warning-primary);\n --t-banner-background-color-error: var(--t-fill-color-status-error-ghost);\n --t-banner-icon-fill-color-error: var(--t-icon-color-status-error-primary);\n --t-banner-background-color-success: var(--t-fill-color-status-success-ghost);\n --t-banner-icon-fill-color-success: var(--t-icon-color-status-success-primary);\n --t-banner-link-font-color-hover: var(--t-text-color-default-headline);\n}\n","@import \"../../tokens/css/components/banner.css\";\n\n.t-banner {\n font-size: var(--t-banner-font-size);\n color: var(--t-banner-font-color);\n line-height: 1.4;\n background-color: var(--t-banner-background-color);\n padding: var(--t-banner-spacing);\n border-radius: var(--t-banner-border-radius);\n display: flex;\n gap: var(--t-banner-spacing);\n}\n\n.t-banner-title {\n font-size: var(--t-banner-title-font-size);\n font-weight: var(--t-banner-title-font-weight);\n color: var(--t-banner-title-font-color);\n margin-bottom: var(--t-spacing-half);\n display: block;\n}\n\n.t-banner-icon {\n margin-top: 1px;\n}\n.t-banner-icon svg {\n fill: var(--t-banner-icon-fill-color);\n}\n\n.t-banner-body a {\n color: inherit;\n text-decoration: underline;\n text-underline-offset: 2px;\n transition: color 0.1s linear;\n}\n.t-banner-body a:hover {\n color: var(--t-banner-cta-font-color-hover);\n}\n\n.t-banner--status-info {\n --t-banner-background-color: var(--t-banner-background-color-info);\n --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-info);\n}\n\n.t-banner--status-warning {\n --t-banner-background-color: var(--t-banner-background-color-warning);\n --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-warning);\n}\n\n.t-banner--status-error {\n --t-banner-background-color: var(--t-banner-background-color-error);\n --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-error);\n}\n\n.t-banner--status-success {\n --t-banner-background-color: var(--t-banner-background-color-success);\n --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-success);\n}\n\n.t-banner--sm {\n --t-banner-spacing: calc(var(--t-spacing-half) + var(--t-spacing-1));\n}\n"]}
1
+ {"version":3,"sources":["index.css","tokens-alias.css","tokens-alias-deprecated.css","../../tokens/css/components/banner.css","Banner.css"],"names":[],"mappings":"AAAA,8BAA8B;;AAA9B;EACE;IACE,aAAa;EACf;AACF;;AAEA;EACE;IACE,+DAA+D;IAC/D;;KAEC;IACD,8DAA8D;IAC9D,sEAAsE;IACtE,+CAA+C;IAC/C,+CAA+C;IAC/C;;;KAGC;IACD;;;;KAIC;IACD,wDAAwD;IACxD,wDAAwD;IACxD,qEAAqE;IACrE;;KAEC;IACD,0CAA0C;;IAE1C;;KAEC;IACD;;KAEC;;IAED,2EAA2E;IAC3E;;KAEC;IACD;;KAEC;;IAED;;KAEC;IACD;;KAEC;;IAED;;KAEC;IACD;;KAEC;IACD;;KAEC;;IAED;;KAEC;IACD;;KAEC;IACD;;KAEC;IACD;;KAEC;EACH;;EAEA;;;;IAIE,kBAAkB;EACpB;;EAEA;IACE;MACE,+CAA+C;MAC/C,6CAA6C;MAC7C,wDAAwD;MACxD,4CAA4C;MAC5C,uEAAuE;MACvE;;OAEC;MACD;;OAEC;IACH;EACF;AACF;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,6CAA6C;EAC7C,mCAAmC;EACnC,yDAAyD;EACzD,2DAA2D;AAC7D;;AAEA;EACE,gDAAgD;AAClD;;AAEA;EACE,kEAAkE;AACpE;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,6CAA6C;EAC7C,uBAAuB;EACvB,8BAA8B;EAC9B,2CAA2C;AAC7C;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,cAAc;EACd,WAAW;AACb;;AAEA;EACE,SAAS;EACT,iCAAiC;EACjC,wCAAwC;EACxC,4CAA4C;AAC9C;;AAEA;;EAEE,aAAa;EACb,mBAAmB;EACnB,6CAA6C;EAC7C,uBAAuB;EACvB,2BAA2B;EAC3B,WAAW;AACb;;AAEA;;EAEE,aAAa;EACb,0BAA0B;EAC1B,+CAA+C;EAC/C,mBAAmB;EACnB,cAAc;EACd,iDAAiD;AACnD;;AAEA;;;;EAIE,kBAAkB;EAClB,oBAAoB;EACpB,uBAAuB;EACvB,mBAAmB;EACnB,8BAA8B;EAC9B;6CAC2C;EAC3C,gCAAgC;EAChC,4CAA4C;EAC5C,mBAAmB;EACnB,qBAAqB;EACrB,wBAAwB;EACxB,qBAAqB;EACrB,gBAAgB;EAChB,eAAe;EACf,oBAAoB;EACpB,kEAAkE;EAClE;gDAC8C;EAC9C,4EAA4E;EAC5E,sEAAsE;AACxE;;AAEA;;;;EAIE;;GAEC;EACD;;GAEC;EACD;;GAEC;EACD;;GAEC;AACH;;AAEA;;;;EAIE,6EAA6E;EAC7E;;GAEC;EACD;;GAEC;AACH;;AAEA;;;;EAIE,yEAAyE;AAC3E;;AAEA;;;;EAIE,qDAAqD;EACrD,mBAAmB;EACnB,2EAA2E;EAC3E,UAAU;AACZ;;AAEA;EACE;;IAEE,mBAAmB;IACnB,uBAAuB;EACzB;;EAEA;IACE,WAAW;EACb;;EAEA;;IAEE,iBAAiB;EACnB;;EAEA;;IAEE,mBAAmB;EACrB;AACF;;ACrQA;;EAEE;;AAEF;EACE,yBAAyB;EACzB,yBAAyB;EACzB,yBAAyB;EACzB,0BAA0B;EAC1B,6BAA6B;EAC7B,8BAA8B;EAC9B,4BAA4B;EAC5B,0BAA0B;EAC1B,kBAAkB;EAClB,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,uBAAuB;EACvB,qBAAqB;EACrB,0BAA0B;EAC1B,0BAA0B;EAC1B,yBAAyB;EACzB,yBAAyB;EACzB,yBAAyB;EACzB,yBAAyB;EACzB,yBAAyB;EACzB,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;EACvB,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;EACtB,uBAAuB;EACvB,2BAA2B;EAC3B,2BAA2B;EAC3B,8BAA8B;EAC9B,yBAAyB;EACzB,2BAA2B;EAC3B,2BAA2B;EAC3B,2BAA2B;EAC3B,2BAA2B;EAC3B,2BAA2B;EAC3B,wBAAwB;EACxB,wBAAwB;EACxB,wBAAwB;EACxB,wBAAwB;EACxB,wBAAwB;EACxB,0BAA0B;EAC1B,gDAAgD;EAChD,+CAA+C;EAC/C,iDAAiD;EACjD,gDAAgD;EAChD,mDAAmD;EACnD,iDAAiD;EACjD,uDAAuD;EACvD,qDAAqD;EACrD,sDAAsD;EACtD,uDAAuD;EACvD,8CAA8C;EAC9C,+CAA+C;EAC/C,gDAAgD;EAChD,iDAAiD;EACjD,6CAA6C;EAC7C,+CAA+C;EAC/C,kDAAkD;EAClD,kDAAkD;EAClD,kDAAkD;EAClD,mDAAmD;EACnD,oDAAoD;EACpD,oDAAoD;EACpD,kDAAkD;EAClD,oDAAoD;EACpD,qDAAqD;EACrD,6CAA6C;EAC7C,gDAAgD;EAChD,gDAAgD;EAChD,gDAAgD;EAChD,iDAAiD;EACjD,kDAAkD;EAClD,kDAAkD;EAClD,gDAAgD;EAChD,kDAAkD;EAClD,mDAAmD;EACnD,+CAA+C;EAC/C,iDAAiD;EACjD,2CAA2C;EAC3C,gDAAgD;EAChD,iDAAiD;EACjD,sDAAsD;EACtD,wDAAwD;EACxD,mDAAmD;EACnD,uDAAuD;EACvD,wDAAwD;EACxD,0DAA0D;EAC1D,wDAAwD;EACxD,qDAAqD;EACrD,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,4CAA4C;EAC5C,uDAAuD;EACvD,qDAAqD;EACrD,sDAAsD;EACtD,oDAAoD;EACpD,mDAAmD;EACnD,kDAAkD;EAClD,mDAAmD;EACnD,mDAAmD;EACnD,8CAA8C;EAC9C,gDAAgD;EAChD,oDAAoD;EACpD,oDAAoD;EACpD,kDAAkD;EAClD,qDAAqD;EACrD,oDAAoD;EACpD,mDAAmD;EACnD,sDAAsD;EACtD,sDAAsD;EACtD,oDAAoD;EACpD,sDAAsD;EACtD,sDAAsD;EACtD,oDAAoD;EACpD,mDAAmD;EACnD,mDAAmD;EACnD,iDAAiD;EACjD,sDAAsD;EACtD,+CAA+C;EAC/C,mDAAmD;EACnD,qDAAqD;EACrD,yDAAyD;EACzD,wDAAwD;EACxD,wDAAwD;EACxD,wDAAwD;EACxD,yDAAyD;EACzD,yDAAyD;EACzD,wDAAwD;EACxD,0DAA0D;EAC1D,2DAA2D;EAC3D,kDAAkD;EAClD,kDAAkD;EAClD,kDAAkD;EAClD,mDAAmD;EACnD,mDAAmD;EACnD,kDAAkD;EAClD,oDAAoD;EACpD,qDAAqD;EACrD,6CAA6C;EAC7C,gDAAgD;EAChD,gDAAgD;EAChD,gDAAgD;EAChD,iDAAiD;EACjD,iDAAiD;EACjD,iDAAiD;EACjD,gDAAgD;EAChD,kDAAkD;EAClD,mDAAmD;EACnD,mDAAmD;EACnD,sDAAsD;EACtD,sDAAsD;EACtD,sDAAsD;EACtD,uDAAuD;EACvD,uDAAuD;EACvD,uDAAuD;EACvD,sDAAsD;EACtD,wDAAwD;EACxD,yDAAyD;EACzD,4DAA4D;EAC5D,0DAA0D;EAC1D,2DAA2D;EAC3D,6DAA6D;EAC7D,uEAAuE;EACvE,gEAAgE;EAChE,iEAAiE;EACjE,wEAAwE;EACxE,yEAAyE;EACzE,iEAAiE;EACjE,0DAA0D;EAC1D,2DAA2D;EAC3D,kEAAkE;EAClE,mEAAmE;EACnE,oEAAoE;EACpE,kEAAkE;EAClE,mEAAmE;EACnE,iEAAiE;EACjE,2EAA2E;EAC3E,wEAAwE;EACxE,wEAAwE;EACxE,4EAA4E;EAC5E,qEAAqE;EACrE,kEAAkE;EAClE,kEAAkE;EAClE,sEAAsE;EACtE,4DAA4D;EAC5D,0DAA0D;EAC1D,2DAA2D;EAC3D,4DAA4D;EAC5D,sEAAsE;EACtE,gEAAgE;EAChE,iEAAiE;EACjE,uEAAuE;EACvE,gEAAgE;EAChE,0DAA0D;EAC1D,2DAA2D;EAC3D,iEAAiE;EACjE,mDAAmD;EACnD,iDAAiD;EACjD,kDAAkD;EAClD,oDAAoD;EACpD,wDAAwD;EACxD,yDAAyD;EACzD,2DAA2D;EAC3D,4DAA4D;EAC5D,wDAAwD;EACxD,0DAA0D;EAC1D,2DAA2D;EAC3D,sDAAsD;EACtD,uDAAuD;EACvD,yDAAyD;EACzD,0DAA0D;EAC1D,sDAAsD;EACtD,wDAAwD;EACxD,yDAAyD;EACzD,wDAAwD;EACxD,yDAAyD;EACzD,2DAA2D;EAC3D,4DAA4D;EAC5D,wDAAwD;EACxD,0DAA0D;EAC1D,2DAA2D;EAC3D,qDAAqD;EACrD,sDAAsD;EACtD,wDAAwD;EACxD,yDAAyD;EACzD,qDAAqD;EACrD,uDAAuD;EACvD,yDAAyD;EACzD,qDAAqD;EACrD,sDAAsD;EACtD,wDAAwD;EACxD,yDAAyD;EACzD,qDAAqD;EACrD,uDAAuD;EACvD,wDAAwD;EACxD,oDAAoD;EACpD,qDAAqD;EACrD,uDAAuD;EACvD,wDAAwD;EACxD,oDAAoD;EACpD,sDAAsD;EACtD,uDAAuD;EACvD,sDAAsD;EACtD,uDAAuD;EACvD,yDAAyD;EACzD,0DAA0D;EAC1D,sDAAsD;EACtD,wDAAwD;EACxD,yDAAyD;EACzD,0DAA0D;EAC1D,2DAA2D;EAC3D,6DAA6D;EAC7D,8DAA8D;EAC9D,0DAA0D;EAC1D,4DAA4D;EAC5D,6DAA6D;EAC7D,6DAA6D;EAC7D,8DAA8D;EAC9D,gEAAgE;EAChE,iEAAiE;EACjE,6DAA6D;EAC7D,+DAA+D;EAC/D,gEAAgE;EAChE,uDAAuD;EACvD,wDAAwD;EACxD,0DAA0D;EAC1D,2DAA2D;EAC3D,uDAAuD;EACvD,yDAAyD;EACzD,0DAA0D;EAC1D,sDAAsD;EACtD,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,6DAA6D;EAC7D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,0DAA0D;EAC1D,yCAAyC;EACzC,wCAAwC;EACxC,8CAA8C;EAC9C,8CAA8C;EAC9C,gDAAgD;EAChD,iDAAiD;EACjD,kDAAkD;EAClD,6CAA6C;EAC7C,gDAAgD;EAChD,gDAAgD;EAChD,iDAAiD;EACjD,kDAAkD;EAClD,kDAAkD;EAClD,+CAA+C;EAC/C,gDAAgD;EAChD,iDAAiD;EACjD,iDAAiD;EACjD,gDAAgD;EAChD,iDAAiD;EACjD,kDAAkD;EAClD,mDAAmD;EACnD,mDAAmD;EACnD,gDAAgD;EAChD,kDAAkD;ECvUlD,wCAAwC;EACxC,8CAA8C;EAC9C,2CAA2C;EAC3C,2CAA2C;EAC3C,2CAA2C;EAC3C,4CAA4C;EAC5C,6CAA6C;EAC7C,6CAA6C;EAC7C,2CAA2C;EAC3C,6CAA6C;EAC7C,mDAAmD;EACnD,yDAAyD;EACzD,6CAA6C;EAC7C,gDAAgD;EAChD,+CAA+C;EAC/C,4CAA4C;EAC5C,qEAAqE;EACrE,mEAAmE;EACnE,oEAAoE;EACpE,kEAAkE;EAClE,4EAA4E;EAC5E,yEAAyE;EACzE,yEAAyE;EACzE,6EAA6E;EAC7E,sEAAsE;EACtE,mEAAmE;EACnE,mEAAmE;EACnE,uEAAuE;EACvE,6DAA6D;EAC7D,2DAA2D;EAC3D,4DAA4D;EAC5D,4DAA4D;EAC5D,gEAAgE;EAChE,2DAA2D;EAC3D,4DAA4D;EAC5D,iEAAiE;ADqSnE;;AC7UA;;EAEE;;ACFF;;EAEE;;AAEF;EACE,2CAA2C;EAC3C,0DAA0D;EAC1D,qEAAqE;EACrE,sCAAsC;EACtC,mDAAmD;EACnD,iEAAiE;EACjE,iDAAiD;EACjD,4DAA4D;EAC5D,8CAA8C;EAC9C,uEAAuE;EACvE,wEAAwE;EACxE,6EAA6E;EAC7E,8EAA8E;EAC9E,yEAAyE;EACzE,0EAA0E;EAC1E,6EAA6E;EAC7E,8EAA8E;EAC9E,sEAAsE;ECnBtE,oCAAoC;EACpC,iCAAiC;EACjC,gBAAgB;EAChB,kDAAkD;EAClD,gCAAgC;EAChC,4CAA4C;EAC5C,aAAa;EACb,4BAA4B;ADa9B;;ACVA;EACE,0CAA0C;EAC1C,8CAA8C;EAC9C,uCAAuC;EACvC,oCAAoC;EACpC,cAAc;AAChB;;AAEA;EACE,eAAe;AACjB;;AACA;EACE,qCAAqC;AACvC;;AAEA;EACE,cAAc;EACd,0BAA0B;EAC1B,0BAA0B;EAC1B,6BAA6B;AAC/B;;AACA;EACE,2CAA2C;AAC7C;;AAEA;EACE,kEAAkE;EAClE,gEAAgE;AAClE;;AAEA;EACE,qEAAqE;EACrE,mEAAmE;AACrE;;AAEA;EACE,mEAAmE;EACnE,iEAAiE;AACnE;;AAEA;EACE,qEAAqE;EACrE,mEAAmE;AACrE;;AAEA;EACE,oEAAoE;AACtE","file":"webComponents.css","sourcesContent":["@layer t-critical {\n tds-page-header:not(.hydrated) {\n display: none;\n }\n}\n\n@layer t-component {\n .tds-page-header {\n --tds-page-header-background-color: var(--t-surface-color-card);\n --tds-page-header-background-color-inactive: var(\n --t-fill-color-transparency-dark-010\n );\n --tds-page-header-color: var(--t-text-color-default-secondary);\n --tds-page-header-headline-color: var(--t-text-color-default-headline);\n --tds-page-header-padding-x: var(--t-spacing-2);\n --tds-page-header-padding-y: var(--t-spacing-2);\n --tds-page-header-nav-padding-x: var(\n --tds-page-header-padding-x,\n var(--t-spacing-3)\n );\n --tds-page-header-nav-background: linear-gradient(\n 180deg,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 0, 0, 0.1) 100%\n );\n --tds-page-header-nav-item-padding-x: var(--t-spacing-1);\n --tds-page-header-nav-item-padding-y: var(--t-spacing-1);\n --tds-page-header-nav-item-color: var(--t-text-color-default-primary);\n --tds-page-header-nav-item-background-color: var(\n --t-fill-color-transparency-light-060\n );\n --tds-page-header-nav-item-border-width: 0;\n\n --tds-page-header-nav-item-border-color: var(\n --tds-page-header-nav-item-background-color\n );\n --tds-page-header-nav-item-border-bottom-color: var(\n --t-border-color-default-base\n );\n\n --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);\n --tds-page-header-nav-item-background-color-hover: var(\n --t-fill-color-neutral-080\n );\n --tds-page-header-nav-item-border-color-hover: var(\n --tds-page-header-nav-item-background-color-hover\n );\n\n --tds-page-header-nav-item-background-color-active: var(\n --t-fill-color-neutral-060\n );\n --tds-page-header-nav-item-border-color-active: var(\n --tds-page-header-nav-item-background-color-hover\n );\n\n --tds-page-header-nav-item-color-disabled: var(\n --t-text-color-default-disabled\n );\n --tds-page-header-nav-item-background-color-disabled: var(\n --t-fill-color-neutral-080\n );\n --tds-page-header-nav-item-border-color-disabled: var(\n --tds-page-header-nav-item-background-color-disabled\n );\n\n --tds-page-header-nav-item-color-selected: var(\n --t-text-color-interaction-primary\n );\n --tds-page-header-nav-item-border-color-selected: var(\n --t-border-color-default-base\n );\n --tds-page-header-nav-item-background-color-selected: var(\n --t-fill-color-neutral-100\n );\n --tds-page-header-nav-item-border-bottom-color-selected: var(\n --tds-page-header-nav-item-background-color-selected\n );\n }\n\n .tds-page-header nav[slot=\"navigation\"],\n .tds-page-header .tds-page-header__nav a,\n .tds-page-header nav[slot=\"navigation\"],\n .tds-page-header .tds-page-header__nav button {\n position: relative;\n }\n\n @media (width >= 600px) {\n .tds-page-header {\n --tds-page-header-padding-x: var(--t-spacing-3);\n --tds-page-header-nav-background: transparent;\n --tds-page-header-nav-item-padding-x: var(--t-spacing-2);\n --tds-page-header-nav-item-border-width: 1px;\n --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);\n --tds-page-header-nav-item-background-color: var(\n --t-fill-color-neutral-070\n );\n --tds-page-header-nav-item-color-selected: var(\n --t-text-color-default-primary\n );\n }\n }\n}\n\n.tds-page-header {\n display: flex;\n flex-direction: column;\n gap: var(--t-spacing-2);\n padding-top: var(--tds-page-header-padding-y);\n color: var(--tds-page-header-color);\n background-color: var(--tds-page-header-background-color);\n border-bottom: 1px solid var(--t-border-color-default-base);\n}\n\n.tds-page-header:not(.has-nav) {\n padding-bottom: var(--tds-page-header-padding-y);\n}\n\n.tds-page-header.inactive {\n background-color: var(--tds-page-header-background-color-inactive);\n}\n\n.tds-page-header__title-bar {\n display: flex;\n flex-direction: column;\n gap: var(--t-spacing-2) var(--t-spacing-half);\n align-items: flex-start;\n justify-content: space-between;\n padding: 0 var(--tds-page-header-padding-x);\n}\n\n.tds-page-header--profile > .tds-page-header__title-bar {\n align-items: center;\n}\n\n.tds-page-header__primary {\n flex: 1 1 auto;\n width: 100%;\n}\n\n.tds-page-header__primary > h1 {\n margin: 0;\n font-size: var(--t-font-size-3xl);\n font-weight: var(--t-font-weight-normal);\n color: var(--tds-page-header-headline-color);\n}\n\n.has-multi-actions.tds-page-header [slot=\"actions\"],\n.has-multi-actions.tds-page-header .tds-page-header__actions {\n display: flex;\n flex-flow: row wrap;\n gap: var(--t-spacing-half) var(--t-spacing-1);\n align-items: flex-start;\n justify-content: flex-start;\n color: blue;\n}\n\n.tds-page-header nav[slot=\"navigation\"],\n.tds-page-header nav.tds-page-header__nav {\n display: flex;\n gap: var(--t-spacing-half);\n padding: 0 var(--tds-page-header-nav-padding-x);\n margin-bottom: -1px;\n overflow: auto;\n background: var(--tds-page-header-nav-background);\n}\n\n.tds-page-header nav[slot=\"navigation\"] a,\n.tds-page-header nav[slot=\"navigation\"] button,\n.tds-page-header nav.tds-page-header__nav a,\n.tds-page-header nav.tds-page-header__nav button {\n position: relative;\n display: inline-flex;\n gap: var(--t-spacing-1);\n align-items: center;\n min-height: var(--t-spacing-5);\n padding: var(--tds-page-header-nav-item-padding-y)\n var(--tds-page-header-nav-item-padding-x);\n font-size: var(--t-font-size-md);\n color: var(--tds-page-header-nav-item-color);\n white-space: nowrap;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n outline-offset: -2px;\n background-color: var(--tds-page-header-nav-item-background-color);\n border: var(--tds-page-header-nav-item-border-width) solid\n var(--tds-page-header-nav-item-border-color);\n border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);\n border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;\n}\n\n.tds-page-header nav[slot=\"navigation\"] a.selected,\n.tds-page-header nav[slot=\"navigation\"] button.selected,\n.tds-page-header nav.tds-page-header__nav a.selected,\n.tds-page-header nav.tds-page-header__nav button.selected {\n --tds-page-header-nav-item-color: var(\n --tds-page-header-nav-item-color-selected\n );\n --tds-page-header-nav-item-border-color: var(\n --tds-page-header-nav-item-border-color-selected\n );\n --tds-page-header-nav-item-background-color: var(\n --tds-page-header-nav-item-background-color-selected\n );\n --tds-page-header-nav-item-border-bottom-color: var(\n --tds-page-header-nav-item-background-color-selected\n );\n}\n\n.tds-page-header nav[slot=\"navigation\"] a:not(.selected):hover,\n.tds-page-header nav[slot=\"navigation\"] button:not(.selected):hover,\n.tds-page-header nav.tds-page-header__nav a:not(.selected):hover,\n.tds-page-header nav.tds-page-header__nav button:not(.selected):hover {\n --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);\n --tds-page-header-nav-item-background-color: var(\n --tds-page-header-nav-item-background-color-hover\n );\n --tds-page-header-nav-item-border-color: var(\n --tds-page-header-nav-item-border-color-hover\n );\n}\n\n.tds-page-header nav[slot=\"navigation\"] a:not(.selected):active,\n.tds-page-header nav[slot=\"navigation\"] button:not(.selected):active,\n.tds-page-header nav.tds-page-header__nav a:not(.selected):active,\n.tds-page-header nav.tds-page-header__nav button:not(.selected):active {\n background-color: var(--tds-page-header-nav-item-background-color-active);\n}\n\n.tds-page-header nav[slot=\"navigation\"] a:not(.selected):disabled,\n.tds-page-header nav[slot=\"navigation\"] button:not(.selected):disabled,\n.tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,\n.tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {\n color: var(--tds-page-header-nav-item-color-disabled);\n cursor: not-allowed;\n background-color: var(--tds-page-header-nav-item-background-color-disabled);\n opacity: 1;\n}\n\n@media (width >= 720px) {\n .tds-page-header__title-bar,\n .tds-page-header--profile .tds-page-header__title-bar {\n flex-direction: row;\n align-items: flex-start;\n }\n\n .tds-page-header__primary {\n width: auto;\n }\n\n [slot=\"actions\"],\n .tds-page-header__actions {\n margin-left: auto;\n }\n\n .has-multi-actions.tds-page-header [slot=\"actions\"],\n .has-multi-actions.tds-page-header .tds-page-header__actions {\n flex-flow: row wrap;\n }\n}\n","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --t-border-radius-sm: 2px;\n --t-border-radius-md: 4px;\n --t-border-radius-lg: 8px;\n --t-border-radius-xl: 16px;\n --t-border-radius-round: 56px;\n --t-border-radius-default: 4px;\n --t-border-size-default: 1px;\n --t-border-size-thick: 2px;\n --t-spacing-1: 8px;\n --t-spacing-2: 16px;\n --t-spacing-3: 24px;\n --t-spacing-4: 32px;\n --t-spacing-5: 40px;\n --t-spacing-6: 48px;\n --t-spacing-7: 56px;\n --t-spacing-fourth: 2px;\n --t-spacing-half: 4px;\n --t-element-size-3xl: 48px;\n --t-element-size-2xl: 32px;\n --t-element-size-xl: 24px;\n --t-element-size-lg: 18px;\n --t-element-size-md: 16px;\n --t-element-size-sm: 14px;\n --t-element-size-xs: 12px;\n --t-font-size-4xl: 32px;\n --t-font-size-3xl: 28px;\n --t-font-size-2xl: 24px;\n --t-font-size-xl: 20px;\n --t-font-size-lg: 18px;\n --t-font-size-md: 16px;\n --t-font-size-sm: 14px;\n --t-font-size-xs: 12px;\n --t-font-size-2xs: 10px;\n --t-font-weight-normal: 400;\n --t-font-weight-medium: 500;\n --t-font-weight-semi-bold: 600;\n --t-font-weight-bold: 700;\n --t-container-size-xl: 48px;\n --t-container-size-lg: 40px;\n --t-container-size-md: 32px;\n --t-container-size-sm: 24px;\n --t-container-size-xs: 20px;\n --t-avatar-size-20: 20px;\n --t-avatar-size-24: 24px;\n --t-avatar-size-36: 36px;\n --t-avatar-size-48: 48px;\n --t-avatar-size-72: 72px;\n --t-avatar-size-112: 112px;\n --t-text-color-default-headline: hsl(0, 0%, 12%);\n --t-text-color-default-primary: hsl(0, 0%, 24%);\n --t-text-color-default-secondary: hsl(0, 0%, 45%);\n --t-text-color-default-disabled: hsl(0, 0%, 81%);\n --t-text-color-default-placeholder: hsl(0, 0%, 62%);\n --t-text-color-default-inverted: hsl(0, 0%, 100%);\n --t-text-color-interaction-primary: hsl(204, 100%, 40%);\n --t-text-color-interaction-hover: hsl(204, 100%, 35%);\n --t-text-color-interaction-active: hsl(204, 100%, 30%);\n --t-text-color-interaction-visited: hsl(204, 100%, 30%);\n --t-text-color-status-neutral: hsl(0, 0%, 24%);\n --t-text-color-status-info: hsl(204, 100%, 35%);\n --t-text-color-status-success: hsl(97, 57%, 28%);\n --t-text-color-status-warning: hsl(42, 100%, 29%);\n --t-text-color-status-error: hsl(8, 60%, 45%);\n --t-text-color-tag-subtle-gray: hsl(0, 0%, 24%);\n --t-text-color-tag-subtle-blue: hsl(224, 47%, 31%);\n --t-text-color-tag-subtle-aqua: hsl(209, 77%, 22%);\n --t-text-color-tag-subtle-teal: hsl(180, 95%, 15%);\n --t-text-color-tag-subtle-green: hsl(100, 93%, 17%);\n --t-text-color-tag-subtle-yellow: hsl(29, 100%, 23%);\n --t-text-color-tag-subtle-orange: hsl(18, 100%, 18%);\n --t-text-color-tag-subtle-pink: hsl(327, 88%, 20%);\n --t-text-color-tag-subtle-purple: hsl(268, 71%, 27%);\n --t-text-color-tag-subtle-magenta: hsl(285, 71%, 20%);\n --t-text-color-tag-bold-gray: hsl(0, 0%, 24%);\n --t-text-color-tag-bold-blue: hsl(224, 47%, 31%);\n --t-text-color-tag-bold-aqua: hsl(209, 77%, 22%);\n --t-text-color-tag-bold-teal: hsl(180, 95%, 15%);\n --t-text-color-tag-bold-green: hsl(100, 93%, 17%);\n --t-text-color-tag-bold-yellow: hsl(29, 100%, 23%);\n --t-text-color-tag-bold-orange: hsl(18, 100%, 18%);\n --t-text-color-tag-bold-pink: hsl(327, 88%, 20%);\n --t-text-color-tag-bold-purple: hsl(268, 71%, 27%);\n --t-text-color-tag-bold-magenta: hsl(285, 71%, 20%);\n --t-icon-color-default-primary: hsl(0, 0%, 24%);\n --t-icon-color-default-secondary: hsl(0, 0%, 45%);\n --t-icon-color-default-dim: hsl(0, 0%, 62%);\n --t-icon-color-default-disabled: hsl(0, 0%, 81%);\n --t-icon-color-default-inverted: hsl(0, 0%, 100%);\n --t-icon-color-status-neutral-primary: hsl(0, 0%, 45%);\n --t-icon-color-status-neutral-secondary: hsl(0, 0%, 62%);\n --t-icon-color-status-neutral-bold: hsl(0, 0%, 24%);\n --t-icon-color-status-info-primary: hsl(204, 100%, 40%);\n --t-icon-color-status-success-primary: hsl(96, 57%, 33%);\n --t-icon-color-status-success-secondary: hsl(97, 57%, 40%);\n --t-icon-color-status-warning-primary: hsl(42, 84%, 49%);\n --t-icon-color-status-error-primary: hsl(8, 60%, 47%);\n --t-fill-color-neutral-000: hsl(0, 0%, 12%);\n --t-fill-color-neutral-010: hsl(0, 0%, 24%);\n --t-fill-color-neutral-020: hsl(0, 0%, 45%);\n --t-fill-color-neutral-030: hsl(0, 0%, 62%);\n --t-fill-color-neutral-040: hsl(0, 0%, 81%);\n --t-fill-color-neutral-050: hsl(0, 0%, 88%);\n --t-fill-color-neutral-060: hsl(0, 0%, 93%);\n --t-fill-color-neutral-070: hsl(0, 0%, 95%);\n --t-fill-color-neutral-080: hsl(0, 0%, 97%);\n --t-fill-color-neutral-090: hsl(0, 0%, 98%);\n --t-fill-color-neutral-100: hsl(0, 0%, 100%);\n --t-fill-color-interaction-default: hsl(204, 100%, 40%);\n --t-fill-color-interaction-hover: hsl(204, 100%, 35%);\n --t-fill-color-interaction-active: hsl(204, 100%, 30%);\n --t-fill-color-interaction-disabled: hsl(0, 0%, 81%);\n --t-fill-color-control-neutral-off: hsl(0, 0%, 62%);\n --t-fill-color-control-neutral-on: hsl(0, 0%, 24%);\n --t-fill-color-control-primary: hsl(204, 100%, 40%);\n --t-fill-color-control-secondary: hsl(97, 57%, 40%);\n --t-fill-color-control-error: hsl(8, 60%, 47%);\n --t-fill-color-control-disabled: hsl(0, 0%, 81%);\n --t-fill-color-status-neutral-solid: hsl(0, 0%, 45%);\n --t-fill-color-status-neutral-ghost: hsl(0, 0%, 93%);\n --t-fill-color-status-neutral-dim: hsl(0, 0%, 97%);\n --t-fill-color-status-info-solid: hsl(204, 100%, 40%);\n --t-fill-color-status-info-ghost: hsl(203, 94%, 94%);\n --t-fill-color-status-info-dim: hsl(204, 100%, 97%);\n --t-fill-color-status-success-solid: hsl(96, 57%, 33%);\n --t-fill-color-status-success-ghost: hsl(97, 57%, 90%);\n --t-fill-color-status-success-dim: hsl(96, 60%, 95%);\n --t-fill-color-status-warning-solid: hsl(42, 84%, 63%);\n --t-fill-color-status-warning-ghost: hsl(42, 87%, 94%);\n --t-fill-color-status-warning-dim: hsl(42, 87%, 97%);\n --t-fill-color-status-error-solid: hsl(8, 60%, 47%);\n --t-fill-color-status-error-ghost: hsl(9, 59%, 93%);\n --t-fill-color-status-error-dim: hsl(7, 60%, 97%);\n --t-fill-color-tooltip-primary: hsla(0, 0%, 12%, 0.77);\n --t-fill-color-tag-subtle-gray: hsl(0, 0%, 93%);\n --t-fill-color-tag-subtle-blue: hsl(220, 100%, 95%);\n --t-fill-color-tag-subtle-label-gray: hsl(0, 0%, 88%);\n --t-fill-color-tag-subtle-label-blue: hsl(221, 100%, 81%);\n --t-fill-color-tag-subtle-label-aqua: hsl(200, 82%, 82%);\n --t-fill-color-tag-subtle-label-teal: hsl(164, 52%, 76%);\n --t-fill-color-tag-subtle-label-green: hsl(99, 59%, 78%);\n --t-fill-color-tag-subtle-label-yellow: hsl(44, 78%, 77%);\n --t-fill-color-tag-subtle-label-orange: hsl(21, 89%, 82%);\n --t-fill-color-tag-subtle-label-pink: hsl(310, 64%, 85%);\n --t-fill-color-tag-subtle-label-purple: hsl(259, 74%, 85%);\n --t-fill-color-tag-subtle-label-magenta: hsl(291, 40%, 83%);\n --t-fill-color-tag-subtle-aqua: hsl(200, 82%, 89%);\n --t-fill-color-tag-subtle-teal: hsl(163, 53%, 83%);\n --t-fill-color-tag-subtle-green: hsl(98, 59%, 85%);\n --t-fill-color-tag-subtle-yellow: hsl(45, 77%, 85%);\n --t-fill-color-tag-subtle-orange: hsl(22, 89%, 89%);\n --t-fill-color-tag-subtle-pink: hsl(311, 66%, 92%);\n --t-fill-color-tag-subtle-purple: hsl(259, 74%, 93%);\n --t-fill-color-tag-subtle-magenta: hsl(294, 37%, 90%);\n --t-fill-color-tag-bold-gray: hsl(0, 0%, 88%);\n --t-fill-color-tag-bold-blue: hsl(220, 98%, 81%);\n --t-fill-color-tag-bold-aqua: hsl(201, 76%, 71%);\n --t-fill-color-tag-bold-teal: hsl(169, 62%, 64%);\n --t-fill-color-tag-bold-green: hsl(112, 57%, 65%);\n --t-fill-color-tag-bold-yellow: hsl(44, 92%, 69%);\n --t-fill-color-tag-bold-orange: hsl(21, 86%, 72%);\n --t-fill-color-tag-bold-pink: hsl(324, 78%, 77%);\n --t-fill-color-tag-bold-purple: hsl(273, 62%, 76%);\n --t-fill-color-tag-bold-magenta: hsl(291, 48%, 70%);\n --t-fill-color-tag-bold-label-gray: hsl(0, 0%, 81%);\n --t-fill-color-tag-bold-label-blue: hsl(220, 98%, 74%);\n --t-fill-color-tag-bold-label-aqua: hsl(200, 75%, 64%);\n --t-fill-color-tag-bold-label-teal: hsl(169, 62%, 56%);\n --t-fill-color-tag-bold-label-green: hsl(112, 57%, 57%);\n --t-fill-color-tag-bold-label-yellow: hsl(44, 93%, 61%);\n --t-fill-color-tag-bold-label-orange: hsl(21, 86%, 64%);\n --t-fill-color-tag-bold-label-pink: hsl(324, 76%, 70%);\n --t-fill-color-tag-bold-label-purple: hsl(273, 62%, 70%);\n --t-fill-color-tag-bold-label-magenta: hsl(292, 48%, 63%);\n --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 45%);\n --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 24%);\n --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 12%);\n --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 95%);\n --t-fill-color-button-neutral-outline-dim-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-neutral-outline-dim-hover: hsl(0, 0%, 95%);\n --t-fill-color-button-neutral-outline-dim-active: hsl(0, 0%, 93%);\n --t-fill-color-button-neutral-outline-dim-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);\n --t-fill-color-button-neutral-ghost-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-neutral-ghost-hover: hsl(0, 0%, 95%);\n --t-fill-color-button-neutral-ghost-active: hsl(0, 0%, 93%);\n --t-fill-color-button-neutral-ghost-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);\n --t-fill-color-button-interaction-solid-default: hsl(204, 100%, 40%);\n --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 35%);\n --t-fill-color-button-interaction-solid-active: hsl(204, 100%, 30%);\n --t-fill-color-button-interaction-solid-disabled: hsl(0, 0%, 81%);\n --t-fill-color-button-interaction-outline-dim-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-interaction-outline-dim-hover: hsl(204, 100%, 97%);\n --t-fill-color-button-interaction-outline-dim-active: hsl(203, 94%, 94%);\n --t-fill-color-button-interaction-outline-dim-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-interaction-ghost-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-interaction-ghost-hover: hsl(204, 100%, 97%);\n --t-fill-color-button-interaction-ghost-active: hsl(203, 94%, 94%);\n --t-fill-color-button-interaction-ghost-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-delete-solid-default: hsl(8, 60%, 47%);\n --t-fill-color-button-delete-solid-hover: hsl(8, 60%, 45%);\n --t-fill-color-button-delete-solid-active: hsl(8, 60%, 40%);\n --t-fill-color-button-delete-solid-disabled: hsl(0, 0%, 81%);\n --t-fill-color-button-delete-outline-dim-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-delete-outline-dim-hover: hsl(7, 60%, 97%);\n --t-fill-color-button-delete-outline-dim-active: hsl(9, 59%, 93%);\n --t-fill-color-button-delete-outline-dim-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-delete-ghost-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-delete-ghost-hover: hsl(7, 60%, 97%);\n --t-fill-color-button-delete-ghost-active: hsl(9, 59%, 93%);\n --t-fill-color-button-delete-ghost-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-pill-default: hsl(0, 0%, 93%);\n --t-fill-color-button-pill-hover: hsl(0, 0%, 88%);\n --t-fill-color-button-pill-active: hsl(0, 0%, 88%);\n --t-fill-color-button-pill-disabled: hsl(0, 0%, 93%);\n --t-fill-color-product-accounts-base: hsl(210, 55%, 50%);\n --t-fill-color-product-accounts-light: hsl(210, 54%, 60%);\n --t-fill-color-product-accounts-lighter: hsl(209, 53%, 90%);\n --t-fill-color-product-accounts-lightest: hsl(212, 54%, 93%);\n --t-fill-color-product-accounts-dark: hsl(210, 65%, 40%);\n --t-fill-color-product-accounts-darker: hsl(211, 70%, 32%);\n --t-fill-color-product-accounts-darkest: hsl(210, 75%, 25%);\n --t-fill-color-product-calendar-base: hsl(9, 61%, 50%);\n --t-fill-color-product-calendar-light: hsl(8, 65%, 55%);\n --t-fill-color-product-calendar-lighter: hsl(8, 72%, 59%);\n --t-fill-color-product-calendar-lightest: hsl(8, 61%, 70%);\n --t-fill-color-product-calendar-dark: hsl(8, 65%, 42%);\n --t-fill-color-product-calendar-darker: hsl(7, 65%, 34%);\n --t-fill-color-product-calendar-darkest: hsl(9, 61%, 27%);\n --t-fill-color-product-checkins-base: hsl(283, 22%, 48%);\n --t-fill-color-product-checkins-light: hsl(283, 22%, 55%);\n --t-fill-color-product-checkins-lighter: hsl(284, 22%, 64%);\n --t-fill-color-product-checkins-lightest: hsl(283, 22%, 75%);\n --t-fill-color-product-checkins-dark: hsl(283, 27%, 42%);\n --t-fill-color-product-checkins-darker: hsl(284, 33%, 34%);\n --t-fill-color-product-checkins-darkest: hsl(283, 33%, 27%);\n --t-fill-color-product-giving-base: hsl(43, 88%, 64%);\n --t-fill-color-product-giving-light: hsl(43, 88%, 70%);\n --t-fill-color-product-giving-lighter: hsl(43, 95%, 75%);\n --t-fill-color-product-giving-lightest: hsl(42, 95%, 83%);\n --t-fill-color-product-giving-dark: hsl(42, 84%, 55%);\n --t-fill-color-product-giving-darker: hsl(42, 84%, 48%);\n --t-fill-color-product-giving-darkest: hsl(42, 100%, 40%);\n --t-fill-color-product-groups-base: hsl(17, 88%, 55%);\n --t-fill-color-product-groups-light: hsl(17, 96%, 63%);\n --t-fill-color-product-groups-lighter: hsl(17, 96%, 70%);\n --t-fill-color-product-groups-lightest: hsl(17, 96%, 80%);\n --t-fill-color-product-groups-dark: hsl(12, 70%, 48%);\n --t-fill-color-product-groups-darker: hsl(12, 70%, 40%);\n --t-fill-color-product-groups-darkest: hsl(14, 70%, 34%);\n --t-fill-color-product-home-base: hsl(221, 91%, 55%);\n --t-fill-color-product-home-light: hsl(221, 91%, 62%);\n --t-fill-color-product-home-lighter: hsl(221, 91%, 87%);\n --t-fill-color-product-home-lightest: hsl(221, 91%, 91%);\n --t-fill-color-product-home-dark: hsl(221, 90%, 50%);\n --t-fill-color-product-home-darker: hsl(221, 90%, 45%);\n --t-fill-color-product-home-darkest: hsl(218, 84%, 25%);\n --t-fill-color-product-people-base: hsl(220, 74%, 57%);\n --t-fill-color-product-people-light: hsl(221, 73%, 65%);\n --t-fill-color-product-people-lighter: hsl(221, 73%, 71%);\n --t-fill-color-product-people-lightest: hsl(220, 69%, 81%);\n --t-fill-color-product-people-dark: hsl(220, 68%, 51%);\n --t-fill-color-product-people-darker: hsl(220, 68%, 41%);\n --t-fill-color-product-people-darkest: hsl(221, 68%, 31%);\n --t-fill-color-product-publishing-base: hsl(220, 12%, 31%);\n --t-fill-color-product-publishing-light: hsl(222, 12%, 39%);\n --t-fill-color-product-publishing-lighter: hsl(221, 11%, 50%);\n --t-fill-color-product-publishing-lightest: hsl(222, 10%, 60%);\n --t-fill-color-product-publishing-dark: hsl(220, 11%, 26%);\n --t-fill-color-product-publishing-darker: hsl(217, 12%, 22%);\n --t-fill-color-product-publishing-darkest: hsl(214, 11%, 12%);\n --t-fill-color-product-registrations-base: hsl(175, 36%, 43%);\n --t-fill-color-product-registrations-light: hsl(176, 37%, 60%);\n --t-fill-color-product-registrations-lighter: hsl(176, 37%, 68%);\n --t-fill-color-product-registrations-lightest: hsl(176, 38%, 78%);\n --t-fill-color-product-registrations-dark: hsl(175, 51%, 34%);\n --t-fill-color-product-registrations-darker: hsl(174, 51%, 28%);\n --t-fill-color-product-registrations-darkest: hsl(175, 52%, 22%);\n --t-fill-color-product-services-base: hsl(88, 45%, 41%);\n --t-fill-color-product-services-light: hsl(88, 40%, 54%);\n --t-fill-color-product-services-lighter: hsl(88, 39%, 66%);\n --t-fill-color-product-services-lightest: hsl(88, 39%, 75%);\n --t-fill-color-product-services-dark: hsl(89, 62%, 32%);\n --t-fill-color-product-services-darker: hsl(89, 62%, 26%);\n --t-fill-color-product-services-darkest: hsl(89, 63%, 21%);\n --t-fill-color-product-staff-base: hsl(328, 100%, 45%);\n --t-fill-color-transparency-light-010: hsla(0, 0%, 100%, 0.1);\n --t-fill-color-transparency-light-020: hsla(0, 0%, 100%, 0.2);\n --t-fill-color-transparency-light-030: hsla(0, 0%, 100%, 0.3);\n --t-fill-color-transparency-light-040: hsla(0, 0%, 100%, 0.4);\n --t-fill-color-transparency-light-050: hsla(0, 0%, 100%, 0.5);\n --t-fill-color-transparency-light-060: hsla(0, 0%, 100%, 0.6);\n --t-fill-color-transparency-light-070: hsla(0, 0%, 100%, 0.7);\n --t-fill-color-transparency-light-080: hsla(0, 0%, 100%, 0.8);\n --t-fill-color-transparency-light-090: hsla(0, 0%, 100%, 0.9);\n --t-fill-color-transparency-dark-010: hsla(0, 0%, 0%, 0.1);\n --t-fill-color-transparency-dark-020: hsla(0, 0%, 0%, 0.2);\n --t-fill-color-transparency-dark-030: hsla(0, 0%, 0%, 0.3);\n --t-fill-color-transparency-dark-040: hsla(0, 0%, 0%, 0.4);\n --t-fill-color-transparency-dark-050: hsla(0, 0%, 0%, 0.5);\n --t-fill-color-transparency-dark-060: hsla(0, 0%, 0%, 0.6);\n --t-fill-color-transparency-dark-070: hsla(0, 0%, 0%, 0.7);\n --t-fill-color-transparency-dark-080: hsla(0, 0%, 0%, 0.8);\n --t-fill-color-transparency-dark-090: hsla(0, 0%, 0%, 0.9);\n --t-surface-color-canvas: hsl(0, 0%, 98%);\n --t-surface-color-card: hsl(0, 0%, 100%);\n --t-border-color-default-base: hsl(0, 0%, 88%);\n --t-border-color-default-dark: hsl(0, 0%, 81%);\n --t-border-color-default-darker: hsl(0, 0%, 68%);\n --t-border-color-default-darkest: hsl(0, 0%, 62%);\n --t-border-color-default-disabled: hsl(0, 0%, 88%);\n --t-border-color-default-dim: hsl(0, 0%, 95%);\n --t-border-color-default-white: hsl(0, 0%, 100%);\n --t-border-color-status-neutral: hsl(0, 0%, 62%);\n --t-border-color-status-info: hsl(204, 100%, 40%);\n --t-border-color-status-success: hsl(97, 57%, 40%);\n --t-border-color-status-warning: hsl(42, 84%, 63%);\n --t-border-color-status-error: hsl(8, 60%, 47%);\n --t-border-color-button-neutral: hsl(0, 0%, 88%);\n --t-border-color-button-info: hsl(204, 100%, 40%);\n --t-border-color-button-create: hsl(96, 57%, 33%);\n --t-border-color-button-delete: hsl(8, 60%, 47%);\n --t-border-color-control-neutral: hsl(0, 0%, 68%);\n --t-border-color-control-info: hsl(204, 100%, 40%);\n --t-border-color-control-success: hsl(97, 57%, 40%);\n --t-border-color-control-warning: hsl(42, 84%, 63%);\n --t-border-color-control-error: hsl(8, 60%, 47%);\n --t-border-color-control-disabled: hsl(0, 0%, 88%);\n}\n","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --t-text-color-tag-gray: hsl(0, 0%, 24%);\n --t-text-color-tag-magenta: hsl(285, 71%, 20%);\n --t-text-color-tag-blue: hsl(224, 47%, 31%);\n --t-text-color-tag-aqua: hsl(209, 77%, 22%);\n --t-text-color-tag-teal: hsl(180, 95%, 15%);\n --t-text-color-tag-green: hsl(100, 93%, 17%);\n --t-text-color-tag-yellow: hsl(29, 100%, 23%);\n --t-text-color-tag-orange: hsl(18, 100%, 18%);\n --t-text-color-tag-pink: hsl(327, 88%, 20%);\n --t-text-color-tag-purple: hsl(268, 71%, 27%);\n --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);\n --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);\n --t-fill-color-alert-info: hsl(204, 94%, 49%);\n --t-fill-color-alert-success: hsl(122, 60%, 41%);\n --t-fill-color-alert-warning: hsl(43, 96%, 58%);\n --t-fill-color-alert-error: hsl(4, 77%, 59%);\n --t-fill-color-button-default-info-solid-default: hsl(204, 100%, 40%);\n --t-fill-color-button-default-info-solid-hover: hsl(204, 100%, 35%);\n --t-fill-color-button-default-info-solid-active: hsl(204, 100%, 30%);\n --t-fill-color-button-default-info-solid-disabled: hsl(0, 0%, 81%);\n --t-fill-color-button-default-info-outline-dim-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-default-info-outline-dim-hover: hsl(204, 100%, 97%);\n --t-fill-color-button-default-info-outline-dim-active: hsl(203, 94%, 94%);\n --t-fill-color-button-default-info-outline-dim-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-default-info-ghost-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-default-info-ghost-hover: hsl(204, 100%, 97%);\n --t-fill-color-button-default-info-ghost-active: hsl(203, 94%, 94%);\n --t-fill-color-button-default-info-ghost-disabled: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);\n --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);\n --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);\n --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);\n --t-fill-color-button-create-ghost-default: hsla(0, 0%, 100%, 0);\n --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);\n --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);\n --t-fill-color-button-create-ghost-disabled: hsla(0, 0%, 100%, 0);\n}\n","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n.t-banner {\n --t-banner-font-size: var(--t-font-size-md);\n --t-banner-font-color: var(--t-text-color-default-primary);\n --t-banner-background-color: var(--t-fill-color-status-neutral-ghost);\n --t-banner-spacing: var(--t-spacing-2);\n --t-banner-border-radius: var(--t-border-radius-md);\n --t-banner-title-font-color: var(--t-text-color-default-headline);\n --t-banner-title-font-size: var(--t-font-size-md);\n --t-banner-title-font-weight: var(--t-font-weight-semi-bold);\n --t-banner-icon-fill-color: hsla(0, 0%, 0%, 0);\n --t-banner-background-color-info: var(--t-fill-color-status-info-ghost);\n --t-banner-icon-fill-color-info: var(--t-icon-color-status-info-primary);\n --t-banner-background-color-warning: var(--t-fill-color-status-warning-ghost);\n --t-banner-icon-fill-color-warning: var(--t-icon-color-status-warning-primary);\n --t-banner-background-color-error: var(--t-fill-color-status-error-ghost);\n --t-banner-icon-fill-color-error: var(--t-icon-color-status-error-primary);\n --t-banner-background-color-success: var(--t-fill-color-status-success-ghost);\n --t-banner-icon-fill-color-success: var(--t-icon-color-status-success-primary);\n --t-banner-link-font-color-hover: var(--t-text-color-default-headline);\n}\n","@import \"../../tokens/css/components/banner.css\";\n\n.t-banner {\n font-size: var(--t-banner-font-size);\n color: var(--t-banner-font-color);\n line-height: 1.4;\n background-color: var(--t-banner-background-color);\n padding: var(--t-banner-spacing);\n border-radius: var(--t-banner-border-radius);\n display: flex;\n gap: var(--t-banner-spacing);\n}\n\n.t-banner-title {\n font-size: var(--t-banner-title-font-size);\n font-weight: var(--t-banner-title-font-weight);\n color: var(--t-banner-title-font-color);\n margin-bottom: var(--t-spacing-half);\n display: block;\n}\n\n.t-banner-icon {\n margin-top: 1px;\n}\n.t-banner-icon svg {\n fill: var(--t-banner-icon-fill-color);\n}\n\n.t-banner-body a {\n color: inherit;\n text-decoration: underline;\n text-underline-offset: 2px;\n transition: color 0.1s linear;\n}\n.t-banner-body a:hover {\n color: var(--t-banner-cta-font-color-hover);\n}\n\n.t-banner--status-info {\n --t-banner-background-color: var(--t-banner-background-color-info);\n --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-info);\n}\n\n.t-banner--status-warning {\n --t-banner-background-color: var(--t-banner-background-color-warning);\n --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-warning);\n}\n\n.t-banner--status-error {\n --t-banner-background-color: var(--t-banner-background-color-error);\n --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-error);\n}\n\n.t-banner--status-success {\n --t-banner-background-color: var(--t-banner-background-color-success);\n --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-success);\n}\n\n.t-banner--sm {\n --t-banner-spacing: calc(var(--t-spacing-half) + var(--t-spacing-1));\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/tapestry",
3
- "version": "0.5.1-rc.1",
3
+ "version": "0.5.2-qa-133.0",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
@@ -84,7 +84,7 @@
84
84
  "shadow-dom-testing-library": "^1.11.3",
85
85
  "storybook": "^8.6.12",
86
86
  "style-dictionary": "^4.2.0",
87
- "tapestry-wc": "^0.5.1-rc.1",
87
+ "tapestry-wc": "^0.5.2-qa-133.0",
88
88
  "typescript": "^5.5.3",
89
89
  "vitest": "^3.0.0"
90
90
  },
@@ -94,5 +94,5 @@
94
94
  "classnames": "^2.5.1",
95
95
  "lodash": "^4.17.21"
96
96
  },
97
- "gitHead": "e0e2f9aa9a0e9c9ae20457f6c31badd0b980c4c7"
97
+ "gitHead": "e2ed5ff47d01c48a87aaac08739f4fd831bec3c8"
98
98
  }
package/react-types/index.d.ts CHANGED
@@ -8,13 +8,14 @@ declare global {
8
8
  * @example How to use it
9
9
  * ```html
10
10
  * <tds-page-header>
11
- * <h1 slot="primary">Title</h1>
11
+ * <h1>Title</h1>
12
+ *
12
13
  * <div slot="actions">
13
14
  * <button>Button</button>
14
15
  * </div>
15
16
  * </tds-page-header>
16
17
  * ```
17
- * @slot primary - The primary slot is the main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.
18
+ * @slot (default) - The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.
18
19
  * @slot actions - Additional content (typically actions) that complements the primary slot.
19
20
  * @slot navigation - For page header with navigation, this slot is for the nav.
20
21
  * @cssprop --tds-page-header-background-color - Background color of the header.
@@ -23,6 +24,25 @@ declare global {
23
24
  * @cssprop --tds-page-header-headline-color - Color of the page header h1.
24
25
  * @cssprop --tds-page-header-padding-x - Horizontal padding of the header.
25
26
  * @cssprop --tds-page-header-padding-y - Vertical padding of the header.
27
+ * @cssprop --tds-page-header-nav-item-padding-x: {var(--t-spacing-1)} - Horizontal padding for the tab.
28
+ * @cssprop --tds-page-header-nav-item-padding-y: {var(--t-spacing-1)} - Vertical padding for the tab.
29
+ * @cssprop --tds-page-header-nav-item-color: {var(--t-text-color-default-primary)} - Text color for the tab.
30
+ * @cssprop --tds-page-header-nav-item-background-color: {var(--t-fill-color-transparency-light-060)} - Background color for the tab.
31
+ * @cssprop --tds-page-header-nav-item-border-width: {0} - Border width for the tab.
32
+ * @cssprop --tds-page-header-nav-item-border-color: {var(--tds-page-header-nav-item-background-color)} - Border color for the tab.
33
+ * @cssprop --tds-page-header-nav-item-border-bottom-color: {var(--t-border-color-default-base)} - Border bottom color for the tab.
34
+ * @cssprop --tds-page-header-nav-item-color-hover: {var(--tds-page-header-nav-item-color)} - Text color for the tab on hover.
35
+ * @cssprop --tds-page-header-nav-item-background-color-hover: {var(--t-fill-color-neutral-080)} - Background color for the tab on hover.
36
+ * @cssprop --tds-page-header-nav-item-border-color-hover: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on hover.
37
+ * @cssprop --tds-page-header-nav-item-background-color-active: {var(--t-fill-color-neutral-060)} - Background color for the tab on active.
38
+ * @cssprop --tds-page-header-nav-item-border-color-active: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on active.
39
+ * @cssprop --tds-page-header-nav-item-color-disabled: {var(--t-text-color-default-disabled)} - Text color for the tab on disabled.
40
+ * @cssprop --tds-page-header-nav-item-background-color-disabled: {var(--t-fill-color-neutral-080)} - Background color for the tab on disabled.
41
+ * @cssprop --tds-page-header-nav-item-border-color-disabled: {var(--tds-page-header-nav-item-background-color-disabled)} - Border color for the tab on disabled.
42
+ * @cssprop --tds-page-header-nav-item-color-selected: {var(--t-text-color-default-primary)} - Text color for the tab on selected.
43
+ * @cssprop --tds-page-header-nav-item-border-color-selected: {var(--t-border-color-default-base)} - Border color for the tab on selected.
44
+ * @cssprop --tds-page-header-nav-item-background-color-selected: {var(--t-fill-color-neutral-100)} - Background color for the tab on selected.
45
+ * @cssprop --tds-page-header-nav-item-border-bottom-color-selected: {var(--tds-page-header-nav-item-background-color-selected)} - Border bottom color for the tab on selected.
26
46
  */
27
47
  "tds-page-header": {
28
48
  /**
@@ -37,51 +57,6 @@ declare global {
37
57
  */
38
58
  "profile"?: boolean
39
59
  } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
40
- /**
41
- * A container for page header nav.
42
- * @slot (default) - Used for instances of tds-page-header-nav-item
43
- * @parent tds-page-header
44
- */
45
- "tds-page-header-nav": {
46
- } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
47
- /**
48
- * Individual navigation item for the page header contained within a `tds-page-header-nav` component.
49
- * @slot (default) - The content of the tab. Accepts text, or if required a button or anchor element.
50
- * @parent tds-page-header
51
- * @cssprop --tds-page-header-nav-item-background-color - {var(--t-fill-color-transparency-light-060)} - Background color for the tab.
52
- * @cssprop --tds-page-header-nav-item-background-color-active - {var(--t-fill-color-neutral-060)} - Background color for the tab on active.
53
- * @cssprop --tds-page-header-nav-item-background-color-disabled - {var(--t-fill-color-neutral-080)} - Background color for the tab on disabled.
54
- * @cssprop --tds-page-header-nav-item-background-color-hover - {var(--t-fill-color-neutral-080)} - Background color for the tab on hover.
55
- * @cssprop --tds-page-header-nav-item-background-color-selected - {var(--t-fill-color-neutral-100)} - Background color for the tab on selected.
56
- * @cssprop --tds-page-header-nav-item-border-bottom-color - {var(--t-border-color-default-base)} - Border bottom color for the tab.
57
- * @cssprop --tds-page-header-nav-item-border-bottom-color-selected - {var(--tds-page-header-nav-item-background-color-selected)} - Border bottom color for the tab on selected.
58
- * @cssprop --tds-page-header-nav-item-border-color - {var(--tds-page-header-nav-item-background-color)} - Border color for the tab.
59
- * @cssprop --tds-page-header-nav-item-border-color-active - {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on active.
60
- * @cssprop --tds-page-header-nav-item-border-color-disabled - {var(--tds-page-header-nav-item-background-color-disabled)} - Border color for the tab on disabled.
61
- * @cssprop --tds-page-header-nav-item-border-color-hover - {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on hover.
62
- * @cssprop --tds-page-header-nav-item-border-color-selected - {var(--t-border-color-default-base)} - Border color for the tab on selected.
63
- * @cssprop --tds-page-header-nav-item-border-width - {0} - Border width for the tab.
64
- * @cssprop --tds-page-header-nav-item-color - {var(--t-text-color-default-primary)} - Text color for the tab.
65
- * @cssprop --tds-page-header-nav-item-color-disabled - {var(--t-text-color-default-disabled)} - Text color for the tab on disabled.
66
- * @cssprop --tds-page-header-nav-item-color-hover - {var(--tds-page-header-nav-item-color)} - Text color for the tab on hover.
67
- * @cssprop --tds-page-header-nav-item-color-selected - {var(--t-text-color-default-primary)} - Text color for the tab on selected.
68
- * @cssprop --tds-page-header-nav-item-padding-x - {var(--t-spacing-1)} - Horizontal padding for the tab.
69
- * @cssprop --tds-page-header-nav-item-padding-y - {var(--t-spacing-1)} - Vertical padding for the tab.
70
- */
71
- "tds-page-header-nav-item": {
72
- /**
73
- * If `true` the tab is disabled.
74
- */
75
- "disabled"?: boolean
76
- /**
77
- * Optional URL for the tab if it should be a link.
78
- */
79
- "href"?: string
80
- /**
81
- * If `true` the tab is selected.
82
- */
83
- "selected"?: boolean
84
- } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
85
60
  }
86
61
  }
87
62
  }