@aurodesignsystem-dev/auro-banner 0.0.0-pr92.2 → 0.0.0-pr96.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 (11) hide show
  1. package/README.md +93 -81
  2. package/demo/api.html +3 -4
  3. package/demo/api.md +238 -229
  4. package/demo/auro-banner.min.js +99 -22
  5. package/demo/index.html +2 -2
  6. package/demo/index.md +35 -122
  7. package/dist/{auro-banner-pP9c4Izh.js → auro-banner-B-yqrP_2.js} +2 -2
  8. package/dist/index.d.ts +217 -61
  9. package/dist/index.js +1 -1
  10. package/dist/registered.js +1 -1
  11. package/package.json +20 -12
package/demo/auro-banner.min.js CHANGED
@@ -161,6 +161,19 @@ class AuroLibraryRuntimeUtils {
161
161
 
162
162
  return elemTag === tag || elem.hasAttribute(tag);
163
163
  }
164
+
165
+ /**
166
+ * Gets the text content of a named slot.
167
+ * @returns {String}
168
+ * @private
169
+ */
170
+ getSlotText(elem, name) {
171
+ const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
172
+ const nodes = slot?.assignedNodes({ flatten: true }) || [];
173
+ const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
174
+
175
+ return text || null;
176
+ }
164
177
  }
165
178
 
166
179
  var headerVersion = '5.0.0';
@@ -174,36 +187,31 @@ var styleCss = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1r
174
187
  var tokensCss = i$5`:host{--ds-auro-banner-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-banner-disclaimer-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-accent1, #265688);--ds-auro-banner-icon-container-color: var(--ds-basic-color-surface-neutral-medium, #c5c5c5);--ds-auro-banner-wrapper-container-color: var(--ds-basic-color-surface-inverse, #00274a);--ds-auro-banner-wrapper-border-color: var(--ds-basic-color-border-default, #959595)}
175
188
  `;
176
189
 
177
- // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
190
+ // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
178
191
  // See LICENSE in the project root for license information.
179
192
 
180
193
 
181
194
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
182
195
  /**
183
- * The auro-banner element provides users a flexible way to convey a summary of information. The primary elements of a banner include an image, and details.
184
- * @attr {Boolean} billboard - to be used for billboard style configuration
185
- * @attr {Boolean} hero - to be used for hero style configuration
186
- * @attr {Boolean} iconic - to be used in as a hero on pages but with an icon and no displayImage on mobile
187
- * @attr {String} iconbg - to be used in conjunction with the iconic variant this specifies the background color of the icon
188
- * @attr {Boolean} marquee - to be used for marquee style configuration
189
- * @attr {Boolean} roundedBorder - to be used for roundedBorder style configuration
190
- * @attr {Boolean} solid - to be used when you want a solid color as opposed to a transparent background
191
- * @attr {Boolean} slim - to be used when we want a slimmer padding to the default banner
192
- * @attr {Boolean} alignRight - to be used when we want the text aligned to the right
193
- * @attr {Boolean} alignLeft - to be used when we want the text aligned to the left
194
- * @attr {Boolean} onDark - DEPRECATED - use `appearance="inverse"` instead.
195
- * @slot displayImage - placement for `<picture />` or `<img>` elements
196
- * @slot prefix - placement for smaller text above title
197
- * @slot title - placement for header
196
+ * The `auro-banner` element provides users a flexible way to convey a summary of information. The primary elements of a banner include an image, and details.
197
+ * @customElement auro-banner
198
+ *
199
+ * @slot action - call to action
198
200
  * @slot contentImage - image placement
199
201
  * @slot description - main body of content
200
- * @slot action - call to action
201
202
  * @slot disclaimer - disclaimer copy
203
+ * @slot displayImage - placement for `<picture />` or `<img>` elements
204
+ * @slot prefix - placement for smaller text above title
205
+ * @slot title - placement for header
202
206
  */
