@aurodesignsystem/auro-accordion 6.0.0-rc-206.1 → 6.0.0-rc-216.1

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/demo/api.min.js CHANGED
@@ -2,22 +2,34 @@ import { A as AuroAccordion, a as AuroAccordionGroup } from './auro-accordion.mi
2
2
 
3
3
  function expandedExample() {
4
4
  const expandedExampleElem = document.querySelector(
5
- "#auroaccordionExpandedExample",
5
+ "#accordionExpandedExample",
6
6
  );
7
7
 
8
8
  document
9
- .querySelector("#auroaccordionExpandedExampleBtnTrue")
9
+ .querySelector("#accordionExpandedExampleBtnTrue")
10
10
  .addEventListener("click", () => {
11
11
  expandedExampleElem.expanded = true;
12
12
  });
13
13
 
14
14
  document
15
- .querySelector("#auroaccordionExpandedExampleBtnFalse")
15
+ .querySelector("#accordionExpandedExampleBtnFalse")
16
16
  .addEventListener("click", () => {
17
17
  expandedExampleElem.expanded = false;
18
18
  });
19
19
  }
20
20
 
21
+ function toggleExample() {
22
+ const expandedExampleElem = document.querySelector(
23
+ "#accordionToggleExample",
24
+ );
25
+
26
+ document
27
+ .querySelector("#accordionToggleExampleBtn")
28
+ .addEventListener("click", () => {
29
+ expandedExampleElem.toggle();
30
+ });
31
+ }
32
+
21
33
  AuroAccordion.register();
22
34
  AuroAccordionGroup.register();
23
35
 
@@ -27,6 +39,7 @@ function initExamples(initCount) {
27
39
 
28
40
  try {
29
41
  expandedExample();
42
+ toggleExample();
30
43
  } catch {
31
44
  if (initCount <= 20) {
32
45
  // setTimeout handles issue where content is sometimes loaded after the functions get called
@@ -183,7 +183,7 @@ var chevronUp = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"
183
183
  * SPDX-License-Identifier: BSD-3-Clause
184
184
  */const o=o=>o??E;
185
185
 
186
- let p$1 = class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}};var u$1='<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>';let m$1 = class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}};const g$1=new Map,f$1=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g$1.has(t)||g$1.set(t,fetch(t).then(e)),g$1.get(t)};var w$1=i$5`: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}
186
+ let p$1 = class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}};var u$1='<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>';let m$1 = class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}};const g$1=new Map,f$1=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g$1.has(t)||g$1.set(t,fetch(t).then(e)),g$1.get(t)};var w$1=i$5`: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;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;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
187
187
  `;let z$1 = class z extends m$1{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m$1.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w$1}async fetchIcon(t,a){let e="";e="logos"===t?await f$1(`${this.uri}/${t}/${a}.svg`):await f$1(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u$1,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}};i$5`.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}
188
188
  `;var y$1=i$5`: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)}
189
189
  `;var k$1=i$5`: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)}
