@aurodesignsystem-dev/auro-formkit 0.0.0-pr668.1 → 0.0.0-pr668.3

package/components/select/demo/api.md

@@ -21,6 +21,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [disabled](#disabled)                      | `disabled`                      | `boolean`                         |                | When attribute is present, element shows disabled state. |
 | [error](#error)                         | `error`                         | `string`                          |                | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean`                         |                | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
+| [forceDisplayValue](#forceDisplayValue)             | `forceDisplayValue`             | `boolean`                         | false          | If declared, the label and value will be visually hidden and the displayValue will render 100% of the time. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`                          | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
 | [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean`                         |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
 | [layout](#layout)                        |                                 | `string`                          | "classic"      |                                                  |

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

@@ -6134,7 +6134,7 @@ i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);-
 
 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)}`;
 
-var styleCss$3 = 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}[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)}.mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.accents{display:flex;flex-direction:row;justify-content:center;align-items:center}::slotted([slot=typeIcon]){margin-right:8px}.triggerContent{display:flex;align-items:center;justify-content:center;width:100%;padding:0 8px 0 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-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]) *{user-select:none}`;
+var styleCss$3 = 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}[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)}.mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;justify-content:center;align-items: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;align-items:center;justify-content:center;width:100%;padding:0 8px 0 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-advanced-color-state-error-inverse, #f9a4a8);--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
 // See LICENSE in the project root for license information.
@@ -6179,6 +6179,8 @@ class AuroSelect extends AuroElement$3 {
     this.noFlip = false;
     this.autoPlacement = false;
 
+    this.forceDisplayValue = false;
+
     /**
      * @private
      */
@@ -6221,6 +6223,15 @@ class AuroSelect extends AuroElement$3 {
      */
     this.isHiddenWhileLoading = false;
 
+    /**
+     * @private
+     */
+    this.hasFocus = false;
+
+    /**
+     * @private
+     */
+    this.hasDisplayValueContent = false;
   }
 
   /**
@@ -6250,6 +6261,14 @@ class AuroSelect extends AuroElement$3 {
         reflect: true
       },
 
+      /**
+       * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
+       */
+      forceDisplayValue: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, bib's position will be automatically calculated where to appear.
        * @default false
@@ -6464,7 +6483,25 @@ class AuroSelect extends AuroElement$3 {
         type: Boolean,
         reflect: true,
         attribute: false
-      }
+      },
+
+      /**
+       * @private
+       */
+      hasFocus: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * @private
+       */
+      hasDisplayValueContent: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
     };
   }
 
@@ -6539,7 +6576,6 @@ class AuroSelect extends AuroElement$3 {
     // Handle selected options
     if (this.optionSelected) {
       if (this.multiSelect && this.optionSelected.length > 0) {
-        // Create display text from selected options
         const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
 
         valueElem.textContent = displayText;
@@ -6552,8 +6588,8 @@ class AuroSelect extends AuroElement$3 {
 
           this.appendChild(displayValueEl.cloneNode(true));
         }
+        this.hasDisplayValueContent = displayValueEl !== null;
       }
-
     }
 
     this.dropdown.requestUpdate();
@@ -6687,6 +6723,7 @@ class AuroSelect extends AuroElement$3 {
 
     this.addEventListener('blur', () => {
       this.validation.validate(this);
+      this.hasFocus = false;
     });
   }
 
@@ -6762,6 +6799,7 @@ class AuroSelect extends AuroElement$3 {
    */
   handleFocusin() {
 
+    this.hasFocus = true;
     this.touched = true;
   }
 
@@ -6847,6 +6885,8 @@ class AuroSelect extends AuroElement$3 {
       this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
       this.menu.value = this.value;
     }
+
+    this.hasDisplayValueContent = this.querySelectorAll("[slot='displayValue']").length > 0;
   }
 
   async updated(changedProperties) {
@@ -7051,14 +7091,19 @@ class AuroSelect extends AuroElement$3 {
       hidden: this.value,
     };
 
+    const displayValueClasses = {
+      'displayValue': true,
+      'hasContent': this.hasDisplayValueContent,
+      'hasFocus': this.hasFocus,
+      'withValue': this.value && this.value.length > 0,
+      'force': this.forceDisplayValue,
+    };
+
     const valueContainerClasses = {
       'valueContainer': true,
+      'util_displayHiddenVisually': (this.forceDisplayValue || !this.hasFocus) && this.hasDisplayValueContent
     };
 
-    // 'displayValue': true,
-    // 'hasFocus': this.hasFocus,
-    // 'withValue': this.value && this.value.length > 0,
-
     return u`
       <div
         class="${e(this.commonWrapperClasses)}"
@@ -7068,7 +7113,7 @@ class AuroSelect extends AuroElement$3 {
         </div>
         <${this.dropdownTag}
           ?autoPlacement="${this.autoPlacement}"
-          ?error="${this.validity !== undefined && this.validity !== 'valid'}"
+          ?error="${this.validity !== undefined && this.validity !== "valid"}"
           ?matchWidth="${!this.flexMenuWidth}"
           ?noFlip="${this.noFlip}"
           ?onDark="${this.onDark}"
@@ -7091,14 +7136,22 @@ class AuroSelect extends AuroElement$3 {
                 <label>
                   <slot name="label"></slot>
                 </label>
-                <div class="displayValue">
-                  <slot name="displayValue">
-                    <div class="value" id="value"></div>
-                  </slot>
-                </div>
-                ${this.value ? undefined : u`
-                  <div id="placeholder" class="${e(placeholderClass)}">PLACEHOLDER FIX ME<slot name="placeholder"></slot></div>
-                `}
+                <div class="value" id="value"></div>
+                ${
+                  this.value
+                    ? undefined
+                    : u`
+                        <div
+                          id="placeholder"
+                          class="${e(placeholderClass)}"
+                        >
+                          <slot name="placeholder"></slot>
+                        </div>
+                      `
+                }
+              </div>
+              <div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
+                <slot name="displayValue"></slot>
               </div>
             </div>
             <div class="accents right"></div>

package/components/select/demo/index.md

@@ -22,10 +22,38 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
+  <auro-select layout="emphasized" shape="pill" size="xl" forceDisplayValue required style="display:inline-block;">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Select Example</span>
+    <span slot="helptext">forceDisplayValue</span>
+    <span slot="placeholder">Placeholder</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
   <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Select Example</span>
-    <span slot="helptext">Example help text</span>
+    <span slot="helptext">displayValue</span>
     <auro-menu nocheckmark>
       <auro-menuoption value="flights">
         <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
@@ -49,10 +77,10 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
       </auro-menuoption>
     </auro-menu>
   </auro-select>
-  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required  style="display:inline-block;">
+  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Select Example</span>
-    <span slot="helptext">Example help text</span>
+    <span slot="helptext">no displayValue in menuoption</span>
     <auro-menu nocheckmark>
       <auro-menuoption value="flights">
         <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
@@ -76,10 +104,38 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
 <div class="exampleWrapper--ondark" aria-hidden>
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic-ondark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
+  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue ondark required style="display:inline-block;">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Select Example</span>
+    <span slot="helptext">forceDisplayValue</span>
+    <span slot="placeholder">Placeholder</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
   <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark required style="display:inline-block;">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Select Example</span>
-    <span slot="helptext">Example help text</span>
+    <span slot="helptext">displayValue</span>
     <auro-menu nocheckmark>
       <auro-menuoption value="flights">
         <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
@@ -103,10 +159,10 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
       </auro-menuoption>
     </auro-menu>
   </auro-select>
-  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark required forceDisplayValue style="display:inline-block;">
+  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark required style="display:inline-block;">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Select Example</span>
-    <span slot="helptext">Example help text</span>
+    <span slot="helptext">no displayValue in menuoption</span>
     <auro-menu nocheckmark>
       <auro-menuoption value="flights">
         <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights

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

@@ -6042,7 +6042,7 @@ i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);-
 
 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)}`;
 
-var styleCss$3 = 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}[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)}.mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.accents{display:flex;flex-direction:row;justify-content:center;align-items:center}::slotted([slot=typeIcon]){margin-right:8px}.triggerContent{display:flex;align-items:center;justify-content:center;width:100%;padding:0 8px 0 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-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]) *{user-select:none}`;
+var styleCss$3 = 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}[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)}.mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;justify-content:center;align-items: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;align-items:center;justify-content:center;width:100%;padding:0 8px 0 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-advanced-color-state-error-inverse, #f9a4a8);--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
 // See LICENSE in the project root for license information.
