@aurodesignsystem-dev/auro-sidenav 0.0.0-pr72.1 → 0.0.0-pr76.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.
- package/custom-elements.json +12 -0
- package/demo/api.md +35 -1
- package/demo/auro-sidenavsection.min.js +9 -2
- package/dist/{auro-sidenavsection-D8s_3-Vr.js → auro-sidenavsection-C7L7K2Ru.js} +7 -2
- package/dist/index.d.ts +7 -2
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -33,6 +33,10 @@
|
|
|
33
33
|
{
|
|
34
34
|
"description": "Default slot of the sidenav. Please construct using auro-sidenavitems and auro-sidenavsections.",
|
|
35
35
|
"name": ""
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"description": "Defines what to use as the aria-label of the sidenav.",
|
|
39
|
+
"name": "ariaLabel"
|
|
36
40
|
}
|
|
37
41
|
],
|
|
38
42
|
"members": [
|
|
@@ -1367,6 +1371,14 @@
|
|
|
1367
1371
|
"name": "AuroSideNav",
|
|
1368
1372
|
"module": "src/auro-sidenav.js"
|
|
1369
1373
|
}
|
|
1374
|
+
},
|
|
1375
|
+
{
|
|
1376
|
+
"description": "Defines what to use as the aria-label of the sidenav.",
|
|
1377
|
+
"name": "ariaLabel",
|
|
1378
|
+
"inheritedFrom": {
|
|
1379
|
+
"name": "AuroSideNav",
|
|
1380
|
+
"module": "src/auro-sidenav.js"
|
|
1381
|
+
}
|
|
1370
1382
|
}
|
|
1371
1383
|
],
|
|
1372
1384
|
"attributes": [
|
package/demo/api.md
CHANGED
|
@@ -23,7 +23,8 @@ register | `name` (string) - The name of element that you want to register to. |
|
|
|
23
23
|
| Name | Description |
|
|
24
24
|
| --- | --- |
|
|
25
25
|
heading | Defines what to use as the header of the sidenav.
|
|
26
|
-
(default) | Default slot of the sidenav. Please construct using auro-sidenavitems and auro-sidenavsections.
|
|
26
|
+
(default) | Default slot of the sidenav. Please construct using auro-sidenavitems and auro-sidenavsections.
|
|
27
|
+
ariaLabel | Defines what to use as the aria-label of the sidenav.
|
|
27
28
|
|
|
28
29
|
---
|
|
29
30
|
|
|
@@ -146,6 +147,39 @@ The `heading` slot defines what to use as the header of the sidenav.
|
|
|
146
147
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
147
148
|
</auro-accordion>
|
|
148
149
|
|
|
150
|
+
#### ariaLabel
|
|
151
|
+
|
|
152
|
+
The `ariaLabel` slot defines what to use as the aria-label of the sidenav.
|
|
153
|
+
|
|
154
|
+
**Note:** Do not use the `aria-label` attribute on the `auro-sidenav` element itself. This will be ignored in favor of the `ariaLabel` slot.
|
|
155
|
+
|
|
156
|
+
<div class="exampleWrapper">
|
|
157
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/ariaLabelSlot.html) -->
|
|
158
|
+
<!-- The below content is automatically added from ../apiExamples/ariaLabelSlot.html -->
|
|
159
|
+
<auro-sidenav static>
|
|
160
|
+
<span slot="ariaLabel">History of Alaska Airlines</span>
|
|
161
|
+
<auro-sidenavitem href="/content/about-us/history">Historical overview</auro-sidenavitem>
|
|
162
|
+
<auro-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</auro-sidenavitem>
|
|
163
|
+
<auro-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</auro-sidenavitem>
|
|
164
|
+
</auro-sidenav>
|
|
165
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
166
|
+
</div>
|
|
167
|
+
<auro-accordion alignRight>
|
|
168
|
+
<span slot="trigger">See code</span>
|
|
169
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/ariaLabelSlot.html) -->
|
|
170
|
+
<!-- The below code snippet is automatically added from ../apiExamples/ariaLabelSlot.html -->
|
|
171
|
+
|
|
172
|
+
```html
|
|
173
|
+
<auro-sidenav static>
|
|
174
|
+
<span slot="ariaLabel">History of Alaska Airlines</span>
|
|
175
|
+
<auro-sidenavitem href="/content/about-us/history">Historical overview</auro-sidenavitem>
|
|
176
|
+
<auro-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</auro-sidenavitem>
|
|
177
|
+
<auro-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</auro-sidenavitem>
|
|
178
|
+
</auro-sidenav>
|
|
179
|
+
```
|
|
180
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
181
|
+
</auro-accordion>
|
|
182
|
+
|
|
149
183
|
### Theme Support
|
|
150
184
|
|
|
151
185
|
The component may be restyled using the following code sample and changing the values of the following token(s).
|
|
@@ -317,6 +317,7 @@ var tokensCss = i$5`:host{--ds-auro-sidenav-text-color: var(--ds-basic-color-tex
|
|
|
317
317
|
* side of a page to navigate to separate pages or different sections within the same page.
|
|
318
318
|
* @slot heading - Defines what to use as the header of the sidenav.
|
|
319
319
|
* @slot - Default slot of the sidenav. Please construct using auro-sidenavitems and auro-sidenavsections.
|
|
320
|
+
* @slot ariaLabel - Defines what to use as the aria-label of the sidenav.
|
|
320
321
|
*/
|
|
321
322
|
|
|
322
323
|
// build the component class
|
|
@@ -369,7 +370,6 @@ class AuroSideNav extends i$2 {
|
|
|
369
370
|
connectedCallback() {
|
|
370
371
|
super.connectedCallback();
|
|
371
372
|
this.setAttribute("role", "navigation");
|
|
372
|
-
this.setAttribute("aria-label", "Main");
|
|
373
373
|
this.classList.add("body-lg");
|
|
374
374
|
}
|
|
375
375
|
|
|
@@ -479,6 +479,8 @@ class AuroSideNav extends i$2 {
|
|
|
479
479
|
// Add the tag name as an attribute if it is different than the component name
|
|
480
480
|
this.runtimeUtils.handleComponentTagRename(this, "auro-sidenav");
|
|
481
481
|
|
|
482
|
+
this.setAttribute("aria-label", this.runtimeUtils.getSlotText(this, "ariaLabel") || "Main");
|
|
483
|
+
|
|
482
484
|
this.handleSlotChange();
|
|
483
485
|
this.addEventListener("keydown", this.handleKeyDown);
|
|
484
486
|
this.addEventListener("mousedown", this.handleMouseDown);
|
|
@@ -557,7 +559,12 @@ class AuroSideNav extends i$2 {
|
|
|
557
559
|
</${this.accordionTag}>
|
|
558
560
|
`;
|
|
559
561
|
|
|
560
|
-
return u$2
|
|
562
|
+
return u$2`
|
|
563
|
+
<!-- Hidden slot for aria-label -->
|
|
564
|
+
<slot name="ariaLabel" hidden @slotchange=${this.requestUpdate}></slot>
|
|
565
|
+
|
|
566
|
+
${this.static ? sidebarContent : sidebarContentCollapsable}
|
|
567
|
+
`;
|
|
561
568
|
}
|
|
562
569
|
}
|
|
563
570
|
|
|
@@ -117,7 +117,7 @@ import{css as e,LitElement as t,nothing as s,html as a}from"lit";import{classMap
|
|
|
117
117
|
`}};class Y{generateElementName(e,t){let s=e;return s+="-",s+=t.replace(/[.]/g,"_"),s}generateTag(e,t,s){const a=this.generateElementName(e,t),o=l`${n(a)}`;return customElements.get(a)||customElements.define(a,class extends s{}),o}}class Z{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,s=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,!0)}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}getSlotText(e,t){const s=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(s?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var ee=e`:focus:not(:focus-visible){outline:3px solid transparent}:host{color:var(--ds-auro-sidenav-text-color)}
|
|
118
118
|
`,te=e`:focus:not(:focus-visible){outline:3px solid transparent}.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:inline-block;width:100%;padding:0;margin:0;vertical-align:middle}:host ::slotted([slot=heading]){display:block;padding:0 0 var(--ds-size-200, 1rem) 0}
|
|
119
119
|
`,se=e`:host{--ds-auro-sidenav-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-sidenavitem-border-bottom-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, .15));--ds-auro-sidenavitem-border-left-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-sidenavitem-icon-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-sidenavsection-border-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, .15));--ds-auro-sidenavsection-icon-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-sidenavsection-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-sidenavsection-trigger-background-hover-color: var(--ds-advanced-color-state-background-hover, #f2f2f2);--ds-auro-sidenavsection-trigger-border-color: transparent}
|
|
120
|
-
`;class ae extends t{constructor(){super();const e=new Y;this.accordionTag=e.generateTag("auro-accordion","6.1.0",Q),this.runtimeUtils=new Z}static get properties(){return{static:{type:Boolean,reflect:!0}}}static register(e="auro-sidenav"){Z.prototype.registerComponent(e,ae)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","navigation"),this.
|
|
120
|
+
`;class ae extends t{constructor(){super();const e=new Y;this.accordionTag=e.generateTag("auro-accordion","6.1.0",Q),this.runtimeUtils=new Z}static get properties(){return{static:{type:Boolean,reflect:!0}}}static register(e="auro-sidenav"){Z.prototype.registerComponent(e,ae)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","navigation"),this.classList.add("body-lg")}static get styles(){return[te,ee,se]}handleSlotChange(){!function e(t,s){for(const a of t.children)a.tagName.includes("ITEM")?(a.setAttribute("tier",s),s>0?a.classList.add("body-default"):a.classList.add("body-lg"),a.hasAttribute("href")||a.setAttribute("role","button")):a.tagName.includes("SECTION")&&(a.setAttribute("chevron",!0),a.setAttribute("fluid",!0),e(a,s+1))}(this,0),this.initItems()}handleMouseDown(e){const t=e.target;"auro-sidenavitem"===t.tagName.toLowerCase()&&(t.hasAttribute("href")||this.selectItem(t))}handleKeyDown(e){const t=e.target;if("Enter"===e.key){if("auro-sidenavitem"!==t.tagName.toLowerCase())return;if(t.hasAttribute("href"))return;this.selectItem(t)}}initItems(){this.items=Array.from(this.querySelectorAll("auro-sidenavitem, [auro-sidenavitem]"))}selectItem(e){for(const e of this.items)e.removeAttribute("selected");e.setAttribute("selected","")}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-sidenav"),this.setAttribute("aria-label",this.runtimeUtils.getSlotText(this,"ariaLabel")||"Main"),this.handleSlotChange(),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("mousedown",this.handleMouseDown)}async updated(e){if(super.updated(e),await this.updateComplete,!this.static){const e=this.shadowRoot.getElementById("accordion");if(e){const t=e.shadowRoot.querySelector("div.componentWrapper > #accordionContent");if(!t)return;t.addEventListener("toggleExpanded",s=>{const a=s.target.shadowRoot.querySelector("div.componentWrapper > #accordionContent");t.style.height="auto";const o=()=>{e.handleContentSlotChanges(),a.removeEventListener("transitionend",o)};a.addEventListener("transitionend",o)})}}}render(){const e=i`
|
|
121
121
|
<span><slot class="heading-2xs" name="heading"></slot></span>
|
|
122
122
|
<slot @slotchange="${this.handleSlotChange}"></slot>
|
|
123
123
|
`,t=i`
|
|
@@ -126,7 +126,12 @@ import{css as e,LitElement as t,nothing as s,html as a}from"lit";import{classMap
|
|
|
126
126
|
<!-- Listen for inner accordions -->
|
|
127
127
|
<slot @slotchange="${this.handleSlotChange}"></slot>
|
|
128
128
|
</${this.accordionTag}>
|
|
129
|
-
`;return i
|
|
129
|
+
`;return i`
|
|
130
|
+
<!-- Hidden slot for aria-label -->
|
|
131
|
+
<slot name="ariaLabel" hidden @slotchange=${this.requestUpdate}></slot>
|
|
132
|
+
|
|
133
|
+
${this.static?e:t}
|
|
134
|
+
`}}let oe=class{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,s=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,!0)}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}},re=class extends t{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(e){return e?"true":"false"}};const ie=new Map,ne=(e,t={})=>{const s=t.responseParser||(e=>e.text());return ie.has(e)||ie.set(e,fetch(e).then(s)),ie.get(e)};var le=e`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, .25rem);line-height:1.8}
|
|
130
135
|
`;let de=class extends re{constructor(){super(),this.onDark=!1,this.appearance="default"}static get properties(){return{...re.properties,onDark:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},svg:{attribute:!1,reflect:!0}}}static get styles(){return le}async fetchIcon(e,t){let s="";return s="logos"===e?await ne(`${this.uri}/${e}/${t}.svg`):await ne(`${this.uri}/icons/${e}/${t}.svg`),(new DOMParser).parseFromString(s,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const e=await this.fetchIcon(this.category,this.name);if(e)this.svg=e;else if(!e){const e=(new DOMParser).parseFromString('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>',"text/html");this.svg=e.body.firstChild}}}catch(e){this.svg=void 0}}};e`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
131
136
|
`;var ce=e`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
132
137
|
`,he=e`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
package/dist/index.d.ts
CHANGED
|
@@ -124,7 +124,7 @@ class u{generateElementName(e,t){let s=e;return s+="-",s+=t.replace(/[.]/g,"_"),
|
|
|
124
124
|
`}};class Y{generateElementName(e,t){let s=e;return s+="-",s+=t.replace(/[.]/g,"_"),s}generateTag(e,t,s){const a=this.generateElementName(e,t),o=literal`${unsafeStatic(a)}`;return customElements.get(a)||customElements.define(a,class extends s{}),o}}class Z{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,s=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,true);}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}getSlotText(e,t){const s=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return (s?.assignedNodes({flatten:true})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var ee=css`:focus:not(:focus-visible){outline:3px solid transparent}:host{color:var(--ds-auro-sidenav-text-color)}
|
|
125
125
|
`,te=css`:focus:not(:focus-visible){outline:3px solid transparent}.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:inline-block;width:100%;padding:0;margin:0;vertical-align:middle}:host ::slotted([slot=heading]){display:block;padding:0 0 var(--ds-size-200, 1rem) 0}
|
|
126
126
|
`,se=css`:host{--ds-auro-sidenav-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-sidenavitem-border-bottom-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, .15));--ds-auro-sidenavitem-border-left-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-sidenavitem-icon-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-sidenavsection-border-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, .15));--ds-auro-sidenavsection-icon-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-sidenavsection-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-sidenavsection-trigger-background-hover-color: var(--ds-advanced-color-state-background-hover, #f2f2f2);--ds-auro-sidenavsection-trigger-border-color: transparent}
|
|
127
|
-
`;class ae extends LitElement{constructor(){super();const e=new Y;this.accordionTag=e.generateTag("auro-accordion","6.1.0",Q),this.runtimeUtils=new Z;}static get properties(){return {static:{type:Boolean,reflect:true}}}static register(e="auro-sidenav"){Z.prototype.registerComponent(e,ae);}connectedCallback(){super.connectedCallback(),this.setAttribute("role","navigation"),this.
|
|
127
|
+
`;class ae extends LitElement{constructor(){super();const e=new Y;this.accordionTag=e.generateTag("auro-accordion","6.1.0",Q),this.runtimeUtils=new Z;}static get properties(){return {static:{type:Boolean,reflect:true}}}static register(e="auro-sidenav"){Z.prototype.registerComponent(e,ae);}connectedCallback(){super.connectedCallback(),this.setAttribute("role","navigation"),this.classList.add("body-lg");}static get styles(){return [te,ee,se]}handleSlotChange(){!function e(t,s){for(const a of t.children)a.tagName.includes("ITEM")?(a.setAttribute("tier",s),s>0?a.classList.add("body-default"):a.classList.add("body-lg"),a.hasAttribute("href")||a.setAttribute("role","button")):a.tagName.includes("SECTION")&&(a.setAttribute("chevron",true),a.setAttribute("fluid",true),e(a,s+1));}(this,0),this.initItems();}handleMouseDown(e){const t=e.target;"auro-sidenavitem"===t.tagName.toLowerCase()&&(t.hasAttribute("href")||this.selectItem(t));}handleKeyDown(e){const t=e.target;if("Enter"===e.key){if("auro-sidenavitem"!==t.tagName.toLowerCase())return;if(t.hasAttribute("href"))return;this.selectItem(t);}}initItems(){this.items=Array.from(this.querySelectorAll("auro-sidenavitem, [auro-sidenavitem]"));}selectItem(e){for(const e of this.items)e.removeAttribute("selected");e.setAttribute("selected","");}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-sidenav"),this.setAttribute("aria-label",this.runtimeUtils.getSlotText(this,"ariaLabel")||"Main"),this.handleSlotChange(),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("mousedown",this.handleMouseDown);}async updated(e){if(super.updated(e),await this.updateComplete,!this.static){const e=this.shadowRoot.getElementById("accordion");if(e){const t=e.shadowRoot.querySelector("div.componentWrapper > #accordionContent");if(!t)return;t.addEventListener("toggleExpanded",s=>{const a=s.target.shadowRoot.querySelector("div.componentWrapper > #accordionContent");t.style.height="auto";const o=()=>{e.handleContentSlotChanges(),a.removeEventListener("transitionend",o);};a.addEventListener("transitionend",o);});}}}render(){const e=html`
|
|
128
128
|
<span><slot class="heading-2xs" name="heading"></slot></span>
|
|
129
129
|
<slot @slotchange="${this.handleSlotChange}"></slot>
|
|
130
130
|
`,t=html`
|
|
@@ -133,7 +133,12 @@ class u{generateElementName(e,t){let s=e;return s+="-",s+=t.replace(/[.]/g,"_"),
|
|
|
133
133
|
<!-- Listen for inner accordions -->
|
|
134
134
|
<slot @slotchange="${this.handleSlotChange}"></slot>
|
|
135
135
|
</${this.accordionTag}>
|
|
136
|
-
`;return html
|
|
136
|
+
`;return html`
|
|
137
|
+
<!-- Hidden slot for aria-label -->
|
|
138
|
+
<slot name="ariaLabel" hidden @slotchange=${this.requestUpdate}></slot>
|
|
139
|
+
|
|
140
|
+
${this.static?e:t}
|
|
141
|
+
`}}let oe=class{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,s=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,true);}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}},re=class extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(e){return e?"true":"false"}};const ie=new Map,ne=(e,t={})=>{const s=t.responseParser||(e=>e.text());return ie.has(e)||ie.set(e,fetch(e).then(s)),ie.get(e)};var le=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, .25rem);line-height:1.8}
|
|
137
142
|
`;let de=class extends re{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...re.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return le}async fetchIcon(e,t){let s="";return s="logos"===e?await ne(`${this.uri}/${e}/${t}.svg`):await ne(`${this.uri}/icons/${e}/${t}.svg`),(new DOMParser).parseFromString(s,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const e=await this.fetchIcon(this.category,this.name);if(e)this.svg=e;else if(!e){const e=(new DOMParser).parseFromString('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>',"text/html");this.svg=e.body.firstChild;}}}catch(e){this.svg=void 0;}}};css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
138
143
|
`;var ce=css`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
139
144
|
`,he=css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroSideNav,a as AuroSideNavItem,b as AuroSideNavSection}from"./auro-sidenavsection-
|
|
1
|
+
export{A as AuroSideNav,a as AuroSideNavItem,b as AuroSideNavSection}from"./auro-sidenavsection-C7L7K2Ru.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/unsafe-html.js";import"lit/static-html.js";import"lit/directives/if-defined.js";import"lit/directives/ref.js";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as i,a as t,b as s}from"./auro-sidenavsection-
|
|
1
|
+
import{A as i,a as t,b as s}from"./auro-sidenavsection-C7L7K2Ru.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/unsafe-html.js";import"lit/static-html.js";import"lit/directives/if-defined.js";import"lit/directives/ref.js";i.register(),t.register(),s.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-sidenav",
|
|
10
|
-
"version": "0.0.0-
|
|
10
|
+
"version": "0.0.0-pr76.0",
|
|
11
11
|
"description": "auro-sidenav HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|