@aurodesignsystem-dev/auro-formkit 0.0.0-pr1594.2 → 0.0.0-pr1595.1

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

@@ -44,37 +44,37 @@ const t={ATTRIBUTE:1,CHILD:2},e$3=t=>(...e)=>({_$litDirective$:t,values:e});let
  */
 const a=Symbol.for(""),o$3=t=>{if(t?.r===a)return t?._$litStatic$},s$1=t=>({_$litStatic$:t,r:a}),i=(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$1=new Map,n$3=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$3(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$1.get(t))&&(n.raw=n,l$1.set(t,r=n)),e=u;}return t(r,...e)},u$4=n$3(b$1);
 
+/**
+ * AuroElement is the shared base class for layout-aware Auro form components.
+ *
+ * It defines the common `layout`, `shape`, `size`, and `ondark` reactive
+ * properties and the architecture helpers (`renderLayout`, `resetShapeClasses`,
+ * `resetLayoutClasses`) that subclasses use to render a chosen layout and apply
+ * the matching `shape-*` / `layout-*` wrapper classes. Subclasses supply their
+ * own default and valid value set for `layout`, `shape`, and `size`.
+ */
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
     return {
 
       /**
-       * Defines the language of an element.
-       * @default {'default'}
+       * When true, renders the component styled for use on a dark background.
        */
-      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
       }
+
+      // NOTE: `layout`, `shape`, and `size` are intentionally NOT declared here.
+      // Their valid value sets differ per component, and the CEM analyzer roots
+      // an inherited property's `type` in the class that declares it — a base
+      // declaration would force every subclass's `@type` to be discarded and
+      // emitted as plain `string`. Each subclass declares its own `layout` /
+      // `shape` / `size` with an exact `@type` union instead. AuroElement still
+      // consumes `this.layout` / `this.shape` / `this.size` in its render and
+      // architecture helpers below (subclasses guarantee the reactive props).
+      // See AlaskaAirlines/discussions#653.
     };
   }
 
