@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.5 → 0.0.0-pr624.7

package/components/datepicker/dist/index.js

@@ -1,5 +1,5 @@
-import { html, css, LitElement } from 'lit';
 import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
+import { html, css, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -61,9 +61,10 @@ let DateFormatter$1 = class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -255,7 +256,7 @@ let AuroDateUtilities$1 = class AuroDateUtilities extends AuroDateUtilitiesBase$
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter$1.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter$1.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {
@@ -420,7 +421,7 @@ const {
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -490,7 +491,7 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
 let AuroFormValidation$1 = class AuroFormValidation {
 
   constructor() {
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
   }
 
   /**
@@ -1244,12 +1245,14 @@ class UtilitiesCalendarRender {
   }
 }
 
-var styleCss$d = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}[auro-input]::part(wrapper):focus-within:before{border-bottom-width:0 !important;box-shadow:unset !important;outline:unset !important}[auro-input]:not(:first-child)::part(wrapper)::after{position:absolute;left:50%;width:95%;height:1px;background-color:var(--ds-auro-datepicker-range-input-divider-color);content:"";transform:translateX(-50%)}.outerWrapper{position:relative;container:outerwrapper/inline-size}.dpTriggerContent{display:flex;flex-direction:column}.dpTriggerContent [auro-input]{flex:1}:host(:not([stacked])) .dpTriggerContent{flex-direction:row}:host(:not([stacked])) [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}:host(:not([stacked])) [auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}:host(:not([stacked])) [auro-input]:nth-child(2)::part(accentIcon){display:none}:host(:not([stacked])) [auro-input]:nth-child(2)::part(label){left:0;width:100%}:host(:not([stacked])) [auro-input]:nth-child(2)::part(input){padding-left:0}:host(:not([stacked])) [auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}:host(:not([stacked])) [auro-input]:not(:first-child)::part(wrapper):after{content:none}:host(:not([stacked])[range]) [auro-input]{max-width:50%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
+var styleCss$d = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([layout=classic]) [auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}:host([layout=classic]) [auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout=classic]) [auro-input]::part(helpText){display:none}:host([layout=classic]) [auro-input]::part(wrapper):focus-within:before{border-bottom-width:0 !important;box-shadow:unset !important;outline:unset !important}:host([layout=classic]) [auro-input]::part(wrapper) .dpTriggerContent{display:flex;flex-direction:column}:host([layout=classic]) [auro-input]::part(wrapper) .dpTriggerContent [auro-input]{flex:1}:host([layout=classic]) [auro-input]::part(wrapper) .dpTriggerContent{flex-direction:row}:host([layout=classic]) [auro-input]::part(wrapper) [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem);--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}:host([layout=classic]) [auro-input]::part(wrapper) [auro-input]:not(:first-child)::part(wrapper)::after{position:absolute;left:50%;width:95%;height:1px;background-color:var(--ds-auro-datepicker-range-input-divider-color);content:"";transform:translateX(-50%)}:host([layout=classic]) [auro-input]::part(wrapper) .outerWrapper{position:relative;container:outerwrapper/inline-size}:host([layout=classic]) [auro-input]::part(wrapper) .dpTriggerContent{display:flex;flex-direction:column}:host([layout=classic]) [auro-input]::part(wrapper) .dpTriggerContent [auro-input]{flex:1}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) .dpTriggerContent{flex-direction:row}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:nth-child(2)::part(accentIcon){display:none}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:nth-child(2)::part(label){left:0;width:100%}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:nth-child(2)::part(input){padding-left:0}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:not(:first-child)::part(wrapper):after{content:none}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked])[range] [auro-input]{max-width:50%}@media screen and (max-width: 576px){:host([layout=classic]) [auro-input]::part(wrapper) ::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}:host([layout=classic]) [auro-input]::part(wrapper) .calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
 
 var colorCss$c = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host([onDark]){--ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-inverse, #ffffff)}`;
 
 var tokensCss$a = css`:host{--ds-auro-datepicker-placeholder-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
 
+var classicLayoutColor = css`:host [auro-dropdown]::part(wrapper){border:1px solid aqua;outline:2px solid crimson}`;
+
 var styleCss$c = css`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
 
 var colorCss$b = css`.calendarNavBtn{border-color:var(--ds-auro-calendar-nav-btn-border-color);background-color:var(--ds-auro-calendar-nav-btn-container-color);color:var(--ds-auro-calendar-nav-btn-chevron-color)}.calendarNavBtn:hover{--ds-auro-calendar-nav-btn-container-color: var(--ds-advanced-color-state-background-hover, #f2f2f2);--ds-auro-calendar-nav-btn-border-color: var(--ds-basic-color-brand-primary, #01426a)}.calendarNavBtn:focus{--ds-auro-calendar-nav-btn-border-color: var(--ds-basic-color-brand-primary, #01426a)}.calendarNavBtn:active{--ds-auro-calendar-nav-btn-border-color: var(--ds-basic-color-brand-primary, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color)}.mobileHeader{background-color:var(--ds-auro-calendar-mobile-header-container-color)}.mobileDateLabel{color:var(--ds-auro-calendar-mobile-header-text-color)}:host(:not([noRange])) .headerDateTo:after{background-color:var(--ds-auro-calendar-mobile-header-divider-color)}::slotted([slot="bib.fullscreen.fromStr"]),::slotted([slot=mobileDateToStr]){color:var(--ds-auro-datepicker-placeholder-color)}@media screen and (max-width: 576px){.calendarNavBtn{--ds-auro-calendar-nav-btn-border-color: var(--ds-basic-color-brand-primary, #01426a)}}`;
@@ -7242,7 +7245,7 @@ __decorate([property({ type: Array })], RangeDatepickerCell.prototype, "disabled
 __decorate([property({ type: String })], RangeDatepickerCell.prototype, "hoveredDate", void 0);
 __decorate([property({ type: Boolean })], RangeDatepickerCell.prototype, "isCurrentDate", void 0);
 __decorate([property({ type: Object })], RangeDatepickerCell.prototype, "locale", null);
-AuroLibraryRuntimeUtils$4.prototype.registerComponent('wc-range-datepicker-cell', RangeDatepickerCell);
+AuroLibraryRuntimeUtils$5.prototype.registerComponent('wc-range-datepicker-cell', RangeDatepickerCell);
 
 class Day {
   constructor(date) {
@@ -7760,7 +7763,7 @@ __decorate([property({ type: Array })], RangeDatepickerCalendar.prototype, "year
 __decorate([property({ type: Array })], RangeDatepickerCalendar.prototype, "monthsList", void 0);
 __decorate([property({ type: Array })], RangeDatepickerCalendar.prototype, "dayNamesOfTheWeek", void 0);
 __decorate([property({ type: Array })], RangeDatepickerCalendar.prototype, "daysOfMonth", void 0);
-AuroLibraryRuntimeUtils$4.prototype.registerComponent('wc-range-datepicker-calendar', RangeDatepickerCalendar);
+AuroLibraryRuntimeUtils$5.prototype.registerComponent('wc-range-datepicker-calendar', RangeDatepickerCalendar);
 
 var styleCss$a = css`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-basic-text-body-xxs-font-size, 10px);font-weight:var(--ds-basic-text-body-xxs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xxs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xxs-line-height, 14px)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-family:var(--ds-basic-text-body-lg-font-family, "AS Circular");font-size:var(--ds-basic-text-body-lg-font-size, 18px);font-weight:var(--ds-basic-text-body-lg-font-weight, 450);letter-spacing:var(--ds-basic-text-body-lg-letter-spacing, 0);line-height:var(--ds-basic-text-body-lg-line-height, 26px)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}}`;
 
@@ -9661,7 +9664,7 @@ class AuroPopover extends LitElement {
   privateDefaults() {
     this.isPopoverVisible = false;
     this.id = `popover-${(Math.random() + 1).toString(36).substring(7)}`;
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
   }
 
   // function to define props used within the scope of this component
@@ -9691,7 +9694,7 @@ class AuroPopover extends LitElement {
    *
    */
   static register(name = "auro-popover") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroPopover);
+    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroPopover);
   }
 
   connectedCallback() {
@@ -9859,7 +9862,7 @@ class AuroCalendarCell extends LitElement {
     this.dateStr = null;
     this.renderForDateSlot = false; // When false, the numerical date will render vertically centered. When true, the date will render off-center to the top and leave room below for the slot content.
 
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
 
     /**
      * Generate unique names for dependency components.
@@ -10770,7 +10773,7 @@ var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1$2 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -10883,7 +10886,7 @@ let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
  * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
  */
 
-let AuroElement$3 = class AuroElement extends LitElement {
+let AuroElement$4 = class AuroElement extends LitElement {
 
   // function to define props used within the scope of this component
   static get properties() {
@@ -10951,7 +10954,7 @@ var styleCss$1$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}
  */
 
 // build the component class
-let BaseIcon$2 = class BaseIcon extends AuroElement$3 {
+let BaseIcon$2 = class BaseIcon extends AuroElement$4 {
   constructor() {
     super();
     this.onDark = false;
@@ -11027,6 +11030,76 @@ var tokensCss$8 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-d
 
 var colorCss$7 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+let AuroLibraryRuntimeUtils$4 = 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);
+  }
+};
+
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -11046,7 +11119,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
    */
   privateDefaults() {
     this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
   }
 
   // function to define props used within the scope of this component
@@ -11128,7 +11201,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
    *
    */
   static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroIcon);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroIcon);
   }
 
   connectedCallback() {
@@ -11225,7 +11298,7 @@ class AuroHeader extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1$2();
   }
 
   // function to define props used within the scope of this component
@@ -11255,7 +11328,7 @@ class AuroHeader extends LitElement {
    *
    */
   static register(name = "auro-header") {
-    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHeader);
+    AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroHeader);
   }
 
   firstUpdated() {
@@ -11351,7 +11424,7 @@ class AuroBibtemplate extends LitElement {
 
     this.large = false;
 
-    AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+    AuroLibraryRuntimeUtils$1$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
 
     const versioning = new AuroDependencyVersioning$2();
     this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion$2, AuroIcon$2);
@@ -11390,7 +11463,7 @@ class AuroBibtemplate extends LitElement {
    *
    */
   static register(name = "auro-bibtemplate") {
-    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
+    AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroBibtemplate);
   }
 
   /**
@@ -11430,6 +11503,18 @@ class AuroBibtemplate extends LitElement {
     this.setAttribute('exportparts', 'bibtemplate:dropdownBibTemplate');
   }
 
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+
+    this.dispatchEvent(new CustomEvent("auro-bibtemplate-connected", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    }));
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html$1`
@@ -11500,7 +11585,7 @@ let AuroLoader$1 = class AuroLoader extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
 
     this.orbit = false;
     this.ringworm = false;
@@ -11563,7 +11648,7 @@ let AuroLoader$1 = class AuroLoader extends LitElement {
    *
    */
   static register(name = "auro-loader") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroLoader);
+    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroLoader);
   }
 
   firstUpdated() {
@@ -11867,7 +11952,7 @@ let AuroButton$1 = class AuroButton extends LitElement {
    *
    */
   static register(name = "auro-button") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroButton);
+    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroButton);
   }
 
   /**
@@ -12322,7 +12407,7 @@ if (!customElements.get('auro-formkit-calendar')) {
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$1$1 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -12905,10 +12990,11 @@ const flip$1 = function (options) {
         const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
         if (nextPlacement) {
-          var _overflowsData$;
           const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
-          const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
-          if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
+          if (!ignoreCrossAxisOverflow ||
+          // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
             // Try next placement and re-run the lifecycle.
             return {
               data: {
@@ -13929,8 +14015,28 @@ class AuroFloatingUI {
     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) => {
-        AuroFloatingUI.isMousePressed = event.type === 'mousedown';
+        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);
@@ -14057,6 +14163,7 @@ class AuroFloatingUI {
 
       // Compute the position of the bib
       computePosition(this.element.trigger, this.element.bib, {
+        strategy: this.element.floaterConfig?.strategy || 'fixed',
         placement: this.element.floaterConfig?.placement,
         middleware: middleware || []
       }).then(({ x, y }) => { // eslint-disable-line id-length
@@ -14191,8 +14298,9 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    // if fullscreen bib is still open and the focus is missing, do not close
-    if (this.element.bib.hasAttribute('isfullscreen') && activeElement === document.body) {
+    
+    // if fullscreen bib is in fullscreen mode, do not close
+    if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
     }
 
@@ -14493,8 +14601,6 @@ class AuroFloatingUI {
       this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
     }
 
-    document.body.append(this.element.bib);
-
     this.regenerateBibId();
     this.handleTriggerTabIndex();
 
@@ -14725,6 +14831,76 @@ var tokensCss$2$1 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon
 
 var colorCss$3$1 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+let AuroLibraryRuntimeUtils$1$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);
+  }
+};
+
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -14894,7 +15070,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.2';
 
-var styleCss$1$1 = css`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss$1$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss$2$1 = 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)}`;
 
@@ -14904,7 +15080,6 @@ var tokensCss$1$1 = css`:host(:not([ondark])){--ds-auro-dropdown-label-text-colo
 // See LICENSE in the project root for license information.
 
 
-
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
 const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
   'xl',
@@ -14929,7 +15104,7 @@ class AuroDropdownBib extends LitElement {
      */
     this._mobileBreakpointValue = undefined;
 
