@aurodesignsystem-dev/auro-backtotop 0.0.0-pr77.0 → 0.0.0-pr79.1

package/demo/api.md

@@ -3,20 +3,20 @@
 
 # auro-backtotop
 
-The auro-backtotop element provides users a way to quickly return to page top.
+The `auro-backtotop` element provides users a way to quickly return to page top.
 
 ### Properties & Attributes
 
-| Properties | Attributes | Type    | Default   | Description                                                                                            |
-| ---------- | ---------- | ------- | --------- | ------------------------------------------------------------------------------------------------------ |
-| disabled   | disabled   | boolean |           | Render the trigger inline, will always be visible.                                                     |
-| variant    | variant    | string  | "primary" | The variant attribute allows for rendering the button using the primary (default) or secondary styles. |
+| Properties | Attributes | Modifiers | Type                     | Default   | Description                                                                                            |
+| ---------- | ---------- | --------- | ------------------------ | --------- | ------------------------------------------------------------------------------------------------------ |
+| disabled   | disabled   |           | boolean                  | `false`   | Render the trigger inline, will always be visible.                                                     |
+| variant    | variant    |           | `primary` \| `secondary` | `primary` | The variant attribute allows for rendering the button using the primary (default) or secondary styles. |
 
 ### Methods
 
-| Name     | Parameters                                                          | Return | Description                                       |
-| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
-| register | `name` (string) - The name of element that you want to register to. |        | This will register this element with the browser. |
+| Name     | Parameters                                                           | Return | Description                                       |
+| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
+| register | `name` (string) - The name of the element that you want to register. |        | This will register this element with the browser. |
 
 ### Slots
 
@@ -33,17 +33,15 @@ The auro-backtotop element provides users a way to quickly return to page top.
 | icon   | Apply CSS to arrow up icon. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Examples
-
-### Basic
+## Basic
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-backtotop>Back to top</auro-backtotop>
-  <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basicButtonOnly.html -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic_button-only.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic_button-only.html -->
   <auro-button
     aria-label="arrow-up"
     shape="pill"
@@ -52,7 +50,7 @@ The auro-backtotop element provides users a way to quickly return to page top.
     <auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -64,15 +62,15 @@ The auro-backtotop element provides users a way to quickly return to page top.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Attribute Examples
+## Property & Attribute Examples
 
-#### disabled
+### Disabled
 
 This example demonstrates auro-backtotop in its disabled state.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledButtonOnly.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/disabledButtonOnly.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled_button-only.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/disabled_button-only.html -->
   <auro-button
     aria-label="arrow-up"
     disabled
@@ -94,13 +92,13 @@ This example demonstrates auro-backtotop in its disabled state.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### variant
+### Variant
 
 The `variant` attribute allows for rendering the button using the `primary` (default) or `secondary` styles.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/secondaryButtonOnly.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/secondaryButtonOnly.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant_button-only.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/variant_button-only.html -->
   <auro-button
     variant="secondary"
     shape="pill"
