@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.2 → 0.0.0-pr624.21

package/components/menu/demo/api.min.js

@@ -64,11 +64,106 @@ const t$1=globalThis,i$3=t$1.trustedTypes,s$2=i$3?i$3.createPolicy("lit-html",{c
  * SPDX-License-Identifier: BSD-3-Clause
  */const s$1=globalThis;let i$2 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};i$2._$litElement$=true,i$2["finalized"]=true,s$1.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$1.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$1.litElementVersions??=[]).push("4.2.0");
 
-var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
+var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
 
 var colorCss$2 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
 
-var tokensCss$1 = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
+var tokensCss$1 = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
+
+let AuroElement$1 = class AuroElement extends i$2 {
+  static get properties() {
+    return {
+
+      /**
+       * Defines the language of an element.
+       * @default {'default'}
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      onDark: {
+        type: Boolean,
+        attribute: "ondark",
+        reflect: true
+      }
+    };
+  }
+
+  resetShapeClasses() {
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+    if (wrapper) {
+      wrapper.classList.forEach((className) => {
+        if (className.startsWith('shape-')) {
+          wrapper.classList.remove(className);
+        }
+      });
+
+    }
+
+    if (this.shape && this.size) {
+      wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
+    } else {
+      wrapper.classList.add('shape-none');
+    }
+  }
+
+  resetLayoutClasses() {
+    if (this.layout) {
+      const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+      if (wrapper) {
+        wrapper.classList.forEach((className) => {
+          if (className.startsWith('layout-')) {
+            wrapper.classList.remove(className);
+          }
+        });
+
+        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();
+    }
+  }
+
+  // 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');
+    }
+  }
+};
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -77,7 +172,7 @@ var tokensCss$1 = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-b
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -138,7 +233,7 @@ class AuroLibraryRuntimeUtils {
 
     return elemTag === tag || elem.hasAttribute(tag);
   }
-}
+};
 
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -204,14 +299,17 @@ function dispatchMenuEvent(element, eventName, detail = null) {
  * @slot - Slot for insertion of menu options.
  */
 
-/* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
+/* eslint-disable no-magic-numbers, max-lines, no-extra-parens, no-inline-comments, line-comment-position */
 
-class AuroMenu extends i$2 {
+class AuroMenu extends AuroElement$1 {
   constructor() {
     super();
 
     // State properties (reactive)
 
+    this.shape = ""; // box, rounded, pill
+    this.size = ""; // md, lg, xl
+
     // Value of the selected options
     this.value = undefined;
     // Currently selected option
@@ -270,6 +368,7 @@ class AuroMenu extends i$2 {
 
   static get properties() {
     return {
+      ...super.properties,
       noCheckmark: {
         type: Boolean,
         reflect: true,
@@ -303,6 +402,16 @@ class AuroMenu extends i$2 {
       value: {
         // Allow string, string[] arrays and undefined
         type: Object
+      },
+
+      /**
+       * Indent level for submenus.
+       * @private
+       */
+      level: {
+        type: Number,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -324,7 +433,7 @@ class AuroMenu extends i$2 {
    *
    */
   static register(name = "auro-menu") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
   }
 
   // Lifecycle Methods
@@ -336,6 +445,7 @@ class AuroMenu extends i$2 {
     this.addEventListener('mousedown', this.handleMouseSelect);
     this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
     this.addEventListener('slotchange', this.handleSlotChange);
+    this.setTagAttribute("auro-menu");
   }
 
   disconnectedCallback() {
@@ -348,19 +458,33 @@ class AuroMenu extends i$2 {
   }
 
   firstUpdated() {
-    AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-menu');
+    AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-menu');
 
     this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
     this.initializeMenu();
   }
 
+  /**
+   * Sets an attribute that matches the default tag name if the tag name is not the default.
+   * @param {string} tagName - The tag name to set as an attribute.
+   * @private
+   */
+  setTagAttribute(tagName) {
+    if (this.tagName.toLowerCase() !== tagName) {
+      this.setAttribute(tagName, true);
+    }
+  }
+
   updated(changedProperties) {
+    super.updated(changedProperties);
+
     if (changedProperties.has('multiSelect')) {
       // Reset selection if multiSelect mode changes
       this.clearSelection();
     }
 
-    if (changedProperties.has('value')) {
+
+    if (changedProperties.has("value")) {
       // Handle null/undefined case
       if (this.value === undefined || this.value === null) {
         this.optionSelected = undefined;
@@ -428,6 +552,19 @@ class AuroMenu extends i$2 {
       this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => element.setAttribute('noCheckmark', ''));
     }
 
+    // Handle layout propagation to all menus and options
+    const propagationTargets = this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]');
+    [
+      'size',
+      'shape'
+    ].forEach((prop) => {
+      if (changedProperties.has(prop)) {
+        propagationTargets.forEach((el) => {
+          el.setAttribute(prop, this[prop]);
+        });
+      }
+    });
+
     // Regex for matchWord if needed
     let regexWord = null;
 
@@ -624,21 +761,20 @@ class AuroMenu extends i$2 {
    * @param {HTMLElement} menu - Root menu element.
    */
   handleNestedMenus(menu) {
-    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu]');
+    menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
 
-    nestedMenus.forEach((nestedMenu) => {
-      // role="listbox" only allows "role=group" for children.
-      nestedMenu.setAttribute('role', 'group');
-      if (!nestedMenu.hasAttribute('aria-label')) {
-        nestedMenu.setAttribute('aria-label', 'submenu');
+    if (menu.level > 0) {
+      menu.setAttribute('role', 'group');
+      menu.removeAttribute("root");
+      if (!menu.hasAttribute('aria-label')) {
+        menu.setAttribute('aria-label', 'submenu');
       }
+    }
 
-      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
-      options.forEach((option) => {
-        option.innerHTML = this.nestingSpacer + option.innerHTML;
-      });
-
-      this.handleNestedMenus(nestedMenu);
+    const options = menu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
+    options.forEach((option) => {
+      const regex = new RegExp(this.nestingSpacer, "gu");
+      option.innerHTML = this.nestingSpacer.repeat(menu.level) + option.innerHTML.replace(regex, '');
     });
   }
 
@@ -880,22 +1016,33 @@ class AuroMenu extends i$2 {
   }
 
   /**
-   * Renders the component.
-   * @returns {boolean} - True if loading slots are present and non-empty.
+   * Logic to determine the layout of the component.
+   * @protected
+   * @returns {void}
    */
-  render() {
+  renderLayout() {
     if (this.loading) {
       return x`
-        <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
-          <div>
-            <slot name="loadingIcon"></slot>
-            <slot name="loadingText"></slot>
-          </div>
-        </auro-menuoption>
+        <div class="wrapper">
+          <auro-menuoption
+            disabled
+            loadingplaceholder
+            class="${this.hasLoadingPlaceholder ? "" : "empty"}"
+          >
+            <div>
+              <slot name="loadingIcon"></slot>
+              <slot name="loadingText"></slot>
+            </div>
+          </auro-menuoption>
+        </div>
       `;
     }
 
-    return x`<slot @slotchange=${this.handleSlotChange}></slot>`;
+    return x`
+      <div class="wrapper">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
   }
 }
 
@@ -906,9 +1053,9 @@ class AuroMenu extends i$2 {
  */
 const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
 
-var styleCss$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+var styleCss$1 = i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
+var colorCss$1 = i$5`:host .wrapper{border:1px solid var(--ds-auro-menuoption-container-border-color);background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1123,6 +1270,76 @@ var tokensCss = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-def
 
 var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 
+// 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 */
+
+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);
+  }
+}
+
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -1245,8 +1462,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) {
@@ -1290,7 +1511,7 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '8.0.3';
+var iconVersion = '8.0.4';
 
 var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
@@ -1308,10 +1529,13 @@ var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlin
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
  */
-class AuroMenuOption extends i$2 {
+class AuroMenuOption extends AuroElement$1 {
   constructor() {
     super();
 
+    this.size = ""; // md, lg, xl
+    this.shape = ""; // box, rounded, pill
+
     /**
      * Generate unique names for dependency components.
      */
@@ -1330,11 +1554,12 @@ class AuroMenuOption extends i$2 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
   }
 
   static get properties() {
     return {
+      ...super.properties,
       nocheckmark: {
         type: Boolean,
         reflect: true
@@ -1374,7 +1599,7 @@ class AuroMenuOption extends i$2 {
    *
    */
   static register(name = "auro-menuoption") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenuOption);
   }
 
   firstUpdated() {
@@ -1396,6 +1621,8 @@ class AuroMenuOption extends i$2 {
 
   // observer for selected property changes
   updated(changedProperties) {
+    super.updated(changedProperties);
+
     if (changedProperties.has('selected')) {
       this.setAttribute('aria-selected', this.selected.toString());
     }
@@ -1417,10 +1644,19 @@ class AuroMenuOption extends i$2 {
     return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
   }
 
-  render() {
+  /**
+   * Logic to determine the layout of the component.
+   * @protected
+   * @returns {void}
+   */
+  renderLayout() {
     return u`
-      ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
-      <slot></slot>
+      <div class="wrapper">
+        ${this.selected && !this.nocheckmark
+          ? this.generateIconHtml(checkmarkIcon.svg)
+          : undefined}
+        <slot></slot>
+      </div>
     `;
   }
 }