@aurodesignsystem-dev/auro-formkit 0.0.0-pr753.0 → 0.0.0-pr754.1

package/components/select/dist/registered.js

@@ -4131,7 +4131,7 @@ var colorCss$1$1 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
 
 var classicColorCss = css``;
 
-var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
+var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}`;
 
 var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
 
@@ -7541,67 +7541,6 @@ class AuroHelpText extends LitElement {
 
 var helpTextVersion = '1.0.0';
 
-css`: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)}`;
-
-css`: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)}`;
-
-css`: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)}`;
-
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/**
- * Converts value to an array.
- * If the value is a JSON string representing an array, it will be parsed.
- * If the value is already an array, it is returned.
- * If the value is undefined, it returns undefined.
- * @private
- * @param {any} value - The value to be converted. Can be a string, array, or undefined.
- * @returns {Array|undefined} - The converted array or undefined.
- * @throws {Error} - Throws an error if the value is not an array, undefined,
- * or if the value cannot be parsed into an array from a JSON string.
- */
-function arrayConverter(value) {
-  // Allow undefined
-  if (value === undefined) {
-    return undefined;
-  }
-
-  // Return the value if it is already an array
-  if (Array.isArray(value)) {
-    return value;
-  }
-
-  try {
-    // If value is a JSON string, parse it
-    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
-
-    // Check if the parsed value is an array
-    if (Array.isArray(parsed)) {
-      return parsed;
-    }
-  } catch (error) {
-    // If JSON parsing fails, continue to throw an error below
-    /* eslint-disable no-console */
-    console.error('JSON parsing failed:', error);
-  }
-
-  // Throw error if the input is not an array or undefined
-  throw new Error('Invalid value: Input must be an array or undefined');
-}
-
-css`: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)}:host .wrapper[class*=-lg]:not(:last-child){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)}:host .wrapper[class*=-xl]:not(:last-child){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}`;
-
-css`: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)}`;
-
-css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
-
-css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
-
-css`: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)}`;
-
 var styleCss = css`.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}[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)}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}.mainContent{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:8px}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 8px 0 24px}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 8px}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-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]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]) *{user-select:none}`;
 
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
@@ -7933,11 +7872,12 @@ class AuroSelect extends AuroElement$3 {
       },
 
       /**
-       * Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
-       * @type {String|Array<String>}
+       * Value selected for the component.
        */
       value: {
-        type: Object
+        type: String,
+        reflect: true,
+        attribute: 'value'
       },
 
       /**
@@ -7989,6 +7929,24 @@ class AuroSelect extends AuroElement$3 {
     ];
   }
 
+  /**
+   * Formatted value based on `multiSelect` state.
+   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+   * @returns {String|Array<String>}
+   */
+  get formattedValue() {
+    if (this.multiSelect) {
+      if (!this.value) {
+        return undefined;
+      }
+      if (this.value.startsWith("[")) {
+        return JSON.parse(this.value);
+      }
+      return [this.value];
+    }
+    return this.value;
+  }
+
   /**
    * Returns classmap configuration for html5 input labels in all layouts.
    * @private
@@ -8407,14 +8365,6 @@ class AuroSelect extends AuroElement$3 {
     this.configureDropdown();
     this.configureMenu();
     this.configureSelect();
-
-    // Set the initial value in auro-menu if defined
-    if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
-      this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
-      if (this.menu) {
-        this.menu.value = this.value;
-      }
-    }
   }
 
   /**
@@ -8426,19 +8376,18 @@ class AuroSelect extends AuroElement$3 {
   async updateMenuValue(value) {
     if (!this.menu) return;
 
+    this.menu.setAttribute('value', value);
     this.menu.value = value;
     await this.menu.updateComplete;
   }
 
   async updated(changedProperties) {
-    if (changedProperties.has('multiSelect')) {
+    if (changedProperties.has('multiSelect') && !changedProperties.has('value')) {
       this.clearSelection();
     }
 
     if (changedProperties.has('value')) {
       if (this.value) {
-        this.value = this.multiSelect ? arrayConverter(this.value) : this.value;
-
         await this.updateMenuValue(this.value);
 
         if (this.menu) {
@@ -8464,7 +8413,7 @@ class AuroSelect extends AuroElement$3 {
         composed: true,
         detail: {
           optionSelected: this.optionSelected,
-          value: this.value
+          value: this.formattedValue
         }
       }));
     }
@@ -8523,13 +8472,13 @@ class AuroSelect extends AuroElement$3 {
     const selectedValue = selectedOption.value;
 
     if (this.multiSelect) {
-      const currentArray = Array.isArray(this.value) ? this.value : [];
+      const currentArray = this.formattedValue;
 
       if (!currentArray.includes(selectedValue)) {
-        this.value = [
+        this.value = JSON.stringify([
           ...currentArray,
           selectedValue
-        ];
+        ]);
       }
     } else {
       const currentValue = this.value;
@@ -8552,12 +8501,17 @@ class AuroSelect extends AuroElement$3 {
     }
 
     if (this.multiSelect) {
-      nativeSelect.value = this.value ? this.value[0] : '';
+      nativeSelect.value = this.multiSelect ? this.multiSelect[0] : '';
     } else {
       nativeSelect.value = this.value || '';
     }
   }
 
+  /**
+   * Returns HTML for the hidden a11y screen reader content.
+   * @private
+   * @returns {html} - Returns HTML for the hidden a11y screen reader content.
+   */
   renderAriaHtml() {
     return html`
       <div aria-live="polite" class="util_displayHiddenVisually">
