npm - @aurodesignsystem/auro-formkit - Versions diffs - 4.0.2 → 5.0.0 - Mend

@aurodesignsystem/auro-formkit 4.0.2 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (172) hide show

package/CHANGELOG.md +193 -2
package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
package/components/bibtemplate/dist/index.js +1184 -105
package/components/bibtemplate/dist/registered.js +1184 -105
package/components/checkbox/demo/api.html +16 -10
package/components/checkbox/demo/api.md +52 -17
package/components/checkbox/demo/api.min.js +66 -33
package/components/checkbox/demo/index.html +16 -10
package/components/checkbox/demo/index.min.js +66 -33
package/components/checkbox/demo/readme.html +16 -9
package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
package/components/checkbox/dist/auro-checkbox.d.ts +8 -1
package/components/checkbox/dist/index.js +65 -32
package/components/checkbox/dist/registered.js +65 -32
package/components/combobox/README.md +2 -0
package/components/combobox/demo/api.html +16 -10
package/components/combobox/demo/api.md +124 -7
package/components/combobox/demo/api.min.js +4542 -1330
package/components/combobox/demo/index.html +16 -10
package/components/combobox/demo/index.md +108 -4
package/components/combobox/demo/index.min.js +4542 -1330
package/components/combobox/demo/readme.html +16 -9
package/components/combobox/demo/readme.md +2 -0
package/components/combobox/dist/auro-combobox.d.ts +81 -18
package/components/combobox/dist/index.js +4588 -1520
package/components/combobox/dist/registered.js +4588 -1520
package/components/counter/demo/api.html +17 -10
package/components/counter/demo/api.md +167 -21
package/components/counter/demo/api.min.js +3621 -866
package/components/counter/demo/index.html +17 -10
package/components/counter/demo/index.md +191 -34
package/components/counter/demo/index.min.js +3621 -866
package/components/counter/demo/readme.html +16 -9
package/components/counter/dist/auro-counter-button.d.ts +2 -0
package/components/counter/dist/auro-counter-group.d.ts +162 -11
package/components/counter/dist/auro-counter.d.ts +16 -0
package/components/counter/dist/helptextVersion.d.ts +2 -0
package/components/counter/dist/iconVersion.d.ts +1 -1
package/components/counter/dist/index.js +3619 -864
package/components/counter/dist/registered.js +3619 -864
package/components/datepicker/README.md +2 -1
package/components/datepicker/demo/api.html +16 -10
package/components/datepicker/demo/api.md +80 -30
package/components/datepicker/demo/api.min.js +14795 -10365
package/components/datepicker/demo/index.html +16 -10
package/components/datepicker/demo/index.md +96 -4
package/components/datepicker/demo/index.min.js +14795 -10365
package/components/datepicker/demo/readme.html +16 -9
package/components/datepicker/demo/readme.md +2 -1
package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
package/components/datepicker/dist/buttonVersion.d.ts +1 -1
package/components/datepicker/dist/iconVersion.d.ts +2 -0
package/components/datepicker/dist/index.js +14916 -10486
package/components/datepicker/dist/popoverVersion.d.ts +1 -1
package/components/datepicker/dist/registered.js +14916 -10486
package/components/dropdown/demo/api.html +16 -10
package/components/dropdown/demo/api.md +94 -262
package/components/dropdown/demo/api.min.js +738 -259
package/components/dropdown/demo/index.html +16 -10
package/components/dropdown/demo/index.md +93 -266
package/components/dropdown/demo/index.min.js +738 -259
package/components/dropdown/demo/readme.html +16 -9
package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
package/components/dropdown/dist/index.js +710 -231
package/components/dropdown/dist/registered.js +710 -231
package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
package/components/form/demo/api.html +16 -9
package/components/form/demo/api.md +1 -1
package/components/form/demo/api.min.js +3 -3
package/components/form/demo/autocomplete.html +19 -3
package/components/form/demo/index.html +16 -9
package/components/form/demo/index.min.js +3 -3
package/components/form/demo/readme.html +16 -9
package/components/form/demo/working.html +19 -13
package/components/form/dist/auro-form.d.ts +1 -1
package/components/form/dist/index.js +2 -2
package/components/form/dist/registered.js +2 -2
package/components/helptext/dist/auro-helptext.d.ts +0 -2
package/components/helptext/dist/index.js +2 -4
package/components/helptext/dist/registered.js +2 -4
package/components/input/README.md +6 -2
package/components/input/demo/api.html +16 -10
package/components/input/demo/api.md +258 -144
package/components/input/demo/api.min.js +1550 -497
package/components/input/demo/index.html +17 -11
package/components/input/demo/index.md +95 -27
package/components/input/demo/index.min.js +1549 -496
package/components/input/demo/readme.html +16 -9
package/components/input/demo/readme.md +6 -2
package/components/input/dist/auro-input.d.ts +139 -3
package/components/input/dist/base-input.d.ts +80 -26
package/components/input/dist/buttonVersion.d.ts +1 -1
package/components/input/dist/iconVersion.d.ts +1 -1
package/components/input/dist/index.js +1504 -451
package/components/input/dist/registered.js +1504 -451
package/components/input/dist/styles/classic/color-css.d.ts +2 -0
package/components/input/dist/styles/classic/style-css.d.ts +2 -0
package/components/input/dist/styles/default/borders-css.d.ts +2 -0
package/components/input/dist/styles/default/color-css.d.ts +2 -0
package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
package/components/input/dist/styles/default/style-css.d.ts +2 -0
package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
package/components/layoutElement/dist/auroElement.d.ts +34 -0
package/components/layoutElement/dist/index.d.ts +2 -0
package/components/layoutElement/dist/index.js +98 -0
package/components/layoutElement/dist/registered.js +98 -0
package/components/menu/demo/api.html +17 -10
package/components/menu/demo/api.md +65 -8
package/components/menu/demo/api.min.js +304 -65
package/components/menu/demo/index.html +16 -10
package/components/menu/demo/index.min.js +304 -65
package/components/menu/demo/readme.html +16 -9
package/components/menu/dist/auro-menu.d.ts +53 -7
package/components/menu/dist/auro-menuoption.d.ts +21 -3
package/components/menu/dist/iconVersion.d.ts +1 -1
package/components/menu/dist/index.js +289 -50
package/components/menu/dist/registered.js +289 -50
package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
package/components/radio/demo/api.html +16 -10
package/components/radio/demo/api.md +41 -9
package/components/radio/demo/api.min.js +93 -95
package/components/radio/demo/index.html +16 -10
package/components/radio/demo/index.min.js +93 -95
package/components/radio/demo/readme.html +16 -9
package/components/radio/dist/auro-radio-group.d.ts +1 -1
package/components/radio/dist/auro-radio.d.ts +11 -12
package/components/radio/dist/index.js +92 -94
package/components/radio/dist/registered.js +92 -94
package/components/select/README.md +1 -0
package/components/select/demo/api.html +16 -10
package/components/select/demo/api.js +0 -2
package/components/select/demo/api.md +156 -114
package/components/select/demo/api.min.js +3126 -657
package/components/select/demo/index.html +17 -10
package/components/select/demo/index.md +398 -62
package/components/select/demo/index.min.js +3129 -648
package/components/select/demo/readme.html +16 -9
package/components/select/demo/readme.md +1 -0
package/components/select/dist/auro-select.d.ts +173 -18
package/components/select/dist/helptextVersion.d.ts +2 -0
package/components/select/dist/index.js +3128 -791
package/components/select/dist/registered.js +3128 -791
package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
package/components/select/dist/styles/tokens-css.d.ts +2 -0
package/package.json +33 -32
package/packages/build-tools/src/postinstall.mjs +0 -12
/package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
/package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
/package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
/package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
/package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
/package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
/package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
/package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
/package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
/package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
/package/components/{menu/dist/styles/tokens-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0

package/components/dropdown/dist/registered.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
-import { LitElement, css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
@@ -593,16 +593,22 @@ const flip$1 = function (options) {
         const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
         if (nextPlacement) {
-          // Try next placement and re-run the lifecycle.
-          return {
-            data: {
-              index: nextIndex,
-              overflows: overflowsData
-            },
-            reset: {
-              placement: nextPlacement
-            }
-          };
+          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+          if (!ignoreCrossAxisOverflow ||
+          // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
+            // Try next placement and re-run the lifecycle.
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
         }
         // First, find the candidates that fit on the mainAxis side of overflow,
@@ -1254,6 +1260,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     scrollTop: 0
   };
   const offsets = createCoords(0);
+  // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+  // Firefox with layout.scrollbar.side = 3 in about:config to test this.
+  function setLeftRTLScrollbarOffset() {
+    offsets.x = getWindowScrollBarX(documentElement);
+  }
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -1263,11 +1275,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
     } else if (documentElement) {
-      // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
-      // Firefox with layout.scrollbar.side = 3 in about:config to test this.
-      offsets.x = getWindowScrollBarX(documentElement);
+      setLeftRTLScrollbarOffset();
     }
   }
+  if (isFixed && !isOffsetParentAnElement && documentElement) {
+    setLeftRTLScrollbarOffset();
+  }
   const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
   const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
@@ -1444,7 +1457,7 @@ function observeMove(element, onMove) {
         // Handle <iframe>s
         root: root.ownerDocument
       });