@@ -4247,8 +4247,11 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
 ];
 
 /**
+ * The `auro-dropdownbib` element renders the dropdown's bib as a dialog/popover container and manages its fullscreen and modal display.
  * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
  * @csspart bibContainer - Apply css to the bib container.
+ * @event auro-dropdownbib-connected - Notifies that the dropdown bib has connected to the DOM, passing a reference to the element in the event detail.
+ * @event auro-bib-cancel - Notifies that the bib was cancelled (e.g. via the ESC key) so parent components can close it.
  */
 
 class AuroDropdownBib extends i$2 {
@@ -4263,9 +4266,17 @@ class AuroDropdownBib extends i$2 {
 
     AuroLibraryRuntimeUtils$1$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
 
-    this.shape = "rounded";
     this.matchWidth = false;
     this.hasActiveDescendant = false;
+
+    this.initializeArchitectureDefaults();
+  }
+
+  // The `shape` default is set in a helper (not the constructor body) so the CEM
+  // analyzer keeps its `@type` union instead of inferring `string` from a
+  // constructor-literal assignment. See AlaskaAirlines/discussions#653.
+  initializeArchitectureDefaults() {
+    this.shape = "rounded";
   }
 
   static get styles() {
@@ -4284,6 +4295,7 @@ class AuroDropdownBib extends i$2 {
        */
       isFullscreen: {
         type: Boolean,
+        attribute: 'isfullscreen',
         reflect: true
       },
 
@@ -4309,6 +4321,7 @@ class AuroDropdownBib extends i$2 {
        */
       matchWidth: {
         type: Boolean,
+        attribute: 'matchwidth',
         reflect: true
       },
 
@@ -4324,11 +4337,18 @@ class AuroDropdownBib extends i$2 {
        * A reference to the associated bib template element.
        */
       bibTemplate: {
-        type: Object
+        type: Object,
+        attribute: 'bibtemplate'
       },
 
+      /**
+       * Sets the shape of the dropdown bib.
+       * @type {'box' | 'classic' | 'pill' | 'rounded' | 'snowflake'}
+       * @default 'rounded'
+       */
       shape: {
         type: String,
+        attribute: "shape",
         reflect: true
       },
 
@@ -4340,7 +4360,8 @@ class AuroDropdownBib extends i$2 {
        * @private
        */
       dialogLabel: {
-        type: String
+        type: String,
+        attribute: 'dialoglabel'
       },
 
       /**
@@ -4351,7 +4372,8 @@ class AuroDropdownBib extends i$2 {
        * @private
        */
       dialogRole: {
-        type: String
+        type: String,
+        attribute: 'dialogrole'
       },
 
       /**
@@ -4359,7 +4381,8 @@ class AuroDropdownBib extends i$2 {
        * @private
        */
       hasActiveDescendant: {
-        type: Boolean
+        type: Boolean,
+        attribute: 'hasactivedescendant'
       }
     };
   }
@@ -4710,6 +4733,8 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -4730,8 +4755,8 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
     return {
 
       /**
-       * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -4744,6 +4769,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -4751,6 +4777,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -4766,6 +4793,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -4836,39 +4864,39 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202608261850';
+var formkitVersion$1 = '202608300032';
 
+/**
+ * AuroElement is the shared base class for layout-aware Auro form components.
+ *
+ * It defines the common `layout`, `shape`, `size`, and `ondark` reactive
+ * properties and the architecture helpers (`renderLayout`, `resetShapeClasses`,
+ * `resetLayoutClasses`) that subclasses use to render a chosen layout and apply
+ * the matching `shape-*` / `layout-*` wrapper classes. Subclasses supply their
+ * own default and valid value set for `layout`, `shape`, and `size`.
+ */
 class AuroElement extends i$2 {
   static get properties() {
     return {
 
       /**
-       * Defines the language of an element.
-       * @default {'default'}
+       * When true, renders the component styled for use on a dark background.
        */
-      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
       }
+
+      // NOTE: `layout`, `shape`, and `size` are intentionally NOT declared here.
+      // Their valid value sets differ per component, and the CEM analyzer roots
+      // an inherited property's `type` in the class that declares it — a base
+      // declaration would force every subclass's `@type` to be discarded and
+      // emitted as plain `string`. Each subclass declares its own `layout` /
+      // `shape` / `size` with an exact `@type` union instead. AuroElement still
+      // consumes `this.layout` / `this.shape` / `this.size` in its render and
+      // architecture helpers below (subclasses guarantee the reactive props).
+      // See AlaskaAirlines/discussions#653.
     };
   }
 
@@ -4954,6 +4982,7 @@ class AuroElement extends i$2 {
  * @slot helpText - Defines the content of the helpText.
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
+ * @csspart wrapper - The trigger wrapper element surrounding the trigger content and chevron.
  * @csspart chevron - The collapsed/expanded state icon container.
  * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
@@ -4978,7 +5007,7 @@ class AuroDropdown extends AuroElement {
 
     /**
      * When true, the dropdown skips its generic focus restoration on close.
-     * Set by consumers (e.g. combobox) that manage their own focus routing
+     * Set by consumers (for example combobox) that manage their own focus routing
      * via setClearBtnFocus / setInputFocus / keyboard strategy.
      * Separate from noHideOnThisFocusLoss (which controls auto-close behavior).
      * @private
@@ -5147,7 +5176,7 @@ class AuroDropdown extends AuroElement {
   /**
    * Focus the trigger content. When the trigger wrapper itself is focusable
    * (has tabindex), focus it directly. Otherwise, focus the first focusable
-   * element slotted into the trigger slot (e.g. the auro-input).
+   * element slotted into the trigger slot (for example the auro-input).
    * @private
    */
   focusTrigger() {
@@ -5244,6 +5273,7 @@ class AuroDropdown extends AuroElement {
        */
       autoPlacement: {
         type: Boolean,
+        attribute: 'autoplacement',
         reflect: true
       },
 
@@ -5252,6 +5282,7 @@ class AuroDropdown extends AuroElement {
        */
       desktopModal: {
         type: Boolean,
+        attribute: 'desktopmodal',
         reflect: true
       },
 
@@ -5260,6 +5291,7 @@ class AuroDropdown extends AuroElement {
        */
       disableEventShow: {
         type: Boolean,
+        attribute: 'disableeventshow',
         reflect: true
       },
 
@@ -5293,14 +5325,16 @@ class AuroDropdown extends AuroElement {
        */
       disableKeyboardHandling: {
         type: Boolean,
+        attribute: 'disablekeyboardhandling',
         reflect: true
       },
 
       /**
-       * @private
+       * Sets the width of the dropdown bib in pixels.
        */
       dropdownWidth: {
-        type: Number
+        type: Number,
+        attribute: 'dropdownwidth'
       },
 
       /**
@@ -5325,7 +5359,8 @@ class AuroDropdown extends AuroElement {
        * Contains the help text message for the current validity error.
        */
       errorMessage: {
-        type: String
+        type: String,
+        attribute: 'errormessage'
       },
 
       /**
@@ -5333,6 +5368,7 @@ class AuroDropdown extends AuroElement {
        */
       focusShow: {
         type: Boolean,
+        attribute: 'focusshow',
         reflect: true
       },
 
@@ -5350,6 +5386,7 @@ class AuroDropdown extends AuroElement {
        */
       isBibFullscreen: {
         type: Boolean,
+        attribute: 'isbibfullscreen',
         reflect: true
       },
 
@@ -5358,6 +5395,7 @@ class AuroDropdown extends AuroElement {
        */
       hoverToggle: {
         type: Boolean,
+        attribute: 'hovertoggle',
         reflect: true
       },
 
@@ -5365,7 +5403,8 @@ class AuroDropdown extends AuroElement {
        * @private
        */
       hasTriggerContent: {
-        type: Boolean
+        type: Boolean,
+        attribute: false
       },
 
       /**
@@ -5378,6 +5417,7 @@ class AuroDropdown extends AuroElement {
        */
       fullscreenBreakpoint: {
         type: String,
+        attribute: "fullscreenbreakpoint",
         reflect: true
       },
 
@@ -5388,6 +5428,27 @@ class AuroDropdown extends AuroElement {
        */
       layout: {
         type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      /**
+       * Sets the shape of the dropdown.
+       * @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the dropdown.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       */
+      size: {
+        type: String,
+        attribute: "size",
         reflect: true
       },
 
@@ -5397,6 +5458,7 @@ class AuroDropdown extends AuroElement {
        */
       parentBorder: {
         type: Boolean,
+        attribute: 'parentborder',
         reflect: true
       },
 
@@ -5405,6 +5467,7 @@ class AuroDropdown extends AuroElement {
        */
       matchWidth: {
         type: Boolean,
+        attribute: 'matchwidth',
         reflect: true
       },
 
@@ -5414,6 +5477,7 @@ class AuroDropdown extends AuroElement {
        */
       noFlip: {
         type: Boolean,
+        attribute: 'noflip',
         reflect: true
       },
 
@@ -5430,6 +5494,7 @@ class AuroDropdown extends AuroElement {
        */
       noHideOnThisFocusLoss: {
         type: Boolean,
+        attribute: 'nohideonthisfocusloss',
         reflect: true
       },
 
@@ -5438,6 +5503,7 @@ class AuroDropdown extends AuroElement {
        */
       noToggle: {
         type: Boolean,
+        attribute: 'notoggle',
         reflect: true
       },
 
@@ -5455,14 +5521,17 @@ class AuroDropdown extends AuroElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
       /**
        *  If declared, and a function is set, that function will execute when the slot content is updated.
+       * @type {() => void}
        */
       onSlotChange: {
         type: Function,
+        attribute: 'onslotchange',
         reflect: false
       },
 
@@ -5477,10 +5546,11 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * @private
+       * Sets the tabindex applied to the dropdown trigger for keyboard focus order.
        */
       tabIndex: {
-        type: Number
+        type: Number,
+        attribute: 'tabindex'
       },
 
       /**
@@ -5704,7 +5774,7 @@ class AuroDropdown extends AuroElement {
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.
      * @event auroDropdown-idAdded
-     * @type {Object<key: 'id', value: string>} - The ID of the dropdown bib element.
+     * @type {CustomEvent<{ id: string }>} - Detail carries the generated ID of the dropdown bib element.
      */
     this.dispatchEvent(new CustomEvent('auroDropdown-idAdded', {detail: {id: this.floater.element.id}}));
 
@@ -6554,6 +6624,9 @@ var headerVersion = '5.0.1';
  * @slot subheader - Slot for the subheader content.
  * @slot footer - Slot for the footer content.
  * @slot ariaLabel.close - Slot for the close button aria-label.
+ * @csspart bibtemplate - The outermost bibtemplate container element.
+ * @event close-click - Notifies when the close button is clicked.
+ * @event auro-bibtemplate-connected - Notifies that the bibtemplate has connected to the DOM, passing a reference to the element in the event detail.
  */
 class AuroBibtemplate extends i$2 {
 
@@ -6593,10 +6666,19 @@ class AuroBibtemplate extends i$2 {
   // function to define props used within the scope of this component
   static get properties() {
     return {
+
+      /**
+       * If declared, the bibtemplate renders in fullscreen mode, exposing the header, subheader, and footer regions.
+       */
       isFullscreen: {
         type: Boolean,
+        attribute: 'isfullscreen',
         reflect: true
       },
+
+      /**
+       * If declared, the fullscreen headline renders using the larger display heading style.
+       */
       large: {
         type: Boolean,
         reflect: true
@@ -6607,6 +6689,7 @@ class AuroBibtemplate extends i$2 {
        */
       showFooter: {
         type: Boolean,
+        attribute: 'showfooter',
         reflect: true
       }
     };
@@ -6821,6 +6904,8 @@ class AuroHelpText extends i$2 {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -6841,8 +6926,8 @@ class AuroHelpText extends i$2 {
     return {
 
       /**
-       * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -6855,6 +6940,7 @@ class AuroHelpText extends i$2 {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -6862,6 +6948,7 @@ class AuroHelpText extends i$2 {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -6877,6 +6964,7 @@ class AuroHelpText extends i$2 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -6947,7 +7035,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202608261850';
+var formkitVersion = '202608300032';
 
 var styleCss$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer{max-width:100%}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{overflow:hidden;height:auto;text-overflow:ellipsis;white-space:nowrap}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
 
@@ -6977,6 +7065,9 @@ var emphasizedColorCss = i$5`:host([layout=emphasized]) [auro-dropdown]{--ds-aur
  * @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
  * @csspart dropdownSize - Apply size styles to the dropdown bib (height, width, maxHeight, maxWidth only).
  * @csspart helpText - Apply CSS to the help text.
+ * @csspart wrapper - Apply CSS to the root wrapper element of the select.
+ * @csspart dropdown - Apply CSS to the underlying dropdown element.
+ * @csspart displayValue - Apply CSS to the custom displayValue container.
  */
 
 // build the component class
@@ -7103,6 +7194,7 @@ class AuroSelect extends AuroElement$1 {
        */
       autoPlacement: {
         type: Boolean,
+        attribute: 'autoplacement',
         reflect: true
       },
 
@@ -7135,6 +7227,7 @@ class AuroSelect extends AuroElement$1 {
        */
       flexMenuWidth: {
         type: Boolean,
+        attribute: 'flexmenuwidth',
         reflect: true,
       },
 
@@ -7151,6 +7244,7 @@ class AuroSelect extends AuroElement$1 {
        */
       forceDisplayValue: {
         type: Boolean,
+        attribute: 'forcedisplayvalue',
         reflect: true
       },
 
@@ -7164,6 +7258,7 @@ class AuroSelect extends AuroElement$1 {
        */
       fullscreenBreakpoint: {
         type: String,
+        attribute: 'fullscreenbreakpoint',
         reflect: true
       },
 
@@ -7190,6 +7285,7 @@ class AuroSelect extends AuroElement$1 {
        */
       isPopoverVisible: {
         type: Boolean,
+        attribute: false,
         reflect: false
       },
 
@@ -7199,6 +7295,7 @@ class AuroSelect extends AuroElement$1 {
        */
       largeFullscreenHeadline: {
         type: Boolean,
+        attribute: 'largefullscreenheadline',
         reflect: true
       },
 
@@ -7217,6 +7314,7 @@ class AuroSelect extends AuroElement$1 {
        */
       matchWidth: {
         type: Boolean,
+        attribute: 'matchwidth',
         reflect: true
       },
 
@@ -7242,6 +7340,7 @@ class AuroSelect extends AuroElement$1 {
        */
       noCheckmark: {
         type: Boolean,
+        attribute: 'nocheckmark',
         reflect: true
       },
 
@@ -7251,6 +7350,7 @@ class AuroSelect extends AuroElement$1 {
        */
       noFlip: {
         type: Boolean,
+        attribute: 'noflip',
         reflect: true
       },
 
@@ -7259,6 +7359,7 @@ class AuroSelect extends AuroElement$1 {
        */
       noValidate: {
         type: Boolean,
+        attribute: 'novalidate',
         reflect: true
       },
 
@@ -7276,6 +7377,7 @@ class AuroSelect extends AuroElement$1 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -7284,7 +7386,8 @@ class AuroSelect extends AuroElement$1 {
        * @type {HTMLElement|Array<HTMLElement>}
        */
       optionSelected: {
-        type: Object
+        type: Object,
+        attribute: 'optionselected'
       },
 
       /**
@@ -7317,21 +7420,24 @@ class AuroSelect extends AuroElement$1 {
        * Sets a custom help text message to display for all validityStates.
        */
       setCustomValidity: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidity'
       },
 
       /**
        * Custom help text message to display when validity = `customError`.
        */
       setCustomValidityCustomError: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditycustomerror'
       },
 
       /**
        * Custom help text message to display when validity = `valueMissing`.
        */
       setCustomValidityValueMissing: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityvaluemissing'
       },
 
       /**
@@ -7377,6 +7483,7 @@ class AuroSelect extends AuroElement$1 {
        */
       typeaheadTimeoutMs: {
         type: Number,
+        attribute: 'typeaheadtimeoutms',
         reflect: true
       },
 
@@ -8938,6 +9045,7 @@ let menuInstanceIdCounter = 0;
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
+ * @event {CustomEvent<{ options: Array<HTMLElement> }>} auroMenu-optionsChange - Notifies that the set of available menu options has changed.
  * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
  * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
  * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
@@ -8952,15 +9060,7 @@ class AuroMenu extends AuroElement$1 {
 
     // State properties (reactive)
 
-    /**
-     * @private
-     */
-    this.shape = "box";
-
-    /**
-     * @private
-     */
-    this.size = "sm";
+    this.initializeArchitectureDefaults();
 
     // Value of the selected options
     this.value = undefined;
@@ -9001,8 +9101,6 @@ class AuroMenu extends AuroElement$1 {
 
     // Instance properties (non-reactive)
 
-    menuInstanceIdCounter += 1;
-
     Object.assign(this, {
       // Root-level menu (true) or a nested submenu (false)
       rootMenu: true,
@@ -9014,7 +9112,7 @@ class AuroMenu extends AuroElement$1 {
       loadingSlots: null,
       // Unique id for this menu instance; prefixes every auto-generated option
       // key so keys never collide across menus in the same document.
-      _menuInstanceId: `menu-${menuInstanceIdCounter}`,
+      _menuInstanceId: `menu-${menuInstanceIdCounter += 1}`,
       // Monotonically increasing counter for option key generation. Never
       // resets, so a key is never reused within this instance's lifetime.
       _optionKeyCounter: 0,
@@ -9030,10 +9128,50 @@ class AuroMenu extends AuroElement$1 {
     });
   }
 
+  // Defaults for the layout/shape/size architecture props are set in a helper
+  // (not the constructor body) so the CEM analyzer keeps their `@type` unions
+  // instead of inferring `string` from a constructor-literal assignment.
+  // See AlaskaAirlines/discussions#653.
+  initializeArchitectureDefaults() {
+    this.shape = "box";
+    this.size = "sm";
+  }
+
   static get properties() {
     return {
       ...super.properties,
 
+      /**
+       * Applies a named layout variant to the menu. Free-form string consumed by the shared architecture helpers; menu defines no closed value set.
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      /**
+       * Sets the shape of the menu options.
+       * @type {'box' | 'pill' | 'snowflake'}
+       * @default 'box'
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the menu options.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       * @default 'sm'
+       */
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
       /**
        * When true, the entire menu and all options are disabled.
        */
@@ -9089,6 +9227,7 @@ class AuroMenu extends AuroElement$1 {
       /**
        * Specifies the current active menuOption.
        * @readonly
+       * @type {HTMLElement}
        */
       optionActive: {
         type: Object,
@@ -9098,6 +9237,7 @@ class AuroMenu extends AuroElement$1 {
       /**
        * The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
        * @readonly
+       * @type {HTMLElement | HTMLElement[]}
        */
       optionSelected: {
         // Allow HTMLElement, HTMLElement[] arrays and undefined
@@ -10315,9 +10455,36 @@ class AuroMenuOption extends AuroElement$1 {
   static get properties() {
     return {
       ...super.properties,
+
+      /**
+       * Sets the shape of the option. When unset, it inherits the shape of the parent `auro-menu`.
+       * @type {'box' | 'pill' | 'snowflake'}
+       * @default 'box'
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the option. When unset, it inherits the size of the parent `auro-menu`.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       * @default 'sm'
+       */
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      /**
+       * When true, this option will not show the checkmark when selected.
+       */
       noCheckmark: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'nocheckmark'
       },
 
       /**
@@ -10329,21 +10496,34 @@ class AuroMenuOption extends AuroElement$1 {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * When true, the option is disabled and cannot be selected.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * The value associated with this menu option.
+       */
       value: {
         type: String,
         reflect: true
       },
+
+      /**
+       * Sets the tab order of the menu option.
+       */
       tabIndex: {
         type: Number,
-        reflect: true
+        reflect: true,
+        attribute: 'tabindex'
       },
 
       /**
-       * @private
+       * When set, selecting this option dispatches a custom event of the given name from the parent `auro-menu` (and an `auroMenu-customEventFired` event) instead of selecting the option.
        */
       event: {
         type: String,