@aurodesignsystem-dev/auro-formkit 0.0.0-pr1422.0 → 0.0.0-pr1422.2

package/components/dropdown/dist/index.js

@@ -0,0 +1,4847 @@
+import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import 'lit-html';
+import 'lit-html/directives/unsafe-html.js';
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+
+  /**
+   * Gets the text content of a named slot.
+   * @returns {String}
+   * @private
+   */
+  getSlotText(elem, name) {
+    const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
+    const nodes = slot?.assignedNodes({ flatten: true }) || [];
+    const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
+
+    return text || null;
+  }
+};
+
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
+const sides = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'end'];
+const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+function getSideAxis(placement) {
+  const firstChar = placement[0];
+  return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
+}
+const lrPlacement = ['left', 'right'];
+const rlPlacement = ['right', 'left'];
+const tbPlacement = ['top', 'bottom'];
+const btPlacement = ['bottom', 'top'];
+function getSideList(side, isStart, rtl) {
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
+    case 'left':
+    case 'right':
+      return isStart ? tbPlacement : btPlacement;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  const side = getSide(placement);
+  return oppositeSideMap[side] + placement.slice(side.length);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
+  };
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case 'end':
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
+const MAX_RESET_COUNT = 50;
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+const computePosition$1 = async (reference, floating, config) => {
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform
+  } = config;
+  const platformWithDetectOverflow = platform.detectOverflow ? platform : {
+    ...platform,
+    detectOverflow
+  };
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
+  let rects = await platform.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let resetCount = 0;
+  const middlewareData = {};
+  for (let i = 0; i < middleware.length; i++) {
+    const currentMiddleware = middleware[i];
+    if (!currentMiddleware) {
+      continue;
+    }
+    const {
+      name,
+      fn
+    } = currentMiddleware;
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform: platformWithDetectOverflow,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData[name] = {
+      ...middlewareData[name],
+      ...data
+    };
+    if (reset && resetCount < MAX_RESET_COUNT) {
+      resetCount++;
+      if (typeof reset === 'object') {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+    }
+  }
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+
+function getPlacementList(alignment, autoAlignment, allowedPlacements) {
+  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
+  return allowedPlacementsSortedByAlignment.filter(placement => {
+    if (alignment) {
+      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
+    }
+    return true;
+  });
+}
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+const autoPlacement$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'autoPlacement',
+    options,
+    async fn(state) {
+      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
+      const {
+        rects,
+        middlewareData,
+        placement,
+        platform,
+        elements
+      } = state;
+      const {
+        crossAxis = false,
+        alignment,
+        allowedPlacements = placements,
+        autoAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
+      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
+      const currentPlacement = placements$1[currentIndex];
+      if (currentPlacement == null) {
+        return {};
+      }
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+
+      // Make `computeCoords` start from the right place.
+      if (placement !== currentPlacement) {
+        return {
+          reset: {
+            placement: placements$1[0]
+          }
+        };
+      }
+      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
+      const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
+        placement: currentPlacement,
+        overflows: currentOverflows
+      }];
+      const nextPlacement = placements$1[currentIndex + 1];
+
+      // There are more placements to check.
+      if (nextPlacement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: nextPlacement
+          }
+        };
+      }
+      const placementsSortedByMostSpace = allOverflows.map(d => {
+        const alignment = getAlignment(d.placement);
+        return [d.placement, alignment && crossAxis ?
+        // Check along the mainAxis and main crossAxis side.
+        d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
+        // Check only the mainAxis.
+        d.overflows[0], d.overflows];
+      }).sort((a, b) => a[1] - b[1]);
+      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
+      // Aligned placements should not check their opposite crossAxis
+      // side.
+      getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
+      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
+      if (resetPlacement !== placement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: resetPlacement
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'flip',
+    options,
+    async fn(state) {
+      var _middlewareData$arrow, _middlewareData$flip;
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform,
+        elements
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = 'bestFit',
+        fallbackAxisSideDirection = 'none',
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+
+      // If a reset by the arrow was caused due to an alignment offset being
+      // added, we should skip any logic now since `flip()` has already done its
+      // work.
+      // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+      const placements = [initialPlacement, ...fallbackPlacements];
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+      if (checkCrossAxis) {
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
+      }
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }];
+
+      // One or more sides is overflowing.
+      if (!overflows.every(side => side <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements[nextIndex];
+        if (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 => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
+            // 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,
+        // then find the placement that fits the best on the main crossAxis side.
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+
+        // Otherwise fallback.
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case 'bestFit':
+              {
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+                if (placement) {
+                  resetPlacement = placement;
+                }
+                break;
+              }
+            case 'initialPlacement':
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+      return {};
+    }
+  };
+};
+
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
+  };
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset$1 = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: 'offset',
+    options,
+    async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: {
+          ...diffCoords,
+          placement
+        }
+      };
+    }
+  };
+};
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'shift',
+    options,
+    async fn(state) {
+      const {
+        x,
+        y,
+        placement,
+        platform
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: _ref => {
+            let {
+              x,
+              y
+            } = _ref;
+            return {
+              x,
+              y
+            };
+          }
+        },
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      if (checkMainAxis) {
+        const minSide = mainAxis === 'y' ? 'top' : 'left';
+        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
+        const min = mainAxisCoord + overflow[minSide];
+        const max = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = clamp(min, mainAxisCoord, max);
+      }
+      if (checkCrossAxis) {
+        const minSide = crossAxis === 'y' ? 'top' : 'left';
+        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
+        const min = crossAxisCoord + overflow[minSide];
+        const max = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = clamp(min, crossAxisCoord, max);
+      }
+      const limitedCoords = limiter.fn({
+        ...state,
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      });
+      return {
+        ...limitedCoords,
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y,
+          enabled: {
+            [mainAxis]: checkMainAxis,
+            [crossAxis]: checkCrossAxis
+          }
+        }
+      };
+    }
+  };
+};
+
+function hasWindow() {
+  return typeof window !== 'undefined';
+}
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
+}
+function isTableElement(element) {
+  return /^(table|td|th)$/.test(getNodeName(element));
+}
+function isTopLayer(element) {
+  try {
+    if (element.matches(':popover-open')) {
+      return true;
+    }
+  } catch (_e) {
+    // no-op
+  }
+  try {
+    return element.matches(':modal');
+  } catch (_e) {
+    return false;
+  }
+}
+const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+const containRe = /paint|layout|strict|content/;
+const isNotNone = value => !!value && value !== 'none';
+let isWebKitValue;
+function isContainingBlock(elementOrCss) {
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  if (isWebKitValue == null) {
+    isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
+  }
+  return isWebKitValue;
+}
+function isLastTraversableNode(node) {
+  return /^(html|body|#document)$/.test(getNodeName(node));
+}
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  } else {
+    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+  }
+}
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+
+  // 0, NaN, or Infinity should always fallback to 1.
+
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+
+const noOffsets = /*#__PURE__*/createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+  return isFixed;
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentWin = win;
+    let currentIFrame = getFrameElement(currentWin);
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle$1(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = getFrameElement(currentWin);
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+
+// If <html> has a CSS width greater than the viewport, then this will be
+// incorrect for RTL.
+function getWindowScrollBarX(element, rect) {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+  return rect.left + leftScroll;
+}
+
+function getHTMLOffset(documentElement, scroll) {
+  const htmlRect = documentElement.getBoundingClientRect();
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
+  const y = htmlRect.top + scroll.scrollTop;
+  return {
+    x,
+    y
+  };
+}
+
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isFixed = strategy === 'fixed';
+  const documentElement = getDocumentElement(offsetParent);
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
+  };
+}
+
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+
+// Gets the entire size of the scrollable document area, even extending outside
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
+function getDocumentRect(element) {
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+  if (getComputedStyle$1(body).direction === 'rtl') {
+    x += max(html.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// Returns the inner client rect, subtracting scrollbars if present.
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === 'viewport') {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === 'document') {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y,
+      width: clippingAncestor.width,
+      height: clippingAncestor.height
+    };
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
+
+// A "clipping ancestor" is an `overflow` element with the characteristic of
+// clipping (or hiding) child elements. This returns all clipping ancestors
+// of the given element up the tree.
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle$1(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+
+// Gets the maximum area that the element is visible in due to any number of
+// clipping ancestors.
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+  let top = firstRect.top;
+  let right = firstRect.right;
+  let bottom = firstRect.bottom;
+  let left = firstRect.left;
+  for (let i = 1; i < clippingAncestors.length; i++) {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
+    top = max(rect.top, top);
+    right = min(rect.right, right);
+    bottom = min(rect.bottom, bottom);
+    left = max(rect.left, left);
+  }
+  return {
+    width: right - left,
+    height: bottom - top,
+    x: left,
+    y: top
+  };
+}
+
+function getDimensions(element) {
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
+}
+
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    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);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (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;
+  return {
+    x,
+    y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function isStaticPositioned(element) {
+  return getComputedStyle$1(element).position === 'static';
+}
+
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  let rawOffsetParent = element.offsetParent;
+
+  // Firefox returns the <html> element as the offsetParent if it's non-static,
+  // while Chrome and Safari return the <body> element. The <body> element must
+  // be used to perform the correct calculations even if the <html> element is
+  // non-static.
+  if (getDocumentElement(element) === rawOffsetParent) {
+    rawOffsetParent = rawOffsetParent.ownerDocument.body;
+  }
+  return rawOffsetParent;
+}
+
+// Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+function getOffsetParent(element, polyfill) {
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
+  }
+  return offsetParent || getContainingBlock(element) || win;
+}
+
+const getElementRects = async function (data) {
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
+  return {
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
+    }
+  };
+};
+
+function isRTL(element) {
+  return getComputedStyle$1(element).direction === 'rtl';
+}
+
+const platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    var _io;
+    clearTimeout(timeoutId);
+    (_io = io) == null || _io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = elementRectForRootMargin;
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1000);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
+      isFirstUpdate = false;
+    }
+
+    // Older browsers don't support a `document` as the root and will throw an
+    // error.
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (_e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    if (floating) {
+      resizeObserver.observe(floating);
+    }
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    var _resizeObserver2;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = offset$1;
+
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+const autoPlacement = autoPlacement$1;
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = shift$1;
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = flip$1;
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ */
+const computePosition = (reference, floating, options) => {
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
+};
+
+/* eslint-disable line-comment-position, no-inline-comments */
+
+
+const MAX_CONFIGURATION_COUNT = 10;
+
+class AuroFloatingUI {
+  /**
+   * @private
+   */
+  static isMousePressed = false;
+
+  /**
+   * @private
+   */
+  static isMousePressHandlerInitialized = false;
+
+  /**
+   * @private
+   */
+  static setupMousePressChecker() {
+    if (
+      !AuroFloatingUI.isMousePressHandlerInitialized &&
+      window &&
+      window.addEventListener
+    ) {
+      AuroFloatingUI.isMousePressHandlerInitialized = true;
+
+      // Track timeout for isMousePressed reset to avoid race conditions
+      if (!AuroFloatingUI._mousePressedTimeout) {
+        AuroFloatingUI._mousePressedTimeout = null;
+      }
+      const mouseEventGlobalHandler = (event) => {
+        const isPressed = event.type === "mousedown";
+        if (isPressed) {
+          // Clear any pending timeout to prevent race condition
+          if (AuroFloatingUI._mousePressedTimeout !== null) {
+            clearTimeout(AuroFloatingUI._mousePressedTimeout);
+            AuroFloatingUI._mousePressedTimeout = null;
+          }
+          if (!AuroFloatingUI.isMousePressed) {
+            AuroFloatingUI.isMousePressed = true;
+          }
+        } else if (AuroFloatingUI.isMousePressed && !isPressed) {
+          // Schedule reset and track timeout ID
+          AuroFloatingUI._mousePressedTimeout = setTimeout(() => {
+            AuroFloatingUI.isMousePressed = false;
+            AuroFloatingUI._mousePressedTimeout = null;
+          }, 0);
+        }
+      };
+
+      window.addEventListener("mousedown", mouseEventGlobalHandler);
+      window.addEventListener("mouseup", mouseEventGlobalHandler);
+    }
+  }
+
+  constructor(element, behavior) {
+    this.element = element;
+    this.behavior = behavior;
+
+    // Store event listener references for cleanup
+    this.focusHandler = null;
+    this.clickHandler = null;
+    this.keyDownHandler = null;
+
+    /**
+     * @private
+     */
+    this.enableKeyboardHandling = true;
+
+    /**
+     * @private
+     */
+    this.configureTrial = 0;
+
+    /**
+     * @private
+     */
+    this.eventPrefix = undefined;
+
+    /**
+     * @private
+     */
+    this.id = undefined;
+
+    /**
+     * @private
+     */
+    this.showing = false;
+
+    /**
+     * @private
+     */
+    this.strategy = undefined;
+  }
+
+  /**
+   * Mirrors the size of the bibSizer element to the bib content.
+   * Copies the width, height, max-width, and max-height styles from the bibSizer element to the bib content container.
+   * This ensures that the bib content has the same dimensions as the sizer element.
+   */
+  mirrorSize() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    // mirror the boxsize from bibSizer
+    if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
+      const sizerStyle = window.getComputedStyle(element.bibSizer);
+      const bibContent = element.bib.shadowRoot.querySelector(".container");
+      if (!bibContent) {
+        return;
+      }
+
+      if (sizerStyle.width !== "0px") {
+        bibContent.style.width = sizerStyle.width;
+      }
+      if (sizerStyle.height !== "0px") {
+        bibContent.style.height = sizerStyle.height;
+      }
+      bibContent.style.maxWidth = sizerStyle.maxWidth;
+      bibContent.style.maxHeight = sizerStyle.maxHeight;
+    }
+  }
+
+  /**
+   * @private
+   * Determines the positioning strategy based on the current viewport size and mobile breakpoint.
+   *
+   * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint
+   * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'.
+   *
+   * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
+   */
+  getPositioningStrategy() {
+    const element = this.element;
+    if (!element) {
+      return "floating";
+    }
+
+    const breakpoint =
+      element.bib?.mobileFullscreenBreakpoint ||
+      element.floaterConfig?.fullscreenBreakpoint;
+    switch (this.behavior) {
+      case "tooltip":
+        return "floating";
+      case "dialog":
+      case "drawer":
+        if (breakpoint) {
+          const smallerThanBreakpoint = window.matchMedia(
+            `(max-width: ${breakpoint})`,
+          ).matches;
+
+          element.expanded = smallerThanBreakpoint;
+        }
+        if (element.nested) {
+          return "cover";
+        }
+        return "fullscreen";
+      case "dropdown":
+      case undefined:
+      case null:
+        if (breakpoint) {
+          const smallerThanBreakpoint = window.matchMedia(
+            `(max-width: ${breakpoint})`,
+          ).matches;
+          if (smallerThanBreakpoint) {
+            return "fullscreen";
+          }
+        }
+        return "floating";
+      default:
+        return this.behavior;
+    }
+  }
+
+  /**
+   * @private
+   * Positions the bib element based on the current configuration and positioning strategy.
+   *
+   * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly.
+   * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element,
+   * and applies the calculated position to the bib's style.
+   */
+  position() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    const strategy = this.getPositioningStrategy();
+    this.configureBibStrategy(strategy);
+
+    if (strategy === "floating") {
+      if (!element.trigger || !element.bib) {
+        return;
+      }
+
+      this.mirrorSize();
+      // Define the middlware for the floater configuration
+      const middleware = [
+        offset(element.floaterConfig?.offset || 0),
+        ...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
+        ...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
+        ...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
+      ];
+
+      // Compute the position of the bib
+      computePosition(element.trigger, element.bib, {
+        strategy: element.floaterConfig?.strategy || "fixed",
+        placement: element.floaterConfig?.placement,
+        middleware: middleware || [],
+      }).then(({ x, y }) => {
+        // eslint-disable-line id-length
+        const currentElement = this.element;
+        if (!currentElement?.bib) {
+          return;
+        }
+
+        Object.assign(currentElement.bib.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    } else if (strategy === "cover") {
+      if (!element.parentNode || !element.bib) {
+        return;
+      }
+
+      // Compute the position of the bib
+      computePosition(element.parentNode, element.bib, {
+        placement: "bottom-start",
+      }).then(({ x, y }) => {
+        // eslint-disable-line id-length
+        const currentElement = this.element;
+        if (!currentElement?.bib || !currentElement.parentNode) {
+          return;
+        }
+
+        Object.assign(currentElement.bib.style, {
+          left: `${x}px`,
+          top: `${y - currentElement.parentNode.offsetHeight}px`,
+          width: `${currentElement.parentNode.offsetWidth}px`,
+          height: `${currentElement.parentNode.offsetHeight}px`,
+        });
+      });
+    }
+  }
+
+  /**
+   * @private
+   * Controls whether to lock the scrolling for the document's body.
+   * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
+   */
+  lockScroll(lock = true) {
+    const element = this.element;
+
+    if (lock) {
+      if (!element?.bib) {
+        return;
+      }
+
+      document.body.style.overflow = "hidden"; // hide body's scrollbar
+
+      // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
+      element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
+    } else {
+      document.body.style.overflow = "";
+    }
+  }
+
+  /**
+   * @private
+   * Configures the bib element's display strategy.
+   *
+   * Sets the bib to fullscreen or floating mode based on the provided strategy.
+   * Dispatches a 'strategy-change' event if the strategy changes.
+   *
+   * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
+   */
+  configureBibStrategy(value) {
+    const element = this.element;
+    if (!element?.bib) {
+      return;
+    }
+
+    if (value === "fullscreen") {
+      element.isBibFullscreen = true;
+      // reset the prev position
+      element.bib.setAttribute("isfullscreen", "");
+      element.bib.style.position = "fixed";
+      element.bib.style.top = "0px";
+      element.bib.style.left = "0px";
+      element.bib.style.width = "";
+      element.bib.style.height = "";
+      element.style.contain = "";
+
+      // reset the size that was mirroring `size` css-part
+      const bibContent = element.bib.shadowRoot?.querySelector(".container");
+      if (bibContent) {
+        bibContent.style.width = "";
+        bibContent.style.height = "";
+        bibContent.style.maxWidth = "";
+        bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
+        this.configureTrial = 0;
+      } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
+        this.configureTrial += 1;
+
+        setTimeout(() => {
+          this.configureBibStrategy(value);
+        }, 0);
+      }
+
+      if (element.isPopoverVisible) {
+        this.lockScroll(true);
+      }
+    } else {
+      element.bib.style.position = "";
+      element.bib.removeAttribute("isfullscreen");
+      element.isBibFullscreen = false;
+      element.style.contain = "layout";
+    }
+
+    const isChanged = this.strategy && this.strategy !== value;
+    this.strategy = value;
+    if (isChanged) {
+      const event = new CustomEvent(
+        this.eventPrefix
+          ? `${this.eventPrefix}-strategy-change`
+          : "strategy-change",
+        {
+          detail: {
+            value,
+          },
+          composed: true,
+        },
+      );
+
+      element.dispatchEvent(event);
+    }
+  }
+
+  updateState() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    const isVisible = element.isPopoverVisible;
+    if (!isVisible) {
+      this.cleanupHideHandlers();
+      try {
+        element.cleanup?.();
+      } catch (error) {
+        // Do nothing
+      }
+    }
+  }
+
+  /**
+   * @private
+   * getting called on 'blur' in trigger or `focusin` in document
+   *
+   * Hides the bib if focus moves outside of the trigger or bib, unless a 'noHideOnThisFocusLoss' flag is set.
+   * This method checks if the currently active element is still within the trigger or bib.
+   * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
+   */
+  handleFocusLoss() {
+    const element = this.element;
+    if (!element?.bib) {
+      return;
+    }
+
+    // if mouse is being pressed, skip and let click event to handle the action
+    if (AuroFloatingUI.isMousePressed) {
+      return;
+    }
+
+    if (
+      element.noHideOnThisFocusLoss ||
+      element.hasAttribute("noHideOnThisFocusLoss")
+    ) {
+      return;
+    }
+
+    // if focus is still inside of trigger or bib, do not close
+    if (element.matches(":focus") || element.matches(":focus-within")) {
+      return;
+    }
+
+    // if fullscreen bib is in fullscreen mode, do not close
+    if (element.bib.hasAttribute("isfullscreen")) {
+      return;
+    }
+
+    this.hideBib("keydown");
+  }
+
+  setupHideHandlers() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    // Define handlers & store references
+    this.focusHandler = () => this.handleFocusLoss();
+
+    this.clickHandler = (evt) => {
+      const element = this.element;
+      if (!element?.bib) {
+        return;
+      }
+
+      // When the bib is fullscreen (modal dialog), don't close on outside
+      // clicks. VoiceOver's synthetic click events inside a top-layer modal
+      // <dialog> may not include the bib in composedPath(), causing false
+      // positives. This mirrors the fullscreen guard in handleFocusLoss().
+      if (element.bib.hasAttribute("isfullscreen")) {
+        return;
+      }
+
+      if (
+        (!evt.composedPath().includes(element.trigger) &&
+          !evt.composedPath().includes(element.bib)) ||
+        (element.bib.backdrop &&
+          evt.composedPath().includes(element.bib.backdrop))
+      ) {
+        const existedVisibleFloatingUI =
+          document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
+
+        if (
+          existedVisibleFloatingUI &&
+          existedVisibleFloatingUI.element.isPopoverVisible
+        ) {
+          // if something else is open, close that
+          existedVisibleFloatingUI.hideBib();
+          document.expandedAuroFormkitDropdown = null;
+          document.expandedAuroFloater = this;
+        } else {
+          this.hideBib("click");
+        }
+      }
+    };
+
+    // ESC key handler
+    this.keyDownHandler = (evt) => {
+      const element = this.element;
+      if (!element) {
+        return;
+      }
+
+      if (evt.key === "Escape" && element.isPopoverVisible) {
+        const existedVisibleFloatingUI =
+          document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
+        if (
+          existedVisibleFloatingUI &&
+          existedVisibleFloatingUI !== this &&
+          existedVisibleFloatingUI.element.isPopoverVisible
+        ) {
+          // if something else is open, let it handle itself
+          return;
+        }
+        this.hideBib("keydown");
+      }
+    };
+
+    if (this.behavior !== "drawer" && this.behavior !== "dialog") {
+      // Add event listeners using the stored references
+      document.addEventListener("focusin", this.focusHandler);
+    }
+
+    if (this.enableKeyboardHandling) {
+      document.addEventListener("keydown", this.keyDownHandler);
+    }
+
+    // send this task to the end of queue to prevent conflicting
+    // it conflicts if showBib gets call from a button that's not this.element.trigger
+    setTimeout(() => {
+      window.addEventListener("click", this.clickHandler);
+    }, 0);
+  }
+
+  cleanupHideHandlers() {
+    // Remove event listeners if they exist
+
+    if (this.focusHandler) {
+      document.removeEventListener("focusin", this.focusHandler);
+      this.focusHandler = null;
+    }
+
+    if (this.clickHandler) {
+      window.removeEventListener("click", this.clickHandler);
+      this.clickHandler = null;
+    }
+
+    if (this.keyDownHandler) {
+      document.removeEventListener("keydown", this.keyDownHandler);
+      this.keyDownHandler = null;
+    }
+  }
+
+  handleUpdate(changedProperties) {
+    if (changedProperties.has("isPopoverVisible")) {
+      this.updateState();
+    }
+  }
+
+  updateCurrentExpandedDropdown() {
+    if (!this.element) {
+      return;
+    }
+
+    // Close any other dropdown that is already open
+    const existedVisibleFloatingUI =
+      document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
+    if (
+      existedVisibleFloatingUI &&
+      existedVisibleFloatingUI !== this &&
+      existedVisibleFloatingUI.element.isPopoverVisible &&
+      existedVisibleFloatingUI.eventPrefix === this.eventPrefix
+    ) {
+      existedVisibleFloatingUI.hideBib();
+    }
+
+    document.expandedAuroFloater = this;
+  }
+
+  showBib() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    if (!element.bib || (!element.trigger && !element.parentNode)) {
+      return;
+    }
+
+    if (!element.disabled && !this.showing) {
+      this.updateCurrentExpandedDropdown();
+      element.triggerChevron?.setAttribute("data-expanded", true);
+
+      // prevent double showing: isPopovervisible gets first and showBib gets called later
+      if (!this.showing) {
+        if (!element.modal) {
+          this.setupHideHandlers();
+        }
+        this.showing = true;
+        element.isPopoverVisible = true;
+        this.position();
+        this.dispatchEventDropdownToggle();
+      }
+
+      // Setup auto update to handle resize and scroll
+      element.cleanup = autoUpdate(
+        element.trigger || element.parentNode,
+        element.bib,
+        () => {
+          this.position();
+        },
+      );
+    }
+  }
+
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    if (element.disabled) {
+      return;
+    }
+
+    // noToggle dropdowns should not close when the trigger is clicked (the
+    // "toggle" behavior), but they CAN still close via other interactions like
+    // Escape key or focus loss.
+    if (element.noToggle && eventType === "click") {
+      return;
+    }
+
+    this.lockScroll(false);
+    element.triggerChevron?.removeAttribute("data-expanded");
+
+    if (element.isPopoverVisible) {
+      element.isPopoverVisible = false;
+    }
+    if (this.showing) {
+      this.cleanupHideHandlers();
+      this.showing = false;
+      this.dispatchEventDropdownToggle(eventType);
+    }
+
+    // Only clear the global reference if the bib was actually hidden.
+    // Clearing it when hideBib is blocked (e.g. noToggle + click) corrupts
+    // the singleton state so other dropdowns can't detect this one is still open.
+    document.expandedAuroFloater = null;
+  }
+
+  /**
+   * @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(eventType) {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    const event = new CustomEvent(
+      this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
+      {
+        detail: {
+          expanded: this.showing,
+          eventType: eventType || "unknown",
+        },
+        composed: true,
+      },
+    );
+
+    element.dispatchEvent(event);
+  }
+
+  handleClick() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    if (element.isPopoverVisible) {
+      this.hideBib("click");
+    } else {
+      this.showBib();
+    }
+
+    const event = new CustomEvent(
+      this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick",
+      {
+        composed: true,
+        detail: {
+          expanded: element.isPopoverVisible,
+        },
+      },
+    );
+
+    element.dispatchEvent(event);
+  }
+
+  handleEvent(event) {
+    const element = this.element;
+    if (!element || element.disableEventShow) {
+      return;
+    }
+
+    switch (event.type) {
+      case "keydown": {
+        // Support both Enter and Space keys for accessibility
+        // Space is included as it's expected behavior for interactive elements
+
+        const origin = event.composedPath()[0];
+        if (
+          event.key === "Enter" ||
+          (event.key === " " && (!origin || origin.tagName !== "INPUT"))
+        ) {
+          event.preventDefault();
+          this.handleClick();
+        }
+        break;
+      }
+      case "mouseenter":
+        if (element.hoverToggle) {
+          this.showBib();
+        }
+        break;
+      case "mouseleave":
+        if (element.hoverToggle) {
+          this.hideBib("mouseleave");
+        }
+        break;
+      case "focus":
+        if (element.focusShow) {
+          /*
+            This needs to better handle clicking that gives focus -
+            currently it shows and then immediately hides the bib
+          */
+          this.showBib();
+        }
+        break;
+      case "blur":
+        // send this task 100ms later queue to
+        // wait a frame in case focus moves within the floating element/bib
+        setTimeout(() => this.handleFocusLoss(), 0);
+        break;
+      case "click":
+        if (document.activeElement === document.body) {
+          event.currentTarget.focus();
+        }
+        this.handleClick();
+        break;
+      // Do nothing
+    }
+  }
+
+  /**
+   * Manages the tabIndex of the trigger element based on its focusability.
+   *
+   * If the trigger element or any of its children are inherently focusable, the tabIndex of the component is set to -1.
+   * This prevents the component itself from being focusable when the trigger element already handles focus.
+   */
+  handleTriggerTabIndex() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    const focusableElementSelectors = [
+      "a",
+      "button",
+      'input:not([type="hidden"])',
+      "select",
+      "textarea",
+      '[tabindex]:not([tabindex="-1"])',
+      "auro-button",
+      "auro-input",
+      "auro-hyperlink",
+    ];
+
+    const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
+    if (!triggerNode) {
+      return;
+    }
+    const triggerNodeTagName = triggerNode.tagName.toLowerCase();
+
+    focusableElementSelectors.forEach((selector) => {
+      // Check if the trigger node element is focusable
+      if (triggerNodeTagName === selector) {
+        element.tabIndex = -1;
+        return;
+      }
+
+      // Check if any child is focusable
+      if (triggerNode.querySelector(selector)) {
+        element.tabIndex = -1;
+      }
+    });
+  }
+
+  /**
+   *
+   * @param {*} eventPrefix
+   */
+  regenerateBibId() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    this.id = element.getAttribute("id");
+    if (!this.id) {
+      this.id = window.crypto.randomUUID();
+      element.setAttribute("id", this.id);
+    }
+
+    element.bib?.setAttribute("id", `${this.id}-floater-bib`);
+  }
+
+  configure(elem, eventPrefix, enableKeyboardHandling = true) {
+    AuroFloatingUI.setupMousePressChecker();
+    this.enableKeyboardHandling = enableKeyboardHandling;
+
+    this.eventPrefix = eventPrefix;
+    if (this.element !== elem) {
+      this.element = elem;
+    }
+
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    if (this.behavior !== element.behavior) {
+      this.behavior = element.behavior;
+    }
+
+    if (element.trigger) {
+      this.disconnect();
+    }
+    element.trigger =
+      element.triggerElement ||
+      element.shadowRoot?.querySelector("#trigger") ||
+      element.trigger;
+    element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
+    element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
+    element.triggerChevron =
+      element.shadowRoot?.querySelector("#showStateIcon");
+
+    if (element.floaterConfig) {
+      element.hoverToggle = element.floaterConfig.hoverToggle;
+    }
+
+    this.regenerateBibId();
+    this.handleTriggerTabIndex();
+
+    this.handleEvent = this.handleEvent.bind(this);
+    if (element.trigger) {
+      if (this.enableKeyboardHandling) {
+        element.trigger.addEventListener("keydown", this.handleEvent);
+      }
+      element.trigger.addEventListener("click", this.handleEvent);
+      element.trigger.addEventListener("mouseenter", this.handleEvent);
+      element.trigger.addEventListener("mouseleave", this.handleEvent);
+      element.trigger.addEventListener("focus", this.handleEvent);
+      element.trigger.addEventListener("blur", this.handleEvent);
+    }
+  }
+
+  disconnect() {
+    this.cleanupHideHandlers();
+
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    element.cleanup?.();
+
+    if (element.bib && element.shadowRoot) {
+      element.shadowRoot.append(element.bib);
+    }
+
+    // Remove event & keyboard listeners
+    if (element.trigger) {
+      element.trigger.removeEventListener("keydown", this.handleEvent);
+      element.trigger.removeEventListener("click", this.handleEvent);
+      element.trigger.removeEventListener("mouseenter", this.handleEvent);
+      element.trigger.removeEventListener("mouseleave", this.handleEvent);
+      element.trigger.removeEventListener("focus", this.handleEvent);
+      element.trigger.removeEventListener("blur", this.handleEvent);
+    }
+  }
+}
+
+// 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 menu is not focusable by default, it uses a different interaction model
+  "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;
+}
+
+/**
+ * Safely get a numeric tabindex for an element.
+ * Returns a number if the tabindex is a valid integer, otherwise null.
+ *
+ * @param {HTMLElement} element The element whose tabindex to read.
+ * @returns {?number} The numeric tabindex or null if missing/invalid.
+ */
+function getNumericTabIndex(element) {
+  const raw = element.getAttribute("tabindex");
+  if (raw == null) return null;
+
+  const value = Number.parseInt(raw, 10);
+  return Number.isNaN(value) ? null : value;
+}
+
+/**
+ * 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.
+ * Also sorts elements with tabindex first, preserving their order.
+ *
+ * @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);
+    }
+  }
+
+  // Move tab-indexed elements to the front while preserving their order
+  // This ensures that elements with tabindex are prioritized in the focus order
+
+  // First extract elements with valid positive tabindex
+  const elementsWithTabindex = uniqueElements.filter((el) => {
+    const tabindex = getNumericTabIndex(el);
+    return tabindex !== null && tabindex > 0;
+  });
+
+  // Sort these elements by their tabindex value
+  elementsWithTabindex.sort((a, b) => {
+    const aIndex = getNumericTabIndex(a) ?? 0;
+    const bIndex = getNumericTabIndex(b) ?? 0;
+    return aIndex - bIndex;
+  });
+
+  // Elements without tabindex (preserving their original order)
+  const elementsWithoutTabindex = uniqueElements.filter((el) => {
+    const tabindex = getNumericTabIndex(el);
+
+    // Elements without tabindex or with tabindex of 0 stay in DOM order
+    return tabindex === null || tabindex === 0;
+  });
+
+  // Combine both arrays with tabindex elements first
+  const tabIndexedUniqueElements = [
+    ...elementsWithTabindex,
+    ...elementsWithoutTabindex,
+  ];
+
+  return tabIndexedUniqueElements;
+}
+
+/**
+ * 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.
+   * @param {boolean} [controlTabOrder=false] If true enables manual control of the tab order by the FocusTrap.
+   * @throws {Error} If the provided container is not a valid HTMLElement.
+   */
+  constructor(container, controlTabOrder = false) {
+    if (!container || !(container instanceof HTMLElement)) {
+      throw new Error("FocusTrap requires a valid HTMLElement.");
+    }
+
+    this.container = container;
+    this.tabDirection = "forward"; // or 'backward';
+    this.controlTabOrder = controlTabOrder;
+
+    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);
+  }
+
+  /**
+   * Gets an array of currently active (focused) elements in the document and shadow DOM.
+   * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+   * @private
+   */
+  _getActiveElements() {
+    // 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;
+    const actives = [activeElement];
+    while (activeElement?.shadowRoot?.activeElement) {
+      actives.push(activeElement.shadowRoot.activeElement);
+      activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return actives;
+  }
+
+  /**
+   * Gets the next focus index based on the current index and focusable elements.
+   * @param {number} currentIndex The current index of the focused element.
+   * @param {Array<HTMLElement>} focusables The array of focusable elements.
+   * @returns {number|null} The next focus index or null if not determined.
+   */
+  _getNextFocusIndex(currentIndex, focusables, actives) {
+    if (this.controlTabOrder) {
+      // Calculate the new index based on the current index and tab direction
+      let newFocusIndex =
+        currentIndex + (this.tabDirection === "forward" ? 1 : -1);
+
+      // Wrap-around logic
+      if (newFocusIndex < 0) newFocusIndex = focusables.length - 1;
+      if (newFocusIndex >= focusables.length) newFocusIndex = 0;
+
+      // Early return with the new index
+      return newFocusIndex;
+    }
+
+    // Determine if we need to wrap
+    const atFirst =
+      actives.includes(focusables[0]) || actives.includes(this.container);
+    const atLast = actives.includes(focusables[focusables.length - 1]);
+
+    // Only wrap if at the ends
+    if (this.tabDirection === "backward" && atFirst) {
+      return focusables.length - 1;
+    }
+
+    if (this.tabDirection === "forward" && atLast) {
+      return 0;
+    }
+
+    // No wrap, so don't change focus, return early
+    return null;
+  }
+
+  /**
+   * Handles the Tab key press event to manage focus within the container.
+   * @param {KeyboardEvent} e The keyboard event triggered by the user.
+   * @returns {void}
+   */
+  _handleTabKey(e) {
+    // Update the focusable elements
+    const focusables = this._getFocusableElements();
+
+    // If there are no focusable elements, exit
+    if (!focusables.length) return;
+
+    // Set the tab direction based on the key pressed
+    this.tabDirection = e.shiftKey ? "backward" : "forward";
+
+    // Get the active elements that are currently focused
+    const actives = this._getActiveElements();
+
+    // If we're at either end of the focusable elements, wrap around to the other end
+    let focusIndex = focusables.findIndex((el) => actives.includes(el));
+
+    // Fallback if we have no focused element
+    if (focusIndex === -1) focusIndex = 0;
+
+    // Get the next focus index based on the current focus index, tab direction, and controlTabOrder setting
+    // Is null if no new focus index is determined
+    const newFocusIndex = this._getNextFocusIndex(
+      focusIndex,
+      focusables,
+      actives,
+    );
+
+    // If we have a new focus index, set focus to that element
+    if (newFocusIndex !== null) {
+      e.preventDefault();
+      focusables[newFocusIndex].focus();
+    }
+  }
+
+  /**
+   * Catches the keydown event
+   * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
+   * @private
+   */
+  _onKeydown = (e) => {
+    // Handle tab
+    if (e.key === "Tab") this._handleTabKey(e);
+  };
+
+  /**
+   * 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);
+
+    // Return the elements found
+    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.
+
+
+class AuroDependencyVersioning {
+
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @private
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateElementName(baseName, version) {
+    let result = baseName;
+
+    result += '-';
+    result += version.replace(/[.]/g, '_');
+
+    return result;
+  }
+
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateTag(baseName, version, tagClass) {
+    const elementName = this.generateElementName(baseName, version);
+    const tag = literal`${unsafeStatic(elementName)}`;
+
+    if (!customElements.get(elementName)) {
+      customElements.define(elementName, class extends tagClass {});
+    }
+
+    return tag;
+  }
+}
+
+class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var u='<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>';class m extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
+`;class z extends m{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
+`;var y=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 x=css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
+`;class _ extends z{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...z.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z.styles,y,w,x]}static register(t="auro-icon"){p.prototype.registerComponent(t,_);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return html`
+      <div class="componentWrapper">
+        <div
+          class="${classMap({svgWrapper:true})}"
+          title="${ifDefined(this.title||void 0)}">
+          <span aria-hidden="${ifDefined(this.ariaHidden||true)}" part="svg">
+            ${this.customSvg?html`
+                <slot name="svg"></slot>
+              `:html`
+                ${this.svg}
+              `}
+          </span>
+        </div>
+
+        <div class="${classMap(t)}" part="label">
+          <slot></slot>
+        </div>
+      </div>
+    `}}
+
+var iconVersion = '9.1.2';
+
+/**
+ * Computes display state once per keydown event.
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
+ *
+ * @param {HTMLElement} component - The component with a dropdown reference.
+ * @param {Object} [options] - Optional config.
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
+ *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
+ */
+function createDisplayContext(component, options = {}) {
+  const dd = options.dropdown || component.dropdown;
+  // isPopoverVisible reflects as the `open` attribute.
+  // It reports whether the bib is open in any mode (popover or modal).
+  const isExpanded = Boolean(dd && dd.isPopoverVisible);
+  const isFullscreen = Boolean(dd && dd.isBibFullscreen);
+
+  const ctx = {
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
+  }
+
+  return ctx;
+}
+
+/**
+ * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
+ * Handles both sync and async handlers.
+ * @param {HTMLElement} component - The component to attach the listener to.
+ * @param {Object} strategy - Map of key names to handler functions.
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
+ */
+function applyKeyboardStrategy(component, strategy, options = {}) {
+  component.addEventListener('keydown', async (evt) => {
+    const handler = strategy[evt.key] || strategy.default;
+    if (typeof handler === 'function') {
+      const ctx = createDisplayContext(component, options);
+      await handler(component, evt, ctx);
+    }
+  });
+}
+
+var styleCss$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset: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}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}: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([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}: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}.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}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
+
+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(:not([ondark])),:host(:not([appearance=inverse])){--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-hover-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]),:host([appearance=inverse]){--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-hover-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)}`;
+
+/**
+ * Creates a keyboard strategy for dialog-specific key handling.
+ * All other keydown behavior is left to the browser's native bubbling path.
+ * @param {HTMLElement} bib - The dropdown bib element.
+ * @returns {Object} Keyboard handlers keyed by `event.key`.
+ */
+// eslint-disable-next-line no-unused-vars
+function createDropdownBibKeyboardStrategy(bib) {
+  return {
+    // eslint-disable-next-line no-unused-vars
+    Enter(_dialog, event) {
+      // Floating UI handles Enter key to open the dropdown
+    },
+    // eslint-disable-next-line no-unused-vars
+    Escape(_dialog, event) {
+      // Floating UI handles Escape key to close the dropdown
+    }
+  };
+}
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+/* eslint-disable max-lines */
+// ---------------------------------------------------------------------
+
+
+const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
+const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
+  'xl',
+  'lg',
+  'md',
+  'sm',
+  'xs',
+];
+
+/**
+ * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+ * @csspart bibContainer - Apply css to the bib container.
+ */
+
+class AuroDropdownBib extends LitElement {
+// not extending AuroElement because Bib needs only `shape` prop
+  constructor() {
+    super();
+
+    /**
+     * @private
+     */
+    this._mobileBreakpointName = undefined;
+
+    AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
+
+    this.shape = "rounded";
+    this.matchWidth = false;
+    this.hasActiveDescendant = false;
+  }
+
+  static get styles() {
+    return [
+      styleCss$2,
+      colorCss$2,
+      tokensCss$1
+    ];
+  }
+
+  static get properties() {
+    return {
+
+      /**
+       * If declared, will take the fullscreen when the bib is displayed.
+       */
+      isFullscreen: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, will apply all styles for the common theme.
+       */
+      common: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, will apply extra padding to bib content.
+       */
+      inset: {
+        type: Boolean,
+        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.
+       */
+      rounded: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * A reference to the associated bib template element.
+       */
+      bibTemplate: {
+        type: Object
+      },
+
+      shape: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Accessible label for the dialog element, used when displayed as a modal.
+       * Applied via aria-labelledby on a visually hidden element rather than
+       * aria-label because iOS VoiceOver does not reliably read aria-label
+       * on <dialog> elements.
+       * @private
+       */
+      dialogLabel: {
+        type: String
+      },
+
+      /**
+       * Overrides the native role of the dialog element.
+       * For example, set to `"presentation"` on desktop combobox to prevent
+       * VoiceOver from announcing "listbox inside of a dialog".
+       * When `undefined`, the dialog keeps its native role.
+       * @private
+       */
+      dialogRole: {
+        type: String
+      },
+
+      /**
+       * Tracks whether a menu option is currently highlighted.
+       * @private
+       */
+      hasActiveDescendant: {
+        type: Boolean
+      }
+    };
+  }
+
+  set mobileFullscreenBreakpoint(value) {
+    // verify the defined breakpoint is valid and exit out if not
+    // 'disabled' is a design token breakpoint so it acts as our "undefined" value
+    const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
+    // Store the breakpoint NAME only. The CSS token pixel value is read lazily
+    // in the getter so it is always resolved against the current document styles.
+    // Caching the pixel value here races against stylesheet load in WebKit —
+    // external CDN stylesheets may not yet be applied when the component upgrades,
+    // causing getPropertyValue() to return "" and fullscreen mode to never activate.
+    this._mobileBreakpointName = validatedValue;
+  }
+
+  get mobileFullscreenBreakpoint() {
+    if (!this._mobileBreakpointName) {
+      return undefined;
+    }
+    const value = getComputedStyle(document.documentElement).
+      getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + this._mobileBreakpointName).
+      trim();
+    return value || undefined;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('isFullscreen')) {
+      this.childNodes.forEach((child) => {
+        // skip any text that is not in an HTMLElement on setting `isFullscreen` attr.
+        if (child.nodeName !== '#text') {
+          if (this.isFullscreen) {
+            child.setAttribute('isFullscreen', 'true');
+          } else {
+            child.removeAttribute('isFullscreen');
+          }
+        }
+      });
+
+      if (this.bibTemplate) {
+        // If the bib template is found, set the fullscreen attribute
+        if (this.isFullscreen) {
+          this.bibTemplate.setAttribute('isFullscreen', 'true');
+        } else {
+          this.bibTemplate.removeAttribute('isFullscreen');
+        }
+      }
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
+    this.addEventListener('auro-bibtemplate-connected', (event) => {
+      const bibTemplate = event.detail.element;
+      this.bibTemplate = bibTemplate;
+
+      if (bibTemplate) {
+        // If the bib template is found, set the fullscreen attribute
+        if (this.isFullscreen) {
+          bibTemplate.setAttribute('isFullscreen', 'true');
+        } else {
+          bibTemplate.removeAttribute('isFullscreen');
+        }
+      }
+    });
+  }
+
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+
+    const dialog = this.shadowRoot.querySelector('dialog');
+    this._setupCancelHandler(dialog);
+    applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
+
+    this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    }));
+  }
+
+  /**
+   * Forwards the dialog's native `cancel` event (fired on ESC) as
+   * an `auro-bib-cancel` custom event so parent components can close.
+   * @param {HTMLDialogElement} dialog - The dialog element to attach the cancel listener to.
+   * @private
+   */
+  _setupCancelHandler(dialog) {
+    dialog.addEventListener('cancel', (event) => {
+      event.preventDefault();
+      this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
+        bubbles: true,
+        composed: true
+      }));
+    });
+  }
+
+
+  /**
+   * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
+   *
+   * The showModal() function places the dialog in the browser's **top layer**,
+   * which is a separate rendering layer above the normal DOM. On mobile, the
+   * compositor processes visual-viewport panning before top-layer touch
+   * handling. This means the entire viewport — including the top-layer dialog
+   * — can be panned by a touch gesture, causing the page behind the dialog to
+   * scroll into view. To prevent this, we add a touchmove listener that cancels
+   * the event if the touch started outside the dialog or any scrollable child within it.
+   *
+   * @private
+   */
+  _lockTouchScroll() {
+    const dialog = this.shadowRoot.querySelector('dialog');
+
+    this._touchMoveHandler = (event) => {
+      // Walk the composed path (which crosses shadow DOM boundaries) to
+      // check whether the touch started inside a scrollable element that
+      // lives within the dialog.  If so, allow the scroll.
+      for (const el of event.composedPath()) {
+        if (el === dialog) {
+          // Reached the dialog boundary without finding a scrollable child.
+          break;
+        }
+        if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
+          const { overflowY } = getComputedStyle(el);
+          if (overflowY === 'auto' || overflowY === 'scroll') {
+            return;
+          }
+        }
+      }
+
+      event.preventDefault();
+    };
+
+    document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
+  }
+
+  /**
+   * Removes the touchmove listener added by _lockTouchScroll().
+   * @private
+   */
+  _unlockTouchScroll() {
+    if (this._touchMoveHandler) {
+      document.removeEventListener('touchmove', this._touchMoveHandler);
+      this._touchMoveHandler = undefined;
+    }
+  }
+
+  open(modal = true) {
+    const dialog = this.shadowRoot.querySelector('dialog');
+
+    if (dialog && !dialog.open) {
+      if (modal) {
+        // Prevent showModal() from scrolling the page to bring the dialog
+        // into view. Locking overflow on <html> blocks the viewport scroll
+        // that browsers perform natively; we release it immediately after
+        // so it doesn't interfere with the modal's focus management.
+        const { documentElement } = document;
+        const prevOverflow = documentElement.style.overflow;
+        documentElement.style.overflow = 'hidden';
+
+        try {
+          dialog.showModal();
+        } finally {
+          // Restore overflow immediately — the lock was only needed to
+          // suppress the browser's native scroll-into-view behavior
+          // triggered by showModal(). Keeping it locked would block
+          // scrolling inside the modal.
+          documentElement.style.overflow = prevOverflow;
+        }
+
+        this._lockTouchScroll();
+
+      } else {
+        // Open the inner dialog so slotted content renders.
+        dialog.setAttribute('open', '');
+
+        // Use popover on the host for top-layer placement without focus
+        // management or inertness. This escapes ancestor container-type
+        // containment that would trap position:fixed relative to the container.
+        // Set popover dynamically to avoid UA [popover]:not(:popover-open) { display: none }
+        // interfering with Floating UI measurement before showPopover().
+        this.setAttribute('popover', 'manual');
+        this.showPopover();
+      }
+    }
+  }
+
+  /**
+   * Closes the dialog.
+   */
+  close() {
+    this.hasActiveDescendant = false;
+
+    const dialog = this.shadowRoot.querySelector('dialog');
+
+    if (dialog && dialog.open) {
+      this._unlockTouchScroll();
+      dialog.close();
+    }
+    // Clean up the popover used for desktop top-layer placement.
+    // Remove the attribute entirely so the UA rule
+    // [popover]:not(:popover-open) { display: none } doesn't hide
+    // the host while Floating UI measures it for the next open.
+    if (this.matches(':popover-open')) {
+      this.hidePopover();
+      this.removeAttribute('popover');
+    }
+  }
+
+  // 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`
+      <dialog class="${classMap(classes)}" part="bibContainer" role="${ifDefined(this.dialogRole)}" aria-labelledby="${ifDefined(this.dialogLabel ? 'dialogLabel' : undefined)}">
+        ${this.dialogLabel ? html$1`<span id="dialogLabel" class="util_displayHiddenVisually">${this.dialogLabel}</span>` : ''}
+        <slot></slot>
+        <span id="srAnnouncement" class="util_displayHiddenVisually" aria-live="polite" role="status"></span>
+      </dialog>
+    `;
+  }
+}
+
+var shapeSizeCss = css`.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([disabled],[onDark])) .wrapper:focus-within,:host(:not([disabled],[onDark])) .wrapper:active,:host(:not([disabled],[appearance=inverse])) .wrapper:focus-within,:host(:not([disabled],[appearance=inverse])) .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([disabled],[onDark])) .wrapper:hover,:host(:not([disabled],[appearance=inverse])) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host(:not([ondark])) .wrapper,:host(:not([appearance=inverse])) .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])[disabled]),:host(:not([appearance=inverse])[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])[disabled]) #triggerLabel,:host(:not([appearance=inverse])[disabled]) #triggerLabel{cursor:default}:host(:not([ondark])[error]),:host(:not([appearance=inverse])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([disabled])[onDark]) .wrapper:focus-within,:host(:not([disabled])[onDark]) .wrapper:active,:host(:not([disabled])[appearance=inverse]) .wrapper:focus-within,:host(:not([disabled])[appearance=inverse]) .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(:not([disabled])[onDark]) .wrapper:hover,:host(:not([disabled])[appearance=inverse]) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host([onDark]) .label,:host([onDark]) .helpText,:host([appearance=inverse]) .label,:host([appearance=inverse]) .helpText{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper,:host([appearance=inverse]) .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][disabled]),:host([appearance=inverse][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][disabled]) #triggerLabel,:host([appearance=inverse][disabled]) #triggerLabel{cursor:default}:host([ondark][error]),:host([appearance=inverse][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
+
+var styleCss$1 = css`:host{position:relative;display:block;text-align:left}: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 classicColorCss = css``;
+
+var classicLayoutCss = css`@media(hover: hover){:host(:not([disabled])) .wrapper:hover{cursor:pointer}}: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)}: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-400, 2rem));margin-left:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .rightIndent{width:calc(100% - var(--ds-size-400, 2rem));margin-right:var(--ds-size-200, 1rem)}: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-200, 1rem)}`;
+
+var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]),:host([appearance=inverse]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]),:host([appearance=inverse][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
+
+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"),var(--wcss-display-2xl-family-fallback, 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"),var(--wcss-display-xl-family-fallback, 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"),var(--wcss-display-lg-family-fallback, 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"),var(--wcss-display-md-family-fallback, 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"),var(--wcss-display-sm-family-fallback, 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"),var(--wcss-display-xs-family-fallback, 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"),var(--wcss-heading-xl-family-fallback, 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"),var(--wcss-heading-lg-family-fallback, 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"),var(--wcss-heading-md-family-fallback, 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"),var(--wcss-heading-sm-family-fallback, 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"),var(--wcss-heading-xs-family-fallback, 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"),var(--wcss-heading-2xs-family-fallback, 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"),var(--wcss-accent-2xl-family-fallback, 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"),var(--wcss-accent-xl-family-fallback, 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"),var(--wcss-accent-lg-family-fallback, 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"),var(--wcss-accent-md-family-fallback, 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"),var(--wcss-accent-sm-family-fallback, 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"),var(--wcss-accent-xs-family-fallback, 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"),var(--wcss-accent-2xs-family-fallback, 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)}`;
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+
+  /**
+   * Gets the text content of a named slot.
+   * @returns {String}
+   * @private
+   */
+  getSlotText(elem, name) {
+    const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
+    const nodes = slot?.assignedNodes({ flatten: true }) || [];
+    const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
+
+    return text || null;
+  }
+}
+
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * Displays help text or error messages within form elements - Internal Use Only.
+ */
+class AuroHelpText extends LitElement {
+
+  constructor() {
+    super();
+
+    this.error = false;
+    this.appearance = "default";
+    this.onDark = false;
+    this.hasTextContent = false;
+
+    AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-helptext');
+  }
+
+  static get styles() {
+    return [
+      colorCss,
+      styleCss,
+      tokensCss
+    ];
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+
+      /**
+       * Defines whether the component will be on lighter or darker backgrounds.
+       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * @default 'default'
+       */
+      appearance: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      slotNodes: {
+        type: Boolean,
+      },
+
+      /**
+       * @private
+       */
+      hasTextContent: {
+        type: Boolean,
+      },
+
+      /**
+       * If declared, make font color red.
+       */
+      error: {
+        type: Boolean,
+        reflect: true,
+      },
+
+      /**
+       * DEPRECATED - use `appearance` instead.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-helptext"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
+   *
+   */
+  static register(name = "auro-helptext") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHelpText);
+  }
+
+  updated() {
+    this.handleSlotChange();
+  }
+
+  handleSlotChange(event) {
+    if (event) {
+      this.slotNodes = event.target.assignedNodes();
+    }
+
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
+
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
+    }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return html`
+      <div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+var formkitVersion = '202604071818';
+
+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
+      }
+    };
+  }
+
+  /**
+   * Returns true if the element has focus.
+   * @private
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus') || this.matches(':focus-within');
+  }
+
+  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) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
+ * @customElement auro-dropdown
+ *
+ * @slot - Default slot for the dropdown bib content.
+ * @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 AuroElement {
+  static get shadowRootOptions() {
+    return {
+      ...AuroElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.isPopoverVisible = false;
+    this.isBibFullscreen = false;
+    this.matchWidth = false;
+    this.noHideOnThisFocusLoss = false;
+
+    this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
+
+    // Layout Config
+    this.layout = undefined;
+    this.shape = undefined;
+    this.size = undefined;
+
+    this.parentBorder = false;
+
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
+    /** @private */
+    this.bibElement = createRef();
+
+    this._intializeDefaults();
+  }
+
+  /**
+   * @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
+    };
+  }
+
+  /**
+   * @private
+   * @returns {void} Internal defaults.
+   */
+  _intializeDefaults() {
+    this.appearance = 'default';
+    this.chevron = false;
+    this.disabled = false;
+    this.disableKeyboardHandling = false;
+    this.error = false;
+    this.tabIndex = 0;
+    this.noToggle = false;
+    this.a11yRole = 'button';
+    this.onDark = false;
+    this.showTriggerBorders = true;
+    this.triggerContentFocusable = false;
+    this.simple = false;
+
+    // floaterConfig
+    this.placement = 'bottom-start';
+    this.offset = 0;
+    this.noFlip = false;
+    this.shift = false;
+    this.autoPlacement = false;
+
+    /**
+     * @private
+     */
+    this.hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+
+    /**
+     * @private
+     */
+    this.floater = new AuroFloatingUI();
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.iconTag = versioning.generateTag('auro-formkit-dropdown-icon', iconVersion, _);
+
+    /**
+     * @private
+     */
+    this.dropdownBibTag = versioning.generateTag('auro-formkit-dropdown-dropdownbib', formkitVersion, AuroDropdownBib);
+
+    /**
+     * @private
+     */
+    this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', formkitVersion, AuroHelpText);
+
+    /**
+     * @private
+     */
+    this.bindFocusEventToTrigger = this.bindFocusEventToTrigger.bind(this);
+  }
+
+  /**
+   * @ignore
+   */
+  get floaterConfig() {
+    return {
+      placement: this.placement,
+      flip: !this.noFlip,
+      shift: this.shift,
+      autoPlacement: this.autoPlacement,
+      offset: this.offset,
+    };
+  }
+
+  /**
+   * Public method to hide the dropdown.
+   * @returns {void}
+   */
+  hide() {
+    this.floater.hideBib();
+  }
+
+  /**
+   * Public method to show the dropdown.
+   * @returns {void}
+   */
+  show() {
+    this.floater.showBib();
+
+    // Open dialog synchronously so callers remain in the user gesture
+    // chain. This is critical for mobile browsers (iOS Safari) to keep
+    // the virtual keyboard open when transitioning from the trigger
+    // input to an input inside the fullscreen dialog. Without this,
+    // showModal() fires asynchronously via Lit's update cycle, which
+    // falls outside the user activation window and causes iOS to
+    // dismiss the keyboard.
+    if (this.bibElement && this.bibElement.value) {
+      this.bibElement.value.open(this.isBibFullscreen);
+    }
+  }
+
+  /**
+   * When bib is open, focus on the first element inside of bib.
+   * If not, trigger element will get focus.
+   */
+  focus() {
+    if (this.isPopoverVisible && this.bibContent) {
+      const focusables = getFocusableElements(this.bibContent);
+      if (focusables.length > 0) {
+        focusables[0].focus();
+      }
+    } else {
+      this.trigger.focus();
+    }
+  }
+
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-dropdown` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (!this.trigger) {
+      return;
+    }
+
+    if (element) {
+      this.trigger.ariaActiveDescendantElement = element;
+    } else {
+      this.trigger.ariaActiveDescendantElement = null;
+      this.trigger.removeAttribute('aria-activedescendant');
+    }
+
+    // In fullscreen, focus stays on the close button while arrow keys
+    // highlight options via active-descendant. Without this flag the
+    // keyboard bridge clicks the close button on Enter (closing the
+    // bib without selecting). When true, the bridge skips the button
+    // click and forwards Enter to the parent to make the selection.
+    if (this.bibContent) {
+      this.bibContent.hasActiveDescendant = this.isBibFullscreen && Boolean(element);
+    }
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+
+      /**
+       * The value for the role attribute of the trigger element.
+       */
+      a11yRole: {
+        type: String,
+        attribute: false,
+        reflect: false
+      },
+
+      /**
+       * Defines whether the component will be on lighter or darker backgrounds.
+       * @type {'default' | 'inverse'}
+       * @default 'default'
+       */
+      appearance: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, the dropdown will only show by calling the API .show() public method.
+       */
+      disableEventShow: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, applies a border around the trigger slot.
+       */
+      simple: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, the dropdown displays a chevron on the right.
+       */
+      chevron: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'chevron'
+      },
+
+      /**
+       * If declared, the dropdown is not interactive.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
+       */
+      disableKeyboardHandling: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      dropdownWidth: {
+        type: Number
+      },
+
+      /**
+       * The unique ID for the dropdown bib element.
+       * @private
+       */
+      dropdownId: {
+        type: String,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * If declared, will apply error UI to the dropdown.
+       */
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Contains the help text message for the current validity error.
+       */
+      errorMessage: {
+        type: String
+      },
+
+      /**
+       * If declared, the bib will display when focus is applied to the trigger.
+       */
+      focusShow: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If true, the dropdown bib is displayed.
+       */
+      isPopoverVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'open'
+      },
+
+      /**
+       * If true, the dropdown bib is taking the fullscreen when it's open.
+       */
+      isBibFullscreen: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, the trigger will toggle the dropdown on mouseover/mouseout.
+       */
+      hoverToggle: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      hasTriggerContent: {
+        type: Boolean
+      },
+
+      /**
+       * Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+       *
+       * When expanded, the dropdown will automatically display in fullscreen mode
+       * if the screen size is equal to or smaller than the selected breakpoint.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
+       * @default 'sm'
+       */
+      fullscreenBreakpoint: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Sets the layout of the dropdown.
+       * @type {'classic' | 'emphasized' | 'snowflake'}
+       * @default 'classic'
+       */
+      layout: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Defines if the trigger should size based on the parent element providing the border UI.
+       * @private
+       */
+      parentBorder: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, the popover and trigger will be set to the same width.
+       */
+      matchWidth: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, the bib will NOT flip to an alternate position
+       * when there isn't enough space in the specified `placement`.
+       */
+      noFlip: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
+       */
+      shift: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, the dropdown will not hide when moving focus outside the element.
+       */
+      noHideOnThisFocusLoss: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If declared, the trigger will only show the dropdown bib.
+       */
+      noToggle: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Gap between the trigger element and bib.
+       * @default 0
+       */
+      offset: {
+        type: Number,
+        reflect: true
+      },
+
+      /**
+       * DEPRECATED - use `appearance="inverse"` instead.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       *  If declared, and a function is set, that function will execute when the slot content is updated.
+       */
+      onSlotChange: {
+        type: Function,
+        reflect: false
+      },
+
+      /**
+       * Position where the bib should appear relative to the trigger.
+       * @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
+       * @default 'bottom-start'
+       */
+      placement: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      tabIndex: {
+        type: Number
+      },
+
+      /**
+       * Accessible label for the dropdown bib dialog element.
+       * @private
+       */
+      bibDialogLabel: {
+        type: String,
+        attribute: false,
+        reflect: false
+      }
+    };
+  }
+
+  static get styles() {
+    return [
+      styleCss$1,
+      tokensCss$1,
+      colorCss$1,
+
+      // default layout
+      classicColorCss,
+      classicLayoutCss,
+
+      // emphasized layout
+      styleEmphasizedCss,
+
+      // snowflake layout
+      styleSnowflakeCss,
+
+      shapeSizeCss
+    ];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-dropdown"] - The name of the element that you want to register.
+   *
+   * @example
+   * AuroDropdown.register("custom-dropdown") // this will register this element to <custom-dropdown/>
+   *
+   */
+  static register(name = "auro-dropdown") {
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
+  }
+
+  /**
+   * Accessor for reusing the focusable entity query string.
+   * @private
+   * @returns {string}
+   */
+  get focusableEntityQuery () {
+    return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.floater) {
+      this.floater.hideBib('disconnect');
+      this.floater.disconnect();
+    }
+    this.clearTriggerFocusEventBinding();
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.floater.handleUpdate(changedProperties);
+
+    // Note: `disabled` is not a breakpoint (it is not a screen size),
+    // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
+    if (changedProperties.has('fullscreenBreakpoint')) {
+      this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
+    }
+
+    // when trigger's content is changed without any attribute or node change,
+    // `requestUpdate` needs to be called to update hasTriggerContent
+    if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
+      this.handleTriggerContentSlotChange();
+    }
+
+    if (changedProperties.has('isPopoverVisible') && this.bibElement.value) {
+      if (this.isPopoverVisible) {
+        // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
+        // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
+        const useModal = this.isBibFullscreen;
+        this.bibElement.value.open(useModal);
+      } else {
+        this.bibElement.value.close();
+      }
+    }
+
+    // When fullscreen strategy changes while open, re-open dialog with correct mode
+    // (e.g. resizing from desktop → mobile while dropdown is open)
+    if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
+      const useModal = this.isBibFullscreen;
+      this.bibElement.value.close();
+      this.bibElement.value.open(useModal);
+    }
+  }
+
+  /**
+   * 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.disableKeyboardHandling);
+
+    // Prevent `contain: layout` on the dropdown host. Layout containment
+    // creates a containing block for position:fixed descendants (the bib),
+    // which clips the bib inside ancestor overflow contexts such as a
+    // <dialog> element. Without it, the bib's position:fixed is relative
+    // to the viewport, letting Floating UI's flip middleware detect
+    // viewport boundaries and the bib escape overflow clipping.
+    const origConfigureBibStrategy = this.floater.configureBibStrategy.bind(this.floater);
+    this.floater.configureBibStrategy = (value) => {
+      origConfigureBibStrategy(value);
+      this.style.contain = '';
+    };
+
+    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
+
+    // Handle ESC key from dialog's cancel event
+    this.addEventListener('auro-bib-cancel', () => {
+      this.floater.hideBib('keydown');
+    });
+
+    /**
+     * @description Let subscribers know that the dropdown ID ha been generated and added.
+     * @event auroDropdown-idAdded
+     * @type {Object<key: 'id', value: string>} - The ID of the dropdown bib element.
+     */
+    this.dispatchEvent(new CustomEvent('auroDropdown-idAdded', {detail: {id: this.floater.element.id}}));
+
+    // Set the bib ID locally for aria-controls (must be in the same shadow root as the trigger)
+    if (!this.triggerContentFocusable) {
+      this.dropdownId = this.floater.element.bib.id;
+    }
+
+    this.bibContent = this.floater.element.bib;
+
+    // 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
+      }));
+    });
+  }
+
+  /**
+   * Exposes CSS parts for styling from parent components.
+   * @returns {void}
+   */
+  exposeCssParts() {
+    this.setAttribute('exportparts', 'trigger:dropdownTrigger, chevron:dropdownChevron, helpText:dropdownHelpText, size:dropdownSize');
+  }
+
+  /**
+   * Determines if content is within a custom slot.
+   * @private
+   * @param {HTMLElement} element - The element to check.
+   * @returns {Boolean}
+   */
+  isCustomSlotContent(element) {
+    let currentElement = element;
+
+    let inCustomSlot = false;
+
+    while (currentElement) {
+      currentElement = currentElement.parentElement;
+
+      if (currentElement && currentElement.hasAttribute('slot')) {
+        inCustomSlot = true;
+        break;
+      }
+    }
+
+    return inCustomSlot;
+  }
+
+  /**
+   * Function to support @focusin event.
+   * @private
+   * @return {void}
+   */
+  handleFocusin() {
+    this.hasFocus = true;
+  }
+
+  /**
+   * @private
+   */
+  updateFocusTrap() {
+    if (this.isPopoverVisible) {
+      if (!this.isBibFullscreen) {
+        // Desktop: show() doesn't trap focus, so use FocusTrap
+        this.focusTrap = new FocusTrap(this.bibContent);
+        this.focusTrap.focusFirstElement();
+      }
+      // Fullscreen: showModal() provides native focus trapping
+      return;
+    }
+
+    if (this.focusTrap) {
+      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) {
+    const dupEvent = new FocusEvent(event.type, {
+      bubbles: false,
+      cancelable: false,
+      composed: true,
+    });
+    this.trigger.dispatchEvent(dupEvent);
+  }
+
+  /**
+   * 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) {
+      return;
+    }
+
+    this.triggerContentSlot.forEach((node) => {
+      if (node.querySelectorAll) {
+        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        auroElements.forEach((auroEl) => {
+          auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
+          auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
+        });
+      }
+    });
+  }
+
+  /**
+   * Clears focus and blur event listeners from nested Auro components within the trigger slot.
+   * @private
+   * @returns {void}
+   */
+  clearTriggerFocusEventBinding() {
+    if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
+      return;
+    }
+
+    this.triggerContentSlot.forEach((node) => {
+      if (node.querySelectorAll) {
+        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        auroElements.forEach((auroEl) => {
+          auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
+          auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
+        });
+      }
+    });
+  }
+
+  /*
+   * Sets aria attributes for the trigger element if a custom one is passed in.
+   * @private
+   * @method setTriggerAriaAttributes
+   * @param { HTMLElement } triggerElement - The custom trigger element.
+   */
+  clearTriggerA11yAttributes(triggerElement) {
+
+    if (!triggerElement || !triggerElement.removeAttribute) {
+      return;
+    }
+
+    // Reset appropriate attributes for a11y
+    triggerElement.removeAttribute('aria-labelledby');
+    if (triggerElement.getAttribute('id') === `${this.id}-trigger-element`) {
+      triggerElement.removeAttribute('id');
+    }
+    triggerElement.removeAttribute('role');
+    triggerElement.removeAttribute('aria-expanded');
+
+    triggerElement.removeAttribute('aria-controls');
+    triggerElement.removeAttribute('aria-autocomplete');
+  }
+
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - Native slotchange event.
+   * @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('.triggerContentWrapper slot');
+
+    // If there's a trigger slot
+    if (triggerSlot) {
+
+      // Get the content nodes to see if there are any children
+      const triggerContentNodes = triggerSlot.assignedNodes();
+
+      // If there are children
+      if (triggerContentNodes) {
+
+        // 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) {
+
+          // Assume the consumer will be providing their own a11y in whatever they passed in
+          this.clearTriggerA11yAttributes(trigger);
+
+          // Remove the tabindex from the trigger so it doesn't interrupt focus flow
+          trigger.removeAttribute('tabindex');
+        } else {
+
+          // Add the tabindex to the trigger so that it's in the focus flow
+          trigger.setAttribute('tabindex', '0');
+        }
+      }
+    }
+
+    if (event) {
+      // Wrap in a try-catch block to handle errors when trying to use assignedNodes from the NodeJS test environment.
+      try {
+        this.triggerNode = event.target;
+        this.triggerContentSlot = event.target.assignedNodes();
+      } catch (error) {
+        console.warn('auro-dropdown: Unable to access the trigger content slot.', error); // eslint-disable-line no-console
+      }
+    }
+
+    if (this.triggerContentSlot) {
+      this.setupTriggerFocusEventBinding();
+
+      this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
+        if (slot.textContent.trim()) {
+          return true;
+        }
+        const slotInSlot = slot.querySelector('slot');
+        if (!slotInSlot) {
+          return false;
+        }
+        const slotsInSlotNodes = slotInSlot.assignedNodes();
+        return slotsInSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
+      });
+    } else {
+      this.hasTriggerContent = false;
+    }
+  }
+
+  /**
+   * Handles the default slot change event and updates the content.
+   *
+   * This method retrieves all nodes assigned to the default slot of the event target and appends them
+   * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
+   * notify about the slot change.
+   *
+   * @private
+   * @method handleDefaultSlot
+   * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
+   */
+  handleDefaultSlot() {
+
+    if (this.onSlotChange) {
+      this.onSlotChange();
+    }
+  }
+
+  /**
+   * Returns HTML for the common portion of the layouts.
+   * @private
+   * @param {Object} helpTextClasses - Classes to apply to the help text container.
+   * @returns {html} - Returns HTML.
+   */
+  renderBasicHtml(helpTextClasses) {
+    return html$1`
+      <div>
+        <div
+          id="trigger"
+          class="${classMap(this.commonWrapperClasses)}" part="wrapper"
+          tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
+          role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
+          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')}"
+          aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
+          @focusin="${this.handleFocusin}"
+          @blur="${this.handleFocusOut}">
+          <div class="triggerContentWrapper" id="triggerLabel">
+            <slot
+              name="trigger"
+              @slotchange="${this.handleTriggerContentSlotChange}"></slot>
+          </div>
+          ${this.chevron ? html$1`
+              <div
+                id="showStateIcon"
+                class="chevron"
+                part="chevron"
+                aria-hidden="true">
+                <${this.iconTag}
+                  category="interface"
+                  name="${this.isPopoverVisible ? 'chevron-up' : `chevron-down`}"
+                  appearance="${this.onDark ? 'inverse' : this.appearance}"
+                  variant="${this.disabled ? 'disabled' : 'muted'}"
+                  ariaHidden="true">
+                </${this.iconTag}>
+              </div>
+            ` : undefined }
+        </div>
+        <div class="${classMap(helpTextClasses)}">
+          <slot name="helpText"></slot>
+        </div>
+        <div id="bibSizer" part="size"></div>
+        <${this.dropdownBibTag}
+          id="bib"
+          shape="${this.shape}"
+          ?data-show="${this.isPopoverVisible}"
+          ?isfullscreen="${this.isBibFullscreen}"
+          .dialogLabel="${this.bibDialogLabel}"
+          ${ref(this.bibElement)}
+          >
+          <div class="slotContent">
+            <slot @slotchange="${this.handleDefaultSlot}"></slot>
+          </div>
+        </${this.dropdownBibTag}>
+      </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();
+    }
+  }
+}
+
+export { AuroDropdown };