@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.23 → 0.0.0-pr624.25

package/components/checkbox/demo/api.md

@@ -36,11 +36,11 @@ The auro-checkbox-group element is a wrapper for auro-checkbox element.
 
 ## Slots
 
-| Name            | Description                                     |
-|-----------------|-------------------------------------------------|
-| [helpText](#helpText)      | Allows for the helper text to be overridden.    |
-| [legend](#legend)        | Allows for the legend to be overridden.         |
-| [optionalLabel](#optionalLabel) | Allows for the optional label to be overridden. |
+| Name            | Description                                      |
+|-----------------|--------------------------------------------------|
+| [helpText](#helpText)      | Allows for the helper text to be overridden.     |
+| [legend](#legend)        | Allows for the legend to be overridden.          |
+| [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. |
 
 # auro-checkbox
 
@@ -326,6 +326,40 @@ When present, the `required` attribute specifies that at least one or more `<aur
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Custom optional label <a name="optionalLabel"></a>
+The `<auro-checkbox-group>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optionalLabel.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/optionalLabel.html -->
+  <auro-checkbox-group>
+    <span slot="legend">Form label goes here</span>
+    <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
+    <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+    <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
+    <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  </auro-checkbox-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optionalLabel.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/optionalLabel.html -->
+
+```html
+<auro-checkbox-group>
+  <span slot="legend">Form label goes here</span>
+  <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
+  <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
+  <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
+</auro-checkbox-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Functional Examples
 
 #### Reset State

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

@@ -1437,7 +1437,7 @@ var helpTextVersion = '1.0.0';
  * The auro-checkbox-group element is a wrapper for auro-checkbox element.
  *
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  */
@@ -1805,10 +1805,10 @@ class AuroCheckboxGroup extends i$2 {
 
     return u`
       <fieldset class="${e(groupClasses)}">
-        ${this.required
-          ? u`<legend><slot name="legend"></slot></legend>`
-          : u`<legend><slot name="legend"></slot> (optional)</legend>`
-        }
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleItems}></slot>
       </fieldset>
 

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

@@ -1429,7 +1429,7 @@ var helpTextVersion = '1.0.0';
  * The auro-checkbox-group element is a wrapper for auro-checkbox element.
  *
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  */
@@ -1797,10 +1797,10 @@ class AuroCheckboxGroup extends i$2 {
 
     return u`
       <fieldset class="${e(groupClasses)}">
-        ${this.required
-          ? u`<legend><slot name="legend"></slot></legend>`
-          : u`<legend><slot name="legend"></slot> (optional)</legend>`
-        }
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleItems}></slot>
       </fieldset>
 

package/components/checkbox/dist/auro-checkbox-group.d.ts

@@ -2,7 +2,7 @@
  * The auro-checkbox-group element is a wrapper for auro-checkbox element.
  *
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  */

package/components/checkbox/dist/index.js

@@ -1382,7 +1382,7 @@ var helpTextVersion = '1.0.0';
  * The auro-checkbox-group element is a wrapper for auro-checkbox element.
  *
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  */
@@ -1750,10 +1750,10 @@ class AuroCheckboxGroup extends LitElement {
 
     return html$1`
       <fieldset class="${classMap(groupClasses)}">
-        ${this.required
-          ? html$1`<legend><slot name="legend"></slot></legend>`
-          : html$1`<legend><slot name="legend"></slot> (optional)</legend>`
-        }
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleItems}></slot>
       </fieldset>
 

package/components/checkbox/dist/registered.js

@@ -1382,7 +1382,7 @@ var helpTextVersion = '1.0.0';
  * The auro-checkbox-group element is a wrapper for auro-checkbox element.
  *
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  */
@@ -1750,10 +1750,10 @@ class AuroCheckboxGroup extends LitElement {
 
     return html$1`
       <fieldset class="${classMap(groupClasses)}">
-        ${this.required
-          ? html$1`<legend><slot name="legend"></slot></legend>`
-          : html$1`<legend><slot name="legend"></slot> (optional)</legend>`
-        }
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleItems}></slot>
       </fieldset>
 

package/components/combobox/demo/api.md

@@ -59,7 +59,8 @@
 | `bib.fullscreen.headline` | Defines the headline to display above menu-options |
 | [displayValue](#displayValue)            | Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts. |
 | [helpText](#helpText)                | Defines the content of the helpText.             |
-| [label](#label)                   | Defines the content of the label.                |
+| [label](#label)                   | Defines the content of the label.                |
+| [optionalLabel](#optionalLabel)           | Allows overriding the optional display text "(optional)", which appears next to the label. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
@@ -579,6 +580,50 @@ Populates the `required` attribute on the input. Used for client-side validation
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Custom optional label <a name="optionalLabel"></a>
+The `<auro-combobox>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optionalLabel.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/optionalLabel.html -->
+  <auro-combobox>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Name</span>
+    <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optionalLabel.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/optionalLabel.html -->
+
+```html
+<auro-combobox>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
+  <span slot="label">Name</span>
+  <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### value
 
 Use the `value` attribute to programmatically set the value of the combobox.

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

@@ -10171,6 +10171,7 @@ let AuroElement$2$1 = class AuroElement extends i$2 {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -13152,6 +13153,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : u$2`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
@@ -15686,6 +15688,7 @@ class AuroHelpText extends i$2 {
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * @slot - Default slot for the menu content.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
@@ -16641,6 +16644,9 @@ class AuroCombobox extends AuroElement$1 {
         // It's because the bib is/will be separated from dropdown to body.
         this.transportAssignedNodes(event.target, this.inputInBib, "label");
         break;
+      case 'optionalLabel':
+        this.transportAssignedNodes(event.target, this.inputInBib, "optionalLabel");
+        break;
       case 'bib.fullscreen.headline':
         this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
         break;
@@ -16711,6 +16717,7 @@ class AuroCombobox extends AuroElement$1 {
               size="${this.size}"
               slot="trigger">
               <slot name="label" slot="label" @slotchange="${this.handleSlotChange}"></slot>
+              <slot name="optionalLabel" slot="optionalLabel" @slotchange="${this.handleSlotChange}"> (optional)</slot>
               <slot name="displayValue" slot="displayValue"></slot>
             </${this.inputTag}>
 

package/components/combobox/demo/index.md

@@ -70,7 +70,7 @@ The `<auro-combobox>` element should be used in situations where users may:
 <div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
-  <auro-combobox layout="emphasized" shape="pill" size="xl" placeholder="Placeholder content" required ondark style="width: 249px;">
+  <auro-combobox layout="emphasized" value="Oranges" shape="pill" size="xl" placeholder="Placeholder content" required ondark style="width: 249px;">
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
@@ -90,36 +90,6 @@ The `<auro-combobox>` element should be used in situations where users may:
         <div class="subText">Fruit</div>
       </div>
     </span>
-  </auro-combobox>
-  <auro-combobox layout="emphasized" shape="pill-left" size="xl" placeholder="Placeholder content" required ondark style="width: 249px;">
-    <span slot="bib.fullscreen.headline">Bib Header</span>
-    <span slot="label">Name</span>
-    <auro-menu>
-      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
-      <auro-menuoption static nomatch>No matching option</auro-menuoption>
-    </auro-menu>
-    <span slot="helpText">
-      Help text - Lorem ipsum solar lorem ipsum solar
-    </span>
-  </auro-combobox>
-  <auro-combobox layout="emphasized" shape="pill-right" size="xl" placeholder="Placeholder content" required ondark style="width: 249px;">
-    <span slot="bib.fullscreen.headline">Bib Header</span>
-    <span slot="label">Name</span>
-    <auro-menu>
-      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
-      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
-      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
-      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
-      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
-      <auro-menuoption static nomatch>No matching option</auro-menuoption>
-    </auro-menu>
-    <span slot="helpText">
-      Help text - Lorem ipsum solar lorem ipsum solar
-    </span>
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>

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

@@ -10029,6 +10029,7 @@ let AuroElement$2$1 = class AuroElement extends i$2 {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -13010,6 +13011,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : u$2`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
@@ -15544,6 +15546,7 @@ class AuroHelpText extends i$2 {
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * @slot - Default slot for the menu content.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
@@ -16499,6 +16502,9 @@ class AuroCombobox extends AuroElement$1 {
         // It's because the bib is/will be separated from dropdown to body.
         this.transportAssignedNodes(event.target, this.inputInBib, "label");
         break;
+      case 'optionalLabel':
+        this.transportAssignedNodes(event.target, this.inputInBib, "optionalLabel");
+        break;
       case 'bib.fullscreen.headline':
         this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
         break;
@@ -16569,6 +16575,7 @@ class AuroCombobox extends AuroElement$1 {
               size="${this.size}"
               slot="trigger">
               <slot name="label" slot="label" @slotchange="${this.handleSlotChange}"></slot>
+              <slot name="optionalLabel" slot="optionalLabel" @slotchange="${this.handleSlotChange}"> (optional)</slot>
               <slot name="displayValue" slot="displayValue"></slot>
             </${this.inputTag}>
 

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

@@ -1,5 +1,6 @@
 /**
  * @slot - Default slot for the menu content.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.

package/components/combobox/dist/index.js

@@ -9947,6 +9947,7 @@ let AuroElement$2$1 = class AuroElement extends LitElement {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -12928,6 +12929,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
@@ -15462,6 +15464,7 @@ class AuroHelpText extends LitElement {
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * @slot - Default slot for the menu content.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
@@ -16417,6 +16420,9 @@ class AuroCombobox extends AuroElement {
         // It's because the bib is/will be separated from dropdown to body.
         this.transportAssignedNodes(event.target, this.inputInBib, "label");
         break;
+      case 'optionalLabel':
+        this.transportAssignedNodes(event.target, this.inputInBib, "optionalLabel");
+        break;
       case 'bib.fullscreen.headline':
         this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
         break;
@@ -16487,6 +16493,7 @@ class AuroCombobox extends AuroElement {
               size="${this.size}"
               slot="trigger">
               <slot name="label" slot="label" @slotchange="${this.handleSlotChange}"></slot>
+              <slot name="optionalLabel" slot="optionalLabel" @slotchange="${this.handleSlotChange}"> (optional)</slot>
               <slot name="displayValue" slot="displayValue"></slot>
             </${this.inputTag}>
 

package/components/combobox/dist/registered.js

@@ -9947,6 +9947,7 @@ let AuroElement$2$1 = class AuroElement extends LitElement {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -12928,6 +12929,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
@@ -15462,6 +15464,7 @@ class AuroHelpText extends LitElement {
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * @slot - Default slot for the menu content.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
@@ -16417,6 +16420,9 @@ class AuroCombobox extends AuroElement {
         // It's because the bib is/will be separated from dropdown to body.
         this.transportAssignedNodes(event.target, this.inputInBib, "label");
         break;
+      case 'optionalLabel':
+        this.transportAssignedNodes(event.target, this.inputInBib, "optionalLabel");
+        break;
       case 'bib.fullscreen.headline':
         this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
         break;
@@ -16487,6 +16493,7 @@ class AuroCombobox extends AuroElement {
               size="${this.size}"
               slot="trigger">
               <slot name="label" slot="label" @slotchange="${this.handleSlotChange}"></slot>
+              <slot name="optionalLabel" slot="optionalLabel" @slotchange="${this.handleSlotChange}"> (optional)</slot>
               <slot name="displayValue" slot="displayValue"></slot>
             </${this.inputTag}>
 

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

@@ -23488,6 +23488,7 @@ let AuroElement$2 = class AuroElement extends i {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -26469,6 +26470,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : u$3`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->

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

@@ -23229,6 +23229,7 @@ let AuroElement$2 = class AuroElement extends i {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -26210,6 +26211,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : u$3`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->

package/components/datepicker/dist/index.js

@@ -23165,6 +23165,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -26146,6 +26147,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->

package/components/datepicker/dist/registered.js

@@ -23165,6 +23165,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -26146,6 +26147,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->

package/components/input/demo/api.md

@@ -75,11 +75,12 @@ Generate unique names for dependency components.
 
 ## Slots
 
-| Name           | Description                                      |
-|----------------|--------------------------------------------------|
-| [displayValue](#displayValue) | Allows custom HTML content to display in place of the value when the input is not focused. |
-| [helptext](#helptext)     | Sets the help text displayed below the input.    |
-| [label](#label)        | Sets the label text for the input.               |
+| Name            | Description                                      |
+|-----------------|--------------------------------------------------|
+| [displayValue](#displayValue)  | Allows custom HTML content to display in place of the value when the input is not focused. |
+| [helptext](#helptext)      | Sets the help text displayed below the input.    |
+| [label](#label)         | Sets the label text for the input.               |
+| [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. |
 
 ## CSS Shadow Parts
 
@@ -664,6 +665,34 @@ When the validity check fails, the validityState equals `valueMissing`. The erro
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Custom optional label <a name="optionalLabel"></a>
+The `<auro-input>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optionalLabel.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/optionalLabel.html -->
+  <auro-input placeholder="John Doe" bordered>
+    <span slot="label">Full name</span>
+    <span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
+    <span slot="helptext">Please enter your full name.</span>
+  </auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optionalLabel.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/optionalLabel.html -->
+
+```html
+<auro-input placeholder="John Doe" bordered>
+  <span slot="label">Full name</span>
+  <span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
+  <span slot="helptext">Please enter your full name.</span>
+</auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Validation on input <a name="validateOnInput"></a>
 Use the `validateOnInput` attribute to enable live validation on the `input` event. Recommended use is with setting a custom `pattern` and validation is required prior to a `blur` event.
 

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

@@ -5096,6 +5096,7 @@ let AuroElement$2 = class AuroElement extends i$2 {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -8077,6 +8078,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : u$2`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->

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

@@ -5021,6 +5021,7 @@ let AuroElement$2 = class AuroElement extends i$2 {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -8002,6 +8003,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : u$2`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->

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

@@ -6,6 +6,7 @@
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element

package/components/input/dist/index.js

@@ -4945,6 +4945,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -7926,6 +7927,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->

package/components/input/dist/registered.js

@@ -4945,6 +4945,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
@@ -7926,6 +7927,7 @@ class AuroInput extends BaseInput {
         <slot name="label">
           ${this.label}
         </slot>
+        ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
       </label>
 
       <!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->

package/components/radio/demo/api.md

@@ -36,11 +36,11 @@
 
 ## Slots
 
-| Name            | Description                                     |
-|-----------------|-------------------------------------------------|
-| [helpText](#helpText)      | Allows for the helper text to be overridden.    |
-| [legend](#legend)        | Allows for the legend to be overridden.         |
-| [optionalLabel](#optionalLabel) | Allows for the optional label to be overridden. |
+| Name            | Description                                      |
+|-----------------|--------------------------------------------------|
+| [helpText](#helpText)      | Allows for the helper text to be overridden.     |
+| [legend](#legend)        | Allows for the legend to be overridden.          |
+| [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. |
 
 ## CSS Shadow Parts
 

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

@@ -1486,7 +1486,7 @@ var helpTextVersion = '1.0.0';
  * @attr {Object} optionSelected - Specifies the current selected radio button.
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the element has been validated.
  * @event input - Notifies every time the value prop of the element is changed.
@@ -1909,10 +1909,10 @@ class AuroRadioGroup extends i$2 {
 
     return u`
       <fieldset class="${e(groupClasses)}" part="radio-group">
-        ${this.required
-        ? u`<legend><slot name="legend"></slot></legend>`
-        : u`<legend><slot name="legend"></slot> <slot name="optionalLabel">(optional)</slot></legend>`
-      }
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 

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

@@ -1461,7 +1461,7 @@ var helpTextVersion = '1.0.0';
  * @attr {Object} optionSelected - Specifies the current selected radio button.
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the element has been validated.
  * @event input - Notifies every time the value prop of the element is changed.
@@ -1884,10 +1884,10 @@ class AuroRadioGroup extends i$2 {
 
     return u`
       <fieldset class="${e(groupClasses)}" part="radio-group">
-        ${this.required
-        ? u`<legend><slot name="legend"></slot></legend>`
-        : u`<legend><slot name="legend"></slot> <slot name="optionalLabel">(optional)</slot></legend>`
-      }
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 

package/components/radio/dist/auro-radio-group.d.ts

@@ -10,7 +10,7 @@
  * @attr {Object} optionSelected - Specifies the current selected radio button.
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the element has been validated.
  * @event input - Notifies every time the value prop of the element is changed.

package/components/radio/dist/index.js

@@ -1414,7 +1414,7 @@ var helpTextVersion = '1.0.0';
  * @attr {Object} optionSelected - Specifies the current selected radio button.
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the element has been validated.
  * @event input - Notifies every time the value prop of the element is changed.
@@ -1837,10 +1837,10 @@ class AuroRadioGroup extends LitElement {
 
     return html$1`
       <fieldset class="${classMap(groupClasses)}" part="radio-group">
-        ${this.required
-        ? html$1`<legend><slot name="legend"></slot></legend>`
-        : html$1`<legend><slot name="legend"></slot> <slot name="optionalLabel">(optional)</slot></legend>`
-      }
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 

package/components/radio/dist/registered.js

@@ -1414,7 +1414,7 @@ var helpTextVersion = '1.0.0';
  * @attr {Object} optionSelected - Specifies the current selected radio button.
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the element has been validated.
  * @event input - Notifies every time the value prop of the element is changed.
@@ -1837,10 +1837,10 @@ class AuroRadioGroup extends LitElement {
 
     return html$1`
       <fieldset class="${classMap(groupClasses)}" part="radio-group">
-        ${this.required
-        ? html$1`<legend><slot name="legend"></slot></legend>`
-        : html$1`<legend><slot name="legend"></slot> <slot name="optionalLabel">(optional)</slot></legend>`
-      }
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 

package/components/select/demo/api.md

@@ -70,6 +70,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [displayValue](#displayValue)            | Allows custom HTML content to display the selected value when select is not focused. |
 | [helpText](#helpText)                | Defines the content of the helpText.             |
 | [label](#label)                   | Defines the content of the label.                |
+| [optionalLabel](#optionalLabel)           | Allows overriding the optional display text "(optional)", which appears next to the label. |
 | [placeholder](#placeholder)             | Defines the content of the placeholder to be shown when there is no value |
 | [valueText](#valueText)               | Dropdown value text display.                     |
 
@@ -448,6 +449,50 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Custom optional label <a name="optionalLabel"></a>
+The `<auro-select>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optionalLabel.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/optionalLabel.html -->
+  <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Please select a preference</span>
+    <span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</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/optionalLabel.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/optionalLabel.html -->
+
+```html
+<auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <span slot="label">Please select a preference</span>
+  <span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
+  <auro-menu>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <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-accordion>
+
 #### error <a name="error"></a>
 Use the `error` boolean attribute to toggle the error UI.
 

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

@@ -7454,6 +7454,7 @@ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock
  * @slot - Default slot for the menu content.
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to 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.
@@ -8498,6 +8499,7 @@ class AuroSelect extends AuroElement$4 {
               <div class="${e(valueContainerClasses)}">
                 <label class="${e(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : u`
@@ -8578,6 +8580,7 @@ class AuroSelect extends AuroElement$4 {
               <div class="${e(valueContainerClasses)}">
                 <label class="${e(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : u`
@@ -8659,6 +8662,7 @@ class AuroSelect extends AuroElement$4 {
               <div class="${e(valueContainerClasses)}">
                 <label class="${e(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : u`
@@ -8773,6 +8777,7 @@ class AuroSelect extends AuroElement$4 {
             <slot></slot>
           </${this.bibtemplateTag}>
           <slot name="label" slot="label"></slot>
+          ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
           <p slot="helpText">
             ${!this.validity || this.validity === undefined || this.validity === 'valid'
               ? u`

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

@@ -7351,6 +7351,7 @@ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock
  * @slot - Default slot for the menu content.
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to 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.
@@ -8395,6 +8396,7 @@ class AuroSelect extends AuroElement$4 {
               <div class="${e(valueContainerClasses)}">
                 <label class="${e(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : u`
@@ -8475,6 +8477,7 @@ class AuroSelect extends AuroElement$4 {
               <div class="${e(valueContainerClasses)}">
                 <label class="${e(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : u`
@@ -8556,6 +8559,7 @@ class AuroSelect extends AuroElement$4 {
               <div class="${e(valueContainerClasses)}">
                 <label class="${e(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : u`
@@ -8670,6 +8674,7 @@ class AuroSelect extends AuroElement$4 {
             <slot></slot>
           </${this.bibtemplateTag}>
           <slot name="label" slot="label"></slot>
+          ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
           <p slot="helpText">
             ${!this.validity || this.validity === undefined || this.validity === 'valid'
               ? u`

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

@@ -4,6 +4,7 @@
  * @slot - Default slot for the menu content.
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to 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.

package/components/select/dist/index.js

@@ -7305,6 +7305,7 @@ var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{d
  * @slot - Default slot for the menu content.
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to 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.
@@ -8349,6 +8350,7 @@ class AuroSelect extends AuroElement$3 {
               <div class="${classMap(valueContainerClasses)}">
                 <label class="${classMap(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : html`
@@ -8429,6 +8431,7 @@ class AuroSelect extends AuroElement$3 {
               <div class="${classMap(valueContainerClasses)}">
                 <label class="${classMap(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : html`
@@ -8510,6 +8513,7 @@ class AuroSelect extends AuroElement$3 {
               <div class="${classMap(valueContainerClasses)}">
                 <label class="${classMap(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : html`
@@ -8624,6 +8628,7 @@ class AuroSelect extends AuroElement$3 {
             <slot></slot>
           </${this.bibtemplateTag}>
           <slot name="label" slot="label"></slot>
+          ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
           <p slot="helpText">
             ${!this.validity || this.validity === undefined || this.validity === 'valid'
               ? html`

package/components/select/dist/registered.js

@@ -7305,6 +7305,7 @@ var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{d
  * @slot - Default slot for the menu content.
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to 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.
@@ -8349,6 +8350,7 @@ class AuroSelect extends AuroElement$3 {
               <div class="${classMap(valueContainerClasses)}">
                 <label class="${classMap(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : html`
@@ -8429,6 +8431,7 @@ class AuroSelect extends AuroElement$3 {
               <div class="${classMap(valueContainerClasses)}">
                 <label class="${classMap(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : html`
@@ -8510,6 +8513,7 @@ class AuroSelect extends AuroElement$3 {
               <div class="${classMap(valueContainerClasses)}">
                 <label class="${classMap(this.commonLabelClasses)}">
                   <slot name="label"></slot>
+                  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
                 </label>
                 <div class="value" id="value"></div>
                 ${this.value ? undefined : html`
@@ -8624,6 +8628,7 @@ class AuroSelect extends AuroElement$3 {
             <slot></slot>
           </${this.bibtemplateTag}>
           <slot name="label" slot="label"></slot>
+          ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
           <p slot="helpText">
             ${!this.validity || this.validity === undefined || this.validity === 'valid'
               ? html`

package/package.json

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