@@ -331,12 +331,9 @@ class AuroAccordionButton extends T {
331
331
 
332
332
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
333
333
  /**
334
- * Auro-accordion provides users a way to have collapsible content on a page.
335
- * Use auro-accordion-group if you want to have auto closing accordion components when others are selected.
336
- *
334
+ * The `auro-accordion-group` element allows users to group accordions together and give them an auto closing functionality when others are selected.
335
+ * @customElement auro-accordion-group
337
336
  */
338
-
339
- // build the component class
340
337
  class AuroAccordionGroup extends i$2 {
341
338
  constructor() {
342
339
  super();
@@ -354,6 +351,14 @@ class AuroAccordionGroup extends i$2 {
354
351
  return {
355
352
  // ...super.properties,
356
353
 
354
+ /**
355
+ * If set, the whole accordion inside the group are disabled and have reduced opacity.
356
+ */
357
+ disabled: {
358
+ type: Boolean,
359
+ reflect: true,
360
+ },
361
+
357
362
  /**
358
363
  * If set, emphasis styles will be applied to the auro-accordions.
359
364
  */
@@ -363,26 +368,19 @@ class AuroAccordionGroup extends i$2 {
363
368
  },
364
369
 
365
370
  /**
366
- * Sets accordion variant option. Possible values are: `sm`, `lg`.
371
+ * Sets accordion variant option.
372
+ * @type {'sm' | 'lg'}
367
373
  */
368
374
  variant: {
369
375
  type: String,
370
376
  reflect: true,
371
377
  },
372
-
373
- /**
374
- * If set, the whole accordion inside the group are disabled and have reduced opacity.
375
- */
376
- disabled: {
377
- type: Boolean,
378
- reflect: true,
379
- },
380
378
  };
381
379
  }
382
380
 
383
381
  /**
384
382
  * This will register this element with the browser.
385
- * @param {string} [name="auro-accordion-group"] - The name of element that you want to register to.
383
+ * @param {string} [name="auro-accordion-group"] - The name of the element that you want to register.
386
384
  *
387
385
  * @example
388
386
  * AuroAccordionGroup.register("custom-accordion-button") // this will register this element to <custom-accordion-group/>
@@ -407,8 +405,9 @@ class AuroAccordionGroup extends i$2 {
407
405
  }
408
406
 
409
407
  /**
410
- * Updates the disabled state of all child <auro-accordion> elements
411
- * to match the disabled state of the <auro-accordion-group> element.
408
+ * Updates the disabled state of all child `<auro-accordion>` elements
409
+ * to match the disabled state of the `<auro-accordion-group>` element.
410
+ * @private
412
411
  */
413
412
  updateDisabledState() {
414
413
  const accordions = this.querySelectorAll("auro-accordion");
@@ -490,7 +489,7 @@ class AuroAccordionGroup extends i$2 {
490
489
  }
491
490
  }
492
491
 
493
- var iconVersion = '9.1.0';
492
+ var iconVersion = '9.1.1';
494
493
 
495
494
  var colorCss = i$5`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host([disabled]){--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-disabled, v.\$ds-basic-color-texticon-disabled)}:host([disabled]) [auro-icon]{color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:focus){--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color: var(--ds-basic-color-border-subtle, #dddddd)}
496
495
  `;
@@ -507,8 +506,8 @@ var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color: transparent;
507
506
 
508
507
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
509
508
  /**
510
- * Auro-accordion provides users a way to have collapsible content on a page.
511
- * Use auro-accordion-group if you want to have auto closing accordion components when others are selected.
509
+ * The `auro-accordion` element provides users a way to have collapsible content on a page.
510
+ * @customElement auro-accordion
512
511
  *
513
512
  * @slot - Default slot for the accordion content.
514
513
  * @slot trigger - Defines the content of the trigger element.
@@ -569,50 +568,52 @@ class AuroAccordion extends i$2 {
569
568
  },
570
569
 
571
570
  /**
572
- * If set, the accordion is expanded.
571
+ * Sets chevron variant option.
572
+ * @type {'none' | 'right'}
573
573
  */
574
- expanded: {
575
- type: Boolean,
574
+ chevron: {
575
+ type: String,
576
576
  reflect: true,
577
577
  },
578
578
 
579
579
  /**
580
- * If set, emphasis styles will be applied to the auro-accordions.
580
+ * If set, the accordion is disabled and have reduced opacity.
581
581
  */
582
- emphasis: {
582
+ disabled: {
583
583
  type: Boolean,
584
584
  reflect: true,
585
585
  },
586
586
 
587
587
  /**
588
- * Attribute will be set on accordion when it appears in an accordion group.
588
+ * If set, emphasis styles will be applied to the auro-accordion. This feature is best used on the auro-accordion-group component.
589
589
  */
590
- grouped: {
590
+ emphasis: {
591
591
  type: Boolean,
592
592
  reflect: true,
593
593
  },
594
594
 
595
595
  /**
596
- * Sets chevron variant option. Possible values are: `none`, `right`.
596
+ * If set, the accordion is expanded.
597
597
  */
598
- chevron: {
599
- type: String,
598
+ expanded: {
599
+ type: Boolean,
600
600
  reflect: true,
601
601
  },
602
602
 
603
603
  /**
604
- * Sets accordion variant option. Possible values are: `sm`, `lg`.
604
+ * Attribute will be set on accordion when it appears in an accordion group.
605
605
  */
606
- variant: {
607
- type: String,
606
+ grouped: {
607
+ type: Boolean,
608
608
  reflect: true,
609
609
  },
610
-
610
+
611
611
  /**
612
- * If set, the accordion is disabled and have reduced opacity.
612
+ * Sets accordion variant option.
613
+ * @type {'sm' | 'lg'}
613
614
  */
614
- disabled: {
615
- type: Boolean,
615
+ variant: {
616
+ type: String,
616
617
  reflect: true,
617
618
  },
618
619
  };
@@ -624,7 +625,7 @@ class AuroAccordion extends i$2 {
624
625
 
625
626
  /**
626
627
  * This will register this element with the browser.
627
- * @param {string} [name="auro-accordion"] - The name of element that you want to register to.
628
+ * @param {string} [name="auro-accordion"] - The name of the element that you want to register.
628
629
  *
629
630
  * @example
630
631
  * AuroAccordion.register("custom-accordion") // this will register this element to <custom-accordion/>
package/demo/index.md CHANGED
@@ -1,18 +1,18 @@
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
- # accordion
8
-
7
+ # Accordion
8
+
9
9
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
10
  <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
11
  `<auro-accordion>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of toggling the visibility of large content section by clicking on a smaller trigger element.
12
12
  <!-- AURO-GENERATED-CONTENT:END -->
13
13
 
14
- ## auro-accordion use cases
15
-
14
+ ## Use Cases
15
+
16
16
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
17
  <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
18
  The `<auro-accordion>` element should be used in situations where users may:
@@ -23,6 +23,8 @@ The `<auro-accordion>` element should be used in situations where users may:
23
23
 
24
24
  ## Example(s)
25
25
 
26
+ ### Basic
27
+
26
28
  <div class="exampleWrapper">
27
29
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
28
30
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
@@ -67,9 +69,12 @@ The `<auro-accordion>` element should be used in situations where users may:
67
69
  ```
68
70
  <!-- AURO-GENERATED-CONTENT:END -->
69
71
  </auro-accordion>
72
+
73
+ ### Accordion Group
74
+
70
75
  <div class="exampleWrapper">
71
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroup.html) -->
72
- <!-- The below content is automatically added from ./../apiExamples/accordionGroup.html -->
76
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordion-group.html) -->
77
+ <!-- The below content is automatically added from ./../apiExamples/accordion-group.html -->
73
78
  <auro-accordion-group>
74
79
  <auro-accordion>
75
80
  <span slot="trigger">Trigger</span>
@@ -121,8 +126,8 @@ The `<auro-accordion>` element should be used in situations where users may:
121
126
  </div>
122
127
  <auro-accordion alignRight>
123
128
  <span slot="trigger">See code</span>
124
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroup.html) -->
125
- <!-- The below code snippet is automatically added from ./../apiExamples/accordionGroup.html -->
129
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordion-group.html) -->
130
+ <!-- The below code snippet is automatically added from ./../apiExamples/accordion-group.html -->
126
131
 
127
132
  ```html
128
133
  <auro-accordion-group>
@@ -1,4 +1,4 @@
1
- import{css as e,html as t,LitElement as s,nothing as o}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{unsafeHTML as r}from"lit/directives/unsafe-html.js";import{unsafeStatic as i,literal as n,html as l}from"lit/static-html.js";import{ifDefined as d}from"lit/directives/if-defined.js";class c{generateElementName(e,t){let s=e;return s+="-",s+=t.replace(/[.]/g,"_"),s}generateTag(e,t,s){const o=this.generateElementName(e,t),a=n`${i(o)}`;return customElements.get(o)||customElements.define(o,class extends s{}),a}}class h{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,s=(t,o=t&&t.closest(e))=>t&&t!==document&&t!==window?o||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 u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="chevron-down__desc" class="ico_squareLarge" 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="chevron-down__desc">Directional indicator; down.</desc><path d="m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084z"/></svg>',p='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="chevron-up__desc" class="ico_squareLarge" 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="chevron-up__desc">Directional indicator; up.</desc><path d="m17.603 14.343-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 9.957l-4.47 4.47a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.976l.073-.085 4.823-4.823a1 1 0 0 1 1.414 0l4.823 4.823a.75.75 0 0 1 .073.977"/></svg>';let b=class{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,s=(t,o=t&&t.closest(e))=>t&&t!==document&&t!==window?o||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)}};let g=class extends s{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 m=new Map,v=(e,t={})=>{const s=t.responseParser||(e=>e.text());return m.has(e)||m.set(e,fetch(e).then(s)),m.get(e)};var f=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}
1
+ import{css as e,html as t,LitElement as s,nothing as o}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{unsafeHTML as r}from"lit/directives/unsafe-html.js";import{unsafeStatic as i,literal as n,html as l}from"lit/static-html.js";import{ifDefined as d}from"lit/directives/if-defined.js";class c{generateElementName(e,t){let s=e;return s+="-",s+=t.replace(/[.]/g,"_"),s}generateTag(e,t,s){const o=this.generateElementName(e,t),a=n`${i(o)}`;return customElements.get(o)||customElements.define(o,class extends s{}),a}}class h{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,s=(t,o=t&&t.closest(e))=>t&&t!==document&&t!==window?o||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 u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="chevron-down__desc" class="ico_squareLarge" 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="chevron-down__desc">Directional indicator; down.</desc><path d="m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084z"/></svg>',p='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="chevron-up__desc" class="ico_squareLarge" 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="chevron-up__desc">Directional indicator; up.</desc><path d="m17.603 14.343-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 9.957l-4.47 4.47a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.976l.073-.085 4.823-4.823a1 1 0 0 1 1.414 0l4.823 4.823a.75.75 0 0 1 .073.977"/></svg>';let b=class{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,s=(t,o=t&&t.closest(e))=>t&&t!==document&&t!==window?o||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)}};let g=class extends s{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 m=new Map,v=(e,t={})=>{const s=t.responseParser||(e=>e.text());return m.has(e)||m.set(e,fetch(e).then(s)),m.get(e)};var f=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;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;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
2
2
  `;let x=class extends g{constructor(){super(),this.onDark=!1,this.appearance="default"}static get properties(){return{...g.properties,onDark:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},svg:{attribute:!1,reflect:!0}}}static get styles(){return f}async fetchIcon(e,t){let s="";return s="logos"===e?await v(`${this.uri}/${e}/${t}.svg`):await v(`${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}
3
3
  `;var y=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)}
4
4
  `,w=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)}
@@ -76,14 +76,14 @@ import{css as e,html as t,LitElement as s,nothing as o}from"lit";import{classMap
76
76
  </span>
77
77
  </${this._renderTag}>
78
78
  `}renderLayout(){return this.renderLayoutDefault()}}var J=e`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset;cursor:pointer;overflow:visible}:host .auro-button{all:unset;width:100%;padding:var(--ds-size-200, 1rem) var(--trigger-padding-right, 0) var(--ds-size-200, 1rem) var(--trigger-padding-left, 0);box-sizing:border-box}:host .auro-button:focus,:host .auro-button:focus-visible,:host .auro-button:focus-within{outline:0}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse;margin-left:0!important;margin-right:0!important}:host .textSlot{display:flex;flex:1;gap:0;align-items:center}:host([disabled]){cursor:not-allowed;text-decoration:none!important}:host([disabled]) .auro-button{pointer-events:none}:host(.sm) .auro-button{padding-top:var(--ds-size-150, .75rem);padding-bottom:var(--ds-size-150, .75rem)}:host(.lg) .auro-button{padding-top:var(--ds-size-250, 1.25rem);padding-bottom:var(--ds-size-250, 1.25rem)}:host([fluid]) .textSlot{width:100%}:host(.iconRight) .textSlot{display:flex;flex-direction:row;justify-content:space-between}
79
- `;class K extends V{constructor(){super(),this.ariaexpanded=!1}static get properties(){return{...V.properties,ariaexpanded:{type:Boolean,reflect:!0}}}static get styles(){return[J]}updated(e){if(super.updated(e),e.has("ariaexpanded")){const e=this.shadowRoot.querySelector("button");e&&e.setAttribute("aria-expanded",this.ariaexpanded?"true":"false")}}static register(e="auro-accordion-button"){h.prototype.registerComponent(e,K)}}class Q extends s{constructor(){super(),this.runtimeUtils=new h}static get properties(){return{emphasis:{type:Boolean,reflect:!0},variant:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0}}}static register(e="auro-accordion-group"){h.prototype.registerComponent(e,Q)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-accordion-group")}updated(e){e.has("disabled")&&this.updateDisabledState()}updateDisabledState(){this.querySelectorAll("auro-accordion").forEach(e=>{e.disabled=this.disabled})}handleSlotContentChange(){this.addEventListener("toggleExpanded",this.handleToggleExpanded),this.handleItems(),this.items.forEach(e=>{this.hasAttribute("emphasis")&&(e.setAttribute("chevron","right"),e.emphasis=!0),this.hasAttribute("variant")&&"sm"===this.getAttribute("variant")&&e.setAttribute("variant","sm"),this.hasAttribute("variant")&&"lg"===this.getAttribute("variant")&&e.setAttribute("variant","lg"),e.grouped=!0})}handleToggleExpanded(e){this.hasAttribute("noToggleExpanded")||(this.items.forEach(t=>{t!==e.target&&t.expanded&&(t.expanded=!1)}),this.scrollIntoView({behavior:"smooth",block:"nearest"}))}handleItems(){const e=this.tagName.toLowerCase(),t=e.substring(0,e.indexOf("-group"));this.items=Array.from(this.querySelectorAll(t))}render(){return t`
79
+ `;class K extends V{constructor(){super(),this.ariaexpanded=!1}static get properties(){return{...V.properties,ariaexpanded:{type:Boolean,reflect:!0}}}static get styles(){return[J]}updated(e){if(super.updated(e),e.has("ariaexpanded")){const e=this.shadowRoot.querySelector("button");e&&e.setAttribute("aria-expanded",this.ariaexpanded?"true":"false")}}static register(e="auro-accordion-button"){h.prototype.registerComponent(e,K)}}class Q extends s{constructor(){super(),this.runtimeUtils=new h}static get properties(){return{disabled:{type:Boolean,reflect:!0},emphasis:{type:Boolean,reflect:!0},variant:{type:String,reflect:!0}}}static register(e="auro-accordion-group"){h.prototype.registerComponent(e,Q)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-accordion-group")}updated(e){e.has("disabled")&&this.updateDisabledState()}updateDisabledState(){this.querySelectorAll("auro-accordion").forEach(e=>{e.disabled=this.disabled})}handleSlotContentChange(){this.addEventListener("toggleExpanded",this.handleToggleExpanded),this.handleItems(),this.items.forEach(e=>{this.hasAttribute("emphasis")&&(e.setAttribute("chevron","right"),e.emphasis=!0),this.hasAttribute("variant")&&"sm"===this.getAttribute("variant")&&e.setAttribute("variant","sm"),this.hasAttribute("variant")&&"lg"===this.getAttribute("variant")&&e.setAttribute("variant","lg"),e.grouped=!0})}handleToggleExpanded(e){this.hasAttribute("noToggleExpanded")||(this.items.forEach(t=>{t!==e.target&&t.expanded&&(t.expanded=!1)}),this.scrollIntoView({behavior:"smooth",block:"nearest"}))}handleItems(){const e=this.tagName.toLowerCase(),t=e.substring(0,e.indexOf("-group"));this.items=Array.from(this.querySelectorAll(t))}render(){return t`
80
80
  <div>
81
81
  <slot @slotchange="${this.handleSlotContentChange}"></slot>
82
82
  </div>
83
83
  `}}var Y=e`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host([disabled]){--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-disabled, v.\$ds-basic-color-texticon-disabled)}:host([disabled]) [auro-icon]{color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:focus){--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color: var(--ds-basic-color-border-subtle, #dddddd)}
84
84
  `,Z=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{interpolate-size:allow-keywords;--webkit-fill: -webkit-fill-available}:host .trigger{position:relative;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, .375rem)}:host .trigger:hover{text-decoration:underline}:host .trigger[fluid]{max-width:calc(100% - 3px)}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, .5rem);padding-right:var(--ds-size-200, 1rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-100, .5rem)}:host([chevron=right]) .contentWrapper{padding-left:0}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host([grouped][chevron=right]:not([alignright])) .trigger{width:var(--webkit-fill, 100%);--trigger-padding-right: var(--ds-size-200, 1rem)}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0!important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;--trigger-padding-left: var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}
85
85
  `,ee=e`:host{--ds-auro-accordion-content-border-color: transparent;--ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, .15));--ds-auro-accordion-trigger-border-color: transparent;--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
86
- `;class te extends s{constructor(){super();const e=new c;this.iconTag=e.generateTag("auro-icon","9.1.0",z),this.buttonNameHash=this.generateRandomLetters(4),this.buttonTag=e.generateTag("auro-accordion-button",this.buttonNameHash,K),this.runtimeUtils=new h,this.expanded=!1}static get properties(){return{alignRight:{type:Boolean,reflect:!0},expanded:{type:Boolean,reflect:!0},emphasis:{type:Boolean,reflect:!0},grouped:{type:Boolean,reflect:!0},chevron:{type:String,reflect:!0},variant:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0}}}static get styles(){return[Y,Z,ee]}static register(e="auro-accordion"){const t=`${e}-group`;h.prototype.registerComponent(e,te),Q.register(t)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-accordion")}updated(e){if(e.has("expanded")){const e=this.shadowRoot.querySelector("#accordionTrigger");e&&(e.ariaexpanded=this.expanded)}}renderChevronIcons(){if("none"===this.chevron)return o;const e=this.expanded?p:u;return l`
86
+ `;class te extends s{constructor(){super();const e=new c;this.iconTag=e.generateTag("auro-icon","9.1.1",z),this.buttonNameHash=this.generateRandomLetters(4),this.buttonTag=e.generateTag("auro-accordion-button",this.buttonNameHash,K),this.runtimeUtils=new h,this.expanded=!1}static get properties(){return{alignRight:{type:Boolean,reflect:!0},chevron:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},emphasis:{type:Boolean,reflect:!0},expanded:{type:Boolean,reflect:!0},grouped:{type:Boolean,reflect:!0},variant:{type:String,reflect:!0}}}static get styles(){return[Y,Z,ee]}static register(e="auro-accordion"){const t=`${e}-group`;h.prototype.registerComponent(e,te),Q.register(t)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-accordion")}updated(e){if(e.has("expanded")){const e=this.shadowRoot.querySelector("#accordionTrigger");e&&(e.ariaexpanded=this.expanded)}}renderChevronIcons(){if("none"===this.chevron)return o;const e=this.expanded?p:u;return l`
87
87
  <${this.iconTag}
88
88
  customSvg
89
89
  customColor
@@ -114,4 +114,4 @@ import{css as e,html as t,LitElement as s,nothing as o}from"lit";import{classMap
114
114
  </div>
115
115
  </div>
116
116
  </div>
117
- `}}export{te as A,Q as a,K as b};
117
+ `}}export{te as A,Q as a};