@@ -112,8 +110,8 @@ The `variant` attribute allows for rendering the button using the `primary` (def
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/secondary.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/secondary.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/variant.html -->
 
 ```html
 <auro-backtotop variant="secondary">Back to top</auro-backtotop>
@@ -121,42 +119,15 @@ The `variant` attribute allows for rendering the button using the `primary` (def
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Slot Examples
-
-#### default
-
-The default slot defines the content of the button.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basicButtonOnly.html -->
-  <auro-button
-    aria-label="arrow-up"
-    shape="pill"
-    size="lg">
-    Back to top
-    <auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
-  </auro-button>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
-
-```html
-<auro-backtotop>Back to top</auro-backtotop>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+## Slot Examples
 
-#### ariaLabel
+### Aria Label
 
 The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The default value is `"arrow-up"`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelButtonOnly.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/ariaLabelButtonOnly.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label_button-only.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/aria-label_button-only.html -->
   <auro-button
     aria-label="Custom aria-label goes here!"
     shape="pill"
@@ -168,8 +139,8 @@ The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The d
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabel.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabel.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/aria-label.html -->
 
 ```html
 <auro-backtotop>
@@ -177,25 +148,4 @@ The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The d
 </auro-backtotop>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Page Content For Demo
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pageContent.html) -->
-<!-- The below content is automatically added from ./../apiExamples/pageContent.html -->
-<p>
-  This component requires page content that is taller than the window. Below is `lorem ipsum` content to force a large document. A `back to top` button will appear when you begin to scroll down the page.
-</p>
-<i>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-</i>
-<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

package/demo/auro-backtotop.min.js

@@ -267,7 +267,8 @@ var styleCss = i$3`:host{position:fixed;right:var(--ds-size-300, 1.5rem);bottom:
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * The auro-backtotop element provides users a way to quickly return to page top.
+ * The `auro-backtotop` element provides users a way to quickly return to page top.
+ * @customElement auro-backtotop
  *
  * @slot - Default slot for the text of the button.
  * @slot ariaLabel - Use this slot to pass an aria-label to the HTML5 button.
@@ -279,11 +280,10 @@ class AuroBackToTop extends i$1 {
     constructor() {
     super();
 
-    this.initializeProperties();
+    this._initializeDefaults();
   }
 
-  initializeProperties() {
-
+  _initializeDefaults() {
     const versioning = new AuroDependencyVersioning();
 
     this.disabled = false;
@@ -349,30 +349,31 @@ class AuroBackToTop extends i$1 {
 
       /**
        * Render the trigger inline, will always be visible.
+       * @default false
        */
       disabled: {
         type: Boolean,
         reflect: true,
       },
       hidden: {
-        type: Boolean,
-        reflect: true,
+        type: Boolean
       },
       interactionActive: {
-        type: Boolean,
+        type: Boolean
       },
       lastScrollDirectionUp: {
-        type: Boolean,
+        type: Boolean
       },
 
       /**
        * The variant attribute allows for rendering the button using the primary (default) or secondary styles.
-       * @default "primary"
+       * @type {'primary' | 'secondary'}
+       * @default 'primary'
        */
       variant: {
         type: String,
-        reflect: true,
-      },
+        reflect: true
+      }
     };
   }
 
@@ -383,7 +384,7 @@ class AuroBackToTop extends i$1 {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-backtotop"] - The name of element that you want to register to.
+   * @param {string} [name="auro-backtotop"] - The name of the element that you want to register.
    *
    * @example
    * AuroBackToTop.register("custom-backtotop") // this will register this element to <custom-backtotop/>

package/demo/index.md

@@ -1,20 +1,20 @@
 <!--
-The index.md file is a compiled document. No edits should be made directly to this file.
-README.md is created by running `npm run build:docs`.
-This file is generated based on a template fetched from `./docs/partials/index.md`
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
 -->
 
-# Backtotop
-
+# Backtotop
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
 `<auro-backtotop>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of providing a quick and accessible means to jump back to the top of a long content page.
 
-The component will be hidden while the page Y scroll position is at the top. When scroll down begins the button will display in the bottom right corner of the page. While scrolling down the button will display only an arrow up icon. When scroll up occurs, the button will additionally display any slotted text content.
+The component will be hidden while the page Y scroll position is at the top. When scroll down begins the button will display in the bottom right corner of the page. While scrolling down the button will display only an arrow up icon.
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-backtotop use cases
-
+## Use Cases
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
 The `<auro-backtotop>` element should be used in situations where users may:
@@ -24,9 +24,11 @@ The `<auro-backtotop>` element should be used in situations where users may:
 
 ## Example(s)
 
+### Basic
+
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basicButtonOnly.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic_button-only.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic_button-only.html -->
   <auro-button
     aria-label="arrow-up"
     shape="pill"
@@ -35,10 +37,6 @@ The `<auro-backtotop>` element should be used in situations where users may:
     <auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-backtotop>Back to top</auro-backtotop>
-  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -51,10 +49,10 @@ The `<auro-backtotop>` element should be used in situations where users may:
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Page Content For Demo
+### Page Content For Demo
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pageContent.html) -->
-<!-- The below content is automatically added from ./../apiExamples/pageContent.html -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/page-content.html) -->
+<!-- The below content is automatically added from ./../apiExamples/page-content.html -->
 <p>
   This component requires page content that is taller than the window. Below is `lorem ipsum` content to force a large document. A `back to top` button will appear when you begin to scroll down the page.
 </p>
@@ -70,29 +68,4 @@ The `<auro-backtotop>` element should be used in situations where users may:
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </i>
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Recommended Use and Version Control
-
-There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-backtotop` custom element is defined automatically.
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroBackToTop.register(name)` method and pass in a unique name.
-
-```js
-import { AuroBackToTop } from '@aurodesignsystem/auro-backtotop/class';
-
-AuroBackToTop.register('custom-backtotop');
-```
-
-This will create a new custom element that you can use in your HTML that will function identically to the `auro-backtotop` element.
-
-<!-- <div class="exampleWrapper">
-  <auro-backtotop>Custom back to top</auro-backtotop>
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-  ```html
-  <auro-backtotop>Custom back to top</auro-backtotop>
-  ```
-
-</auro-accordion> -->
+<!-- AURO-GENERATED-CONTENT:END -->

package/dist/{auro-backtotop-BcarFpWB.js → auro-backtotop-CV2gu8Qz.js}

@@ -53,11 +53,11 @@ import{literal as t,html as e,unsafeStatic as o}from"lit/static-html.js";import{
           </span>
         </span>
       </${this._renderTag}>
-    `}renderLayout(){return this.renderLayoutDefault()}}class N{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,!0)}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}}class $ extends a{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(t){return t?"true":"false"}}const L=new Map,E=(t,e={})=>{const o=e.responseParser||(t=>t.text());return L.has(t)||L.set(t,fetch(t).then(o)),L.get(t)};var _=s`: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}
-`;class I extends ${constructor(){super(),this.onDark=!1,this.appearance="default"}static get properties(){return{...$.properties,onDark:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},svg:{attribute:!1,reflect:!0}}}static get styles(){return _}async fetchIcon(t,e){let o="";return o="logos"===t?await E(`${this.uri}/${t}/${e}.svg`):await E(`${this.uri}/icons/${t}/${e}.svg`),(new DOMParser).parseFromString(o,"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('<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=t.body.firstChild}}}catch(t){this.svg=void 0}}}s`.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}
+    `}renderLayout(){return this.renderLayoutDefault()}}class N{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,!0)}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}}class $ extends a{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(t){return t?"true":"false"}}const _=new Map,L=(t,e={})=>{const o=e.responseParser||(t=>t.text());return _.has(t)||_.set(t,fetch(t).then(o)),_.get(t)};var E=s`: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}
+`;class I extends ${constructor(){super(),this.onDark=!1,this.appearance="default"}static get properties(){return{...$.properties,onDark:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},svg:{attribute:!1,reflect:!0}}}static get styles(){return E}async fetchIcon(t,e){let o="";return o="logos"===t?await L(`${this.uri}/${t}/${e}.svg`):await L(`${this.uri}/icons/${t}/${e}.svg`),(new DOMParser).parseFromString(o,"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('<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=t.body.firstChild}}}catch(t){this.svg=void 0}}}s`.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}
 `;var F=s`: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)}
 `,D=s`: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)}