-    } catch (e) {
+    } catch (_e) {
       io = new IntersectionObserver(handleObserve, options);
     }
     io.observe(element);
@@ -1676,7 +1689,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -1812,6 +1825,7 @@ class AuroFloatingUI {
       this.element.bib.style.left = "0px";
       this.element.bib.style.width = '';
       this.element.bib.style.height = '';
+      this.element.style.contain = '';
       // reset the size that was mirroring `size` css-part
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
@@ -1836,6 +1850,7 @@ class AuroFloatingUI {
       this.element.bib.style.position = '';
       this.element.bib.removeAttribute('isfullscreen');
       this.element.isBibFullscreen = false;
+      this.element.style.contain = 'layout';
     }
     const isChanged = this.strategy && this.strategy !== value;
@@ -1888,22 +1903,16 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
     }
-    this.hideBib();
+    this.hideBib("keydown");
   }
   setupHideHandlers() {
-    this.preventFocusLoseOnBibClick = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
@@ -1919,7 +1928,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -1932,7 +1941,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
@@ -1953,11 +1962,6 @@ class AuroFloatingUI {
   cleanupHideHandlers() {
     // Remove event listeners if they exist
-    if (this.preventFocusLoseOnBibClick) {
-      this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
-      delete this.preventFocusLoseOnBibClick;
-    }
     if (this.focusHandler) {
       document.removeEventListener('focusin', this.focusHandler);
       this.focusHandler = null;
@@ -2015,7 +2019,11 @@ class AuroFloatingUI {
     }
   }
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -2026,7 +2034,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -2035,11 +2043,13 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
+   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -2049,7 +2059,7 @@ class AuroFloatingUI {
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -2072,8 +2082,9 @@ class AuroFloatingUI {
           // Space is included as it's expected behavior for interactive elements
           const origin = event.composedPath()[0];
-          if (event.key === 'Enter' || ((!origin || origin.tagName !== "INPUT") && event.key === ' ')) {
-            event.preventDefault(); // Prevent page scroll on space
+          if (event.key === 'Enter' || event.key === ' ' && (!origin || origin.tagName !== "INPUT")) {
+            event.preventDefault();
             this.handleClick();
           }
           break;
@@ -2084,7 +2095,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -2227,6 +2238,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.
@@ -2277,7 +2549,7 @@ class AuroDependencyVersioning {
  * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
  */
-class AuroElement extends LitElement {
+let AuroElement$1 = class AuroElement extends LitElement {
   // function to define props used within the scope of this component
   static get properties() {
@@ -2301,7 +2573,7 @@ class AuroElement extends LitElement {
     return 'false'
   }
-}
+};
 var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
@@ -2345,7 +2617,7 @@ var styleCss$3 = css`:focus:not(:focus-visible){outline:3px solid transparent}.u
  */
 // build the component class
-class BaseIcon extends AuroElement {
+class BaseIcon extends AuroElement$1 {
   constructor() {
     super();
     this.onDark = false;
@@ -2419,7 +2691,7 @@ class BaseIcon extends AuroElement {
 var tokensCss$2 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
-var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
+var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -2538,7 +2810,8 @@ class AuroIcon extends BaseIcon {
        * Allows custom color to be set.
        */
       customColor: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -2613,8 +2886,12 @@ class AuroIcon extends BaseIcon {
   async firstUpdated() {
     await super.firstUpdated();
-    // Removes the SVG description for screenreader if ariaHidden is set to true
-    if (!this.hasAttribute('ariaHidden') && this.svg) {
+    /**
+     * icons provide a description for screen readers. Icon only instances Auro-button
+     * depend on this description to provide context for the user using a screen reader.
+     * Removes the SVG description for screen reader if ariaHidden is set to true.
+     */
+    if (this.hasAttribute('ariaHidden') && this.svg) {
       const svgDesc = this.svg.querySelector('desc');
       if (svgDesc) {
@@ -2660,11 +2937,11 @@ class AuroIcon extends BaseIcon {
 var iconVersion = '6.1.2';
-var styleCss$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}: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}`;
+var styleCss$2 = css`: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 = css`.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 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--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-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
+var tokensCss$1 = css`: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.
@@ -2685,7 +2962,7 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
  */
 class AuroDropdownBib extends LitElement {
+// not extending AuroElement because Bib needs only `shape` prop
   constructor() {
     super();
@@ -2695,6 +2972,9 @@ class AuroDropdownBib extends LitElement {
     this._mobileBreakpointValue = undefined;
     AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
+    this.shape = "rounded";
+    this.matchWidth = false;
   }
   static get styles() {
@@ -2732,6 +3012,15 @@ class AuroDropdownBib extends LitElement {
         reflect: true
       },
+      /**
+       * If declared, the bib width will match the trigger width.
+       * @private
+       */
+      matchWidth: {
+        type: Boolean,
+        reflect: true
+      },
       /**
        * If declared, will apply border-radius to the bib.
        */
@@ -2745,6 +3034,11 @@ class AuroDropdownBib extends LitElement {
        */
       bibTemplate: {
         type: Object
+      },
+      shape: {
+        type: String,
+        reflect: true
       }
     };
   }
@@ -2824,8 +3118,16 @@ class AuroDropdownBib extends LitElement {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
+    const classes = {
+      container: true
+    };
+    // Since this class does not inherit from AuroElement, we apply the shape-related class within the `render` function,
+    // mimicking the class naming convention used in AuroElement.resetShapeClasses.
+    classes[`shape-${this.shape}`] = true;
     return html$1`
-      <div class="container" part="bibContainer">
+      <div class="${classMap(classes)}" part="bibContainer">
         <slot></slot>
       </div>
     `;
@@ -2834,13 +3136,23 @@ class AuroDropdownBib extends LitElement {
 var dropdownVersion = '3.0.0';
-var styleCss$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-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.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 shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:56px;max-height:56px;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:58px;max-height:58px;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:56px;max-height:56px;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:54px;max-height:54px}.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-box-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-box-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-box-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-box-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-box-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-box-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-box-sm{min-height:32px;max-height:32px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-box-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-box-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-box-xs{min-height:20px;max-height:20px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-box-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-box-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.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 = css`: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,:host([onDark]) .helpText{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-advanced-color-state-error-inverse, #f9a4a8)}`;
+var styleCss$1 = css`:host{position:relative;display:block}:host([open]){z-index:var(--depth-tooltip, 400)}.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([matchwidth]) #bibSizer{width:100%}`;
-var colorCss$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-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([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)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #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-advanced-color-state-focused, #01426a)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}: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-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host([onDark]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark]):focus-within,:host([onDark]):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)}:host([onDark][common]),:host([onDark][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([onDark][common]) .trigger:focus-within,:host([onDark][common]) .trigger:active,:host([onDark][bordered]) .trigger:focus-within,:host([onDark][bordered]) .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([onDark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([onDark][error]) .trigger:focus-within,:host([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)}:host([onDark][disabled][common]),:host([onDark][disabled][bordered]){--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
+var classicColorCss = css``;
+var classicLayoutCss = css`: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{transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}: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)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
+var styleEmphasizedCss = css`.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}: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 = css`: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)}:host([layout*=snowflake]) .trigger,:host([layout*=snowflake]) .helpText{text-align:center}.layout-snowflake .chevron,.layout-snowflake-left .chevron,.layout-snowflake-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}`;
 var colorCss = css`: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-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
-var styleCss = css`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-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 = css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{position:relative;display:block}.helptext-wrapper{display:none}.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 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
@@ -2920,8 +3232,6 @@ class AuroLibraryRuntimeUtils {
 /**
  * Displays help text or error messages within form elements - Internal Use Only.
- *
- * @attr { Boolean } large - If declared, make font-size to 1rem(16px).
  */
 class AuroHelpText extends LitElement {
@@ -3037,7 +3347,7 @@ class AuroHelpText extends LitElement {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`
-      <div class="helptext-wrapper" ?visible="${this.hasTextContent}">
+      <div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
           <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
     `;
@@ -3046,24 +3356,119 @@ class AuroHelpText extends LitElement {
 var helpTextVersion = '1.0.0';
+class AuroElement extends LitElement {
+  static get properties() {
+    return {
+      /**
+       * Defines the language of an element.
+       * @default {'default'}
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+      onDark: {
+        type: Boolean,
+        attribute: "ondark",
+        reflect: true
+      }
+    };
+  }
+  resetShapeClasses() {
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
+    if (wrapper) {
+      wrapper.classList.forEach((className) => {
+        if (className.startsWith('shape-')) {
+          wrapper.classList.remove(className);
+        }
+      });
+      if (this.shape && this.size) {
+        wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
+      } else {
+        wrapper.classList.add('shape-none');
+      }
+    }
+  }
+  resetLayoutClasses() {
+    if (this.layout) {
+      const wrapper = this.shadowRoot.querySelector('.wrapper');
+      if (wrapper) {
+        wrapper.classList.forEach((className) => {
+          if (className.startsWith('layout-')) {
+            wrapper.classList.remove(className);
+          }
+        });
+        wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
+      }
+    }
+  }
+  updateComponentArchitecture() {
+    this.resetLayoutClasses();
+    this.resetShapeClasses();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
+      this.updateComponentArchitecture();
+    }
+  }
+  // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
+  // This will catch if an invalid layout value is passed in and render the default layout if so.
+  render() {
+    try {
+      return this.renderLayout();
+    } catch (error) {
+      // failed to get the defined layout
+      console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
+      // fallback to the default layout
+      return this.getLayout('default');
+    }
+  }
+}
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // 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.
  * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
  * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
  */
-class AuroDropdown extends LitElement {
+class AuroDropdown extends AuroElement {
   constructor() {
     super();
@@ -3072,26 +3477,33 @@ class AuroDropdown extends LitElement {
     this.matchWidth = false;
     this.noHideOnThisFocusLoss = false;
-    this.privateDefaults();
+    this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
+    // Layout Config
+    this.layout = undefined;
+    this.shape = undefined;
+    this.size = undefined;
-    /**
-     * @private
-     */
-    this.triggerContentFocusable = false;
+    this.parentBorder = false;
-    /**
-     * @private
-     */
-    this.showTriggerBorders = true;
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+    this.privateDefaults();
+  }
+  /**
+   * @private
+   * @returns {object} Class definition for the wrapper element.
+   */
+  get commonWrapperClasses() {
+    return {
+      'trigger': true,
+      'wrapper': true,
+      'hasFocus': this.hasFocus,
+      'simple': this.simple,
+      'parentBorder': this.parentBorder
+    };
   }
   /**
@@ -3099,18 +3511,17 @@ class AuroDropdown extends LitElement {
    * @returns {void} Internal defaults.
    */
   privateDefaults() {
-    this.bordered = false;
     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 = 'combobox';
+    this.a11yRole = 'button';
     this.onDark = false;
+    this.showTriggerBorders = true;
+    this.triggerContentFocusable = false;
+    this.simple = false;
     // floaterConfig
     this.placement = 'bottom-start';
@@ -3118,6 +3529,15 @@ class AuroDropdown extends LitElement {
     this.noFlip = false;
     this.autoPlacement = false;
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
     /**
      * @private
      */
@@ -3192,6 +3612,18 @@ class AuroDropdown extends LitElement {
     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 {
@@ -3205,10 +3637,19 @@ class AuroDropdown extends LitElement {
         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.
        */
-      bordered: {
+      simple: {
         type: Boolean,
         reflect: true
       },
@@ -3223,17 +3664,17 @@ class AuroDropdown extends LitElement {
       },
       /**
-       * 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
       },
@@ -3256,7 +3697,7 @@ class AuroDropdown extends LitElement {
       },
       /**
-       * If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
+       * If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
        */
       error: {
         type: Boolean,
@@ -3264,25 +3705,16 @@ class AuroDropdown extends LitElement {
       },
       /**
-       * If declared, the bib will display when focus is applied to the trigger.
+       * Contains the help text message for the current validity error.
        */
-      focusShow: {
-        type: Boolean,
-        reflect: true
-      },
-      /**
-       * Makes the trigger to be full width of its parent container.
-       */
-      fluid: {
-        type: Boolean,
-        reflect: true
+      errorMessage: {
+        type: String
       },
       /**
-       * If declared, will apply padding around trigger slot content.
+       * If declared, the bib will display when focus is applied to the trigger.
        */
-      inset: {
+      focusShow: {
         type: Boolean,
         reflect: true
       },
@@ -3291,7 +3723,9 @@ class AuroDropdown extends LitElement {
        * If true, the dropdown bib is displayed.
        */
       isPopoverVisible: {
-        type: Boolean
+        type: Boolean,
+        reflect: true,
+        attribute: 'open'
       },
       /**
@@ -3331,10 +3765,10 @@ class AuroDropdown extends LitElement {
       },
       /**
-       * Defines if there is a label preset.
+       * Defines if the trigger should size based on the parent element providing the border UI.
        * @private
        */
-      labeled: {
+      parentBorder: {
         type: Boolean,
         reflect: true
       },
@@ -3390,6 +3824,9 @@ class AuroDropdown extends LitElement {
         reflect: true
       },
+      /**
+       *  If declared, and a function is set, that function will execute when the slot content is updated.
+       */
       onSlotChange: {
         type: Function,
         reflect: false
@@ -3397,11 +3834,6 @@ class AuroDropdown extends LitElement {
       /**
        * Position where the bib should appear relative to the trigger.
-       * Accepted values:
-       * "top" | "right" | "bottom" | "left" |
-       * "bottom-start" | "top-start" | "top-end" |
-       * "right-start" | "right-end" | "bottom-end" |
-       * "left-start" | "left-end"
        * @default bottom-start
        */
       placement: {
@@ -3409,14 +3841,6 @@ class AuroDropdown extends LitElement {
         reflect: true
       },
-      /**
-       * If declared, will apply border-radius to trigger and default slots.
-       */
-      rounded: {
-        type: Boolean,
-        reflect: true
-      },
       /**
        * @private
        */
@@ -3431,23 +3855,27 @@ class AuroDropdown extends LitElement {
         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,
       styleCss$1,
-      tokensCss$1
+      tokensCss$1,
+      colorCss$1,
+      // default layout
+      classicColorCss,
+      classicLayoutCss,
+      // emphasized layout
+      styleEmphasizedCss,
+      // snowflake layout
+      styleSnowflakeCss,
+      shapeSizeCss
     ];
   }
@@ -3483,6 +3911,7 @@ class AuroDropdown extends LitElement {
   }
   updated(changedProperties) {
+    super.updated(changedProperties);
     this.floater.handleUpdate(changedProperties);
     // Note: `disabled` is not a breakpoint (it is not a screen size),
@@ -3492,17 +3921,31 @@ class AuroDropdown extends LitElement {
     }
     // when trigger's content is changed without any attribute or node change,
-    // `requestUpdate` needs to be called to update hasTriggerContnet
+    // `requestUpdate` needs to be called to update hasTriggerContent
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+  }
+  /**
+   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
+   * @private
+   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
+   */
+  handleDropdownToggle(event) {
+    this.updateFocusTrap();
+    this.isPopoverVisible = event.detail.expanded;
+    const eventType = event.detail.eventType || "unknown";
+    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
+      this.trigger.focus();
+    }
   }
   firstUpdated() {
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.
@@ -3520,6 +3963,13 @@ class AuroDropdown extends LitElement {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
+    this.trigger.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
+        bubbles: true,
+        composed: true
+      }));
+    });
   }
   /**
@@ -3554,66 +4004,47 @@ class AuroDropdown extends LitElement {
   }
   /**
-   * Determines if the element or any children are focusable.
+   * Function to support @focusin event.
    * @private
-   * @param {HTMLElement} element - Element to check.
-   * @returns {Boolean} - True if the element or any children are focusable.
+   * @return {void}
    */
-  containsFocusableElement(element) {
-    this.showTriggerBorders = true;
-    const nodes = [
-      element,
-      ...element.children
-    ];
-    const focusableElements = [
-      'a',
-      'auro-hyperlink',
-      'button',
-      'auro-button',
-      'input',
-      'auro-input',
-    ];
-    const focusableElementsThatNeedBorders = ['auro-input'];
-    const result = nodes.some((node) => {
-      const tagName = node.tagName.toLowerCase();
-      if (node.tabIndex > -1) {
-        return true;
-      }
-      if (focusableElements.includes(tagName)) {
-        if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
-          return true;
-        }
-        if (!node.hasAttribute('disabled')) {
-          return true;
-        }
-      }
-      if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
-        return true;
-      }
+  handleFocusin() {
+    this.hasFocus = true;
+  }
-      return false;
-    });
+  /**
+   * @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;
+    }
-    if (result) {
-      this.showTriggerBorders = !nodes.some((node) => {
-        const tagName = node.tagName.toLowerCase();
-        return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
-      });
+    // Guard Clause: Ensure there is a focus trap currently active before continuing
+    if (!this.focusTrap) {
+      return;
     }
-    return result;
+    // 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
+   * @return {void}
+   */
+  handleFocusout() {
+    this.hasFocus = false;
+  }
+  /**
    * Creates and dispatches a duplicate focus event on the trigger element.
+   * @private
    * @param {Event} event - The original focus event.
    */
   bindFocusEventToTrigger(event) {
@@ -3626,9 +4057,9 @@ class AuroDropdown extends LitElement {
   }
   /**
-   * @private
    * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
    * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
+   * @private
    */
   setupTriggerFocusEventBinding() {
     if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
@@ -3704,14 +4135,13 @@ class AuroDropdown extends LitElement {
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {
     this.floater.handleTriggerTabIndex();
     // Get the trigger
     const trigger = this.shadowRoot.querySelector('#trigger');
     // Get the trigger slot
-    const triggerSlot = this.shadowRoot.querySelector('.triggerContent slot');
+    const triggerSlot = this.shadowRoot.querySelector('.triggerContentWrapper slot');
     // If there's a trigger slot
     if (triggerSlot) {
@@ -3722,8 +4152,8 @@ class AuroDropdown extends LitElement {
       // If there are children
       if (triggerContentNodes) {
-        // See if any of them are focusable elemeents
-        this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
+        // See if any of them are focusable elements
+        this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
         // If any of them are focusable elements
         if (this.triggerContentFocusable) {
@@ -3774,7 +4204,6 @@ class AuroDropdown extends LitElement {
    *
    * @private
    * @method handleDefaultSlot
-   * @param {Event} event - The event object representing the slot change.
    * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
    */
   handleDefaultSlot() {
@@ -3785,56 +4214,33 @@ class AuroDropdown extends LitElement {
   }
   /**
+   * Returns HTML for the common portion of the layouts.
    * @private
-   * @method handleLabelSlotChange
-   * @param {event} event - The event object representing the slot change.
-   * @description Handles the slot change event for the label slot.
+   * @param {Object} helpTextClasses - Classes to apply to the help text container.
+   * @returns {html} - Returns HTML.
    */
-  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() {
+  renderBasicHtml(helpTextClasses) {
     return html$1`
       <div>
         <div
           id="trigger"
-          class="trigger"
-          part="trigger"
-          tabindex="${this.tabIndex}"
-          ?showBorder="${this.showTriggerBorders}"
+          class="${classMap(this.commonWrapperClasses)}" part="wrapper"
+          tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
-          aria-expanded="${ifDefined(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
-          aria-controls="${ifDefined(this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
+          aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
           aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
-        >
-          <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
-              <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
-            </label>
-            <div class="triggerContent">
-              <slot
-                name="trigger"
-                @slotchange="${this.handleTriggerContentSlotChange}"></slot>
-            </div>
+          @focusin="${this.handleFocusin}"
+          @blur="${this.handleFocusOut}">
+          <div class="triggerContentWrapper" id="triggerLabel">
+            <slot
+              name="trigger"
+              @slotchange="${this.handleTriggerContentSlotChange}"></slot>
           </div>
-          ${this.chevron || this.common ? html$1`
+          ${this.chevron ? html$1`
               <div
                 id="showStateIcon"
+                class="chevron"
                 part="chevron">
                 <${this.iconTag}
                   category="interface"
@@ -3846,19 +4252,15 @@ class AuroDropdown extends LitElement {
               </div>
             ` : undefined }
         </div>
-        <${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
+        <div class="${classMap(helpTextClasses)}">
           <slot name="helpText"></slot>
-        </${this.helpTextTag}>
+        </div>
         <div id="bibSizer" part="size"></div>
         <${this.dropdownBibTag}
           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>
@@ -3866,6 +4268,83 @@ class AuroDropdown extends LitElement {
       </div>
     `;
   }
+  /**
+   * Returns HTML for the classic layout. Does not support type="*".
+   * @private
+   * @returns {html} - Returns HTML for the classic layout.
+   */
+  renderLayoutClassic() {
+    // TODO: check with Doug why this was never used?
+    const helpTextClasses = {
+      'helpText': true
+    };
+    return html$1`
+      ${this.renderBasicHtml(helpTextClasses)}
+    `;
+  }
+  /**
+   * Returns HTML for the snowflake layout. Does not support type="*".
+   * @private
+   * @returns {html} - Returns HTML for the snowflake layout.
+   */
+  renderLayoutSnowflake() {
+    const helpTextClasses = {
+      'helpText': true,
+      'leftIndent': true,
+      'rightIndent': true
+    };
+    return html$1`
+      ${this.renderBasicHtml(helpTextClasses)}
+    `;
+  }
+  /**
+   * Returns HTML for the emphasized layout. Does not support type="*".
+   * @private
+   * @returns {html} - Returns HTML for the emphasized layout.
+   */
+  renderLayoutEmphasized() {
+    const helpTextClasses = {
+      'helpText': true,
+      'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
+      'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
+    };
+    return html$1`
+      ${this.renderBasicHtml(helpTextClasses)}
+    `;
+  }
+  /**
+   * Logic to determine the layout of the component.
+   * @private
+   * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
+   * @returns {HTMLCollection} - Returns the HTML for the layout.
+   */
+  renderLayout(ForcedLayout) {
+    const layout = ForcedLayout || this.layout;
+    switch (layout) {
+      case 'emphasized':
+        return this.renderLayoutEmphasized();
+      case 'emphasized-left':
+        return this.renderLayoutEmphasized();
+      case 'emphasized-right':
+        return this.renderLayoutEmphasized();
+      case 'snowflake':
+        return this.renderLayoutSnowflake();
+      case 'snowflake-left':
+        return this.renderLayoutSnowflake();
+      case 'snowflake-right':
+        return this.renderLayoutSnowflake();
+      default:
+        return this.renderLayoutClassic();
+    }
+  }
 }
 AuroDropdown.register();