@aurodesignsystem-dev/auro-formkit 0.0.0-pr740.9 → 0.0.0-pr750.0

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

@@ -2282,6 +2282,267 @@ class AuroFloatingUI {
   }
 }
 
+// Selectors for focusable elements
+const FOCUSABLE_SELECTORS = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[role="tab"]:not([disabled])',
+  '[role="link"]:not([disabled])',
+  '[role="button"]:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable]:not([contenteditable="false"])'
+];
+
+// List of custom components that are known to be focusable
+const FOCUSABLE_COMPONENTS = [
+  'auro-checkbox',
+  'auro-radio',
+  'auro-dropdown',
+  'auro-button',
+  'auro-combobox',
+  'auro-input',
+  'auro-counter',
+  'auro-menu',
+  'auro-select',
+  'auro-datepicker',
+  'auro-hyperlink',
+  'auro-accordion',
+];
+
+/**
+ * Determines if a given element is a custom focusable component.
+ * Returns true if the element matches a known focusable component and is not disabled.
+ *
+ * @param {HTMLElement} element The element to check for focusability.
+ * @returns {boolean} True if the element is a focusable custom component, false otherwise.
+ */
+function isFocusableComponent(element) {
+  const componentName = element.tagName.toLowerCase();
+
+  // Guard Clause: Element is a focusable component
+  if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
+
+  // Guard Clause: Element is not disabled
+  if (element.hasAttribute('disabled')) return false;
+
+  // Guard Clause: The element is a hyperlink and has no href attribute
+  if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
+
+  // If all guard clauses pass, the element is a focusable component
+  return true;
+}
+
+/**
+ * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
+ * Returns a unique, ordered array of elements that can receive focus.
+ *
+ * @param {HTMLElement} container The container to search within
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+ */
+function getFocusableElements(container) {
+  // Get elements in DOM order by walking the tree
+  const orderedFocusableElements = [];
+
+  // Define a recursive function to collect focusable elements in DOM order
+  const collectFocusableElements = (root) => {
+    // Check if current element is focusable
+    if (root.nodeType === Node.ELEMENT_NODE) {
+      // Check if this is a custom component that is focusable
+      const isComponentFocusable = isFocusableComponent(root);
+
+      if (isComponentFocusable) {
+        // Add the component itself as a focusable element and don't traverse its shadow DOM
+        orderedFocusableElements.push(root);
+        return; // Skip traversing inside this component
+      }
+
+      // Check if the element itself matches any selector
+      for (const selector of FOCUSABLE_SELECTORS) {
+        if (root.matches?.(selector)) {
+          orderedFocusableElements.push(root);
+          break; // Once we know it's focusable, no need to check other selectors
+        }
+      }
+
+      // Process shadow DOM only for non-Auro components
+      if (root.shadowRoot) {
+        // Process shadow DOM children in order
+        if (root.shadowRoot.children) {
+          Array.from(root.shadowRoot.children).forEach(child => {
+            collectFocusableElements(child);
+          });
+        }
+      }
+
+      // Process slots and their assigned nodes in order
+      if (root.tagName === 'SLOT') {
+        const assignedNodes = root.assignedNodes({ flatten: true });
+        for (const node of assignedNodes) {
+          collectFocusableElements(node);
+        }
+      } else {
+        // Process light DOM children in order
+        if (root.children) {
+          Array.from(root.children).forEach(child => {
+            collectFocusableElements(child);
+          });
+        }
+      }
+    }
+  };
+
+  // Start the traversal from the container
+  collectFocusableElements(container);
+
+  // Remove duplicates that might have been collected through different paths
+  // while preserving order
+  const uniqueElements = [];
+  const seen = new Set();
+
+  for (const element of orderedFocusableElements) {
+    if (!seen.has(element)) {
+      seen.add(element);
+      uniqueElements.push(element);
+    }
+  }
+
+  return uniqueElements;
+}
+
+/**
+ * FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
+ * It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
+ */
+class FocusTrap {
+  /**
+   * Creates a new FocusTrap instance for the given container element.
+   * Initializes event listeners and prepares the container for focus management.
+   *
+   * @param {HTMLElement} container The DOM element to trap focus within.
+   * @throws {Error} If the provided container is not a valid HTMLElement.
+   */
+  constructor(container) {
+    if (!container || !(container instanceof HTMLElement)) {
+      throw new Error("FocusTrap requires a valid HTMLElement.");
+    }
+
+    this.container = container;
+    this.tabDirection = 'forward'; // or 'backward'
+
+    this._init();
+  }
+
+  /**
+   * Initializes the focus trap by setting up event listeners and attributes on the container.
+   * Prepares the container for focus management, including support for shadow DOM and inert attributes.
+   *
+   * @private
+   */
+  _init() {
+
+    // Add inert attribute to prevent focusing programmatically as well (if supported)
+    if ('inert' in HTMLElement.prototype) {
+      this.container.inert = false; // Ensure the container isn't inert
+      this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
+    }
+
+    // Track tab direction
+    this.container.addEventListener('keydown', this._onKeydown);
+  }
+
+  /**
+   * Handles keydown events to manage tab navigation within the container.
+   * Ensures that focus wraps around when reaching the first or last focusable element.
+   *
+   * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
+   * @private
+   */
+  _onKeydown = (e) => {
+    
+    if (e.key === 'Tab') {
+
+      // Set the tab direction based on the key pressed
+      this.tabDirection = e.shiftKey ? 'backward' : 'forward';
+
+      // Get the active element(s) in the document and shadow root
+      // This will include the active element in the shadow DOM if it exists
+      // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
+      let activeElement = document.activeElement;
+      const actives =  [activeElement];
+      while (activeElement?.shadowRoot?.activeElement) {
+        actives.push(activeElement.shadowRoot.activeElement);
+        activeElement = activeElement.shadowRoot.activeElement;
+      }
+
+      // Update the focusable elements
+      const focusables = this._getFocusableElements();
+
+      // If we're at either end of the focusable elements, wrap around to the other end
+      const focusIndex =
+        (actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
+          ? focusables.length - 1
+          : actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
+            ? 0
+            : null;
+
+      if (focusIndex !== null) {
+        focusables[focusIndex].focus();
+        e.preventDefault(); // Prevent default tab behavior
+        e.stopPropagation(); // Stop the event from bubbling up
+      }
+    }
+  };
+
+  /**
+   * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
+   * Returns a unique, ordered array of elements that can receive focus.
+   *
+   * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+   * @private
+   */
+  _getFocusableElements() {
+    // Use the imported utility function to get focusable elements
+    const elements = getFocusableElements(this.container);
+    
+    // Filter out any elements with the 'focus-bookend' class
+    return elements;
+  }
+
+  /**
+   * Moves focus to the first focusable element within the container.
+   * Useful for setting initial focus when activating the focus trap.
+   */
+  focusFirstElement() {
+    const focusables = this._getFocusableElements();
+    if (focusables.length) focusables[0].focus();
+  }
+
+  /**
+   * Moves focus to the last focusable element within the container.
+   * Useful for setting focus when deactivating or cycling focus in reverse.
+   */
+  focusLastElement() {
+    const focusables = this._getFocusableElements();
+    if (focusables.length) focusables[focusables.length - 1].focus();
+  }
+
+  /**
+   * Removes event listeners and attributes added by the focus trap.
+   * Call this method to clean up when the focus trap is no longer needed.
+   */
+  disconnect() {
+
+    if (this.container.hasAttribute('data-focus-trap-container')) {
+      this.container.removeAttribute('data-focus-trap-container');
+    }
+
+    this.container.removeEventListener('keydown', this._onKeydown);
+  }
+}
+
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -2725,11 +2986,11 @@ class AuroIcon extends BaseIcon {
 
 var iconVersion = '6.1.2';
 
-var styleCss$1 = i$2`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){top:0;left:0;width:100dvw;height:100dvh}:host([isfullscreen]) .container{width:100%;max-width:none;height:100%;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
+var styleCss$1 = i$2`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
 
 var colorCss$2 = i$2`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
-var tokensCss$1 = i$2`:host(:not([ondark])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
+var tokensCss$1 = i$2`:host(:not([ondark])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -2889,17 +3150,6 @@ class AuroDropdownBib extends i {
         }
       }
     });
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -2915,19 +3165,6 @@ class AuroDropdownBib extends i {
     }));
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    // when touchmove/touchstart on empty space
-    if (event.target === this) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -2950,19 +3187,19 @@ var dropdownVersion = '3.0.0';
 
 var shapeSizeCss = i$2`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
 
-var colorCss$1 = i$2`:host .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus,:host(:not([ondark])) .wrapper:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus,:host([ondark]) .wrapper:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([error]:not([ondark])){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([error][ondark]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helpText{color:var(--ds-auro-dropdown-helptext-text-color)}`;
+var colorCss$1 = i$2`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
 
-var classicColorCss = i$2`:host([layout*=classic]:not([onDark])) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([layout*=classic]:not([onDark])) .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)}:host([layout*=classic]:not([onDark])) .trigger:focus-within,:host([layout*=classic]:not([onDark])) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([layout*=classic][disabled]:not([onDark])){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host([layout*=classic][error]:not([onDark])){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic][error]:not([onDark])) .trigger:focus-within,:host([layout*=classic][error]:not([onDark])) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([layout*=classic][onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([layout*=classic][onDark]) .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)}:host([layout*=classic][onDark]) .trigger:focus-within,:host([layout*=classic][onDark]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([layout*=classic][onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([layout*=classic][onDark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][onDark][error]) .trigger:focus-within,:host([layout*=classic][onDark][error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
+var classicColorCss = i$2``;
 
-var classicLayoutCss = i$2`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .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}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .trigger{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .trigger:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
+var classicLayoutCss = i$2`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .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}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}`;
 
-var styleEmphasizedCss = i$2`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.wrapper{display:flex;flex-direction:row}.trigger{display:flex;flex:1;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
+var styleEmphasizedCss = i$2`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
 
-var styleSnowflakeCss = i$2`:host{display:block}.wrapper{display:flex;flex-direction:row}.trigger{display:flex;flex:1;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([layout*=snowflake]) .leftIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}.layout-snowflake .chevron,.layout-snowflake-left .chevron,.layout-snowflake-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}`;
+var styleSnowflakeCss = i$2`:host{display:block}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([layout*=snowflake]) .leftIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}.layout-snowflake .chevron,.layout-snowflake-left .chevron,.layout-snowflake-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}`;
 
 var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = i$2`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss = i$2`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$2`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -3267,10 +3504,8 @@ class AuroElement extends i {
 // See LICENSE in the project root for license information.
 
 
-/**
- * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
+/*
  * @slot - Default slot for the popover content.
- * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
@@ -3289,18 +3524,22 @@ class AuroDropdown extends AuroElement {
     this.matchWidth = false;
     this.noHideOnThisFocusLoss = false;
 
-    this.errorMessage = ''; // TODO - check with Doug if there is still more to do here
+    this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
 
     // Layout Config
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'xl';
+    this.layout = undefined;
+    this.shape = undefined;
+    this.size = undefined;
 
     this.parentBorder = false;
 
     this.privateDefaults();
   }
 
+  /**
+   * @private
+   * @returns {object} Class definition for the wrapper element.
+   */
   get commonWrapperClasses() {
     return {
       'trigger': true,
@@ -3318,13 +3557,10 @@ class AuroDropdown extends AuroElement {
   privateDefaults() {
     this.chevron = false;
     this.disabled = false;
+    this.disableFocusTrap = false;
     this.error = false;
-    this.inset = false;
-    this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
-    this.a11yAutocomplete = 'none';
-    this.labeled = true;
     this.a11yRole = 'button';
     this.onDark = false;
     this.showTriggerBorders = true;
@@ -3420,6 +3656,18 @@ class AuroDropdown extends AuroElement {
     this.floater.showBib();
   }
 
+  /**
+   * When bib is open, focus on the first element inside of bib.
+   * If not, trigger element will get focus.
+   */
+  focus() {
+    if (this.isPopoverVisible && this.focusTrap) {
+      this.focusTrap.focusFirstElement();
+    } else {
+      this.trigger.focus();
+    }
+  }
+
   // function to define props used within the scope of this component
   static get properties() {
     return {
@@ -3433,6 +3681,15 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
+      /**
+       * If declared, the dropdown will only show by calling the API .show() public method.
+       * @default false
+       */
+      disableEventShow: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, applies a border around the trigger slot.
        */
@@ -3451,17 +3708,17 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * If declared, the dropdown will be styled with the common theme.
+       * If declared, the dropdown is not interactive.
        */
-      common: {
+      disabled: {
         type: Boolean,
         reflect: true
       },
 
       /**
-       * If declared, the dropdown is not interactive.
+       * If declared, the focus trap inside of bib will be turned off.
        */
-      disabled: {
+      disableFocusTrap: {
         type: Boolean,
         reflect: true
       },
@@ -3506,22 +3763,6 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
-      /**
-       * Makes the trigger to be full width of its parent container.
-       */
-      fluid: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * If declared, will apply padding around trigger slot content.
-       */
-      inset: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * If true, the dropdown bib is displayed.
        */
@@ -3565,15 +3806,6 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
-      /**
-       * Defines if there is a label preset.
-       * @private
-       */
-      labeled: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * Defines if the trigger should size based on the parent element providing the border UI.
        * @private
@@ -3634,6 +3866,9 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
+      /**
+       *  If declared, and a function is set, that function will execute when the slot content is updated.
+       */
       onSlotChange: {
         type: Function,
         reflect: false
@@ -3648,14 +3883,6 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
-      /**
-       * If declared, will apply border-radius to trigger and default slots.
-       */
-      rounded: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * @private
        */
@@ -3670,22 +3897,14 @@ class AuroDropdown extends AuroElement {
         type: String || undefined,
         attribute: false,
         reflect: false
-      },
-
-      /**
-       * The value for the aria-autocomplete attribute of the trigger element.
-       */
-      a11yAutocomplete: {
-        type: String,
-        attribute: false,
       }
     };
   }
 
   static get styles() {
     return [
-      colorCss$1,
       tokensCss$1,
+      colorCss$1,
 
       // default layout
       classicColorCss,
@@ -3748,6 +3967,12 @@ class AuroDropdown extends AuroElement {
       this.handleTriggerContentSlotChange();
     }
 
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
+    }
   }
 
   firstUpdated() {
@@ -3768,9 +3993,6 @@ class AuroDropdown extends AuroElement {
     }
 
     this.bibContent = this.floater.element.bib;
-    this.bibContent.setAttribute('role', 'dialog');
-    this.bibContent.setAttribute('aria-modal', 'true');
-    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
@@ -3816,6 +4038,27 @@ class AuroDropdown extends AuroElement {
     this.hasFocus = true;
   }
 
+  /**
+   * @private
+   */
+  updateFocusTrap() {
+    // If the dropdown is open, create a focus trap and focus the first element
+    if (this.isPopoverVisible && !this.disableFocusTrap) {
+      this.focusTrap = new FocusTrap(this.bibContent);
+      this.focusTrap.focusFirstElement();
+      return;
+    }
+
+    // Guard Clause: Ensure there is a focus trap currently active before continuing
+    if (!this.focusTrap) {
+      return;
+    }
+
+    // If the dropdown is not open, disconnect the focus trap if it exists
+    this.focusTrap.disconnect();
+    this.focusTrap = undefined;
+  }
+
   /**
    * Function to support @focusout event.
    * @private
@@ -4101,10 +4344,7 @@ class AuroDropdown extends AuroElement {
           id="bib"
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
-          ?isfullscreen="${this.isBibFullscreen}"
-          ?common="${this.common}"
-          ?rounded="${this.common || this.rounded}"
-          ?inset="${this.common || this.inset}">
+          ?isfullscreen="${this.isBibFullscreen}">
           <div class="slotContent">
             <slot @slotchange="${this.handleDefaultSlot}"></slot>
           </div>

package/components/dropdown/demo/readme.html

@@ -16,17 +16,24 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Generator | auro-dropdown custom element</title>
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
-    />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
+    <title>Auro Web Component Demo | auro-dropdown</title>
+
+    <!-- Prism.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+
+    <!-- Legacy reference is still needed to support auro-dropdown's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+    
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+    
+    <!-- Demo Specific Styles -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
-  </head>
+</head>
   <body class="auro-markdown">
     <main></main>