@@ -6087,6 +6087,8 @@ class AuroSelect extends AuroElement$3 {
     this.noFlip = false;
     this.autoPlacement = false;
 
+    this.forceDisplayValue = false;
+
     /**
      * @private
      */
@@ -6129,6 +6131,15 @@ class AuroSelect extends AuroElement$3 {
      */
     this.isHiddenWhileLoading = false;
 
+    /**
+     * @private
+     */
+    this.hasFocus = false;
+
+    /**
+     * @private
+     */
+    this.hasDisplayValueContent = false;
   }
 
   /**
@@ -6158,6 +6169,14 @@ class AuroSelect extends AuroElement$3 {
         reflect: true
       },
 
+      /**
+       * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
+       */
+      forceDisplayValue: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, bib's position will be automatically calculated where to appear.
        * @default false
@@ -6372,7 +6391,25 @@ class AuroSelect extends AuroElement$3 {
         type: Boolean,
         reflect: true,
         attribute: false
-      }
+      },
+
+      /**
+       * @private
+       */
+      hasFocus: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * @private
+       */
+      hasDisplayValueContent: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
     };
   }
 
@@ -6447,7 +6484,6 @@ class AuroSelect extends AuroElement$3 {
     // Handle selected options
     if (this.optionSelected) {
       if (this.multiSelect && this.optionSelected.length > 0) {
-        // Create display text from selected options
         const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
 
         valueElem.textContent = displayText;
@@ -6460,8 +6496,8 @@ class AuroSelect extends AuroElement$3 {
 
           this.appendChild(displayValueEl.cloneNode(true));
         }
+        this.hasDisplayValueContent = displayValueEl !== null;
       }
-
     }
 
     this.dropdown.requestUpdate();
@@ -6595,6 +6631,7 @@ class AuroSelect extends AuroElement$3 {
 
     this.addEventListener('blur', () => {
       this.validation.validate(this);
+      this.hasFocus = false;
     });
   }
 
@@ -6670,6 +6707,7 @@ class AuroSelect extends AuroElement$3 {
    */
   handleFocusin() {
 
+    this.hasFocus = true;
     this.touched = true;
   }
 
@@ -6755,6 +6793,8 @@ class AuroSelect extends AuroElement$3 {
       this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
       this.menu.value = this.value;
     }
+
+    this.hasDisplayValueContent = this.querySelectorAll("[slot='displayValue']").length > 0;
   }
 
   async updated(changedProperties) {
@@ -6959,14 +6999,19 @@ class AuroSelect extends AuroElement$3 {
       hidden: this.value,
     };
 
+    const displayValueClasses = {
+      'displayValue': true,
+      'hasContent': this.hasDisplayValueContent,
+      'hasFocus': this.hasFocus,
+      'withValue': this.value && this.value.length > 0,
+      'force': this.forceDisplayValue,
+    };
+
     const valueContainerClasses = {
       'valueContainer': true,
+      'util_displayHiddenVisually': (this.forceDisplayValue || !this.hasFocus) && this.hasDisplayValueContent
     };
 
-    // 'displayValue': true,
-    // 'hasFocus': this.hasFocus,
-    // 'withValue': this.value && this.value.length > 0,
-
     return u`
       <div
         class="${e(this.commonWrapperClasses)}"
@@ -6976,7 +7021,7 @@ class AuroSelect extends AuroElement$3 {
         </div>
         <${this.dropdownTag}
           ?autoPlacement="${this.autoPlacement}"
-          ?error="${this.validity !== undefined && this.validity !== 'valid'}"
+          ?error="${this.validity !== undefined && this.validity !== "valid"}"
           ?matchWidth="${!this.flexMenuWidth}"
           ?noFlip="${this.noFlip}"
           ?onDark="${this.onDark}"
@@ -6999,14 +7044,22 @@ class AuroSelect extends AuroElement$3 {
                 <label>
                   <slot name="label"></slot>
                 </label>
-                <div class="displayValue">
-                  <slot name="displayValue">
-                    <div class="value" id="value"></div>
-                  </slot>
-                </div>
-                ${this.value ? undefined : u`
-                  <div id="placeholder" class="${e(placeholderClass)}">PLACEHOLDER FIX ME<slot name="placeholder"></slot></div>
-                `}
+                <div class="value" id="value"></div>
+                ${
+                  this.value
+                    ? undefined
+                    : u`
+                        <div
+                          id="placeholder"
+                          class="${e(placeholderClass)}"
+                        >
+                          <slot name="placeholder"></slot>
+                        </div>
+                      `
+                }
+              </div>
+              <div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
+                <slot name="displayValue"></slot>
               </div>
             </div>
             <div class="accents right"></div>

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

@@ -20,6 +20,13 @@ export class AuroSelect extends AuroElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
+         */
+        forceDisplayValue: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * If declared, bib's position will be automatically calculated where to appear.
          * @default false
@@ -203,6 +210,22 @@ export class AuroSelect extends AuroElement {
          * @private
          */
         touched: boolean;
+        /**
+         * @private
+         */
+        hasFocus: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * @private
+         */
+        hasDisplayValueContent: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
     };
     static get styles(): import("lit").CSSResult[];
     /**
@@ -221,6 +244,7 @@ export class AuroSelect extends AuroElement {
     offset: number;
     noFlip: boolean;
     autoPlacement: boolean;
+    forceDisplayValue: boolean;
     /**
      * @private
      */
@@ -249,6 +273,14 @@ export class AuroSelect extends AuroElement {
      * @private
      */
     private isHiddenWhileLoading;
+    /**
+     * @private
+     */
+    private hasFocus;
+    /**
+     * @private
+     */
+    private hasDisplayValueContent;
     /**
      * @private
      * @returns {void} Internal defaults.

package/components/select/dist/index.js

@@ -5996,7 +5996,7 @@ css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);-
 
 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)}.mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.accents{display:flex;flex-direction:row;justify-content:center;align-items:center}::slotted([slot=typeIcon]){margin-right:8px}.triggerContent{display:flex;align-items:center;justify-content:center;width:100%;padding:0 8px 0 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-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]) *{user-select:none}`;
+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)}.mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;justify-content:center;align-items: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;align-items:center;justify-content:center;width:100%;padding:0 8px 0 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-advanced-color-state-error-inverse, #f9a4a8);--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
 // See LICENSE in the project root for license information.