-    AuroLibraryRuntimeUtils$1$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
+    AuroLibraryRuntimeUtils$2$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
   }
 
   static get styles() {
@@ -14974,6 +15149,13 @@ class AuroDropdownBib extends LitElement {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * A reference to the associated bib template element.
+       */
+      bibTemplate: {
+        type: Object
+      }
     };
   }
 
@@ -15006,9 +15188,50 @@ class AuroDropdownBib extends LitElement {
           }
         }
       });
+
+      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);
+
+    // Dispatch a custom event when the component is connected
+    this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    }));
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html$1`
@@ -15021,7 +15244,7 @@ class AuroDropdownBib extends LitElement {
 
 var dropdownVersion$1 = '3.0.0';
 
-var shapeSizeCss$1 = css`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-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}.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-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}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.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}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-xl{min-height:72px;max-height:72px;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}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl{min-height:72px;max-height:72px;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}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl{min-height:72px;max-height:72px;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}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-md{min-height:72px;max-height:72px;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}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md{min-height:72px;max-height:72px;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}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md{min-height:72px;max-height:72px;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}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}`;
+var shapeSizeCss$1 = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.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;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}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;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}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:72px;max-height:72px;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}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:72px;max-height:72px;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}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-pill-md{min-height:72px;max-height:72px;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}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:72px;max-height:72px;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}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:72px;max-height:72px;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}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;min-height:44px;max-height:44px}`;
 
 var colorCss$1$1 = css`:host .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus,:host(:not([ondark])) .wrapper:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus,:host([ondark]) .wrapper:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([error]:not([ondark])){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([error][ondark]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helpText{color:var(--ds-auro-dropdown-helptext-text-color)}`;
 
