@aurodesignsystem-dev/auro-formkit 0.0.0-pr1582.0 → 0.0.0-pr1582.2

package/components/input/demo/customize.min.js

@@ -12270,7 +12270,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202608102106';
+var formkitVersion = '202608111845';
 
 /**
  * @license
@@ -12383,22 +12383,35 @@ class AuroInput extends BaseInput {
    * @private
    */
   get inputHidden() {
-    // When activeLabel is set, keep the input row visible so the label stays
-    // raised in the active position (classic/default layout) instead of
-    // collapsing to the centered placeholder position.
-    if (this.activeLabel) {
-      return false;
-    }
+    // In the classic/default layout, activeLabel keeps the input row visible so
+    // the label stays raised rather than collapsing to the centered placeholder
+    // position. Emphasized/snowflake always render the label inside the field,
+    // so activeLabel does not apply there. This only overrides the empty/
+    // unfocused clause — the display-value clause (combobox/datepicker) is
+    // preserved regardless.
+    const activeLabelRaisesInput = this.activeLabel && this.isClassicLayout;
 
     return (
       this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
       (
+        !activeLabelRaisesInput &&
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
         (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
+  /**
+   * Whether the component is rendering the classic/default layout, meaning not
+   * emphasized and not snowflake. Kept as a single source of truth so
+   * layout-scoped behavior such as activeLabel stays consistent across getters.
+   * @returns {boolean} - True for the classic/default layout.
+   * @private
+   */
+  get isClassicLayout() {
+    return !this.layout.startsWith('emphasized') && this.layout !== 'snowflake';
+  }
+
   /**
    * Determines if the input should display in a state with no focus or value indication.
    * Returns true when the input has display content without focus and has a value,

package/components/input/demo/getting-started.min.js

@@ -12270,7 +12270,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202608102106';
+var formkitVersion = '202608111845';
 
 /**
  * @license
@@ -12383,22 +12383,35 @@ class AuroInput extends BaseInput {
    * @private
    */
   get inputHidden() {
-    // When activeLabel is set, keep the input row visible so the label stays
-    // raised in the active position (classic/default layout) instead of
-    // collapsing to the centered placeholder position.
-    if (this.activeLabel) {
-      return false;
-    }
+    // In the classic/default layout, activeLabel keeps the input row visible so
+    // the label stays raised rather than collapsing to the centered placeholder
+    // position. Emphasized/snowflake always render the label inside the field,
+    // so activeLabel does not apply there. This only overrides the empty/
+    // unfocused clause — the display-value clause (combobox/datepicker) is
+    // preserved regardless.
+    const activeLabelRaisesInput = this.activeLabel && this.isClassicLayout;
 
     return (
       this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
       (
+        !activeLabelRaisesInput &&
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
         (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
+  /**
+   * Whether the component is rendering the classic/default layout, meaning not
+   * emphasized and not snowflake. Kept as a single source of truth so
+   * layout-scoped behavior such as activeLabel stays consistent across getters.
+   * @returns {boolean} - True for the classic/default layout.
+   * @private
+   */
+  get isClassicLayout() {
+    return !this.layout.startsWith('emphasized') && this.layout !== 'snowflake';
+  }
+
   /**
    * Determines if the input should display in a state with no focus or value indication.
    * Returns true when the input has display content without focus and has a value,

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

@@ -12270,7 +12270,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202608102106';
+var formkitVersion = '202608111845';
 
 /**
  * @license
@@ -12383,22 +12383,35 @@ class AuroInput extends BaseInput {
    * @private
    */
   get inputHidden() {
-    // When activeLabel is set, keep the input row visible so the label stays
-    // raised in the active position (classic/default layout) instead of
-    // collapsing to the centered placeholder position.
-    if (this.activeLabel) {
-      return false;
-    }
+    // In the classic/default layout, activeLabel keeps the input row visible so
+    // the label stays raised rather than collapsing to the centered placeholder
+    // position. Emphasized/snowflake always render the label inside the field,
+    // so activeLabel does not apply there. This only overrides the empty/
+    // unfocused clause — the display-value clause (combobox/datepicker) is
+    // preserved regardless.
+    const activeLabelRaisesInput = this.activeLabel && this.isClassicLayout;
 
     return (
       this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
       (
+        !activeLabelRaisesInput &&
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
         (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
+  /**
+   * Whether the component is rendering the classic/default layout, meaning not
+   * emphasized and not snowflake. Kept as a single source of truth so
+   * layout-scoped behavior such as activeLabel stays consistent across getters.
+   * @returns {boolean} - True for the classic/default layout.
+   * @private
+   */
+  get isClassicLayout() {
+    return !this.layout.startsWith('emphasized') && this.layout !== 'snowflake';
+  }
+
   /**
    * Determines if the input should display in a state with no focus or value indication.
    * Returns true when the input has display content without focus and has a value,

package/components/input/dist/auro-input.d.ts

@@ -66,6 +66,14 @@ export class AuroInput extends BaseInput {
      * @private
      */
     private get inputHidden();
+    /**
+     * Whether the component is rendering the classic/default layout, meaning not
+     * emphasized and not snowflake. Kept as a single source of truth so
+     * layout-scoped behavior such as activeLabel stays consistent across getters.
+     * @returns {boolean} - True for the classic/default layout.
+     * @private
+     */
+    private get isClassicLayout();
     /**
      * Determines if the input should display in a state with no focus or value indication.
      * Returns true when the input has display content without focus and has a value,

package/components/input/dist/index.js

@@ -12212,7 +12212,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608102106';
+var formkitVersion = '202608111845';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12313,22 +12313,35 @@ class AuroInput extends BaseInput {
    * @private
    */
   get inputHidden() {
-    // When activeLabel is set, keep the input row visible so the label stays
-    // raised in the active position (classic/default layout) instead of
-    // collapsing to the centered placeholder position.
-    if (this.activeLabel) {
-      return false;
-    }
+    // In the classic/default layout, activeLabel keeps the input row visible so
+    // the label stays raised rather than collapsing to the centered placeholder
+    // position. Emphasized/snowflake always render the label inside the field,
+    // so activeLabel does not apply there. This only overrides the empty/
+    // unfocused clause — the display-value clause (combobox/datepicker) is
+    // preserved regardless.
+    const activeLabelRaisesInput = this.activeLabel && this.isClassicLayout;
 
     return (
       this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
       (
+        !activeLabelRaisesInput &&
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
         (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
+  /**
+   * Whether the component is rendering the classic/default layout, meaning not
+   * emphasized and not snowflake. Kept as a single source of truth so
+   * layout-scoped behavior such as activeLabel stays consistent across getters.
+   * @returns {boolean} - True for the classic/default layout.
+   * @private
+   */
+  get isClassicLayout() {
+    return !this.layout.startsWith('emphasized') && this.layout !== 'snowflake';
+  }
+
   /**
    * Determines if the input should display in a state with no focus or value indication.
    * Returns true when the input has display content without focus and has a value,

package/components/input/dist/registered.js

@@ -12212,7 +12212,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608102106';
+var formkitVersion = '202608111845';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12313,22 +12313,35 @@ class AuroInput extends BaseInput {
    * @private
    */
   get inputHidden() {
-    // When activeLabel is set, keep the input row visible so the label stays
-    // raised in the active position (classic/default layout) instead of
-    // collapsing to the centered placeholder position.
-    if (this.activeLabel) {
-      return false;
-    }
+    // In the classic/default layout, activeLabel keeps the input row visible so
+    // the label stays raised rather than collapsing to the centered placeholder
+    // position. Emphasized/snowflake always render the label inside the field,
+    // so activeLabel does not apply there. This only overrides the empty/
+    // unfocused clause — the display-value clause (combobox/datepicker) is
+    // preserved regardless.
+    const activeLabelRaisesInput = this.activeLabel && this.isClassicLayout;
 
     return (
       this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
       (
+        !activeLabelRaisesInput &&
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
         (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
+  /**
+   * Whether the component is rendering the classic/default layout, meaning not
+   * emphasized and not snowflake. Kept as a single source of truth so
+   * layout-scoped behavior such as activeLabel stays consistent across getters.
+   * @returns {boolean} - True for the classic/default layout.
+   * @private
+   */
+  get isClassicLayout() {
+    return !this.layout.startsWith('emphasized') && this.layout !== 'snowflake';
+  }
+
   /**
    * Determines if the input should display in a state with no focus or value indication.
    * Returns true when the input has display content without focus and has a value,

package/components/menu/demo/customize.md

@@ -23,6 +23,7 @@
 <auro-anchorlink fluid href="#multiselect" class="level2 body-xs">Multi-Select</auro-anchorlink>
 <auro-anchorlink fluid href="#presetValue" class="level2 body-xs">Preset Value</auro-anchorlink>
 <auro-anchorlink fluid href="#presetValueMultiselect" class="level2 body-xs">Preset Value (Multi)</auro-anchorlink>
+<auro-anchorlink fluid href="#nonUniqueValues" class="level2 body-xs">Non-Unique Option Values</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
@@ -863,6 +864,55 @@
 &lt;/auro-menu&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<auro-header level="3" id="nonUniqueValues">Non-Unique Option Values</auro-header>
+<p>Two or more <code>auro-menuoption</code> elements may share the same <code>value</code>. This is common when the <code>value</code> represents a coarser grouping than the option label &mdash; for example, several airports that all serve the same city. The menu tracks the specific option a user selects rather than resolving by <code>value</code> alone, so selecting one of several options that share a <code>value</code> highlights exactly the option that was chosen.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/duplicate-values.html) -->
+<!-- The below content is automatically added from ./../apiExamples/duplicate-values.html -->
+<auro-menu>
+<auro-menuoption value="seattle">Seattle&ndash;Tacoma International (SEA)</auro-menuoption>
+<auro-menuoption value="seattle">Seattle Paine Field (PAE)</auro-menuoption>
+<auro-menuoption value="portland">Portland International (PDX)</auro-menuoption>
+<auro-menuoption value="spokane">Spokane International (GEG)</auro-menuoption>
+</auro-menu>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/duplicate-values.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/duplicate-values.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
+  &lt;auro-menuoption value="seattle"&gt;Seattle&amp;ndash;Tacoma International (SEA)&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="seattle"&gt;Seattle Paine Field (PAE)&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="portland"&gt;Portland International (PDX)&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="spokane"&gt;Spokane International (GEG)&lt;/auro-menuoption&gt;
+&lt;/auro-menu&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<p>In <code>multiselect</code> mode, options that share a <code>value</code> are tracked independently, so each can be selected and removed on its own. Selections are stored in DOM order regardless of the order in which they were chosen.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/duplicate-values-multiselect.html) -->
+<!-- The below content is automatically added from ./../apiExamples/duplicate-values-multiselect.html -->
+<auro-menu multiselect>
+<auro-menuoption value="seattle">Seattle&ndash;Tacoma International (SEA)</auro-menuoption>
+<auro-menuoption value="seattle">Seattle Paine Field (PAE)</auro-menuoption>
+<auro-menuoption value="portland">Portland International (PDX)</auro-menuoption>
+<auro-menuoption value="spokane">Spokane International (GEG)</auro-menuoption>
+</auro-menu>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/duplicate-values-multiselect.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/duplicate-values-multiselect.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-menu multiselect&gt;
+  &lt;auro-menuoption value="seattle"&gt;Seattle&amp;ndash;Tacoma International (SEA)&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="seattle"&gt;Seattle Paine Field (PAE)&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="portland"&gt;Portland International (PDX)&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="spokane"&gt;Spokane International (GEG)&lt;/auro-menuoption&gt;
+&lt;/auro-menu&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 </section>
 </div>
 </div>