@@ -6041,6 +6041,8 @@ class AuroSelect extends AuroElement$3 {
     this.noFlip = false;
     this.autoPlacement = false;
 
+    this.forceDisplayValue = false;
+
     /**
      * @private
      */
@@ -6083,6 +6085,15 @@ class AuroSelect extends AuroElement$3 {
      */
     this.isHiddenWhileLoading = false;
 
+    /**
+     * @private
+     */
+    this.hasFocus = false;
+
+    /**
+     * @private
+     */
+    this.hasDisplayValueContent = false;
   }
 
   /**
@@ -6112,6 +6123,14 @@ class AuroSelect extends AuroElement$3 {
         reflect: true
       },
 
+      /**
+       * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
+       */
+      forceDisplayValue: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, bib's position will be automatically calculated where to appear.
        * @default false
@@ -6326,7 +6345,25 @@ class AuroSelect extends AuroElement$3 {
         type: Boolean,
         reflect: true,
         attribute: false
-      }
+      },
+
+      /**
+       * @private
+       */
+      hasFocus: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * @private
+       */
+      hasDisplayValueContent: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
     };
   }
 
@@ -6401,7 +6438,6 @@ class AuroSelect extends AuroElement$3 {
     // Handle selected options
     if (this.optionSelected) {
       if (this.multiSelect && this.optionSelected.length > 0) {
-        // Create display text from selected options
         const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
 
         valueElem.textContent = displayText;
@@ -6414,8 +6450,8 @@ class AuroSelect extends AuroElement$3 {
 
           this.appendChild(displayValueEl.cloneNode(true));
         }
+        this.hasDisplayValueContent = displayValueEl !== null;
       }
-
     }
 
     this.dropdown.requestUpdate();
@@ -6549,6 +6585,7 @@ class AuroSelect extends AuroElement$3 {
 
     this.addEventListener('blur', () => {
       this.validation.validate(this);
+      this.hasFocus = false;
     });
   }
 
@@ -6624,6 +6661,7 @@ class AuroSelect extends AuroElement$3 {
    */
   handleFocusin() {
 
+    this.hasFocus = true;
     this.touched = true;
   }
 
@@ -6709,6 +6747,8 @@ class AuroSelect extends AuroElement$3 {
       this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
       this.menu.value = this.value;
     }
+
+    this.hasDisplayValueContent = this.querySelectorAll("[slot='displayValue']").length > 0;
   }
 
   async updated(changedProperties) {
@@ -6913,14 +6953,19 @@ class AuroSelect extends AuroElement$3 {
       hidden: this.value,
     };
 
+    const displayValueClasses = {
+      'displayValue': true,
+      'hasContent': this.hasDisplayValueContent,
+      'hasFocus': this.hasFocus,
+      'withValue': this.value && this.value.length > 0,
+      'force': this.forceDisplayValue,
+    };
+
     const valueContainerClasses = {
       'valueContainer': true,
+      'util_displayHiddenVisually': (this.forceDisplayValue || !this.hasFocus) && this.hasDisplayValueContent
     };
 
-    // 'displayValue': true,
-    // 'hasFocus': this.hasFocus,
-    // 'withValue': this.value && this.value.length > 0,
-
     return html`
       <div
         class="${classMap(this.commonWrapperClasses)}"
@@ -6930,7 +6975,7 @@ class AuroSelect extends AuroElement$3 {
         </div>
         <${this.dropdownTag}
           ?autoPlacement="${this.autoPlacement}"
-          ?error="${this.validity !== undefined && this.validity !== 'valid'}"
+          ?error="${this.validity !== undefined && this.validity !== "valid"}"
           ?matchWidth="${!this.flexMenuWidth}"
           ?noFlip="${this.noFlip}"
           ?onDark="${this.onDark}"
@@ -6953,14 +6998,22 @@ class AuroSelect extends AuroElement$3 {
                 <label>
                   <slot name="label"></slot>
                 </label>
-                <div class="displayValue">
-                  <slot name="displayValue">
-                    <div class="value" id="value"></div>
-                  </slot>
-                </div>
-                ${this.value ? undefined : html`
-                  <div id="placeholder" class="${classMap(placeholderClass)}">PLACEHOLDER FIX ME<slot name="placeholder"></slot></div>
-                `}
+                <div class="value" id="value"></div>
+                ${
+                  this.value
+                    ? undefined
+                    : html`
+                        <div
+                          id="placeholder"
+                          class="${classMap(placeholderClass)}"
+                        >
+                          <slot name="placeholder"></slot>
+                        </div>
+                      `
+                }
+              </div>
+              <div class="${classMap(displayValueClasses)}" aria-hidden="true" part="displayValue">
+                <slot name="displayValue"></slot>
               </div>
             </div>
             <div class="accents right"></div>

package/components/select/dist/registered.js

@@ -5996,7 +5996,7 @@ css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);-
 
 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)}.mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.accents{display:flex;flex-direction:row;justify-content:center;align-items:center}::slotted([slot=typeIcon]){margin-right:8px}.triggerContent{display:flex;align-items:center;justify-content:center;width:100%;padding:0 8px 0 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-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]) *{user-select:none}`;
+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)}.mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;justify-content:center;align-items: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;align-items:center;justify-content:center;width:100%;padding:0 8px 0 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-advanced-color-state-error-inverse, #f9a4a8);--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
 // See LICENSE in the project root for license information.