@@ -8578,6 +8532,11 @@ class AuroSelect extends AuroElement$3 {
     `;
   }
 
+  /**
+   * Returns HTML for the hidden HTML5 select.
+   * @private
+   * @returns {html} - Returns HTML for the hidden HTML5 select.
+   */
   renderNativeSelect() {
     return html`
       <div class="nativeSelectWrapper util_displayHidden">
@@ -8907,106 +8866,6 @@ class AuroSelect extends AuroElement$3 {
 
   // 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
-  renderBACKUP() {
-    const placeholderClass = {
-      hidden: this.value,
-    };
-
-    return html`
-      <div class="outerWrapper">
-        <div aria-live="polite" class="util_displayHiddenVisually">
-          ${this.optionActive && this.options.length > 0
-            ? html`
-              ${`${this.optionActive.innerText}, option ${this.options.indexOf(this.optionActive) + 1} of ${this.options.length}`}
-            `
-            : undefined
-          };
-
-          ${this.optionSelected && this.options.length > 0
-            ? html`
-            ${`${this.optionSelected.innerText} selected`}
-            `
-            : undefined
-          };
-        </div>
-        <div id="slotHolder" aria-hidden="true">
-          <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
-        </div>
-        <${this.dropdownTag}
-          ?autoPlacement="${this.autoPlacement}"
-          ?disabled="${this.disabled}"
-          ?error="${this.validity !== undefined && this.validity !== 'valid'}"
-          ?matchWidth="${this.matchWidth}"
-          ?noFlip="${this.noFlip}"
-          ?onDark="${this.onDark}"
-          .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
-          .offset="${this.offset}"
-          .placement="${this.placement}"
-          chevron
-          fluid
-          for="selectMenu"
-          layout="${this.layout}"
-          part="dropdown"
-          shape="${this.shape}"
-          size="${this.size}">
-          <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder"
-              class="${classMap(placeholderClass)}"
-              ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
-              >
-              <slot name="placeholder"></slot>
-            </span>
-            <slot name="valueText" id="valueText"></slot>
-          </span>
-
-          <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
-            <slot></slot>
-          </${this.bibtemplateTag}>
-          <slot name="label" slot="label"></slot>
-          ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
-          <p slot="helpText">
-            ${!this.validity || this.validity === undefined || this.validity === 'valid'
-              ? html`
-                <span id="${this.uniqueId}" part="helpText">
-                  <slot name="helpText"></slot>
-                </span>`
-              : html`
-                <span id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-                  ${this.errorMessage}
-                </span>`
-            }
-          </p>
-        </${this.dropdownTag}>
-        <div class="nativeSelectWrapper">
-          <select 
-            tabindex="-1"
-            id="${`native-select-${this.id || this.uniqueId}`}"
-            name="${this.name || ''}"
-            ?disabled="${this.disabled}"
-            ?required="${this.required}"
-            aria-hidden="true"
-            autocomplete="${ifDefined$1(this.autocomplete)}"
-            @change="${this._handleNativeSelectChange}">
-            <option value="" ?selected="${!this.value}"></option>
-            ${this.options.map((option) => {
-              const optionValue = option.value || option.textContent;
-              return html`
-                <option 
-                  value="${optionValue}" 
-                  ?selected="${this.value === optionValue}">
-                  ${option.textContent}
-                </option>
-              `;
-            })}
-          </select>
-        </div>
-        <!-- Help text and error message template -->
-        ${this.renderHtmlHelpText()}
-      </div>
-    `;
-  }
 }
 
 AuroSelect.register();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr753.0",
+  "version": "0.0.0-pr754.1",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {
@@ -15,7 +15,7 @@
   "engines": {
     "node": "^20.x || ^22.x"
   },
-  "packageManager": "npm@11.3.0",
+  "packageManager": "npm@11.4.2",
   "publishConfig": {
     "access": "public"
   },
@@ -62,45 +62,45 @@
   "devDependencies": {
     "@aurodesignsystem/design-tokens": "^8.2.1",
     "@aurodesignsystem/eslint-config": "^1.3.4",
-    "@aurodesignsystem/webcorestylesheets": "npm:@aurodesignsystem-dev/webcorestylesheets@0.0.0-pr243.4",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@aurodesignsystem/webcorestylesheets": "^9.0.3",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "@open-wc/testing": "^4.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^12.0.1",
-    "@types/chai": "^5.2.1",
+    "@semantic-release/npm": "^12.0.2",
+    "@types/chai": "^5.2.2",
     "@types/mocha": "^10.0.10",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-hmr": "^0.4.1",
-    "@web/test-runner": "^0.20.1",
+    "@web/test-runner": "^0.20.2",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
     "compression": "^1.8.0",
     "concat": "^1.0.3",
-    "concurrently": "^9.1.2",
+    "concurrently": "^9.2.0",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.41.0",
-    "eslint": "^9.24.0",
-    "eslint-plugin-jsdoc": "^50.6.9",
+    "core-js": "^3.43.0",
+    "eslint": "^9.30.0",
+    "eslint-plugin-jsdoc": "^51.3.1",
     "husky": "^9.1.7",
     "lodash": "^4.17.21",
     "markdown-magic": "^3.4.1",
-    "nodemon": "^3.1.9",
+    "nodemon": "^3.1.10",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.3",
-    "postcss-custom-properties": "^14.0.4",
-    "postcss-discard-comments": "^7.0.3",
-    "prettier": "^3.5.3",
-    "sass": "^1.86.3",
-    "semantic-release": "^24.2.3",
-    "stylelint": "^16.18.0",
+    "postcss": "^8.5.6",
+    "postcss-custom-properties": "^14.0.6",
+    "postcss-discard-comments": "^7.0.4",
+    "prettier": "^3.6.2",
+    "sass": "^1.89.2",
+    "semantic-release": "^24.2.6",
+    "stylelint": "^16.21.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^38.0.0",
-    "stylelint-config-standard-scss": "^14.0.0",
-    "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.11.1",
-    "turbo": "^2.5.0",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-order": "^7.0.0",
+    "stylelint-scss": "^6.12.1",
+    "turbo": "^2.5.4",
     "typescript": "^5.8.3",
     "whatwg-fetch": "^3.6.20",
     "yaml-lint": "^1.7.0"