@aurodesignsystem-dev/auro-formkit 0.0.0-pr1492.4 → 0.0.0-pr1493.0

package/components/counter/demo/index.min.js

@@ -727,7 +727,7 @@ class AuroFormValidation {
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
-        if (input.validationMessage.length > 0) {
+        if (input && input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202606031929';
+var formkitVersion$1 = '202606181613';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -4814,7 +4814,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
   });
 }
 
-var styleCss$2 = i$5`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
+var styleCss$2 = i$5`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host([desktopmodal]:popover-open)::backdrop{background:transparent}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
 
 var colorCss$2 = i$5`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606031929';
+var formkitVersion = '202606181613';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
@@ -5625,6 +5625,7 @@ class AuroDropdown extends AuroElement$1 {
   _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
+    this.desktopModal = false;
     this.disabled = false;
     this.disableKeyboardHandling = false;
     this.error = false;
@@ -5805,6 +5806,14 @@ class AuroDropdown extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
+       */
+      desktopModal: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the dropdown will only show by calling the API .show() public method.
        */
@@ -6092,6 +6101,15 @@ class AuroDropdown extends AuroElement$1 {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this._clearPageInert();
+    if (this._bibTabHandler) {
+      this.removeEventListener('keydown', this._bibTabHandler);
+      this._bibTabHandler = undefined;
+    }
+    if (this.focusTrap) {
+      this.focusTrap.disconnect();
+      this.focusTrap = undefined;
+    }
     if (this.floater) {
       this.floater.hideBib('disconnect');
       this.floater.disconnect();
@@ -6119,19 +6137,45 @@ class AuroDropdown extends AuroElement$1 {
       if (this.isPopoverVisible) {
         // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
         // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
-        const useModal = this.isBibFullscreen;
-        this.bibElement.value.open(useModal);
+        this.bibElement.value.open(this.isBibFullscreen);
+        this.updateFocusTrap();
+
+        // Desktop modal: make siblings inert so content outside is not interactive
+        if (this.desktopModal && !this.isBibFullscreen) {
+          this._setPageInert();
+        }
       } else {
         this.bibElement.value.close();
+        this._clearPageInert();
       }
     }
 
     // When fullscreen strategy changes while open, re-open dialog with correct mode
     // (e.g. resizing from desktop → mobile while dropdown is open)
     if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
-      const useModal = this.isBibFullscreen;
       this.bibElement.value.close();
-      this.bibElement.value.open(useModal);
+      this.bibElement.value.open(this.isBibFullscreen);
+
+      // Re-initialize focus management for the new strategy
+      this.updateFocusTrap();
+
+      // Toggle inert: desktop modal needs it, fullscreen showModal() handles it natively
+      if (this.desktopModal && !this.isBibFullscreen) {
+        this._setPageInert();
+      } else {
+        this._clearPageInert();
+      }
+    }
+
+    // Handle desktopModal toggled while the dropdown is already open.
+    // Re-initialize focus trapping and page inert state to match the new mode.
+    if (changedProperties.has('desktopModal') && this.isPopoverVisible && !this.isBibFullscreen) {
+      this.updateFocusTrap();
+      if (this.desktopModal) {
+        this._setPageInert();
+      } else {
+        this._clearPageInert();
+      }
     }
   }
 
@@ -6141,8 +6185,14 @@ class AuroDropdown extends AuroElement$1 {
    * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
    */
   handleDropdownToggle(event) {
-    this.updateFocusTrap();
     this.isPopoverVisible = event.detail.expanded;
+
+    // Tear down FocusTrap when closing. Creation happens in updated()
+    // after the dialog is open so getFocusableElements can find content.
+    if (!this.isPopoverVisible) {
+      this.updateFocusTrap();
+    }
+
     const eventType = event.detail.eventType || "unknown";
     if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
       this.trigger.focus();
@@ -6241,19 +6291,220 @@ class AuroDropdown extends AuroElement$1 {
    * @private
    */
   updateFocusTrap() {
+    // Always clean up existing handlers/traps before setting up new ones
+    // to prevent duplicate listeners on repeated calls.
+    if (this._bibTabHandler) {
+      this.removeEventListener('keydown', this._bibTabHandler);
+      this._bibTabHandler = undefined;
+    }
+
+    if (this.focusTrap) {
+      this.focusTrap.disconnect();
+      this.focusTrap = undefined;
+    }
+
+    // Restore the user-set noHideOnThisFocusLoss value, if we overrode it.
+    if (this._noHideOverridden) {
+      this.noHideOnThisFocusLoss = this._priorNoHide;
+      this._noHideOverridden = false;
+      this._priorNoHide = undefined;
+    }
+
     if (this.isPopoverVisible) {
       if (!this.isBibFullscreen) {
-        // Desktop: show() doesn't trap focus, so use FocusTrap
-        this.focusTrap = new FocusTrap(this.bibContent);
-        this.focusTrap.focusFirstElement();
+        if (this.desktopModal) {
+          // The floater's focus-loss check uses :focus-within, which does not
+          // match the host when focus is on a slotted element projected through
+          // multiple shadow roots. Without this override, focusing a button
+          // inside the bib would be misread as focus leaving the dropdown and
+          // close the bib immediately. desktopModal traps focus inside the
+          // bib and inerts siblings, so suppressing focus-loss dismissal here
+          // is safe — Escape and outside-click still close the bib.
+          this._priorNoHide = this.noHideOnThisFocusLoss;
+          this._noHideOverridden = true;
+          this.noHideOnThisFocusLoss = true;
+
+          // Desktop modal: trap focus only within the bib content.
+          // Can't use FocusTrap on the bib element because keydown events
+          // from slotted content bubble through the dropdown host (light DOM),
+          // not through the bib (shadow projection target). Using FocusTrap
+          // on the dropdown would include the trigger in the tab cycle.
+          // Instead, listen for Tab on the dropdown and manually wrap focus
+          // within the bib's focusable elements.
+          this._bibTabHandler = (event) => {
+            if (event.key !== 'Tab') {
+              return;
+            }
+
+            // Collect focusable elements from the bib content.
+            const focusables = getFocusableElements(this.bibContent);
+
+            // Fallback: try from slotted content directly
+            if (!focusables.length) {
+              const slot = this.shadowRoot.querySelector('.slotContent slot');
+              const assignedNodes = slot.assignedNodes({ flatten: true });
+
+              for (const node of assignedNodes) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                  focusables.push(...getFocusableElements(node));
+                }
+              }
+            }
+
+            if (!focusables.length) {
+              return;
+            }
+
+            event.preventDefault();
+
+            const direction = event.shiftKey ? -1 : 1; // eslint-disable-line no-magic-numbers
+
+            // Walk the active element chain through shadow roots
+            const actives = this._getActiveElements();
+
+            let idx = focusables.findIndex((el) => actives.includes(el));
+
+            if (idx === -1) { // eslint-disable-line no-magic-numbers
+              // Focus is not on a known element — move to first/last
+              idx = direction === 1 ? -1 : focusables.length; // eslint-disable-line no-magic-numbers
+            }
+
+            // Try each element in order, skipping any that can't receive focus
+            // (e.g. hidden elements, elements in collapsed sections)
+            for (let index = 0; index < focusables.length; index++) { // eslint-disable-line no-plusplus
+              let nextIdx = idx + direction;
+
+              // Wrap around
+              if (nextIdx < 0) {
+                nextIdx = focusables.length - 1;
+              } else if (nextIdx >= focusables.length) {
+                nextIdx = 0;
+              }
+
+              focusables[nextIdx].focus();
+
+              // Verify focus actually moved to the target
+              const newActives = this._getActiveElements();
+
+              if (newActives.includes(focusables[nextIdx])) {
+                return;
+              }
+
+              // Focus didn't stick — skip this element and try the next
+              idx = nextIdx;
+            }
+          };
+          this.addEventListener('keydown', this._bibTabHandler);
+
+          // Move initial focus into the bib content, matching FocusTrap behavior
+          requestAnimationFrame(() => {
+            const focusables = getFocusableElements(this.bibContent);
+            if (focusables.length) {
+              focusables[0].focus();
+            }
+          });
+        } else {
+          // Normal desktop: use FocusTrap on the bib element.
+          // Defer focusFirstElement to the next frame because the popover
+          // is positioned asynchronously by Floating UI — calling focus()
+          // synchronously here would target elements with zero dimensions
+          // and the focus call would be silently ignored.
+          this.focusTrap = new FocusTrap(this.bibContent);
+          requestAnimationFrame(() => {
+            if (this.focusTrap) {
+              this.focusTrap.focusFirstElement();
+            }
+          });
+        }
       }
       // Fullscreen: showModal() provides native focus trapping
+    }
+  }
+
+  /**
+   * Returns the chain of active (focused) elements through shadow roots.
+   * @private
+   * @returns {Array<HTMLElement>}
+   */
+  _getActiveElements() {
+    let { activeElement } = document;
+    const actives = [activeElement];
+
+    while (activeElement?.shadowRoot?.activeElement) {
+      activeElement = activeElement.shadowRoot.activeElement;
+      actives.push(activeElement);
+    }
+
+    return actives;
+  }
+
+  /**
+   * Sets `inert` on sibling elements of the dropdown's top-level host
+   * so that content outside the dropdown is not interactive while the modal is open.
+   * Walks up through shadow DOM boundaries to find the outermost host element
+   * in the light DOM, then sets `inert` on siblings at each ancestor level
+   * to ensure all page content outside the host subtree is inert.
+   * @private
+   */
+  _setPageInert() {
+    if (this._inertSiblings) {
       return;
     }
 
-    if (this.focusTrap) {
-      this.focusTrap.disconnect();
-      this.focusTrap = undefined;
+    this._inertSiblings = [];
+
+    // Walk up through shadow DOM boundaries to find the topmost host
+    // element in the light DOM. For example, if this dropdown is inside
+    // auro-datepicker's shadow DOM, we walk up to the datepicker element
+    // so we set inert on its siblings — not on the datepicker itself.
+    let host = this;
+    while (host.getRootNode() instanceof ShadowRoot) {
+      host = host.getRootNode().host;
+    }
+
+    // Walk up the ancestor chain, inerting siblings at each level
+    // to ensure the entire page outside the host subtree is inert.
+    // Uses a reference counter (data-auro-inert-count) so multiple
+    // simultaneous modal dropdowns share inert state safely.
+    let current = host;
+    while (current.parentElement) {
+      const parent = current.parentElement;
+      for (const sibling of parent.children) {
+        if (sibling !== current) {
+          const count = parseInt(sibling.dataset.auroInertCount || '0', 10);
+          if (count === 0) {
+            sibling.dataset.auroInertWas = sibling.inert ? 'true' : 'false';
+          }
+          sibling.dataset.auroInertCount = String(count + 1);
+          sibling.inert = true;
+          this._inertSiblings.push(sibling);
+        }
+      }
+      current = parent;
+    }
+  }
+
+  /**
+   * Restores `inert` state on siblings that were tracked by `_setPageInert`.
+   * Uses reference counting so inert is only cleared when the last modal
+   * dropdown releases a given element. Preserves the original inert state
+   * so externally-inerted elements are not inadvertently re-enabled.
+   * @private
+   */
+  _clearPageInert() {
+    if (this._inertSiblings) {
+      for (const sibling of this._inertSiblings) {
+        const count = parseInt(sibling.dataset.auroInertCount || '1', 10) - 1;
+        if (count <= 0) {
+          const wasInert = sibling.dataset.auroInertWas === 'true';
+          delete sibling.dataset.auroInertCount;
+          delete sibling.dataset.auroInertWas;
+          sibling.inert = wasInert;
+        } else {
+          sibling.dataset.auroInertCount = String(count);
+        }
+      }
+      this._inertSiblings = undefined;
     }
   }
 
@@ -6492,6 +6743,7 @@ class AuroDropdown extends AuroElement$1 {
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
           ?isfullscreen="${this.isBibFullscreen}"
+          ?desktopmodal="${this.desktopModal}"
           .dialogLabel="${this.bibDialogLabel}"
           ${n$1(this.bibElement)}
           >
@@ -6859,6 +7111,14 @@ class AuroBibtemplate extends i$2 {
       large: {
         type: Boolean,
         reflect: true
+      },
+
+      /**
+       * If declared, the footer slot will be rendered even when not in fullscreen mode.
+       */
+      showFooter: {
+        type: Boolean,
+        reflect: true
       }
     };
   }
@@ -6961,7 +7221,7 @@ class AuroBibtemplate extends i$2 {
           <slot></slot>
         </div>
 
-      ${this.isFullscreen ? u$5`
+      ${this.isFullscreen || this.showFooter ? u$5`
         <div id="footerContainer">
           <slot name="footer"></slot>
         </div>` : null}