-`;class O extends I{constructor(){super(),this.variant=void 0,this.privateDefaults()}privateDefaults(){this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new N}static get properties(){return{...I.properties,ariaHidden:{type:String,reflect:!0},category:{type:String,reflect:!0},customColor:{type:Boolean,reflect:!0},customSvg:{type:Boolean},label:{type:Boolean,reflect:!0},name:{type:String,reflect:!0},variant:{type:String,reflect:!0}}}static get styles(){return[I.styles,F,_,D]}static register(t="auro-icon"){N.prototype.registerComponent(t,O)}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon")}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg")}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"))}}render(){const t={labelWrapper:!0,util_displayHiddenVisually:!this.label};return r`
+`;class O extends I{constructor(){super(),this.variant=void 0,this.privateDefaults()}privateDefaults(){this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new N}static get properties(){return{...I.properties,ariaHidden:{type:String,reflect:!0},category:{type:String,reflect:!0},customColor:{type:Boolean,reflect:!0},customSvg:{type:Boolean},label:{type:Boolean,reflect:!0},name:{type:String,reflect:!0},variant:{type:String,reflect:!0}}}static get styles(){return[I.styles,F,E,D]}static register(t="auro-icon"){N.prototype.registerComponent(t,O)}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon")}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg")}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"))}}render(){const t={labelWrapper:!0,util_displayHiddenVisually:!this.label};return r`
       <div class="componentWrapper">
         <div
           class="${i({svgWrapper:!0})}"