@@ -15029,9 +15252,9 @@ var classicColorCss$1 = css`:host([layout*=classic]) .label{color:var(--ds-auro-
 
 var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .trigger{display:flex;flex-direction:row}@media(hover: hover){:host([layout*=classic]) .trigger:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([layout*=classic][fluid]){display:block}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}:host([layout*=classic][inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([layout*=classic][common]) .trigger,:host([layout*=classic][inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([layout*=classic][inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([layout*=classic][common]) .trigger,:host([layout*=classic][rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
-var styleEmphasizedCss = css`:host{display:block}.wrapper{display:flex;flex-direction:column}.trigger{flex:1;display:flex;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.triggerContent{overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;width:100%}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:24px;width:calc(100% - 48px)}`;
+var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.wrapper{display:flex;flex-direction:row}.trigger{flex:1;display:flex;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.triggerContent{overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;width:100%}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-600, 3rem))}`;
 
-var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex-direction:column}.trigger{flex:1;display:flex;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.triggerContent{overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;width:100%}:host([layout*=snowflake]) .leftIndent{margin-left:24px;width:calc(100% - 48px)}:host([layout*=snowflake]) .rightIndent{margin-right:24px;width:calc(100% - 48px)}`;
+var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex-direction:wrapper}.trigger{flex:1;display:flex;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.triggerContent{overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;width:100%}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-600, 3rem))}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-600, 3rem))}.layout-snowflake .chevron,.layout-snowflake-left .chevron,.layout-snowflake-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}`;
 
 var colorCss$4 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
@@ -15046,7 +15269,7 @@ var tokensCss$5 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -15127,7 +15350,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
     this.onDark = false;
     this.hasTextContent = false;
 
-    AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-helptext');
+    AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-helptext');
   }
 
   static get styles() {
@@ -15183,7 +15406,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
    *
    */
   static register(name = "auro-helptext") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroHelpText);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHelpText);
   }
 
   updated() {
@@ -15241,7 +15464,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
 
 var helpTextVersion$1 = '1.0.0';
 
-let AuroElement$2 = class AuroElement extends LitElement {
+let AuroElement$3 = class AuroElement extends LitElement {
   static get properties() {
     return {
 
@@ -15350,7 +15573,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
  * @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$2 {
+class AuroDropdown extends AuroElement$3 {
   constructor() {
     super();
 
@@ -15365,6 +15588,7 @@ class AuroDropdown extends AuroElement$2 {
     this.layout = 'classic';
     this.shape = 'rounded';
     this.size = 'xl';
+    this.parentBorder = false;
 
     this.privateDefaults();
   }
@@ -15380,7 +15604,8 @@ class AuroDropdown extends AuroElement$2 {
       'trigger': true,
       'wrapper': true,
       'hasFocus': this.hasFocus,
-      'simple': this.simple
+      'simple': this.simple,
+      'parentBorder': this.parentBorder
     };
   }
 
@@ -15432,7 +15657,7 @@ class AuroDropdown extends AuroElement$2 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2$1();
 
     /**
      * @private
@@ -15647,6 +15872,15 @@ class AuroDropdown extends AuroElement$2 {
         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.
        */
@@ -15774,7 +16008,7 @@ class AuroDropdown extends AuroElement$2 {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$2$1.prototype.registerComponent(name, AuroDropdown);
   }
 
   /**
@@ -16110,8 +16344,7 @@ class AuroDropdown extends AuroElement$2 {
    * @param {Event} event - The event object representing the slot change.
    * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
    */
-  handleDefaultSlot(event) {
-    [...event.target.assignedNodes()].forEach((node) => this.bibContent.append(node));
+  handleDefaultSlot() {
 
     if (this.onSlotChange) {
       this.onSlotChange();
@@ -16173,6 +16406,7 @@ class AuroDropdown extends AuroElement$2 {
           ${this.chevron || this.common ? html$1`
               <div
                 id="showStateIcon"
+                class="chevron"
                 part="chevron">
                 <${this.iconTag}
                   category="interface"
@@ -16187,9 +16421,6 @@ class AuroDropdown extends AuroElement$2 {
         <div class="${classMap(helpTextClasses)}">
           <slot name="helpText"></slot>
         </div>
-        <div class="slotContent">
-          <slot @slotchange="${this.handleDefaultSlot}"></slot>
-        </div>
         <div id="bibSizer" part="size"></div>
         <${this.dropdownBibTag}
           id="bib"
@@ -16198,6 +16429,9 @@ class AuroDropdown extends AuroElement$2 {
           ?common="${this.common}"
           ?rounded="${this.common || this.rounded}"
           ?inset="${this.common || this.inset}">
+          <div class="slotContent">
+            <slot @slotchange="${this.handleDefaultSlot}"></slot>
+          </div>
         </${this.dropdownBibTag}>
       </div>
     `;
@@ -16209,67 +16443,63 @@ class AuroDropdown extends AuroElement$2 {
    * @returns {html} - Returns HTML for the classic layout.
    */
   renderLayoutClassic() {
-    const helpTextClasses = {
-      'helpText': true,
-      'leftIndent': false,
-      'rightIndent': false
-    };
 
     return html$1`
-      ${this.renderBasicHtml(helpTextClasses)}
+      <div>
+        <div
+          id="trigger"
+          class="trigger"
+          part="trigger"
+          tabindex="${this.tabIndex}"
+          ?showBorder="${this.showTriggerBorders}"
+          role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
+          aria-expanded="${ifDefined(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
+          aria-controls="${ifDefined(this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
+        >
+          <div class="triggerContentWrapper">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
+              <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
+            </label>
+            <div class="triggerContent">
+              <slot
+                name="trigger"
+                @slotchange="${this.handleTriggerContentSlotChange}"></slot>
+            </div>
+          </div>
+          ${this.chevron || this.common ? html$1`
+              <div
+                id="showStateIcon"
+                part="chevron">
+                <${this.iconTag}
+                  category="interface"
+                  name="chevron-down"
+                  ?onDark="${this.onDark}"
+                  variant="${this.disabled ? 'disabled' : 'muted'}">
+                  >
+                </${this.iconTag}>
+              </div>
+            ` : undefined }
+        </div>
+        <${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
+          <slot name="helpText"></slot>
+        </${this.helpTextTag}>
+        
+        <div id="bibSizer" part="size"></div>
+        <${this.dropdownBibTag}
+          id="bib"
+          ?data-show="${this.isPopoverVisible}"
+          ?isfullscreen="${this.isBibFullscreen}"
+          ?common="${this.common}"
+          ?rounded="${this.common || this.rounded}"
+          ?inset="${this.common || this.inset}"
+        >
+          <div class="slotContent">
+            <slot @slotchange="${this.handleDefaultSlot}"></slot>
+          </div>
+        </${this.dropdownBibTag}>
+      </div>
     `;
-    // return html`
-    //   <div>
-    //     <div
-    //       id="trigger"
-    //       class="trigger"
-    //       part="trigger"
-    //       tabindex="${this.tabIndex}"
-    //       ?showBorder="${this.showTriggerBorders}"
-    //       role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
-    //       aria-expanded="${ifDefined(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
-    //       aria-controls="${ifDefined(this.triggerContentFocusable ? undefined : this.dropdownId)}"
-    //       aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
-    //     >
-    //       <div class="triggerContentWrapper">
-    //         <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
-    //           <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
-    //         </label>
-    //         <div class="triggerContent">
-    //           <slot
-    //             name="trigger"
-    //             @slotchange="${this.handleTriggerContentSlotChange}"></slot>
-    //         </div>
-    //       </div>
-    //       ${this.chevron || this.common ? html`
-    //           <div
-    //             id="showStateIcon"
-    //             part="chevron">
-    //             <${this.iconTag}
-    //               category="interface"
-    //               name="chevron-down"
-    //               ?onDark="${this.onDark}"
-    //               variant="${this.disabled ? 'disabled' : 'muted'}">
-    //               >
-    //             </${this.iconTag}>
-    //           </div>
-    //         ` : undefined }
-    //     </div>
-    //     <div class="slotContent">
-    //       <slot @slotchange="${this.handleDefaultSlot}"></slot>
-    //     </div>
-    //     <div id="bibSizer" part="size"></div>
-    //     <${this.dropdownBibTag}
-    //       id="bib"
-    //       ?data-show="${this.isPopoverVisible}"
-    //       ?isfullscreen="${this.isBibFullscreen}"
-    //       ?common="${this.common}"
-    //       ?rounded="${this.common || this.rounded}"
-    //       ?inset="${this.common || this.inset}"
-    //     >
-    //     </${this.dropdownBibTag}>
-    //   </div>
-    // `;
   }
 
   /**
@@ -16336,7 +16566,7 @@ class AuroDropdown extends AuroElement$2 {
 
 var dropdownVersion = '3.0.0';
 
-var shapeSizeCss = css`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-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}.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-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}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.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}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-xl{min-height:72px;max-height:72px;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}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl{min-height:72px;max-height:72px;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}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl{min-height:72px;max-height:72px;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}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-md{min-height:72px;max-height:72px;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}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md{min-height:72px;max-height:72px;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}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md{min-height:72px;max-height:72px;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}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}`;
+var shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.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;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}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;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}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:72px;max-height:72px;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}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:72px;max-height:72px;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}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-pill-md{min-height:72px;max-height:72px;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}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:72px;max-height:72px;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}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:72px;max-height:72px;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}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;min-height:44px;max-height:44px}`;
 
 var styleCss$4 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}`;
 
@@ -20375,9 +20605,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -20569,7 +20800,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {
@@ -20734,7 +20965,7 @@ const {
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -20804,7 +21035,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 class AuroFormValidation {
 
   constructor() {
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
   }
 
   /**
@@ -22365,7 +22596,7 @@ class AuroDependencyVersioning {
  * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
  */
 
-class AuroElement extends LitElement {
+let AuroElement$2 = class AuroElement extends LitElement {
 
   // function to define props used within the scope of this component
   static get properties() {
@@ -22389,7 +22620,7 @@ class AuroElement extends LitElement {
 
     return 'false'
   }
-}
+};
 
 var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
@@ -22433,7 +22664,7 @@ var styleCss$3 = css`:focus:not(:focus-visible){outline:3px solid transparent}.u
  */
 
 // build the component class
-class BaseIcon extends AuroElement {
+class BaseIcon extends AuroElement$2 {
   constructor() {
     super();
     this.onDark = false;
@@ -22509,6 +22740,76 @@ var tokensCss$3 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-d
 
 var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* 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);
+  }
+};
+
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -22716,7 +23017,7 @@ class AuroLoader extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
 
     this.orbit = false;
     this.ringworm = false;
@@ -22779,7 +23080,7 @@ class AuroLoader extends LitElement {
    *
    */
   static register(name = "auro-loader") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
   }
 
   firstUpdated() {
@@ -23083,7 +23384,7 @@ class AuroButton extends LitElement {
    *
    */
   static register(name = "auro-button") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroButton);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
   }
 
   /**
@@ -23449,7 +23750,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
+   * @returns {object} - Returns classmap.
    */
   get commonInputClasses() {
     return {
@@ -23458,9 +23759,9 @@ class AuroInput extends BaseInput {
   }
 
   /**
-   * Returns classmap configuration for html5 inputs in all layouts.
+   * Returns classmap configuration for html5 inputs in each layout.
    * @private
-   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   * @return {object} - Returns classmap.
    */
   get legacyInputClasses() {
     return {
@@ -23469,6 +23770,11 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for wrapper elements in each layout.
+   * @private
+   * @return {object} - Returns classmap.
+   */
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -23477,6 +23783,11 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for helpText elements in each layout.
+   * @private
+   * @return {object} - Returns classmap.
+   */
   get helpTextClasses() {
     return {
       'helpTextWrapper': true,
@@ -23494,7 +23805,7 @@ class AuroInput extends BaseInput {
    *
    */
   static register(name = "auro-input") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroInput);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroInput);
   }
 
   /**
@@ -23730,9 +24041,9 @@ class AuroInput extends BaseInput {
   }
 
   /**
-   * Returns HTML for the default layout.
+   * Returns HTML for the classic layout.
    * @private
-   * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
+   * @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
    */
   renderLayoutClassic() {
     return html$1`
@@ -23859,6 +24170,98 @@ class AuroInput extends BaseInput {
 
 var inputVersion = '4.2.0';
 
+class AuroElement extends LitElement {
+  static get properties() {
+    return {
+
+      /**
+       * Defines the language of an element.
+       * @default {'default'}
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      onDark: {
+        type: Boolean,
+        attribute: "ondark",
+        reflect: true
+      }
+    };
+  }
+
+  resetShapeClasses() {
+    if (this.shape && this.size) {
+      const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+      if (wrapper) {
+        wrapper.classList.forEach((className) => {
+          if (className.startsWith('shape-')) {
+            wrapper.classList.remove(className);
+          }
+        });
+
+        wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
+      }
+    }
+  }
+
+  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) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -23887,7 +24290,7 @@ var inputVersion = '4.2.0';
  */
 
 // build the component class
-class AuroDatePicker extends LitElement {
+class AuroDatePicker extends AuroElement {
   constructor() {
     super();
 
@@ -23962,7 +24365,7 @@ class AuroDatePicker extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
 
     /**
      * @private
@@ -23988,6 +24391,11 @@ class AuroDatePicker extends LitElement {
      * @private
      */
     this.monthFirst = undefined;
+
+    // Layout Config
+    this.layout = 'classic';
+    this.shape = 'classic';
+    this.size = 'lg';
   }
 
   // This function is to define props used within the scope of this component
@@ -24268,7 +24676,10 @@ class AuroDatePicker extends LitElement {
     return [
       styleCss$d,
       colorCss$c,
-      tokensCss$a
+      tokensCss$a,
+
+      // layouts
+      classicLayoutColor
     ];
   }
 
@@ -24281,7 +24692,7 @@ class AuroDatePicker extends LitElement {
    *
    */
   static register(name = "auro-datepicker") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroDatePicker);
+    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroDatePicker);
   }
 
   /**
@@ -24453,7 +24864,7 @@ class AuroDatePicker extends LitElement {
    * @returns {void}
    */
   configureInput() {
-    this.triggerInput = this.dropdown.querySelector('[slot="trigger"');
+    this.triggerInput = this.dropdown.querySelector('[slot="trigger"]');
 
     this.inputList = [...this.dropdown.querySelectorAll(this.inputTag._$litStatic$)];
 
@@ -24894,70 +25305,152 @@ class AuroDatePicker extends LitElement {
     this.monthFirst = this.format.indexOf('mm') < this.format.indexOf('yyyy');
   }
 
+  // layout render methods
+  // ------------------------------------
+
+  /**
+   * Base wrapper for the datepicker layout - every layout follows this same structure
+   * with minor variations in DOM structure.
+   * @param {import("lit").TemplateResult} content - The content to be rendered inside the base layout.
+   * @return {import("lit").TemplateResult}
+   * @private
+   */
+  _renderBaseLayout(content) {
+    return html$1`
+      <div
+        part="wrapper">
+        <div class="accents left">
+          calendar icon
+        </div>
+        <div class="mainContent">
+          ${content}
+        </div>
+        <div class="accents right">
+          error and/or close icon here :)
+        </div>
+      </div>
+      <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
+        help text here (see combobox for example)
+      </div>
+    `;
+  }
+
+  /**
+   * Renders the emphasized layout for the datepicker.
+   * @private
+   * @return {import("lit").TemplateResult}
+   */
+  renderEmphasizedLayout() {
+    return html$1`
+      <div
+        part="wrapper">
+        <div class="accents left">
+          calendar icon
+        </div>
+        <div class="mainContent">
+          ${this.renderTempInputs()}
+        </div>
+        <div class="accents right">
+          error and/or close icon here :)
+        </div>
+      </div>
+      <div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
+        help text here (see combobox for example)
+      </div>
+    `;
+  }
+
+  renderLayoutFromAttributes() {
+    switch (this.layout) {
+      case 'emphasized':
+        return this.renderEmphasizedLayout();
+      default:
+        // TODO: remove when all base layouts are implemented and instead return classic
+        return html$1`
+          <p>Please implement layout "${this.layout}" for datepicker</p>
+        `;
+    }
+  }
+
+  renderTempInputs() {
+    return html$1`
+      <${this.inputTag}
+        id="${this.generateRandomString(12)}"
+        bordered
+        class="dateFrom"
+        ?onDark="${this.onDark}"
+        ?required="${this.required}"
+        noValidate
+        type="date"
+        .format="${this.format}"
+        .max="${this.maxDate}"
+        .min="${this.minDate}"
+        setCustomValidity="${this.setCustomValidity}"
+        setCustomValidityCustomError="${this.setCustomValidityCustomError}"
+        setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
+        setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
+        setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
+        ?disabled="${this.disabled}"
+        inputmode="${ifDefined(this.inputmode)}"
+        part="input">
+        <span slot="label"><slot name="fromLabel"></slot></span>
+      </${this.inputTag}>
+      ${this.range ? html$1`
+        <${this.inputTag}
+          id="${this.generateRandomString(12)}"
+          bordered
+          class="dateTo"
+          ?onDark="${this.onDark}"
+          ?required="${this.required}"
+          noValidate
+          type="date"
+          .format="${this.format}"
+          .max="${this.maxDate}"
+          .min="${this.minDate}"
+          setCustomValidity="${this.setCustomValidity}"
+          setCustomValidityCustomError="${this.setCustomValidityCustomError}"
+          setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
+          setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
+          setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
+          ?disabled="${this.disabled}"
+          part="input">
+          <span slot="label"><slot name="toLabel"></slot></span>
+        </${this.inputTag}>
+      ` : undefined}`;
+  }
+
+  // ------------------------------------
+  // end of layout render methods
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
+    // Base HTML render() handles dropdown and calendar bib
     return html$1`
-      <div class="outerWrapper">
+      <div>
         <${this.dropdownTag}
-          for="dropdownMenu"
-          fluid
-          bordered
-          rounded
+          ?autoPlacement="${this.autoPlacement}"
           ?onDark="${this.onDark}"
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
-          disableEventShow
+          ?noFlip="${this.noFlip}"
           .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
-          .placement="${this.placement}"
+          .layout="${this.layout}"
           .offset="${this.offset}"
-          ?autoPlacement="${this.autoPlacement}"
-          ?noFlip="${this.noFlip}"
-          part="dropdown">
+          .placement="${this.placement}"
+          .shape="${this.shape}"
+          .size="${this.size}"
+          bordered
+          disableEventShow
+          fluid
+          for="dropdownMenu"
+          part="dropdown"
+          rounded
+          simple
+        >
           <div slot="trigger" class="dpTriggerContent" part="trigger">
-            <${this.inputTag}
-              id="${this.generateRandomString(12)}"
-              bordered
-              class="dateFrom"
-              ?onDark="${this.onDark}"
-              ?required="${this.required}"
-              noValidate
-              type="date"
-              .format="${this.format}"
-              .max="${this.maxDate}"
-              .min="${this.minDate}"
-              setCustomValidity="${this.setCustomValidity}"
-              setCustomValidityCustomError="${this.setCustomValidityCustomError}"
-              setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
-              setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
-              setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
-              ?disabled="${this.disabled}"
-              inputmode="${ifDefined(this.inputmode)}"
-              part="input">
-              <span slot="label"><slot name="fromLabel"></slot></span>
-            </${this.inputTag}>
-            ${this.range ? html$1`
-              <${this.inputTag}
-                id="${this.generateRandomString(12)}"
-                bordered
-                class="dateTo"
-                ?onDark="${this.onDark}"
-                ?required="${this.required}"
-                noValidate
-                type="date"
-                .format="${this.format}"
-                .max="${this.maxDate}"
-                .min="${this.minDate}"
-                setCustomValidity="${this.setCustomValidity}"
-                setCustomValidityCustomError="${this.setCustomValidityCustomError}"
-                setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
-                setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
-                setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
-                ?disabled="${this.disabled}"
-                part="input">
-                <span slot="label"><slot name="toLabel"></slot></span>
-              </${this.inputTag}>
-            ` : undefined}
+            ${this.renderLayoutFromAttributes()}
           </div>
+
           <div class="calendarWrapper" part="calendarWrapper">
             <auro-formkit-calendar
               ?largeFullscreenHeadline="${this.largeFullscreenHeadline}"