@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.14 → 0.0.0-pr624.16

package/components/bibtemplate/dist/index.js

@@ -3,9 +3,9 @@ import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-var colorCss$1 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
+var colorCss$3 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -16,7 +16,7 @@ var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -119,6 +119,999 @@ class AuroDependencyVersioning {
   }
 }
 
+/**
+ * Private module-level WeakMap to hold MutationObservers for each host element.
+ */
+const _observers = new WeakMap();
+
+/**
+ * Private module-level WeakMap to hold attribute matchers and targets for each host element.
+ * Structure: { 
+ *   host: { 
+ *     matchers: Set<Function>, 
+ *     targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>> 
+ *   } 
+ * }
+ */
+const _transportConfig = new WeakMap();
+
+/**
+ * Transfers all matching attributes from a host element to a target element and observes for future changes.
+ * 
+ * @param {Object} params - The parameters for the function.
+ * @param {HTMLElement} params.host - The host element from which attributes will be transported.
+ * @param {HTMLElement} params.target - The target element to which attributes will be transported.
+ * @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
+ * @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
+ * @returns {Function} A function to detach the observer when no longer needed.
+ * @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
+ */
+const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
+  // Guard Clause: Ensure host is valid HTMLElement instance
+  if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
+    throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
+  }
+
+  // Guard Clause: Ensure target is valid HTMLElement instance
+  if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
+    throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
+  }
+
+  // Guard Clause: Ensure match is a function
+  if (typeof match !== 'function') {
+    throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
+  }
+
+  // Guard Clause: Ensure removeOriginal is a boolean
+  if (typeof removeOriginal !== 'boolean') {
+    throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
+  }
+  
+  // Register this transport and get cleanup function
+  return _registerTransport({
+    host,
+    target,
+    matcher: match,
+    removeOriginal
+  });
+};
+
+/**
+ * Registers a matcher and target for a host element and attaches an observer if needed.
+ * 
+ * @param {Object} params - The parameters object.
+ * @param {HTMLElement} params.host - The host element to observe.
+ * @param {HTMLElement} params.target - The target element to receive attributes.
+ * @param {Function} params.matcher - Function that determines which attributes to transport.
+ * @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
+ * @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
+ * @returns {Function} Function to detach the specific matcher and target pairing.
+ * @private
+ */
+const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
+  // Initialize config for this host if it doesn't exist
+  if (!_transportConfig.has(host)) {
+    _transportConfig.set(host, {
+      matchers: new Set(),
+      targets: new Map()
+    });
+  }
+
+  const config = _transportConfig.get(host);
+  
+  // Add the matcher to the set of matchers for this host
+  config.matchers.add(matcher);
+  
+  // Initialize target entry if it doesn't exist
+  if (!config.targets.has(target)) {
+    config.targets.set(target, new Map());
+  }
+  
+  // Store the matcher with its removeOriginal setting for this target
+  config.targets.get(target).set(matcher, { 
+    removeOriginal,
+    currentAttributes: new Map()
+  });
+  
+  // Perform initial attribute transport
+  _transportAttributes({ host, target, matcher, removeOriginal });
+  
+  // Attach observer
+  _attachObserver(host);
+  
+  // Return cleanup function and utility functions
+  return {
+    cleanup: () => _cleanupTransport(host, target, matcher),
+    getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
+    getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
+  }
+};
+
+/**
+ * Cleans up resources associated with a specific matcher and target for a host element.
+ * 
+ * @param {HTMLElement} host - The host element
+ * @param {HTMLElement} target - The target element
+ * @param {Function} matcher - The matcher function
+ * @private
+ */
+const _cleanupTransport = (host, target, matcher) => {
+  const config = _transportConfig.get(host);
+  if (!config) return;
+  
+  // Remove this matcher from this target
+  const targetMatchers = config.targets.get(target);
+  if (targetMatchers) {
+    targetMatchers.delete(matcher);
+    
+    // If this target has no more matchers, remove it
+    if (targetMatchers.size === 0) {
+      config.targets.delete(target);
+    }
+  }
+  
+  // Check if this matcher is still used by any target
+  let matcherStillUsed = false;
+  for (const matcherMap of config.targets.values()) {
+    if (matcherMap.has(matcher)) {
+      matcherStillUsed = true;
+      break;
+    }
+  }
+  
+  // If not used anymore, remove from matchers set
+  if (!matcherStillUsed) {
+    config.matchers.delete(matcher);
+  }
+  
+  // If no more targets or matchers, detach observer
+  if (config.targets.size === 0 || config.matchers.size === 0) {
+    _detachObserver(host);
+  }
+};
+
+/**
+ * Generic function to transport attributes from a host element to a target element.
+ * 
+ * @param {Object} params - The parameters object.
+ * @param {HTMLElement} params.host - The host element from which to transport attributes.
+ * @param {HTMLElement} params.target - The target element to which attributes will be transported.
+ * @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
+ * @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
+ * @returns {void}
+ * @private
+ */
+const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
+  // Get a list of all matching attributes on the host element and their values
+  const matchingAttributes = host.getAttributeNames()
+    .filter(attr => matcher(attr))
+    .reduce((acc, attr) => {
+      acc[attr] = host.getAttribute(attr);
+      return acc;
+    }, {});
+
+  // Move matching attributes to the target element, removing them from the host if removeOriginal is true
+  Object.entries(matchingAttributes).forEach(([key, value]) => {
+    _setObservedAttribute(host, target, matcher, key, value);
+    target.setAttribute(key, value);
+    if (removeOriginal) {
+      host.removeAttribute(key);
+    }
+  });
+};
+
+/**
+ * Attaches a MutationObserver to the host element to monitor attribute changes.
+ * 
+ * @param {HTMLElement} host - The element to observe for attribute changes.
+ * @returns {MutationObserver} The observer instance.
+ * @private
+ */
+const _attachObserver = (host) => {
+  // If an observer for this host already exists, return it
+  if (_observers.has(host)) {
+    return _observers.get(host);
+  }
+
+  // Create a new MutationObserver
+  const observer = new MutationObserver((mutations) => {
+    const config = _transportConfig.get(host);
+    if (!config) return;
+    
+    // For each mutation affecting attributes
+    mutations
+      .filter(mutation => mutation.type === 'attributes')
+      .forEach(mutation => {
+        const attributeName = mutation.attributeName;
+        
+        // Find matchers that care about this attribute
+        for (const matcher of config.matchers) {
+          if (matcher(attributeName)) {
+            // For each target that uses this matcher
+            for (const [target, matcherConfigs] of config.targets.entries()) {
+              if (matcherConfigs.has(matcher)) {
+                const { removeOriginal } = matcherConfigs.get(matcher);
+                _transportAttributes({
+                  host,
+                  target,
+                  matcher,
+                  removeOriginal
+                });
+              }
+            }
+          }
+        }
+      });
+  });
+
+  // Start observing attribute changes
+  observer.observe(host, { attributes: true });
+  
+  // Store the observer
+  _observers.set(host, observer);
+  
+  return observer;
+};
+
+/**
+ * Detaches and cleans up the MutationObserver for a given host element.
+ * 
+ * @param {HTMLElement} host - The element whose observer should be detached.
+ * @private
+ */
+const _detachObserver = (host) => {
+  if (_observers.has(host)) {
+    const observer = _observers.get(host);
+    observer.disconnect();
+    _observers.delete(host);
+  }
+  
+  // Clean up the transport config as well
+  if (_transportConfig.has(host)) {
+    _transportConfig.delete(host);
+  }
+};
+
+/**
+ * Gets the matcher configuration for a specific host, target, and matcher
+ * @param {HTMLElement} host - The host element
+ * @param {HTMLElement} target - The target element
+ * @param {Function} matcher - The matcher function
+ * @returns {Object|undefined} The matcher configuration if found
+ * @private
+ */
+const _getMatcherConfig = (host, target, matcher) => {
+  const config = _transportConfig.get(host);
+  if (!config) return undefined;
+  
+  const targetMatchers = config.targets.get(target);
+  if (!targetMatchers) return undefined;
+  
+  return targetMatchers.get(matcher);
+};
+
+/**
+ * Sets an observed attribute value
+ * @param {HTMLElement} host - The host element
+ * @param {HTMLElement} target - The target element
+ * @param {Function} matcher - The matcher function
+ * @param {string} key - The attribute name
+ * @param {string} value - The attribute value
+ * @private
+ */
+const _setObservedAttribute = (host, target, matcher, key, value) => {
+  const matcherConfig = _getMatcherConfig(host, target, matcher);
+  if (matcherConfig) {
+    matcherConfig.currentAttributes.set(key, value);
+  }
+};
+
+const _getObservedAttribute = (host, target, matcher, attr) => {
+  const matcherConfig = _getMatcherConfig(host, target, matcher);
+  if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
+  return undefined;
+};
+
+const _getObservedAttributes = (host, target, matcher) => {
+  const matcherConfig = _getMatcherConfig(host, target, matcher);
+  if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
+  return [];
+};
+
+const _matchers = {
+  'aria-': attr => attr.startsWith('aria-'),
+  'role': attr => attr.match(/^role$/)
+};
+
+const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
+  return transportAttributes({
+    host,
+    target,
+    match: attr => {
+      for (const key in _matchers) {
+        if (_matchers[key](attr)) return true;
+      }
+      return false;
+    },
+    removeOriginal
+  });
+};
+
+let AuroElement$1 = class AuroElement extends LitElement {
+
+  /**
+   * @type {Object} return object from transportAttributes via a11yUtilities
+   * @property {Function} cleanup - Function to clean up the attribute watcher.
+   * @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
+   * @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
+   * @private
+   */
+  attributeWatcher;
+
+  static get properties() {
+    return {
+
+      /**
+       * Defines the layout of an element.
+       * @default {'default'}
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+      
+      /**
+       * Defines the shape of an element.
+       * @property {'default', 'rounded', 'pill', 'circle'}
+       * @default {'default'}
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Defines the size of an element.
+       * @property {'xs', 'sm', 'md', 'lg', 'xl'}
+       * @default {'md'}
+       */
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      /** 
+       * This Boolean attribute lets you specify that the element should be rendered in dark mode.
+       * @default {false}
+       */
+      onDark: {
+        type: Boolean,
+        attribute: "ondark",
+        reflect: true
+      },
+
+      /**
+       * A reference to the wrapper element in the shadow DOM.
+       * This is used to apply layout and shape classes dynamically.
+       * @type {HTMLElement|null}
+       * @default {null}
+       * @private
+       */
+      wrapper: {
+        type: HTMLElement,
+        attribute: false,
+        reflect: false
+      }
+    };
+  }
+
+  
+
+  resetShapeClasses() {
+    if (this.shape && this.size) {
+
+      if (this.wrapper) {
+        this.wrapper.classList.forEach((className) => {
+          if (className.startsWith('shape-')) {
+            this.wrapper.classList.remove(className);
+          }
+        });
+
+        this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
+      }
+    }
+  }
+
+  resetLayoutClasses() {
+    if (this.layout) {
+      if (this.wrapper) {
+        this.wrapper.classList.forEach((className) => {
+          if (className.startsWith('layout-')) {
+            this.wrapper.classList.remove(className);
+          }
+        });
+
+        this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
+      }
+    }
+  }
+
+  updateComponentArchitecture() {
+    this.resetLayoutClasses();
+    this.resetShapeClasses();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
+      this.updateComponentArchitecture();
+    }
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+
+    // Set a reference to the wrapper element in the shadow DOM
+    this.wrapper = this.shadowRoot.querySelector('.wrapper');
+
+    // Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
+    this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // Cleanup the ARIA observer if it exists
+    if (this.attributeWatcher) {
+      this.attributeWatcher.cleanup();
+      this.attributeWatcher = null;
+    }
+  }
+
+  // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
+  // This will catch if an invalid layout value is passed in and render the default layout if so.
+  render() {
+    try {
+      return this.renderLayout();
+    } catch (error) {
+      // failed to get the defined layout
+      console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
+
+      // fallback to the default layout
+      return this.getLayout('default');
+    }
+  }
+};
+
+var styleCss$3 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding 300ms ease-out}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible,.auro-button:focus{outline:none;outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:calc(var(--ds-size-50, 0.25rem)*-1)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]),.auro-button:focus:not([variant=secondary]):not([variant=tertiary]){outline-width:calc(var(--ds-size-50, 0.25rem) - 1px)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=ghost]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button.icon-only ::slotted(:not(auro-icon):not([auro-icon])){display:none}.auro-button--slim{min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]),.auro-button--iconOnly:not(.auro-button--rounded):focus:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]){outline-width:1px;outline-offset:-2px}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:padding 300ms ease-out,outline 0ms,outline-offset 0ms}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--rounded:focus-visible:not([variant=flat]):after,.auro-button--rounded:focus:not([variant=flat]):after{border-radius:100px}:host([size=xs]) .wrapper:focus-visible,:host([size=xs]) .wrapper:focus{outline-width:1px;outline-offset:-2px}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
+
+var colorCss$2 = css`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=ghost]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-ghost-text, #01426a)}.auro-button:not([ondark])[variant=ghost]:active:not(:disabled),.auro-button:not([ondark])[variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=ghost]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=ghost]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=ghost]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:active:not(:disabled),.auro-button[ondark][variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05))}.auro-button[ondark][variant=ghost]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
+
+var tokensCss$2 = css`:host(:not([onDark])){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color:transparent}:host([onDark]){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-tap-color:transparent}`;
+
+var shapeSize = css`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:6px;overflow:hidden;font-size:18px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:6px;overflow:hidden;font-size:18px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;border-radius:6px;overflow:hidden;font-size:16px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:6px;overflow:hidden;font-size:14px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:4px;overflow:hidden;font-size:12px;outline-offset:-2px;outline-width:1px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:34px;overflow:hidden;font-size:18px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:34px 0 0 34px;overflow:hidden}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:0 34px 34px 0;overflow:hidden}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:26px;overflow:hidden;font-size:18px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:26px 0 0 26px;overflow:hidden}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:0 26px 26px 0;overflow:hidden}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-radius:22px;overflow:hidden}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-radius:22px 0 0 22px;overflow:hidden}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-radius:0 22px 22px 0;overflow:hidden;font-size:16px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:16px;overflow:hidden;font-size:14px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:16px 0 0 16px;overflow:hidden}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:0 16px 16px 0;overflow:hidden}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:10px;overflow:hidden;font-size:12px;outline-offset:-2px;outline-width:1px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:10px 0 0 10px;overflow:hidden;outline-offset:-2px;outline-width:1px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:0 10px 10px 0;overflow:hidden;outline-offset:-2px;outline-width:1px}.shape-circle-xl{min-height:68px;max-height:68px;min-width:68px;max-width:68px;border-style:solid;border-radius:34px;overflow:hidden;padding:0}.shape-circle-lg{min-height:52px;max-height:52px;min-width:52px;max-width:52px;border-style:solid;border-radius:26px;overflow:hidden;padding:0}.shape-circle-md{min-height:44px;max-height:44px;min-width:44px;max-width:44px;border-style:solid;border-radius:22px;overflow:hidden;padding:0}.shape-circle-sm{min-height:32px;max-height:32px;min-width:32px;max-width:32px;border-style:solid;border-radius:16px;overflow:hidden;padding:0}.shape-circle-xs{min-height:20px;max-height:20px;min-width:20px;max-width:20px;border-style:solid;border-radius:10px;overflow:hidden;padding:0;outline-offset:-2px;outline-width:1px}`;
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+};
+
+var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
+
+var colorCss$1 = css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
+
+var tokensCss$1 = css`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+class AuroLoader extends LitElement {
+  constructor() {
+    super();
+
+    /**
+     * @private
+     */
+    this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+    /**
+     * @private
+     */
+    this.mdCount = 3;
+
+    /**
+     * @private
+     */
+    this.smCount = 2;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+
+    this.orbit = false;
+    this.ringworm = false;
+    this.laser = false;
+    this.pulse = false;
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+
+      /**
+       * Sets loader to laser type.
+       */
+      laser: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Sets loader to orbit type.
+       */
+      orbit: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Sets loader to pulse type.
+       */
+      pulse: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Sets loader to ringworm type.
+       */
+      ringworm: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return [
+      css`${styleCss$2}`,
+      css`${colorCss$1}`,
+      css`${tokensCss$1}`
+    ];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-loader"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
+   *
+   */
+  static register(name = "auro-loader") {
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  /**
+   * @private
+   * @returns {Array} Numbered array for template map.
+   */
+  defineTemplate() {
+    let nodes = Array.from(Array(this.mdCount).keys());
+
+    if (this.orbit || this.laser) {
+      nodes = Array.from(Array(this.smCount).keys());
+    } else if (this.ringworm) {
+      nodes = Array.from(Array(0).keys());
+    }
+
+    return nodes;
+  }
+
+  // When using auroElement, use the following attribute and function when hiding content from screen readers.
+  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return html`
+      ${this.defineTemplate().map((idx) => html`
+        <span part="element" class="loader node-${idx}"></span>
+      `)}
+
+      <div class="no-animation">Loading...</div>
+
+      ${this.ringworm ? html`
+        <svg  part="element" class="circular" viewBox="25 25 50 50">
+          <circle class="path" cx="50" cy="50" r="20" fill="none"/>
+        </svg>`
+        : ``
+      }
+    `;
+  }
+}
+
+var loaderVersion = '5.0.0';
+
+/* eslint-disable max-lines, curly */
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * @slot - Default slot for the text of the button.
+ * @csspart button - Apply CSS to HTML5 button.
+ * @csspart loader - Apply CSS to auro-loader.
+ * @csspart text - Apply CSS to text slot.
+ * @csspart icon - Apply CSS to icon slot.
+ */
+
+/* eslint-disable lit/no-invalid-html, lit/binding-positions */
+
+const ICON_ONLY_SHAPES = ['circle'];
+
+/**
+ * AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
+ * It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
+ * @property {'default', 'rounded', 'pill', 'circle'} shape - Defines the shape of the button.
+ * @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
+ * @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
+ * @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
+ * @property {boolean} onDark - Indicates if the button is rendered in dark mode.
+ */
+class AuroButton extends AuroElement$1 {
+
+  /**
+   * Enables form association for this element.
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
+   * @returns {boolean} - Returns true to enable form association.
+   */
+  static get formAssociated() {
+    return true;
+  }
+
+  constructor() {
+    super();
+    this.autofocus = false;
+    this.disabled = false;
+    this.loading = false;
+    this.size = "md";
+    this.shape = "rounded";
+    this.onDark = false;
+    this.fluid = false;
+    this.loadingText = this.loadingText || 'Loading...';
+
+    // Support for HTML5 forms
+    if (typeof this.attachInternals === 'function') {
+      this.internals = this.attachInternals();
+    } else {
+      this.internals = null;
+
+      // eslint-disable-next-line no-console
+      console.warn('This browser does not support form association features. Some form-related functionality may not work as expected. Consider using a polyfill or handling click events manually.');
+    }
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
+  }
+
+  static get styles() {
+    return [
+      tokensCss$2,
+      styleCss$3,
+      colorCss$2,
+      shapeSize
+    ];
+  }
+
+  static get properties() {
+    return {
+
+      ...super.properties,
+
+      /**
+       * Override layout since it isn't used in this component.
+       * @private
+       */
+      layout: {
+        type: Boolean,
+        attribute: false,
+        reflect: false
+      },
+
+      /**
+       * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
+       */
+      autofocus: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If set to true, button will become disabled and not allow for interactions.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Alters the shape of the button to be full width of its parent container.
+       */
+      fluid: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If set to true button text will be replaced with `auro-loader` and become disabled.
+       */
+      loading: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
+       */
+      loadingText: {
+        type: String
+      },
+
+      /**
+       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       */
+      tIndex: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
+       */
+      title: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * The type of the button. Possible values are: `submit`, `reset`, `button`.
+       */
+      type: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Defines the value associated with the button which is submitted with the form data.
+       */
+      value: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Sets button variant option.
+       * @default primary
+       */
+      variant: {
+        type: String,
+        reflect: true
+      },
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-button"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroButton.register("custom-button") // this will register this element to <custom-button/>
+   *
+   */
+  static register(name = "auro-button") {
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
+  }
+
+  /**
+   * Internal method to apply focus to the HTML5 button.
+   * @private
+   * @returns {void}
+   */
+  focus() {
+    this.renderRoot.querySelector('button').focus();
+  }
+
+  /**
+   * Submits the form that this button is associated with.
+   * @private
+   * @returns {void}
+   */
+  surfaceSubmitEvent() {
+    if (this.form) {
+      this.form.requestSubmit();
+    }
+  }
+
+  /**
+   * Returns the form element that this button is associated with.
+   * @private
+   * @returns {HTMLFormElement | null}
+   */
+  get form() {
+    return this.internals ? this.internals.form : null;
+  }
+
+  /**
+   * @private
+   * @returns {Boolean}
+   */
+  get hideText() {
+    return ICON_ONLY_SHAPES.includes(this.shape);
+  }
+
+  /**
+   * Returns the current value of the projected `aria-label` attribute or undefined if not set.
+   * @returns {string | undefined}
+   * @private
+   */
+  get currentAriaLabel() {
+    if (!this.attributeWatcher) return undefined;
+
+    const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
+    return ariaLabel || undefined;
+  }
+
+  /**
+   * Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
+   * @returns {string | undefined}
+   * @private
+   */
+  get currentAriaLabelledBy() {
+    if (!this.attributeWatcher) return undefined;
+
+    const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
+    return ariaLabelledBy || undefined;
+  }
+
+  /**
+   * Renders the default layout for the button.
+   * @returns {TemplateResult}
+   * @private
+   */
+  renderLayoutDefault() {
+    const classes = {
+      "util_insetLg--squish": true,
+      "auro-button": true,
+      "icon-only": this.hideText,
+      wrapper: true,
+      loading: this.loading,
+    };
+
+    return html$1`
+      <button
+        part="button"
+        aria-label="${ifDefined(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
+        aria-labelledby="${ifDefined(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
+        tabIndex="${ifDefined(this.tIndex)}"
+        ?autofocus="${this.autofocus}"
+        class="${classMap(classes)}"
+        ?disabled="${this.disabled || this.loading}"
+        ?onDark="${this.onDark}"
+        title="${ifDefined(this.title ? this.title : undefined)}"
+        name="${ifDefined(this.name ? this.name : undefined)}"
+        type="${ifDefined(this.type ? this.type : undefined)}"
+        variant="${ifDefined(this.variant ? this.variant : undefined)}"
+        .value="${ifDefined(this.value ? this.value : undefined)}"
+        @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+      >
+        ${ifDefined(this.loading ? html$1`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
+
+        <span class="contentWrapper">
+          <span class="textSlot" part="text">
+            <slot></slot>
+          </span>
+        </span>
+      </button>
+    `;
+  }
+
+  /**
+   * Renders the layout of the button
+   * @returns {TemplateResult}
+   * @private
+   */
+  renderLayout() {
+    return this.renderLayoutDefault();
+  }
+}
+
+var buttonVersion = '11.0.0';
+
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -465,8 +1458,12 @@ class AuroIcon extends BaseIcon {
   async firstUpdated() {
     await super.firstUpdated();
 
-    // Removes the SVG description for screenreader if ariaHidden is set to true
-    if (!this.hasAttribute('ariaHidden') && this.svg) {
+    /**
+     * icons provide a description for screen readers. Icon only instances Auro-button
+     * depend on this description to provide context for the user using a screen reader.
+     * Removes the SVG description for screen reader if ariaHidden is set to true.
+     */
+    if (this.hasAttribute('ariaHidden') && this.svg) {
       const svgDesc = this.svg.querySelector('desc');
 
       if (svgDesc) {
@@ -510,7 +1507,7 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '8.0.3';
+var iconVersion = '8.0.4';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -737,17 +1734,30 @@ class AuroBibtemplate extends LitElement {
 
     this.large = false;
 
-    AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+    AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
 
     const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
     this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
+
+    /**
+     * @private
+     */
     this.headerTag = versioning.generateTag('auro-formkit-bibtemplate-header', headerVersion, AuroHeader);
+
+    /**
+     * @private
+     */
+    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
   }
 
   static get styles() {
     return [
-      colorCss$1,
-      styleCss$2,
+      colorCss$3,
+      styleCss$4,
       tokenCss
     ];
   }
@@ -776,7 +1786,7 @@ class AuroBibtemplate extends LitElement {
    *
    */
   static register(name = "auro-bibtemplate") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroBibtemplate);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
   /**
@@ -834,9 +1844,9 @@ class AuroBibtemplate extends LitElement {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html$1`
         <div id="headerContainer">
-          <button id="closeButton" @click="${this.onCloseButtonClick}">
+          <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
             <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
-          </button>
+          </${this.buttonTag}>
           <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
             <slot name="header"></slot>
           </${this.headerTag}>