@aurodesignsystem/auro-formkit 4.0.0-rc-658.1 → 4.0.0

package/CHANGELOG.md

@@ -1,20 +1,14 @@
-# [4.0.0-rc-658.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.4.1...v4.0.0-rc-658.1) (2025-06-04)
+# [4.0.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.5.0...v4.0.0) (2025-06-04)
 
 
 ### Bug Fixes
 
-* add type for value property on combobox ([ccbdbeb](https://github.com/AlaskaAirlines/auro-formkit/commit/ccbdbeb57f4c012c366165826b4c32cd47867854))
-* clean up API docs for form ([409001d](https://github.com/AlaskaAirlines/auro-formkit/commit/409001d5ff7e9ba21e03fa5ac864353a209e19e3))
-* correct command for generating PR release version in workflow ([ef32a6c](https://github.com/AlaskaAirlines/auro-formkit/commit/ef32a6c1f1288981b42ede9bcec079d282ae25cd))
 * make the bullet of radio/checkbox to be top aligned ([ae3f0bd](https://github.com/AlaskaAirlines/auro-formkit/commit/ae3f0bd9e1d0bee2cb8264b759634af348f9157d))
-* resolve missing type and description for optionSelected in menu ([48f12da](https://github.com/AlaskaAirlines/auro-formkit/commit/48f12da8f8dc4c5875db56b06fa20d3f928310d5))
-* set unique id and arialabel correctly in input/checkbox/radio [#589](https://github.com/AlaskaAirlines/auro-formkit/issues/589) ([c7aa1a4](https://github.com/AlaskaAirlines/auro-formkit/commit/c7aa1a4b4f2a4ab7ff66dc494122b1c10bfff6de))
-* zero out version number since we are no longer tracking it with the new release strategy ([ef67887](https://github.com/AlaskaAirlines/auro-formkit/commit/ef6788775bb011444ded7c359437cbf51ef4f874))
 
 
 ### Features
 
-* add autocomplete and name properties to native select element ([f9b6838](https://github.com/AlaskaAirlines/auro-formkit/commit/f9b68385ae42c8b76f997e8db1326f4973bfe939))
+* add `valueText` slot for customized label in `auro-select` [#653](https://github.com/AlaskaAirlines/auro-formkit/issues/653) ([12e1ce4](https://github.com/AlaskaAirlines/auro-formkit/commit/12e1ce443c90e6a8d5f5a85f22141633bdc9bfe5))
 * adding cssparts on radio [#610](https://github.com/AlaskaAirlines/auro-formkit/issues/610) ([3756066](https://github.com/AlaskaAirlines/auro-formkit/commit/3756066f3ac9e53c366c447e909d37c7791e6568))
 
 
@@ -26,11 +20,6 @@
 * revert changes to `value` and `optionSelected` in select [#621](https://github.com/AlaskaAirlines/auro-formkit/issues/621) ([7d9bcbc](https://github.com/AlaskaAirlines/auro-formkit/commit/7d9bcbc40acd1f670a1a8b1e8e44aa6d7c962c64))
 
 
-### Reverts
-
-* Revert "chore: remove unused [@event](https://github.com/event) tag for auroFormElement-validated" ([624cfa0](https://github.com/AlaskaAirlines/auro-formkit/commit/624cfa03a32f13fb41787f2538452911648cd033))
-
-
 ### BREAKING CHANGES
 
 * `value` and `optionSelected` attributes default to type `string` and `HTMLElement` respectively.

package/components/input/README.md

@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.8/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/README.md

@@ -15,33 +15,33 @@ The following sections are editable by making changes to the following files:
 | Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
 | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
 | Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
--->
-
+-->
+
 # Select
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Getting Started
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
-
+<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
+
 #### NPM Installation
 
 ```shell
 $ npm i @aurodesignsystem/auro-formkit
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
-<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
-
-### Import Options
-
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
+
+### Import Options
+
 #### Automatic Registration
 
 For automatic registration, simply import the component:
@@ -49,8 +49,8 @@ For automatic registration, simply import the component:
 ```javascript
 // Registers <auro-select> automatically
 import '@aurodesignsystem/auro-formkit/auro-select';
-```
-
+```
+
 #### Custom Registration
 
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroSelect.register('custom-select')` method on the component class and pass in a unique name.
@@ -61,8 +61,8 @@ import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
 
 // Register with a custom name if desired
 AuroSelect.register('custom-select');
-```
-
+```
+
 #### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
@@ -76,12 +76,12 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
 ```
 
 This configuration enables proper module resolution for the component's TypeScript files.
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
+
 ```html
 <auro-select>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
@@ -94,44 +94,44 @@ This configuration enables proper module resolution for the component's TypeScri
     <auro-menuoption value="arrival">Arrival</auro-menuoption>
     <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
   </auro-menu>
-</auro-select>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### Design Token CSS Custom Property dependency
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
 The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Install from CDN
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"></script>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"></script>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## UI development browser support
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
 For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## auro-select use cases
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
 See description.
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Formkit development
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
-<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
-
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
+
 ### Filtering
 
 Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.

package/components/select/demo/api.js

@@ -5,6 +5,7 @@ import { valueAlertExample } from "../apiExamples/valueAlert.js";
 import { inDialogExample } from '../apiExamples/inDialog';
 import { resetStateExample } from "../apiExamples/resetState";
 import { auroMenuLoadingExample } from "../apiExamples/loading";
+import { valueTextExample } from '../apiExamples/valueText.js';
 
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroSelect } from '../src/auro-select.js';
@@ -24,6 +25,7 @@ export function initExamples(initCount) {
     inDialogExample();
     resetStateExample();
     auroMenuLoadingExample();
+    valueTextExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/select/demo/api.md

@@ -48,11 +48,11 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Events
 
-| Event                       | Type               | Description                                      |
-|-----------------------------|--------------------|--------------------------------------------------|
-| `auroFormElement-validated` |                    | Notifies that the `validity` and `errorMessage` values have changed. |
-| `auroSelect-valueSet`       | `CustomEvent<any>` | Notifies that the component has a new value set. |
-| [input](#input)                     | `CustomEvent<any>` | Notifies every time the value prop of the element is changed. |
+| Event                       | Type                                             | Description                                      |
+|-----------------------------|--------------------------------------------------|--------------------------------------------------|
+| `auroFormElement-validated` |                                                  | Notifies that the `validity` and `errorMessage` values have changed. |
+| `auroSelect-valueSet`       | `CustomEvent<any>`                               | Notifies that the component has a new value set. |
+| [input](#input)                     | `CustomEvent<{ optionSelected: any; value: any; }>` | Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object. |
 
 ## Slots
 
@@ -62,7 +62,8 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | `bib.fullscreen.headline` | Defines the headline to display above menu-options |
 | [helpText](#helpText)                | Defines the content of the helpText.             |
 | [label](#label)                   | Defines the content of the label.                |
-| [placeholder](#placeholder)             | Defines the content of the placeholder to be shown when there is no value |
+| [placeholder](#placeholder)             | Defines the content of the placeholder to be shown when there is no value |
+| [valueText](#valueText)               | Dropdown value text display.                     |
 
 ## CSS Shadow Parts
 
@@ -1033,6 +1034,63 @@ export function auroMenuLoadingExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### valueText <a name="valueText"></a>
+The label for selected option can be customized using `valueText` slot.
+This slot can be manipulated on the `input` event which delivers the new value and selected `auro-menuoption` element in the `detail` object.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueText.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/valueText.html -->
+  <auro-select id="valueTextExample" autocomplete="address-level1">
+    <span slot="bib.fullscreen.headline">Select Your Gender</span>
+    <span slot="label">Gender</span>
+    <span slot="valueText"></span>
+      <auro-menu>
+        <auro-menuoption value="m" data-display="Male">M - Male</auro-menuoption>
+        <auro-menuoption value="f" data-display="Female">F - Female</auro-menuoption>
+        <auro-menuoption value="x" data-display="Unspecified">X - Unspecified</auro-menuoption>
+        <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueText.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/valueText.js -->
+
+```js
+export function valueTextExample() {
+  const onValueTextSelectInput = (e) => {
+    const valueText = e.target.querySelector("[slot=valueText]");
+
+    valueText.textContent = e.detail.optionSelected.dataset.display;
+  };
+
+  const select = document.querySelector("#valueTextExample");
+  select.addEventListener('input', onValueTextSelectInput);
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueText.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/valueText.html -->
+
+```html
+<auro-select id="valueTextExample" autocomplete="address-level1">
+  <span slot="bib.fullscreen.headline">Select Your Gender</span>
+  <span slot="label">Gender</span>
+  <span slot="valueText"></span>
+    <auro-menu>
+      <auro-menuoption value="m" data-display="Male">M - Male</auro-menuoption>
+      <auro-menuoption value="f" data-display="Female">F - Female</auro-menuoption>
+      <auro-menuoption value="x" data-display="Unspecified">X - Unspecified</auro-menuoption>
+      <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Customized bib position
 The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement` attributes.
 

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

@@ -90,6 +90,17 @@ function auroMenuLoadingExample() {
   });
 }
 
+function valueTextExample() {
+  const onValueTextSelectInput = (e) => {
+    const valueText = e.target.querySelector("[slot=valueText]");
+
+    valueText.textContent = e.detail.optionSelected.dataset.display;
+  };
+
+  const select = document.querySelector("#valueTextExample");
+  select.addEventListener('input', onValueTextSelectInput);
+}
+
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -5537,8 +5548,9 @@ var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
@@ -5880,12 +5892,8 @@ class AuroSelect extends i$2 {
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // Clear everything except placeholder
-    const placeholder = triggerContentEl.querySelector('#placeholder');
-    triggerContentEl.innerHTML = '';
-    if (placeholder) {
-      triggerContentEl.appendChild(placeholder);
-    }
+    const valueText = triggerContentEl.querySelector("#valueText");
+    valueText.textContent = '';
 
     // Handle selected options
     if (this.optionSelected) {
@@ -5898,9 +5906,7 @@ class AuroSelect extends i$2 {
         displayText = this.optionSelected.textContent;
       }
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6229,6 +6235,10 @@ class AuroSelect extends i$2 {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6357,7 +6367,13 @@ class AuroSelect extends i$2 {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${e(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <span id="placeholder"
+              class="${e(placeholderClass)}"
+              ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
+              >
+              <slot name="placeholder"></slot>
+            </span>
+            <slot name="valueText" id="valueText"></slot>
           </span>
 
           <div class="menuWrapper">
@@ -7650,6 +7666,7 @@ function initExamples(initCount) {
     inDialogExample();
     resetStateExample();
     auroMenuLoadingExample();
+    valueTextExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

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

@@ -5445,8 +5445,9 @@ var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
@@ -5788,12 +5789,8 @@ class AuroSelect extends i$2 {
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // Clear everything except placeholder
-    const placeholder = triggerContentEl.querySelector('#placeholder');
-    triggerContentEl.innerHTML = '';
-    if (placeholder) {
-      triggerContentEl.appendChild(placeholder);
-    }
+    const valueText = triggerContentEl.querySelector("#valueText");
+    valueText.textContent = '';
 
     // Handle selected options
     if (this.optionSelected) {
@@ -5806,9 +5803,7 @@ class AuroSelect extends i$2 {
         displayText = this.optionSelected.textContent;
       }
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6137,6 +6132,10 @@ class AuroSelect extends i$2 {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6265,7 +6264,13 @@ class AuroSelect extends i$2 {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${e(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <span id="placeholder"
+              class="${e(placeholderClass)}"
+              ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
+              >
+              <slot name="placeholder"></slot>
+            </span>
+            <slot name="valueText" id="valueText"></slot>
           </span>
 
           <div class="menuWrapper">

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

@@ -6,8 +6,9 @@
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */

package/components/select/dist/index.js

@@ -5399,8 +5399,9 @@ var styleCss = css`:focus:not(:focus-visible){outline:3px solid transparent}.uti
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
@@ -5742,12 +5743,8 @@ class AuroSelect extends LitElement {
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // Clear everything except placeholder
-    const placeholder = triggerContentEl.querySelector('#placeholder');
-    triggerContentEl.innerHTML = '';
-    if (placeholder) {
-      triggerContentEl.appendChild(placeholder);
-    }
+    const valueText = triggerContentEl.querySelector("#valueText");
+    valueText.textContent = '';
 
     // Handle selected options
     if (this.optionSelected) {
@@ -5760,9 +5757,7 @@ class AuroSelect extends LitElement {
         displayText = this.optionSelected.textContent;
       }
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6091,6 +6086,10 @@ class AuroSelect extends LitElement {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6219,7 +6218,13 @@ class AuroSelect extends LitElement {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${classMap(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <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>
 
           <div class="menuWrapper">

package/components/select/dist/registered.js

@@ -5399,8 +5399,9 @@ var styleCss = css`:focus:not(:focus-visible){outline:3px solid transparent}.uti
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
@@ -5742,12 +5743,8 @@ class AuroSelect extends LitElement {
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // Clear everything except placeholder
-    const placeholder = triggerContentEl.querySelector('#placeholder');
-    triggerContentEl.innerHTML = '';
-    if (placeholder) {
-      triggerContentEl.appendChild(placeholder);
-    }
+    const valueText = triggerContentEl.querySelector("#valueText");
+    valueText.textContent = '';
 
     // Handle selected options
     if (this.optionSelected) {
@@ -5760,9 +5757,7 @@ class AuroSelect extends LitElement {
         displayText = this.optionSelected.textContent;
       }
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6091,6 +6086,10 @@ class AuroSelect extends LitElement {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6219,7 +6218,13 @@ class AuroSelect extends LitElement {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${classMap(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <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>
 
           <div class="menuWrapper">

package/package.json

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