package/components/counter/demo/keyboard-behavior.md

@@ -12,6 +12,7 @@
 <p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior</auro-hyperlink>, i.e., these keys step through the browser tabindex sequence.</p>
 <p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
 <p>When the bib is collapsed, the bib content is excluded from the tab sequence. When <strong>expanded</strong>, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.</p>
+<p>When the <code>desktopModal</code> attribute is set, focus is also trapped within the bib on desktop viewports. All sibling elements on the page are marked <code>inert</code>, preventing interaction with content outside the dropdown until it is closed.</p>
 <!-- AURO-GENERATED-CONTENT:END -->
 <auro-header level="2" id="keyEvents">Key Events</auro-header>
 <auro-header level="3" id="keyEventsCounter">Counter</auro-header>

package/components/counter/demo/pages.json

@@ -1 +1 @@
-["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","readme.md"]
+["accessibility.md","api.md","css-only.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-counter.md","readme.md"]

package/components/counter/demo/styles.min.css

@@ -1 +1 @@
-.container{display:grid;margin-left:auto;margin-right:auto;max-width:1232px}.pagecontainer{padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;max-width:1232px}@media screen and (min-width: 576px){.pagecontainer{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pagecontainer{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){.pagecontainer{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pagecontainer{padding-left:2rem;padding-right:2rem}}.pagecontainer.breadcrumbs{margin-block-end:3.35rem}.pageLayout-2colAnchorNav{display:grid;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;max-width:1232px;gap:2rem}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-xl, 2rem)}}.pageLayout-2colAnchorNav{grid-template-areas:"breadcrumbs" "anchornav" "main"}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs" "main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colAnchorNav .breadcrumbs{grid-area:breadcrumbs}.pageLayout-2colAnchorNav .main{grid-area:main}.pageLayout-2colAnchorNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-2colAnchorNav .anchornav{grid-area:anchornav}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}.pageLayout-2colSideNav{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;gap:2rem}@media screen and (min-width: 576px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-xl, 2rem)}}.pageLayout-2colSideNav{grid-template-areas:"breadcrumbs" "sidenav" "main"}@media screen and (min-width: 768px){.pageLayout-2colSideNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto;grid-template-areas:"breadcrumbs breadcrumbs" "sidenav main"}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colSideNav .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .sidenav{grid-area:sidenav;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-2colSideNav .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .main{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;gap:2rem}@media screen and (min-width: 576px){.pageLayout-3col{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-3col{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-3col{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-3col{gap:var(--ds-grid-gutter-xl, 2rem)}}.pageLayout-3col{grid-template-areas:"breadcrumbs" "sidenav" "anchornav" "main"}@media screen and (min-width: 768px){.pageLayout-3col{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs breadcrumbs" "sidenav main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}.pageLayout-3col .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-3col .sidenav{grid-area:sidenav;z-index:1;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem;position:sticky;top:0;--align-self: stretch;align-self:var(--align-self)}@media screen and (min-width: 768px){.pageLayout-3col .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-3col .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .main{padding-left:0;padding-right:0}}.pageLayout-3col .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col .anchornav{grid-area:anchornav}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}.pageLayout-3col .anchornav{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{padding-left:0;padding-right:0}}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-display-weight, 100);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-medium-weight, 300);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-body-default-weight, 500);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff")}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:var(--ds-text-body-height-default, 1.5rem)}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:none;appearance:none}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield;appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.heading,.auro-markdown h1,.auro-markdown h2,.auro-markdown h3{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display,.auro-markdown h1{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600,.auro-markdown h3{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500,.auro-markdown h4{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}blockquote{margin-left:0;border-left:1px solid var(--ds-color-border-ui-active-default, #225296);padding:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-400, 2rem);color:var(--ds-color-text-secondary-default, #525252);font-weight:200;margin-top:var(--ds-size-300, 1.5rem);margin-bottom:var(--ds-size-300, 1.5rem)}blockquote p,blockquote .auro-markdown p,.auro-markdown blockquote p{line-height:2}blockquote p:last-child{margin-bottom:0}blockquote+p,.auro-markdown blockquote+p{margin-bottom:var(--ds-size-400, 2rem)}.auro_table,.auro-markdown table{display:block;overflow:scroll;width:auto;margin-bottom:var(--ds-size-400, 2rem);border-spacing:var(--ds-size-150, 0.75rem);border-collapse:collapse;font-weight:var(--ds-text-heading-display-weight, 100)}.auro_table tr:nth-child(even),.auro-markdown table tr:nth-child(even){background-color:var(--ds-color-container-secondary-default, #f7f7f7)}.auro_table th,.auro-markdown table th{text-align:left;font-weight:var(--ds-text-heading-default-weight, 500)}@media screen and (min-width: 576px){.auro_table,.auro-markdown table{display:table;width:100%}}.auro_table thead,.auro-markdown table thead{border-collapse:collapse;border-bottom:1px solid var(--ds-color-border-tertiary-default, #dddddd)}.auro_table th,.auro-markdown table th,.auro_table td,.auro-markdown table td{padding:var(--ds-size-200, 1rem)}*:focus-visible{outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:var(--ds-text-body-size-default, 1rem);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body,.baseType{margin:0;color:var(--ds-color-text-primary-default, #2a2a2a);font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-variant-ligatures:no-common-ligatures;font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph{margin:0 0 1rem;line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph .hyperlink,.baseParagraph .auro-markdown a,.auro-markdown .baseParagraph a{text-decoration:underline}.hyperlink,.auro-markdown a{text-decoration:underline;color:var(--ds-color-text-ui-default-default, #2c67b5)}.hyperlink:visited,.auro-markdown a:visited{color:var(--ds-color-text-ui-default-default, #2c67b5)}.hyperlink--nav{display:block;text-decoration:none}.hyperlink--nav:not(.is-touching):hover{text-decoration:underline !important}.hyperlink--ondark{color:var(--ds-color-text-ui-default-inverse, #56bbde)}.hyperlink--ondark:not(.is-touching):hover{color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}.hyperlink--ondark:visited{color:var(--ds-color-text-ui-default-inverse, #56bbde)}.hyperlink:not(.is-touching):hover,.auro-markdown a:not(.is-touching):hover{text-decoration:none;color:var(--ds-color-text-ui-hover-default, #193d73)}img{max-width:100%}small,.type--small{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}.fineprint{font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem);color:var(--ds-color-text-secondary-default, #525252)}.auro-markdown p:last-child{margin-bottom:0}.hljs{background-color:unset !important;padding:unset !important}pre{background:var(--ds-color-brand-gray-100, #f7f7f7) !important;border:unset !important;padding:var(--ds-size-200) !important;margin-bottom:var(--ds-size-300, 1.5rem) !important;border-style:solid !important;border-width:1px !important;border-color:var(--ds-color-border-secondary-default) !important;border-radius:.5rem;margin-top:var(--ds-size-200) !important;box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.1) !important;overflow-x:scroll !important}pre code{font-size:.85rem !important;font-family:monospace;text-shadow:none}.pre-wrapper:last-of-type pre{margin-bottom:0 !important}code:not(.html):not(.css):not(.js):not([class*=language-]){color:var(--ds-color-brand-flamingo-500, #b82b47);margin-bottom:0 !important}.token.operator{background-color:unset !important}auro-accordion:not(.section){margin-top:1rem !important;display:block}auro-accordion:not(.section):nth-child(2){margin-block-start:0}auro-accordion[class~=section]::part(accordion){padding-right:2px;display:block}.accordion-content{padding-top:1rem}.token.operator{background-color:unset !important}auro-accordion:not(auro-accordion-group *){margin-top:1rem !important;display:block}.pre-wrapper{position:relative}.copy-btn{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .15s ease;background:var(--ds-color-container-primary-default, #fff);border:1px solid var(--ds-color-border-secondary-default, #ccc);border-radius:4px;padding:4px 8px;cursor:pointer;font-size:12px;line-height:1;color:var(--ds-color-text-secondary-default, #333);z-index:1}.copy-btn:hover{background:var(--ds-color-container-secondary-default, #f0f0f0)}.pre-wrapper:hover .copy-btn{opacity:1}.exampleWrapper{background-color:var(--ds-basic-color-surface-default);padding:1rem;border-radius:.5rem;margin-top:1rem}.exampleWrapper--ondark{background-color:var(--ds-basic-color-surface-inverse);padding:1rem;border-radius:.5rem;margin-top:1rem}table{--ds-color-container-secondary-default: transparent}table.compressed{width:unset !important;margin:var(--ds-size-50) 0 var(--ds-size-100) !important}table.compressed th,table.compressed td{padding:var(--ds-size-50) !important}tr:not(:last-of-type){border-bottom:1px solid var(--ds-color-border-tertiary-default)}body{padding:0;display:flex;flex-direction:column}main{display:flex;flex-direction:column;min-height:0;flex:1}.contentWrapper{display:flex;flex-direction:row-reverse;gap:25px;align-items:flex-start}.contentWrapper>nav{width:200px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}.contentWrapper>nav auro-nav{display:block}.mainContent{flex:1;display:flex;flex-direction:column;flex-basis:0;box-sizing:border-box;min-width:0}.scrollWrapper{flex:1;min-height:0}auro-nav{max-width:200px;position:sticky;top:2rem;align-self:flex-start;max-height:calc(100vh - 4rem);overflow-y:auto}auro-anchorlink[class~=level2]{padding-left:var(--ds-size-200)}p:first-of-type{margin-top:0}.note,.warning{margin:10px 0;padding:10px;border-radius:6px;font-style:italic}.note{background-color:var(--ds-basic-color-surface-neutral-subtle);color:var(--ds-basic-color-texticon-muted)}.warning{background-color:var(--ds-basic-color-status-error-subtle);color:var(--ds-basic-color-status-error)}auro-header{margin-top:1rem}body{padding:var(--ds-size-400, 2rem)}main{margin:0 auto;max-width:64rem}#page-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:8px 16px;background:var(--ds-color-background-lightest, #fff);border-bottom:1px solid var(--ds-color-border-subtle, #ddd);font-family:var(--ds-text-body-default-font, sans-serif);font-size:.8rem}
+.container{display:grid;margin-left:auto;margin-right:auto;max-width:1232px}.pagecontainer{padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;max-width:1232px}@media screen and (min-width: 576px){.pagecontainer{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pagecontainer{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){.pagecontainer{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pagecontainer{padding-left:2rem;padding-right:2rem}}.pagecontainer.breadcrumbs{margin-block-end:3.35rem}.pageLayout-2colAnchorNav{display:grid;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;max-width:1232px;grid-template-areas:"breadcrumbs" "anchornav" "main";gap:2rem}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs" "main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colAnchorNav .breadcrumbs{grid-area:breadcrumbs}.pageLayout-2colAnchorNav .main{grid-area:main}.pageLayout-2colAnchorNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-2colAnchorNav .anchornav{grid-area:anchornav}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}.pageLayout-2colSideNav{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;grid-template-areas:"breadcrumbs" "sidenav" "main";gap:2rem}@media screen and (min-width: 576px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto;grid-template-areas:"breadcrumbs breadcrumbs" "sidenav main"}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colSideNav .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .sidenav{grid-area:sidenav;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-2colSideNav .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .main{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;grid-template-areas:"breadcrumbs" "sidenav" "anchornav" "main";gap:2rem}@media screen and (min-width: 576px){.pageLayout-3col{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-3col{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-3col{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-3col{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-3col{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs breadcrumbs" "sidenav main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}.pageLayout-3col .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-3col .sidenav{grid-area:sidenav;z-index:1;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem;position:sticky;top:0;--align-self: stretch;align-self:var(--align-self)}@media screen and (min-width: 768px){.pageLayout-3col .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-3col .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .main{padding-left:0;padding-right:0}}.pageLayout-3col .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col .anchornav{grid-area:anchornav;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{padding-left:0;padding-right:0}}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-display-weight, 100);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-medium-weight, 300);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-body-default-weight, 500);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff")}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:var(--ds-text-body-height-default, 1.5rem)}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:none;appearance:none}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield;appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.heading,.auro-markdown h1,.auro-markdown h2,.auro-markdown h3{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display,.auro-markdown h1{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600,.auro-markdown h3{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500,.auro-markdown h4{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}blockquote{margin-left:0;border-left:1px solid var(--ds-color-border-ui-active-default, #225296);padding:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-400, 2rem);color:var(--ds-color-text-secondary-default, #525252);font-weight:200;margin-top:var(--ds-size-300, 1.5rem);margin-bottom:var(--ds-size-300, 1.5rem)}blockquote p,blockquote .auro-markdown p,.auro-markdown blockquote p{line-height:2}blockquote p:last-child{margin-bottom:0}blockquote+p,.auro-markdown blockquote+p{margin-bottom:var(--ds-size-400, 2rem)}.auro_table,.auro-markdown table{display:block;overflow:scroll;width:auto;margin-bottom:var(--ds-size-400, 2rem);border-spacing:var(--ds-size-150, 0.75rem);border-collapse:collapse;font-weight:var(--ds-text-heading-display-weight, 100)}.auro_table tr:nth-child(even),.auro-markdown table tr:nth-child(even){background-color:var(--ds-color-container-secondary-default, #f7f7f7)}.auro_table th,.auro-markdown table th{text-align:left;font-weight:var(--ds-text-heading-default-weight, 500)}@media screen and (min-width: 576px){.auro_table,.auro-markdown table{display:table;width:100%}}.auro_table thead,.auro-markdown table thead{border-collapse:collapse;border-bottom:1px solid var(--ds-color-border-tertiary-default, #dddddd)}.auro_table th,.auro-markdown table th,.auro_table td,.auro-markdown table td{padding:var(--ds-size-200, 1rem)}*:focus-visible{outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:var(--ds-text-body-size-default, 1rem);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body,.baseType{margin:0;color:var(--ds-color-text-primary-default, #2a2a2a);font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-variant-ligatures:no-common-ligatures;font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph{margin:0 0 1rem;line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph .hyperlink{text-decoration:underline}.hyperlink{transition:all .15s ease;text-decoration:underline;color:var(--ds-advanced-color-hyperlink-text);border-radius:3px;outline-offset:unset;outline-style:solid;outline-width:1px;outline-color:transparent}.hyperlink:visited{color:var(--ds-advanced-color-hyperlink-text, #2c67b5)}.hyperlink:focus-visible{outline-color:var(--ds-advanced-color-state-focused, #2c67b5);outline-offset:var(--ds-size-25, 0.125rem)}@media(hover: hover){.hyperlink:hover{text-decoration:none;color:var(--ds-advanced-color-hyperlink-text-hover)}}.hyperlink:focus-visible{outline-color:var(--ds-color-border-ui-focus-default, #2c67b5);outline-offset:var(--ds-size-25, 0.125rem)}.hyperlink--nav{display:block;text-decoration:none}@media(hover: hover){.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav:focus-visible{outline-width:var(--ds-size-50, 0.25rem);outline-offset:unset}.hyperlink--ondark{color:var(--ds-advanced-color-hyperlink-text-inverse)}@media(hover: hover){.hyperlink--ondark:hover{color:var(--ds-advanced-color-hyperlink-text-inverse-hover)}}.hyperlink--ondark:visited{color:var(--ds-advanced-color-hyperlink-text-inverse)}img{max-width:100%}small,.type--small{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}.fineprint{font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem);color:var(--ds-color-text-secondary-default, #525252)}.auro-markdown p:last-child{margin-bottom:0}.hljs{background-color:unset !important;padding:unset !important}pre{background:var(--ds-color-brand-gray-100, #f7f7f7) !important;border:unset !important;padding:var(--ds-size-200) !important;margin-bottom:var(--ds-size-300, 1.5rem) !important;border-style:solid !important;border-width:1px !important;border-color:var(--ds-color-border-secondary-default) !important;border-radius:.5rem;margin-top:var(--ds-size-200) !important;box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.1) !important;overflow-x:scroll !important}pre code{font-size:.85rem !important;font-family:monospace;text-shadow:none}.pre-wrapper:last-of-type pre{margin-bottom:0 !important}code:not(.html):not(.css):not(.js):not([class*=language-]){color:var(--ds-color-brand-flamingo-500, #b82b47);margin-bottom:0 !important}.token.operator{background-color:unset !important}auro-accordion:not(.section){margin-top:1rem !important;display:block}auro-accordion:not(.section):nth-child(2){margin-block-start:0}auro-accordion[class~=section]::part(accordion){padding-right:2px;display:block}.accordion-content{padding-top:1rem}.token.operator{background-color:unset !important}auro-accordion:not(auro-accordion-group *){margin-top:1rem !important;display:block}.pre-wrapper{position:relative}.copy-btn{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .15s ease;background:var(--ds-color-container-primary-default, #fff);border:1px solid var(--ds-color-border-secondary-default, #ccc);border-radius:4px;padding:4px 8px;cursor:pointer;font-size:12px;line-height:1;color:var(--ds-color-text-secondary-default, #333);z-index:1}.copy-btn:hover{background:var(--ds-color-container-secondary-default, #f0f0f0)}.pre-wrapper:hover .copy-btn{opacity:1}.exampleWrapper{background-color:var(--ds-basic-color-surface-default);padding:1rem;border-radius:.5rem;margin-top:1rem}.exampleWrapper--ondark{background-color:var(--ds-basic-color-surface-inverse);padding:1rem;border-radius:.5rem;margin-top:1rem}table{--ds-color-container-secondary-default: transparent}table.compressed{width:unset !important;margin:var(--ds-size-50) 0 var(--ds-size-100) !important}table.compressed th,table.compressed td{padding:var(--ds-size-50) !important}tr:not(:last-of-type){border-bottom:1px solid var(--ds-color-border-tertiary-default)}body{padding:0;display:flex;flex-direction:column}main{display:flex;flex-direction:column;min-height:0;flex:1}.contentWrapper{display:flex;flex-direction:row-reverse;gap:25px;align-items:flex-start}.contentWrapper>nav{width:200px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}.contentWrapper>nav auro-nav{display:block}.mainContent{flex:1;display:flex;flex-direction:column;flex-basis:0;box-sizing:border-box;min-width:0}.scrollWrapper{flex:1;min-height:0}auro-nav{max-width:200px;position:sticky;top:2rem;align-self:flex-start;max-height:calc(100vh - 4rem);overflow-y:auto}auro-anchorlink[class~=level2]{padding-left:var(--ds-size-200)}p:first-of-type{margin-top:0}.note,.warning{margin:10px 0;padding:10px;border-radius:6px;font-style:italic}.note{background-color:var(--ds-basic-color-surface-neutral-subtle);color:var(--ds-basic-color-texticon-muted)}.warning{background-color:var(--ds-basic-color-status-error-subtle);color:var(--ds-basic-color-status-error)}auro-header{margin-top:1rem}body{padding:var(--ds-size-400, 2rem)}main{margin:0 auto;max-width:64rem}#page-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:8px 16px;background:var(--ds-color-background-lightest, #fff);border-bottom:1px solid var(--ds-color-border-subtle, #ddd);font-family:var(--ds-text-body-default-font, sans-serif);font-size:.8rem}

package/components/counter/demo/why-counter.html

@@ -0,0 +1,57 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/why-counter.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-counter | Why auro-counter</title>
+
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
+
+    <!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="./styles.min.css" />
+    <style>
+      table {
+        --ds-color-container-secondary-default: transparent;
+      }
+
+      tr:not(:last-of-type) {
+        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
+      }
+    </style>
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import { renderPage } from './demo-support.min.js';
+      await renderPage('./why-counter.md');
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+  </body>
+</html>