@@ -76,7 +76,7 @@ import{literal as t,html as e,unsafeStatic as o}from"lit/static-html.js";import{
         </div>
       </div>
     `}}class W{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(e,s,a){const r=this.generateElementName(e,s),i=t`${o(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}}class P{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,!0)}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return(o?.assignedNodes({flatten:!0})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var X=s`:host{position:fixed;right:var(--ds-size-300, 1.5rem);bottom:var(--ds-size-300, 1.5rem)}:host [auro-button]:not(:hover) .text{display:none;overflow:hidden}
-`;class j extends a{constructor(){super(),this.initializeProperties()}initializeProperties(){const t=new W;this.disabled=!1,this.variant="primary",this.iconTag=t.generateTag("auro-icon","9.1.1",O),this.buttonTag=t.generateTag("auro-backtotop-button","12.3.0",R),this.shape="circle",this.size="lg",this.hidden=!0,this.lastKnownScrollPosition=0,this.lastScrollDirectionUp=!1,this.interactionActive=!1,this.yPosShowButton=400,this.runtimeUtils=new P}static get properties(){return{disabled:{type:Boolean,reflect:!0},hidden:{type:Boolean,reflect:!0},interactionActive:{type:Boolean},lastScrollDirectionUp:{type:Boolean},variant:{type:String,reflect:!0}}}static get styles(){return[X]}static register(t="auro-backtotop"){P.prototype.registerComponent(t,j)}scrollTop(){document.documentElement.scrollTop=0}onTriggerClick(){this.scrollTop(),this.interactionActive=!1}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-backtotop"),document.addEventListener("scroll",()=>{window.scrollY<this.lastKnownScrollPosition?this.lastScrollDirectionUp=!0:this.lastScrollDirectionUp=!1,this.lastKnownScrollPosition=window.scrollY,this.lastKnownScrollPosition<this.yPosShowButton?this.hidden=!0:this.hidden=!1}),this.addEventListener("mouseover",()=>{this.shape="pill",this.interactionActive=!0}),this.addEventListener("mouseout",()=>{this.shape="circle",this.interactionActive=!1}),this.addEventListener("focusin",()=>{this.interactionActive=!0}),this.addEventListener("focusout",()=>{this.interactionActive=!1}),this.addEventListener("touchend",()=>{this.onTriggerClick()})}render(){return e`
+`;class j extends a{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){const t=new W;this.disabled=!1,this.variant="primary",this.iconTag=t.generateTag("auro-icon","9.1.1",O),this.buttonTag=t.generateTag("auro-backtotop-button","12.3.0",R),this.shape="circle",this.size="lg",this.hidden=!0,this.lastKnownScrollPosition=0,this.lastScrollDirectionUp=!1,this.interactionActive=!1,this.yPosShowButton=400,this.runtimeUtils=new P}static get properties(){return{disabled:{type:Boolean,reflect:!0},hidden:{type:Boolean},interactionActive:{type:Boolean},lastScrollDirectionUp:{type:Boolean},variant:{type:String,reflect:!0}}}static get styles(){return[X]}static register(t="auro-backtotop"){P.prototype.registerComponent(t,j)}scrollTop(){document.documentElement.scrollTop=0}onTriggerClick(){this.scrollTop(),this.interactionActive=!1}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-backtotop"),document.addEventListener("scroll",()=>{window.scrollY<this.lastKnownScrollPosition?this.lastScrollDirectionUp=!0:this.lastScrollDirectionUp=!1,this.lastKnownScrollPosition=window.scrollY,this.lastKnownScrollPosition<this.yPosShowButton?this.hidden=!0:this.hidden=!1}),this.addEventListener("mouseover",()=>{this.shape="pill",this.interactionActive=!0}),this.addEventListener("mouseout",()=>{this.shape="circle",this.interactionActive=!1}),this.addEventListener("focusin",()=>{this.interactionActive=!0}),this.addEventListener("focusout",()=>{this.interactionActive=!1}),this.addEventListener("touchend",()=>{this.onTriggerClick()})}render(){return e`
       <!-- Hidden slot for aria-label -->
       <slot name="ariaLabel" hidden></slot>