203
207
  class AuroBanner extends i$2 {
204
208
  constructor() {
205
209
  super();
206
210
 
211
+ this._initializeDefaults();
212
+ }
213
+
214
+ _initializeDefaults() {
207
215
  this.appearance = "default";
208
216
  this.hero = false;
209
217
  this.iconic = false;
@@ -229,7 +237,7 @@ class AuroBanner extends i$2 {
229
237
 
230
238
  /**
231
239
  * This will register this element with the browser.
232
- * @param {string} [name="auro-banner"] - The name of element that you want to register to.
240
+ * @param {string} [name="auro-banner"] - The name of the element that you want to register.
233
241
  *
234
242
  * @example
235
243
  * AuroBanner.register("custom-banner") // this will register this element to <custom-banner/>
@@ -259,8 +267,25 @@ class AuroBanner extends i$2 {
259
267
  ...i$2.properties,
260
268
 
261
269
  /**
262
- * Defines whether the component will be on lighter or darker backgrounds.
263
- * @property {'default', 'inverse'}
270
+ * Use to align text to the left side of the banner
271
+ */
272
+ alignLeft: {
273
+ type: Boolean,
274
+ reflect: true,
275
+ },
276
+
277
+ /**
278
+ * Use to align text to the right side of the banner
279
+ */
280
+ alignRight: {
281
+ type: Boolean,
282
+ reflect: true,
283
+ },
284
+
285
+
286
+ /**
287
+ * Defines whether the component will be on lighter or darker backgrounds
288
+ * @type {'default' | 'inverse'}
264
289
  * @default 'default'
265
290
  */
266
291
  appearance: {
@@ -268,24 +293,76 @@ class AuroBanner extends i$2 {
268
293
  reflect: true
269
294
  },
270
295
 
296
+
297
+ /**
298
+ * Use to enable billboard style configuration
299
+ */
300
+ billboard: {
301
+ type: Boolean,
302
+ reflect: true,
303
+ },
304
+
305
+ /**
306
+ * Use to enable hero style configuration
307
+ */
271
308
  hero: {
272
309
  type: Boolean,
273
310
  reflect: true,
274
311
  },
312
+
313
+ /**
314
+ * Use in conjunction with the iconic variant to specify the background color of the icon
315
+ */
316
+ iconbg: {
317
+ type: String,
318
+ },
319
+
320
+ /**
321
+ * Used similarly to the `hero` variant, but adds an icon slot and removes the display image on mobile
322
+ */
275
323
  iconic: {
276
324
  type: Boolean,
277
325
  reflect: true,
278
326
  },
327
+
328
+ /**
329
+ * Use to enable marquee style configuration
330
+ */
279
331
  marquee: {
280
332
  type: Boolean,
281
333
  reflect: true,
282
334
  },
335
+
336
+ /**
337
+ * DEPRECATED - use `appearance="inverse"` instead.
338
+ */
339
+ onDark: {
340
+ type: Boolean,
341
+ reflect: true,
342
+ },
343
+
344
+ /**
345
+ * Use to enable rounded border style configuration
346
+ */
283
347
  roundedBorder: {
284
348
  type: Boolean,
285
349
  reflect: true,
286
350
  },
287
- iconbg: {
288
- type: String,
351
+
352
+ /**
353
+ * Use to enable slimmer padding to the default banner
354
+ */
355
+ slim: {
356
+ type: Boolean,
357
+ reflect: true,
358
+ },
359
+
360
+ /**
361
+ * Use to enable a solid background color as opposed to a transparent background
362
+ */
363
+ solid: {
364
+ type: Boolean,
365
+ reflect: true,
289
366
  },
290
367
  };
291
368
  }
package/demo/index.html CHANGED
@@ -51,7 +51,7 @@
51
51
  <script type="module" data-demo-script="true" src="./index.min.js"></script>
52
52
 
53
53
  <!-- If additional elements are needed for the demo, add them here. -->
54
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
56
56
  </body>
57
57
  </html>
package/demo/index.md CHANGED
@@ -1,57 +1,49 @@
1
1
  <!--
2
- The index.md file is a compiled document. No edits should be made directly to this file.
3
- README.md is created by running `npm run build:docs`.
4
- This file is generated based on a template fetched from `./docs/partials/index.md`
2
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
3
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
4
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
5
5
  -->
6
6
 
7
- # Banner
8
-
9
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
10
- <!-- The below content is automatically added from ../docs/partials/description.md -->
7
+ # Banner
8
+
9
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
11
  The `<auro-banner>` element provides users a flexible way to convey a summary of information. The primary elements of a banner include an image, and details.
12
12
 
13
13
  The details are broken down into `prefix`, `title`, `description`, `action`, and `disclaimer`.
14
14
  <!-- AURO-GENERATED-CONTENT:END -->
15
15
 
16
- ## auro-banner use cases
17
-
18
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
19
- <!-- The below content is automatically added from ../docs/partials/useCases.md -->
16
+ ## Use Cases
17
+
18
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
19
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
20
20
  Use the `<auro-banner>` element to:
21
21
 
22
22
  * grab the attention of a user
23
23
  * direct your user to another resource for further information
24
24
  <!-- AURO-GENERATED-CONTENT:END -->
25
25
 
26
- ## Additional Information
27
-
28
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/readmeAddlInfo.md) -->
29
- <!-- The below content is automatically added from ../docs/partials/readmeAddlInfo.md -->
30
- <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
31
- **Do not** use `<auro-banner>` as a primary source of information.
32
- <!-- AURO-GENERATED-CONTENT:END -->
33
-
34
26
  ## Example(s)
35
27
 
36
- ### Default Example
28
+ ### Basic
37
29
 
38
30
  The default `<auro-banner>` element features configuration options when using using the `displayImage`, `contentImage`, `prefix`, `title`, `description`, `action` and `disclaimer` slots for structured content placement.
39
31
 
40
- The `<auro-banner>` component must be used in conjunction with one of the following attributes: `billboard`, `hero`,`iconic`, `marquee`, or `roundedBorder`. The `billboard` attribute the most common use case.
41
-
42
- **Note**: See the [auro-banner API page](https://auro.alaskaair.com/components/auro/banner/api) for more information on how to use this component's slots and attributes.
32
+ The `<auro-banner>` component must be used in conjunction with one of the following attributes: `billboard`, `hero`, `iconic`, `marquee`, or `roundedBorder`. The `billboard` attribute is the most common use case.
43
33
 
34
+ **Note**: See the [auro-banner API page](https://auro.alaskaair.com/components/auro/banner/api) for more information on how to use this component's slots and attributes.
35
+
44
36
  <div class="exampleWrapper">
45
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
46
- <!-- The below content is automatically added from ../apiExamples/basic.html -->
37
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
38
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
47
39
  <auro-banner billboard>
48
40
  <picture slot="displayImage">
49
- <source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
50
- <source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
51
- <source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
52
- <source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
53
- <source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
54
- <img src="https://picsum.photos/id/430/225/550" alt="" />
41
+ <source srcset="https://picsum.photos/id/196/1124/800" media="(min-width: 1024px)">
42
+ <source srcset="https://picsum.photos/id/196/1124/1000" media="(min-width: 768px)">
43
+ <source srcset="https://picsum.photos/id/196/736/750" media="(min-width: 736px)">
44
+ <source srcset="https://picsum.photos/id/196/736/1400" media="(min-width: 375px)">
45
+ <source srcset="https://picsum.photos/id/196/320/700" media="(min-width: 320px)">
46
+ <img src="https://picsum.photos/id/196/225/550" alt="" />
55
47
  </picture>
56
48
  <img
57
49
  slot="contentImage"
@@ -61,8 +53,8 @@ The `<auro-banner>` component must be used in conjunction with one of the follow
61
53
  We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
62
54
  </p>
63
55
  <auro-hyperlink
64
- cta
65
- secondary
56
+ type="cta"
57
+ variant="secondary"
66
58
  href="/"
67
59
  slot="action"
68
60
  target="_blank">
@@ -73,18 +65,18 @@ The `<auro-banner>` component must be used in conjunction with one of the follow
73
65
  </div>
74
66
  <auro-accordion alignRight>
75
67
  <span slot="trigger">See code</span>
76
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
77
- <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
68
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
69
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
78
70
 
79
71
  ```html
80
72
  <auro-banner billboard>
81
73
  <picture slot="displayImage">
82
- <source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
83
- <source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
84
- <source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
85
- <source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
86
- <source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
87
- <img src="https://picsum.photos/id/430/225/550" alt="" />
74
+ <source srcset="https://picsum.photos/id/196/1124/800" media="(min-width: 1024px)">
75
+ <source srcset="https://picsum.photos/id/196/1124/1000" media="(min-width: 768px)">
76
+ <source srcset="https://picsum.photos/id/196/736/750" media="(min-width: 736px)">
77
+ <source srcset="https://picsum.photos/id/196/736/1400" media="(min-width: 375px)">
78
+ <source srcset="https://picsum.photos/id/196/320/700" media="(min-width: 320px)">
79
+ <img src="https://picsum.photos/id/196/225/550" alt="" />
88
80
  </picture>
89
81
  <img
90
82
  slot="contentImage"
@@ -94,8 +86,8 @@ The `<auro-banner>` component must be used in conjunction with one of the follow
94
86
  We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
95
87
  </p>
96
88
  <auro-hyperlink
97
- cta
98
- secondary
89
+ type="cta"
90
+ variant="secondary"
99
91
  href="/"
100
92
  slot="action"
101
93
  target="_blank">
@@ -104,83 +96,4 @@ The `<auro-banner>` component must be used in conjunction with one of the follow
104
96
  </auro-banner>
105
97
  ```
106
98
  <!-- AURO-GENERATED-CONTENT:END -->
107
- </auro-accordion>
108
-
109
- ## Recommended Use and Version Control
110
-
111
- There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-banner` custom element is defined automatically.
112
-
113
- To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroBanner.register(name)` method and pass in a unique name.
114
-
115
- ```js
116
- import { AuroBanner } from '@aurodesignsystem/auro-banner/class';
117
-
118
- AuroBanner.register('custom-banner');
119
- ```
120
-
121
- This will create a new custom element that you can use in your HTML that will function identically to the `auro-banner` element.
122
-
123
- <div class="exampleWrapper">
124
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
125
- <!-- The below content is automatically added from ../apiExamples/custom.html -->
126
- <custom-banner billboard>
127
- <picture slot="displayImage">
128
- <source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
129
- <source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
130
- <source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
131
- <source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
132
- <source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
133
- <img src="https://picsum.photos/id/430/225/550" alt="" />
134
- </picture>
135
- <img
136
- slot="contentImage"
137
- src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/bltc1fa673bb196d177/6633f3de693c294c708b20de/oneworld-travel-bright-Horizontal-300.png"
138
- alt="Random insert"/>
139
- <p slot="description">
140
- We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
141
- </p>
142
- <auro-hyperlink
143
- cta
144
- secondary
145
- href="/"
146
- slot="action"
147
- target="_blank">
148
- More info
149
- </auro-hyperlink>
150
- </custom-banner>
151
- <!-- AURO-GENERATED-CONTENT:END -->
152
- </div>
153
- <auro-accordion alignRight>
154
- <span slot="trigger">See code</span>
155
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
156
- <!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
157
-
158
- ```html
159
- <custom-banner billboard>
160
- <picture slot="displayImage">
161
- <source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
162
- <source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
163
- <source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
164
- <source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
165
- <source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
166
- <img src="https://picsum.photos/id/430/225/550" alt="" />
167
- </picture>
168
- <img
169
- slot="contentImage"
170
- src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/bltc1fa673bb196d177/6633f3de693c294c708b20de/oneworld-travel-bright-Horizontal-300.png"
171
- alt="Random insert"/>
172
- <p slot="description">
173
- We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
174
- </p>
175
- <auro-hyperlink
176
- cta
177
- secondary
178
- href="/"
179
- slot="action"
180
- target="_blank">
181
- More info
182
- </auro-hyperlink>
183
- </custom-banner>
184
- ```
185
- <!-- AURO-GENERATED-CONTENT:END -->
186
99
  </auro-accordion>
package/dist/{auro-banner-pP9c4Izh.js → auro-banner-B-yqrP_2.js} RENAMED
@@ -1,8 +1,8 @@
1
1
  import{css as e,LitElement as s}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{ifDefined as t}from"lit/directives/if-defined.js";import{unsafeStatic as i,html as r,literal as n}from"lit/static-html.js";class o{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{})}closestElement(e,s=this,a=(s,t=s&&s.closest(e))=>s&&s!==document&&s!==window?t||a(s.getRootNode().host):null){return a(s)}handleComponentTagRename(e,s){const a=s.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,s){const a=s.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}}var l=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}:host .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, .125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, .25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, .5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, .75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, .125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, .25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, .5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, .75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}