@@ -6041,6 +6041,8 @@ class AuroSelect extends AuroElement$3 {
     this.noFlip = false;
     this.autoPlacement = false;
 
+    this.forceDisplayValue = false;
+
     /**
      * @private
      */
@@ -6083,6 +6085,15 @@ class AuroSelect extends AuroElement$3 {
      */
     this.isHiddenWhileLoading = false;
 
+    /**
+     * @private
+     */
+    this.hasFocus = false;
+
+    /**
+     * @private
+     */
+    this.hasDisplayValueContent = false;
   }
 
   /**
@@ -6112,6 +6123,14 @@ class AuroSelect extends AuroElement$3 {
         reflect: true
       },
 
+      /**
+       * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
+       */
+      forceDisplayValue: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, bib's position will be automatically calculated where to appear.
        * @default false
@@ -6326,7 +6345,25 @@ class AuroSelect extends AuroElement$3 {
         type: Boolean,
         reflect: true,
         attribute: false
-      }
+      },
+
+      /**
+       * @private
+       */
+      hasFocus: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * @private
+       */
+      hasDisplayValueContent: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
     };
   }
 
@@ -6401,7 +6438,6 @@ class AuroSelect extends AuroElement$3 {
     // Handle selected options
     if (this.optionSelected) {
       if (this.multiSelect && this.optionSelected.length > 0) {
-        // Create display text from selected options
         const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
 
         valueElem.textContent = displayText;
@@ -6414,8 +6450,8 @@ class AuroSelect extends AuroElement$3 {
 
           this.appendChild(displayValueEl.cloneNode(true));
         }
+        this.hasDisplayValueContent = displayValueEl !== null;
       }
-
     }
 
     this.dropdown.requestUpdate();
@@ -6549,6 +6585,7 @@ class AuroSelect extends AuroElement$3 {
 
     this.addEventListener('blur', () => {
       this.validation.validate(this);
+      this.hasFocus = false;
     });
   }
 
@@ -6624,6 +6661,7 @@ class AuroSelect extends AuroElement$3 {
    */
   handleFocusin() {
 
+    this.hasFocus = true;
     this.touched = true;
   }
 
@@ -6709,6 +6747,8 @@ class AuroSelect extends AuroElement$3 {
       this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
       this.menu.value = this.value;
     }
+
+    this.hasDisplayValueContent = this.querySelectorAll("[slot='displayValue']").length > 0;
   }
 
   async updated(changedProperties) {
@@ -6913,14 +6953,19 @@ class AuroSelect extends AuroElement$3 {
       hidden: this.value,
     };
 
+    const displayValueClasses = {
+      'displayValue': true,
+      'hasContent': this.hasDisplayValueContent,
+      'hasFocus': this.hasFocus,
+      'withValue': this.value && this.value.length > 0,
+      'force': this.forceDisplayValue,
+    };
+
     const valueContainerClasses = {
       'valueContainer': true,
+      'util_displayHiddenVisually': (this.forceDisplayValue || !this.hasFocus) && this.hasDisplayValueContent
     };
 
-    // 'displayValue': true,
-    // 'hasFocus': this.hasFocus,
-    // 'withValue': this.value && this.value.length > 0,
-
     return html`
       <div
         class="${classMap(this.commonWrapperClasses)}"
@@ -6930,7 +6975,7 @@ class AuroSelect extends AuroElement$3 {
         </div>
         <${this.dropdownTag}
           ?autoPlacement="${this.autoPlacement}"
-          ?error="${this.validity !== undefined && this.validity !== 'valid'}"
+          ?error="${this.validity !== undefined && this.validity !== "valid"}"
           ?matchWidth="${!this.flexMenuWidth}"
           ?noFlip="${this.noFlip}"
           ?onDark="${this.onDark}"
@@ -6953,14 +6998,22 @@ class AuroSelect extends AuroElement$3 {
                 <label>
                   <slot name="label"></slot>
                 </label>
-                <div class="displayValue">
-                  <slot name="displayValue">
-                    <div class="value" id="value"></div>
-                  </slot>
-                </div>
-                ${this.value ? undefined : html`
-                  <div id="placeholder" class="${classMap(placeholderClass)}">PLACEHOLDER FIX ME<slot name="placeholder"></slot></div>
-                `}
+                <div class="value" id="value"></div>
+                ${
+                  this.value
+                    ? undefined
+                    : html`
+                        <div
+                          id="placeholder"
+                          class="${classMap(placeholderClass)}"
+                        >
+                          <slot name="placeholder"></slot>
+                        </div>
+                      `
+                }
+              </div>
+              <div class="${classMap(displayValueClasses)}" aria-hidden="true" part="displayValue">
+                <slot name="displayValue"></slot>
               </div>
             </div>
             <div class="accents right"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr668.1",
+  "version": "0.0.0-pr668.3",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {