@aurodesignsystem/auro-formkit 2.1.0-beta.3 → 2.1.0-beta.5

package/components/select/demo/api.md

@@ -75,6 +75,7 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements.
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-select>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Select Example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -94,6 +95,7 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements.
 ```html
 <auro-select>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <span slot="label">Select Example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -186,6 +188,7 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
   <!-- The below content is automatically added from ./../apiExamples/required.html -->
   <auro-select required setCustomValidityValueMissing="Custom required validation error message.">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">required field</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -206,6 +209,7 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
 ```html
 <auro-select required setCustomValidityValueMissing="Custom required validation error message.">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <span slot="label">required field</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -234,6 +238,7 @@ A custom error message can be set using the `error` attribute, or it can be used
   <auro-select id="errorExample" error="Custom error message">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">error Select Example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -257,6 +262,7 @@ A custom error message can be set using the `error` attribute, or it can be used
 <auro-select id="errorExample" error="Custom error message">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">error Select Example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -279,6 +285,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
   <auro-select disabled>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">disabled select example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -299,6 +306,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 <auro-select disabled>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">disabled select example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -321,6 +329,7 @@ Sets multi-select mode, allowing multiple options to be selected at once.
   <auro-select multiselect>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Select one or more options</label>
+    <span slot="label">multiselect select example</span>
     <auro-menu>
       <auro-menuoption value="1">Option 1</auro-menuoption>
       <auro-menuoption value="2">Option 2</auro-menuoption>
@@ -338,6 +347,7 @@ Sets multi-select mode, allowing multiple options to be selected at once.
 <auro-select multiselect>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Select one or more options</label>
+  <span slot="label">multiselect select example</span>
   <auro-menu>
     <auro-menuoption value="1">Option 1</auro-menuoption>
     <auro-menuoption value="2">Option 2</auro-menuoption>
@@ -355,6 +365,7 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-sele
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/flexMenuWidth.html) -->
   <!-- The below content is automatically added from ../apiExamples/flexMenuWidth.html -->
   <auro-select flexMenuWidth id="flexMenuWidthExample">
+    <span slot="label">flexMenuWidth select example</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
@@ -379,6 +390,7 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-sele
 
 ```html
 <auro-select flexMenuWidth id="flexMenuWidthExample">
+  <span slot="label">flexMenuWidth select example</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
@@ -452,6 +464,7 @@ Use the `helptext` slot to provide additional information back to your user abou
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <span slot="helpText">Custom help text message.</span>
+    <span slot="label">helpText select example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -473,6 +486,7 @@ Use the `helptext` slot to provide additional information back to your user abou
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <span slot="helpText">Custom help text message.</span>
+  <span slot="label">helpText select example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -560,6 +574,7 @@ The following example illustrates how a user may query the `element.value` or `e
   <auro-select id="valueExtraction">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Select Example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -581,6 +596,7 @@ The following example illustrates how a user may query the `element.value` or `e
 <auro-select id="valueExtraction">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Select Example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -622,6 +638,7 @@ This example programmatically adds the `error` state when a user selects an opti
   <auro-select id="primaryError">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Select Example</span>
     <auro-menu>
       <auro-menuoption value="1">1</auro-menuoption>
       <auro-menuoption value="2">2</auro-menuoption>
@@ -642,6 +659,7 @@ This example programmatically adds the `error` state when a user selects an opti
 <auro-select id="primaryError">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Select Example</span>
   <auro-menu>
     <auro-menuoption value="1">1</auro-menuoption>
     <auro-menuoption value="2">2</auro-menuoption>
@@ -754,6 +772,7 @@ To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMM
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreenBreakpoint.html) -->
   <!-- The below content is automatically added from ./../apiExamples/fullscreenBreakpoint.html -->
   <auro-select fullscreenBreakpoint="lg">
+    <span slot="label">Select Example</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -773,6 +792,7 @@ To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMM
 
 ```html
 <auro-select fullscreenBreakpoint="lg">
+  <span slot="label">Select Example</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -866,6 +886,7 @@ The following example listens for the `auroMenu-selectedOption` event. Once trig
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueAlert.html) -->
   <!-- The below content is automatically added from ./../apiExamples/valueAlert.html -->
   <auro-select id="valueAlert">
+    <span slot="label">Select Example</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu id="valueAlertMenu">
@@ -886,6 +907,7 @@ The following example listens for the `auroMenu-selectedOption` event. Once trig
 
 ```html
 <auro-select id="valueAlert">
+  <span slot="label">Select Example</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu id="valueAlertMenu">

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

@@ -3231,7 +3231,7 @@ class AuroDropdownBib extends r {
 
 var dropdownVersion$1 = '3.0.0';
 
-var styleCss$1$2 = i$5`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$2 = i$5`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$2 = i$5`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -3495,6 +3495,7 @@ class AuroDropdown extends r {
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
+    this.labeled = true;
 
     /**
      * @private
@@ -3647,7 +3648,7 @@ class AuroDropdown extends r {
       },
 
       /**
-       * If true, the dropdown bib is taking the fullscreen when it's open
+       * If true, the dropdown bib is taking the fullscreen when it's open.
        */
       isBibFullscreen: {
         type: Boolean,
@@ -3677,6 +3678,15 @@ class AuroDropdown extends r {
         reflect: true
       },
 
+      /**
+       * Defines if there is a label preset.
+       * @private
+       */
+      labeled: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the popover and trigger will be set to the same width.
        */
@@ -3756,6 +3766,7 @@ class AuroDropdown extends r {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.floater.disconnect();
   }
 
   updated(changedProperties) {
@@ -3885,13 +3896,21 @@ class AuroDropdown extends r {
   handleTriggerContentSlotChange(event) {
     this.floater.handleTriggerTabIndex();
 
-    const triggerContentNodes = this.shadowRoot.querySelector('.triggerContent slot').assignedNodes();
+    const triggerSlot = this.shadowRoot.querySelector('.triggerContent slot');
 
-    triggerContentNodes.forEach((node) => {
-      if (!this.triggerContentFocusable) {
-        this.triggerContentFocusable = this.containsFocusableElement(node);
+    if (triggerSlot) {
+
+      const triggerContentNodes = triggerSlot.assignedNodes();
+
+      if (triggerContentNodes) {
+
+        triggerContentNodes.forEach((node) => {
+          if (!this.triggerContentFocusable) {
+            this.triggerContentFocusable = this.containsFocusableElement(node);
+          }
+        });
       }
-    });
+    }
 
     const trigger = this.shadowRoot.querySelector('#trigger');
 
@@ -3945,6 +3964,29 @@ class AuroDropdown extends r {
     }
   }
 
+  /**
+   * @private
+   * @method handleLabelSlotChange
+   * @param {event} event - The event object representing the slot change.
+   * @description Handles the slot change event for the label slot.
+   */
+  handleLabelSlotChange (event) {
+
+    // Get the nodes from the event
+    const nodes = event.target.assignedNodes();
+
+    // Guard clause for no nodes
+    if (!nodes) {
+      return;
+    }
+
+    // Convert the nodes to a measurable array so we can get the length
+    const nodesArr = Array.from(nodes);
+
+    // If the nodes array has a length, the dropdown is labeled
+    this.labeled = nodesArr.length > 0;
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return u`
@@ -3959,7 +4001,7 @@ class AuroDropdown extends r {
           >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
-              <slot name="label"></slot>
+              <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
             </label>
             <div class="triggerContent">
               <slot

package/components/select/demo/index.md

@@ -22,6 +22,7 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-select>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Select Example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -41,6 +42,7 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
 ```html
 <auro-select>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <span slot="label">Select Example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -154,6 +156,7 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
   <auro-select>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Select Example</span>
     <auro-menu>
       <auro-menuoption value="air">
         <auro-icon label customColor category="health" name="air">Air</auro-icon>
@@ -183,6 +186,7 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
 <auro-select>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Select Example</span>
   <auro-menu>
     <auro-menuoption value="air">
       <auro-icon label customColor category="health" name="air">Air</auro-icon>
@@ -215,6 +219,7 @@ This example shows nesting `<auro-menu>` elements to create submenus.
   <auro-select>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Select Example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -258,6 +263,7 @@ This example shows nesting `<auro-menu>` elements to create submenus.
 <auro-select>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Select Example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -304,6 +310,7 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
   <auro-select nocheckmark>
       <span slot="bib.fullscreen.headline">Bib Headline</span>
       <label slot="placeholder">Placeholder Text</label>
+      <span slot="label">nocheckmark Select Example</span>
       <auro-menu>
           <auro-menuoption value="stops">Stops</auro-menuoption>
           <auro-menuoption value="price">Price</auro-menuoption>
@@ -324,6 +331,7 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
 <auro-select nocheckmark>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">nocheckmark Select Example</span>
     <auro-menu>
         <auro-menuoption value="stops">Stops</auro-menuoption>
         <auro-menuoption value="price">Price</auro-menuoption>
@@ -349,6 +357,7 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
   <auro-select id="customBibHeightExample">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Select Example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -374,6 +383,7 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
 <auro-select id="customBibHeightExample">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Select Example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -400,6 +410,7 @@ Use the `error` boolean attribute to toggle the error UI.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
   <!-- The below content is automatically added from ./../apiExamples/error.html -->
   <auro-select error="Custom error message">
+    <span slot="label">error select example</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
@@ -420,6 +431,7 @@ Use the `error` boolean attribute to toggle the error UI.
 
 ```html
 <auro-select error="Custom error message">
+  <span slot="label">error select example</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
@@ -445,6 +457,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
   <auro-select disabled>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">disabled select example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -465,6 +478,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 <auro-select disabled>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">disabled select example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>

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

@@ -3127,7 +3127,7 @@ class AuroDropdownBib extends r {
 
 var dropdownVersion$1 = '3.0.0';
 
-var styleCss$1$2 = i$5`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$2 = i$5`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$2 = i$5`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -3391,6 +3391,7 @@ class AuroDropdown extends r {
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
+    this.labeled = true;
 
     /**
      * @private
@@ -3543,7 +3544,7 @@ class AuroDropdown extends r {
       },
 
       /**
-       * If true, the dropdown bib is taking the fullscreen when it's open
+       * If true, the dropdown bib is taking the fullscreen when it's open.
        */
       isBibFullscreen: {
         type: Boolean,
@@ -3573,6 +3574,15 @@ class AuroDropdown extends r {
         reflect: true
       },
 
+      /**
+       * Defines if there is a label preset.
+       * @private
+       */
+      labeled: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the popover and trigger will be set to the same width.
        */
@@ -3652,6 +3662,7 @@ class AuroDropdown extends r {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.floater.disconnect();
   }
 
   updated(changedProperties) {
@@ -3781,13 +3792,21 @@ class AuroDropdown extends r {
   handleTriggerContentSlotChange(event) {
     this.floater.handleTriggerTabIndex();
 
-    const triggerContentNodes = this.shadowRoot.querySelector('.triggerContent slot').assignedNodes();
+    const triggerSlot = this.shadowRoot.querySelector('.triggerContent slot');
 
-    triggerContentNodes.forEach((node) => {
-      if (!this.triggerContentFocusable) {
-        this.triggerContentFocusable = this.containsFocusableElement(node);
+    if (triggerSlot) {
+
+      const triggerContentNodes = triggerSlot.assignedNodes();
+
+      if (triggerContentNodes) {
+
+        triggerContentNodes.forEach((node) => {
+          if (!this.triggerContentFocusable) {
+            this.triggerContentFocusable = this.containsFocusableElement(node);
+          }
+        });
       }
-    });
+    }
 
     const trigger = this.shadowRoot.querySelector('#trigger');
 
@@ -3841,6 +3860,29 @@ class AuroDropdown extends r {
     }
   }
 
+  /**
+   * @private
+   * @method handleLabelSlotChange
+   * @param {event} event - The event object representing the slot change.
+   * @description Handles the slot change event for the label slot.
+   */
+  handleLabelSlotChange (event) {
+
+    // Get the nodes from the event
+    const nodes = event.target.assignedNodes();
+
+    // Guard clause for no nodes
+    if (!nodes) {
+      return;
+    }
+
+    // Convert the nodes to a measurable array so we can get the length
+    const nodesArr = Array.from(nodes);
+
+    // If the nodes array has a length, the dropdown is labeled
+    this.labeled = nodesArr.length > 0;
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return u`
@@ -3855,7 +3897,7 @@ class AuroDropdown extends r {
           >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
-              <slot name="label"></slot>
+              <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
             </label>
             <div class="triggerContent">
               <slot

package/components/select/demo/readme.md

@@ -85,6 +85,7 @@ This configuration enables proper module resolution for the component's TypeScri
 ```html
 <auro-select>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <span slot="label">Select Example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -110,7 +111,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@2.1.0-beta.2/auro-select/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.4/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/dist/index.js

@@ -3080,7 +3080,7 @@ class AuroDropdownBib extends LitElement {
 
 var dropdownVersion$1 = '3.0.0';
 
-var styleCss$1$1 = css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = css`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -3344,6 +3344,7 @@ class AuroDropdown extends LitElement {
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
+    this.labeled = true;
 
     /**
      * @private
@@ -3496,7 +3497,7 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * If true, the dropdown bib is taking the fullscreen when it's open
+       * If true, the dropdown bib is taking the fullscreen when it's open.
        */
       isBibFullscreen: {
         type: Boolean,
@@ -3526,6 +3527,15 @@ class AuroDropdown extends LitElement {
         reflect: true
       },
 
+      /**
+       * Defines if there is a label preset.
+       * @private
+       */
+      labeled: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the popover and trigger will be set to the same width.
        */
@@ -3605,6 +3615,7 @@ class AuroDropdown extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.floater.disconnect();
   }
 
   updated(changedProperties) {
@@ -3734,13 +3745,21 @@ class AuroDropdown extends LitElement {
   handleTriggerContentSlotChange(event) {
     this.floater.handleTriggerTabIndex();
 
-    const triggerContentNodes = this.shadowRoot.querySelector('.triggerContent slot').assignedNodes();
+    const triggerSlot = this.shadowRoot.querySelector('.triggerContent slot');
 
-    triggerContentNodes.forEach((node) => {
-      if (!this.triggerContentFocusable) {
-        this.triggerContentFocusable = this.containsFocusableElement(node);
+    if (triggerSlot) {
+
+      const triggerContentNodes = triggerSlot.assignedNodes();
+
+      if (triggerContentNodes) {
+
+        triggerContentNodes.forEach((node) => {
+          if (!this.triggerContentFocusable) {
+            this.triggerContentFocusable = this.containsFocusableElement(node);
+          }
+        });
       }
-    });
+    }
 
     const trigger = this.shadowRoot.querySelector('#trigger');
 
@@ -3794,6 +3813,29 @@ class AuroDropdown extends LitElement {
     }
   }
 
+  /**
+   * @private
+   * @method handleLabelSlotChange
+   * @param {event} event - The event object representing the slot change.
+   * @description Handles the slot change event for the label slot.
+   */
+  handleLabelSlotChange (event) {
+
+    // Get the nodes from the event
+    const nodes = event.target.assignedNodes();
+
+    // Guard clause for no nodes
+    if (!nodes) {
+      return;
+    }
+
+    // Convert the nodes to a measurable array so we can get the length
+    const nodesArr = Array.from(nodes);
+
+    // If the nodes array has a length, the dropdown is labeled
+    this.labeled = nodesArr.length > 0;
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`
@@ -3808,7 +3850,7 @@ class AuroDropdown extends LitElement {
           >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
-              <slot name="label"></slot>
+              <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
             </label>
             <div class="triggerContent">
               <slot