2
- `;class c extends s{constructor(){super(),this.level=1,this.typography="heading",this.runtimeUtils=new o}static get properties(){return{level:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},display:{type:String,reflect:!0},visualLevel:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},typography:{type:String,reflect:!0},color:{type:String,reflect:!0},margin:{type:String,reflect:!0},size:{type:String,reflect:!0}}}static get styles(){return[l]}static get displayClassMap(){return{800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){o.prototype.registerComponent(e,c)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header")}spacingDecision(e){if("both"===this.margin)switch(e){case"none":return"util_stackMarginnone--top util_stackMarginnone--bottom";case"25":return"util_stackMargin25--top util_stackMargin25--bottom";case"50":return"util_stackMargin50--top util_stackMargin50--bottom";case"100":return"util_stackMargin100--top util_stackMargin100--bottom";case"150":return"util_stackMargin150--top util_stackMargin150--bottom";case"200":return"util_stackMargin200--top util_stackMargin200--bottom";case"300":return"util_stackMargin300--top util_stackMargin300--bottom";case"400":return"util_stackMargin400--top util_stackMargin400--bottom";case"600":return"util_stackMargin600--top util_stackMargin600--bottom";case"800":return"util_stackMargin800--top util_stackMargin800--bottom";default:return""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case"none":return`util_stackMarginnone--${this.margin}`;case"25":return`util_stackMargin25--${this.margin}`;case"50":return`util_stackMargin50--${this.margin}`;case"100":return`util_stackMargin100--${this.margin}`;case"150":return`util_stackMargin150--${this.margin}`;case"200":return`util_stackMargin200--${this.margin}`;case"300":return`util_stackMargin300--${this.margin}`;case"400":return`util_stackMargin400--${this.margin}`;case"600":return`util_stackMarginX600--${this.margin}`;case"800":return`util_stackMargin800--${this.margin}`;default:return""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",n=this.spacingDecision(this.size),o=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],l={heading:!0,[o]:!0};n&&n.split(" ").forEach(e=>{e.trim()&&(l[e.trim()]=!0)});const m=a(l),d=i(`h${s}`);return r`<${d} class="${m}" style="color: ${t(this.color?this.color:void 0)}"><slot></slot></${d}>`}render(){return this.template(this.level)}}class m{generateElementName(e,s){let a=e;return a+="-",a+=s.replace(/[.]/g,"_"),a}generateTag(e,s,a){const t=this.generateElementName(e,s),r=n`${i(t)}`;return customElements.get(t)||customElements.define(t,class extends a{}),r}}class d{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{})}closestElement(e,s=this,a=(s,t=s&&s.closest(e))=>s&&s!==document&&s!==window?t||a(s.getRootNode().host):null){return a(s)}handleComponentTagRename(e,s){const a=s.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,s){const a=s.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}}var g=e`:focus:not(:focus-visible){outline:3px solid transparent}:host{color:var(--ds-auro-banner-text-color)}:host([roundedBorder]) .disclaimer,:host([iconic]) .disclaimer,:host([billboard]) .disclaimer,:host([hero]) .disclaimer,:host([marquee]) .disclaimer{color:var(--ds-auro-banner-disclaimer-text-color)}:host([roundedBorder]) .title,:host([iconic]) .title,:host([billboard]) .title,:host([hero]) .title,:host([marquee]) .title{color:var(--ds-auro-banner-title-text-color)}:host([marquee][solid]),:host([onDark]),:host([appearance=inverse]){--ds-auro-banner-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([marquee][solid]) .title,:host([onDark]) .title,:host([appearance=inverse]) .title{--ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);color:var(--ds-auro-banner-title-text-color)}:host([iconic]) .roundIconBg{background:var(--ds-auro-banner-icon-container-color)}:host([marquee][solid]) .bannerWrapper{background-color:var(--ds-auro-banner-wrapper-container-color)}:host([roundedBorder]) .bannerWrapper,:host([roundedBorder][alignLeft]) .bannerWrapper{border-color:var(--ds-auro-banner-wrapper-border-color)}
2
+ `;class c extends s{constructor(){super(),this.level=1,this.typography="heading",this.runtimeUtils=new o}static get properties(){return{level:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},display:{type:String,reflect:!0},visualLevel:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},typography:{type:String,reflect:!0},color:{type:String,reflect:!0},margin:{type:String,reflect:!0},size:{type:String,reflect:!0}}}static get styles(){return[l]}static get displayClassMap(){return{800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){o.prototype.registerComponent(e,c)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header")}spacingDecision(e){if("both"===this.margin)switch(e){case"none":return"util_stackMarginnone--top util_stackMarginnone--bottom";case"25":return"util_stackMargin25--top util_stackMargin25--bottom";case"50":return"util_stackMargin50--top util_stackMargin50--bottom";case"100":return"util_stackMargin100--top util_stackMargin100--bottom";case"150":return"util_stackMargin150--top util_stackMargin150--bottom";case"200":return"util_stackMargin200--top util_stackMargin200--bottom";case"300":return"util_stackMargin300--top util_stackMargin300--bottom";case"400":return"util_stackMargin400--top util_stackMargin400--bottom";case"600":return"util_stackMargin600--top util_stackMargin600--bottom";case"800":return"util_stackMargin800--top util_stackMargin800--bottom";default:return""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case"none":return`util_stackMarginnone--${this.margin}`;case"25":return`util_stackMargin25--${this.margin}`;case"50":return`util_stackMargin50--${this.margin}`;case"100":return`util_stackMargin100--${this.margin}`;case"150":return`util_stackMargin150--${this.margin}`;case"200":return`util_stackMargin200--${this.margin}`;case"300":return`util_stackMargin300--${this.margin}`;case"400":return`util_stackMargin400--${this.margin}`;case"600":return`util_stackMarginX600--${this.margin}`;case"800":return`util_stackMargin800--${this.margin}`;default:return""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",n=this.spacingDecision(this.size),o=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],l={heading:!0,[o]:!0};n&&n.split(" ").forEach(e=>{e.trim()&&(l[e.trim()]=!0)});const m=a(l),d=i(`h${s}`);return r`<${d} class="${m}" style="color: ${t(this.color?this.color:void 0)}"><slot></slot></${d}>`}render(){return this.template(this.level)}}class m{generateElementName(e,s){let a=e;return a+="-",a+=s.replace(/[.]/g,"_"),a}generateTag(e,s,a){const t=this.generateElementName(e,s),r=n`${i(t)}`;return customElements.get(t)||customElements.define(t,class extends a{}),r}}class d{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{})}closestElement(e,s=this,a=(s,t=s&&s.closest(e))=>s&&s!==document&&s!==window?t||a(s.getRootNode().host):null){return a(s)}handleComponentTagRename(e,s){const a=s.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,s){const a=s.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}getSlotText(e,s){const a=e.shadowRoot?.querySelector(`slot[name="${s}"]`),t=(a?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim();return t||null}}var g=e`:focus:not(:focus-visible){outline:3px solid transparent}:host{color:var(--ds-auro-banner-text-color)}:host([roundedBorder]) .disclaimer,:host([iconic]) .disclaimer,:host([billboard]) .disclaimer,:host([hero]) .disclaimer,:host([marquee]) .disclaimer{color:var(--ds-auro-banner-disclaimer-text-color)}:host([roundedBorder]) .title,:host([iconic]) .title,:host([billboard]) .title,:host([hero]) .title,:host([marquee]) .title{color:var(--ds-auro-banner-title-text-color)}:host([marquee][solid]),:host([onDark]),:host([appearance=inverse]){--ds-auro-banner-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([marquee][solid]) .title,:host([onDark]) .title,:host([appearance=inverse]) .title{--ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);color:var(--ds-auro-banner-title-text-color)}:host([iconic]) .roundIconBg{background:var(--ds-auro-banner-icon-container-color)}:host([marquee][solid]) .bannerWrapper{background-color:var(--ds-auro-banner-wrapper-container-color)}:host([roundedBorder]) .bannerWrapper,:host([roundedBorder][alignLeft]) .bannerWrapper{border-color:var(--ds-auro-banner-wrapper-border-color)}
3
3
  `,p=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host([roundedBorder]) img,:host([iconic]) img,:host([hero]) img,:host([marquee]) img,:host([billboard]) img{display:block}:host([roundedBorder]) .bannerWrapper,:host([iconic]) .bannerWrapper,:host([hero]) .bannerWrapper,:host([marquee]) .bannerWrapper,:host([billboard]) .bannerWrapper{position:relative;overflow:hidden}:host([roundedBorder]) .action,:host([iconic]) .action,:host([hero]) .action,:host([marquee]) .action,:host([billboard]) .action{display:inline-block;margin:var(--ds-size-200, 1rem) 0}:host([roundedBorder]) .imageWrapper,:host([iconic]) .imageWrapper,:host([hero]) .imageWrapper,:host([marquee]) .imageWrapper,:host([billboard]) .imageWrapper{margin-bottom:var(--ds-size-200, 1rem);display:block}:host([roundedBorder]) .displayImage,:host([iconic]) .displayImage,:host([hero]) .displayImage,:host([marquee]) .displayImage,:host([billboard]) .displayImage{display:block;position:absolute;bottom:0}:host([roundedBorder]) .bodyWrapper,:host([iconic]) .bodyWrapper,:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper,:host([billboard]) .bodyWrapper{position:relative;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:var(--ds-size-400, 2rem) var(--ds-size-200, 1rem);overflow:hidden}@media screen and (min-width: 768px){:host([roundedBorder]) .bodyWrapper,:host([iconic]) .bodyWrapper,:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper,:host([billboard]) .bodyWrapper{padding:var(--ds-size-200, 1rem)}}:host([roundedBorder]) .title,:host([iconic]) .title,:host([hero]) .title,:host([marquee]) .title,:host([billboard]) .title{margin-bottom:var(--ds-size-200, 1rem)}:host([roundedBorder]) .description,:host([iconic]) .description,:host([hero]) .description,:host([marquee]) .description,:host([billboard]) .description{display:block}:host([roundedBorder]) .contentWrapper,:host([iconic]) .contentWrapper,:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper,:host([billboard]) .contentWrapper{margin-bottom:150px}@media screen and (min-width: 576px){:host([roundedBorder]) .contentWrapper,:host([iconic]) .contentWrapper,:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper,:host([billboard]) .contentWrapper{margin-bottom:0}}@media screen and (min-width: 576px){:host([billboard]){max-height:24rem}}:host([billboard]) .bodyWrapper{align-items:center;padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 576px){:host([billboard]) .bodyWrapper{padding:var(--ds-size-400, 2rem) 8rem}}@media screen and (min-width: 768px){:host([billboard]) .bodyWrapper{padding:var(--ds-size-400, 2rem) 10rem}}:host([billboard]) .imageWrapper{display:block;margin-bottom:var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host([billboard]) .contentWrapper{margin-bottom:0}}:host([hero]) .displayImage,:host([marquee]) .displayImage{position:static;overflow:hidden}:host([hero]) .displayImage::slotted(img),:host([marquee]) .displayImage::slotted(img){display:block}:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper{margin:0 auto}@media screen and (min-width: 576px){:host([hero]) .displayImage,:host([marquee]) .displayImage{max-width:50%;right:0;position:absolute}:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper{text-align:left;width:50%;padding-left:0}}:host([iconic]) .iconAbsolute{position:absolute}:host([iconic]) .iconContainer{display:flex;align-items:center;justify-content:center;position:relative;top:-1.25rem}:host([iconic]) .roundIconBg{width:7.5rem;height:7.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute}:host([iconic]) .displayImage{display:none}@media screen and (min-width: 576px){:host([iconic]) .displayImage{display:block;max-width:50%;right:0;position:absolute;overflow:hidden}}:host([iconic]) .displayImage::slotted(img){display:block}@media screen and (min-width: 576px){:host([iconic]) .description{padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-300, 1.5rem)}}:host([iconic]) .contentWrapper{margin:0 auto var(--ds-size-600, 3rem);padding-bottom:var(--ds-size-600, 3rem)}:host([iconic]) .bodyWrapper{text-align:left;padding:var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) 0}@media screen and (min-width: 576px){:host([iconic]) .bodyWrapper{width:50%;padding-left:0}}:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-300, 1.5rem)}@media screen and (min-width: 768px){:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-400, 2rem)}}@media screen and (min-width: 1024px){:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-600, 3rem)}}:host([roundedBorder]) .bannerWrapper,:host([roundedBorder][alignLeft]) .bannerWrapper{border-width:1px;border-style:solid;border-radius:5px}:host([roundedBorder]) .contentWrapper,:host([roundedBorder][alignLeft]) .contentWrapper{margin:0 auto}@media screen and (min-width: 576px){:host([roundedBorder]) .contentWrapper,:host([roundedBorder][alignLeft]) .contentWrapper{flex-basis:70%;flex-grow:1}}:host([roundedBorder]) .action,:host([roundedBorder][alignLeft]) .action{margin:0 0 1rem}:host([roundedBorder]) .description p,:host([roundedBorder][alignLeft]) .description p{margin:0}:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{align-items:center;padding:var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{flex-direction:row}}@media screen and (min-width: 768px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{padding:var(--ds-size-300, 1.5rem)}}@media screen and (min-width: 1024px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{padding:var(--ds-size-400, 2rem)}}@media screen and (min-width: 576px){:host([roundedBorder]) .imageWrapper,:host([roundedBorder][alignLeft]) .imageWrapper{flex-basis:30%;display:flex;margin-right:var(--ds-size-400, 2rem);margin-bottom:0}}:host([alignRight]) .bodyWrapper{align-items:flex-end;text-align:right}:host([alignLeft]) .bodyWrapper{align-items:flex-start;text-align:left}@media screen and (min-width: 576px){:host([slim]) .bodyWrapper{padding:var(--ds-size-400, 2rem);min-height:unset}}@media screen and (min-width: 768px){:host([slim]) .bodyWrapper{padding:var(--ds-size-400, 2rem) var(--ds-size-600, 3rem)}}
4
4
  `,h=e`:host{--ds-auro-banner-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-banner-disclaimer-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-accent1, #265688);--ds-auro-banner-icon-container-color: var(--ds-basic-color-surface-neutral-medium, #c5c5c5);--ds-auro-banner-wrapper-container-color: var(--ds-basic-color-surface-inverse, #00274a);--ds-auro-banner-wrapper-border-color: var(--ds-basic-color-border-default, #959595)}
5
- `;class y extends s{constructor(){super(),this.appearance="default",this.hero=!1,this.iconic=!1,this.marquee=!1,this.roundedBorder=!1;const e=new m;this.headerTag=e.generateTag("auro-header","5.0.0",c),this.runtimeUtils=new d}static register(e="auro-banner"){d.prototype.registerComponent(e,y)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-banner");const e=this.shadowRoot.querySelectorAll(".bannerWrapper slot");for(const s of e)this.slt=s.assignedNodes(),0===this.slt.length&&s.removeAttribute("class")}static get properties(){return{...s.properties,appearance:{type:String,reflect:!0},hero:{type:Boolean,reflect:!0},iconic:{type:Boolean,reflect:!0},marquee:{type:Boolean,reflect:!0},roundedBorder:{type:Boolean,reflect:!0},iconbg:{type:String}}}static get styles(){return[p,g,h]}render(){return r`
5
+ `;class y extends s{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.appearance="default",this.hero=!1,this.iconic=!1,this.marquee=!1,this.roundedBorder=!1;const e=new m;this.headerTag=e.generateTag("auro-header","5.0.0",c),this.runtimeUtils=new d}static register(e="auro-banner"){d.prototype.registerComponent(e,y)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-banner");const e=this.shadowRoot.querySelectorAll(".bannerWrapper slot");for(const s of e)this.slt=s.assignedNodes(),0===this.slt.length&&s.removeAttribute("class")}static get properties(){return{...s.properties,alignLeft:{type:Boolean,reflect:!0},alignRight:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},billboard:{type:Boolean,reflect:!0},hero:{type:Boolean,reflect:!0},iconbg:{type:String},iconic:{type:Boolean,reflect:!0},marquee:{type:Boolean,reflect:!0},onDark:{type:Boolean,reflect:!0},roundedBorder:{type:Boolean,reflect:!0},slim:{type:Boolean,reflect:!0},solid:{type:Boolean,reflect:!0}}}static get styles(){return[p,g,h]}render(){return r`
6
6
  <div class="bannerWrapper">
7
7
  ${this.roundedBorder?r``:r`
8
8
  <slot name="displayImage" class="displayImage"></slot>`}