@aurodesignsystem-dev/auro-formkit 0.0.0-pr1594.2 → 0.0.0-pr1595.1

package/components/datepicker/demo/customize.min.js

@@ -11761,6 +11761,14 @@ function isBlackoutTimestamp(dateTs, disabledDays, blackoutDates) {
 
 /* eslint-disable curly, max-lines, no-underscore-dangle, no-magic-numbers, no-underscore-dangle, max-params, no-extra-parens, arrow-parens, max-lines, line-comment-position, no-inline-comments, lit/binding-positions, lit/no-invalid-html */
 
+/**
+ * The `auro-calendar-cell` component renders a single selectable day button within a calendar month grid.
+ *
+ * @event calendar-cell-activate - Notifies that this cell has been activated via click or tap.
+ * @event date-is-hovered - Notifies that this cell's date is being hovered.
+ * @event calendar-cell-focused - Notifies that this cell's button has received focus.
+ * @csspart dateSlot - Use for customizing the style of the date slot content container.
+ */
 class AuroCalendarCell extends i$1 {
   constructor() {
     super();
@@ -11773,6 +11781,8 @@ class AuroCalendarCell extends i$1 {
     this.min = null;
     this.max = null;
     this.disabled = false;
+
+    /** @type {number[]} */
     this.disabledDays = [];
     this.isCurrentDate = false;
     this._locale = null;
@@ -11796,31 +11806,107 @@ class AuroCalendarCell extends i$1 {
   static get properties() {
     return {
       // ...super.properties,
+
+      /**
+       * The day object for this cell, containing its Unix timestamp (`date`) and day-of-month title.
+       */
       day:           { type: Object },
+
+      /**
+       * Whether this cell's date is currently selected.
+       */
       selected:      { type: Boolean },
-      dateTo:        { type: String },
-      dateFrom:      { type: String },
+
+      /**
+       * The end (return) date of the selected range as a Unix-timestamp string.
+       */
+      dateTo:        {
+        type: String,
+        attribute: 'dateto'
+      },
+
+      /**
+       * The start (depart) date of the selected range as a Unix-timestamp string.
+       */
+      dateFrom:      {
+        type: String,
+        attribute: 'datefrom'
+      },
+
+      /**
+       * The month this cell belongs to.
+       */
       month:         { type: String },
+
+      /**
+       * The minimum selectable date as a Unix timestamp.
+       */
       min:           { type: Number },
+
+      /**
+       * The maximum selectable date as a Unix timestamp.
+       */
       max:           { type: Number },
+
+      /**
+       * Whether this cell is disabled because its date falls outside the min/max range.
+       */
       disabled:      {
         type: Boolean,
         reflect: true
       },
+
       /**
+       * Legacy array of Unix-timestamp dates that cannot be selected.
        * @deprecated Propagated from the legacy `auro-calendar.disabledDays`
        * Unix-timestamp array. The cell honors it for backward compatibility
        * (see the divergence-check fallback inside `isBlackout`), but
        * consumers should migrate to `auro-datepicker.blackoutDates`
        * (YYYY-MM-DD ISO strings). The calendar emits a one-time
        * deprecation warning the first time a non-empty value is observed.
+       * @type {number[]}
+       */
+      disabledDays:  {
+        type: Array,
+        attribute: 'disableddays'
+      },
+
+      /**
+       * Whether this cell represents the current date (today).
+       */
+      isCurrentDate: {
+        type: Boolean,
+        attribute: 'iscurrentdate'
+      },
+
+      /**
+       * The BCP 47 locale tag used to format the cell's date.
        */
-      disabledDays:  { type: Array },
-      isCurrentDate: { type: Boolean },
       locale:        { type: String },
-      dateStr:       { type: String },
-      renderForDateSlot: { type: Boolean },
-      hasPopoverContent: { type: Boolean }
+
+      /**
+       * The cell's date formatted as a `YYYY_MM_DD` slot-name string.
+       */
+      dateStr:       {
+        type: String,
+        attribute: 'datestr'
+      },
+
+      /**
+       * Whether to render the numerical date off-center to leave room below for date slot content.
+       */
+      renderForDateSlot: {
+        type: Boolean,
+        attribute: 'renderfordateslot'
+      },
+
+      /**
+       * Whether this cell has popover slot content to display.
+       */
+      hasPopoverContent: {
+        type: Boolean,
+        attribute: 'haspopovercontent'
+      }
     };
   }
 
@@ -12677,6 +12763,11 @@ const getWeekdayNames = (locale, weekday) => {
 };
 
 
+/**
+ * The `auro-calendar-month` component renders a single localized month grid of selectable day cells within the calendar.
+ * @event hovered-date-changed - Notifies that the date currently hovered within the month grid has changed.
+ * @event calendar-month-mouseleave - Notifies that the mouse has left the month's date grid so the range hover preview can be cleared.
+ */
 class AuroCalendarMonth extends RangeDatepickerCalendar {
   static get styles() {
     return [
@@ -12691,10 +12782,11 @@ class AuroCalendarMonth extends RangeDatepickerCalendar {
     return {
 
       /**
-       * @private
+       * When set, the month name is displayed before the year in the header.
        */
       monthFirst: {
         type: Boolean,
+        attribute: 'monthfirst',
         reflect: true
       },
 
@@ -12703,14 +12795,17 @@ class AuroCalendarMonth extends RangeDatepickerCalendar {
        * As wc-range-datepicker expects a `locale` prop, we use `localeCode` to avoid conflicts.
        */
       localeCode: {
-        type: String
+        type: String,
+        attribute: 'localecode'
       },
 
       /**
        * Names of all 12 months. When omitted, names are derived from `localeCode`.
+       * @type {string[]}
        */
       monthNames: {
-        type: Array
+        type: Array,
+        attribute: 'monthnames'
       }
     };
   }
@@ -13552,6 +13647,9 @@ var headerVersion = '5.0.1';
  * @slot subheader - Slot for the subheader content.
  * @slot footer - Slot for the footer content.
  * @slot ariaLabel.close - Slot for the close button aria-label.
+ * @csspart bibtemplate - The outermost bibtemplate container element.
+ * @event close-click - Notifies when the close button is clicked.
+ * @event auro-bibtemplate-connected - Notifies that the bibtemplate has connected to the DOM, passing a reference to the element in the event detail.
  */
 class AuroBibtemplate extends i$1 {
 
@@ -13591,10 +13689,19 @@ class AuroBibtemplate extends i$1 {
   // function to define props used within the scope of this component
   static get properties() {
     return {
+
+      /**
+       * If declared, the bibtemplate renders in fullscreen mode, exposing the header, subheader, and footer regions.
+       */
       isFullscreen: {
         type: Boolean,
+        attribute: 'isfullscreen',
         reflect: true
       },
+
+      /**
+       * If declared, the fullscreen headline renders using the larger display heading style.
+       */
       large: {
         type: Boolean,
         reflect: true
@@ -13605,6 +13712,7 @@ class AuroBibtemplate extends i$1 {
        */
       showFooter: {
         type: Boolean,
+        attribute: 'showfooter',
         reflect: true
       }
     };
@@ -13717,7 +13825,7 @@ class AuroBibtemplate extends i$1 {
   }
 }
 
-var formkitVersion$2 = '202608261850';
+var formkitVersion$2 = '202608300032';
 
 let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$4 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
 `,u$6=i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
@@ -13783,8 +13891,10 @@ var buttonVersion$1 = '12.3.2';
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
+ * The `auro-calendar` component renders the calendar month(s) shown inside the datepicker dropdown and manages date selection, range preview, and keyboard navigation.
  * @event auroCalendar-dateSelected - Notifies that a date has been selected in the calendar.
  * @event auroCalendar-monthChanged - Notifies that the visible calendar month(s) have changed.
+ * @event narrow-changedProperties - Notifies that the calendar's narrow (mobile) layout state has changed.
  */
 class AuroCalendar extends RangeDatepicker {
   constructor() {
@@ -13859,6 +13969,10 @@ class AuroCalendar extends RangeDatepicker {
     // Initialize the backing field directly so the constructor's default
     // empty array doesn't trigger the deprecation warning. Assignments from
     // consumers still route through the setter below.
+    /**
+     * @private
+     * @type {number[]}
+     */
     this._disabledDays = [];
 
     /**
@@ -13867,7 +13981,9 @@ class AuroCalendar extends RangeDatepicker {
     this.numCalendars = undefined;
 
     /**
+     * Captured light-DOM slot nodes, keyed by slot name, forwarded into the bib.
      * @private
+     * @type {Record<string, Node[]>}
      */
     this.slots = {};
 
@@ -13946,6 +14062,7 @@ class AuroCalendar extends RangeDatepicker {
        */
       calendarEndMonth: {
         type: String,
+        attribute: 'calendarendmonth',
         reflect: true
       },
 
@@ -13954,6 +14071,7 @@ class AuroCalendar extends RangeDatepicker {
        */
       calendarStartMonth: {
         type: String,
+        attribute: 'calendarstartmonth',
         reflect: true
       },
 
@@ -13962,6 +14080,7 @@ class AuroCalendar extends RangeDatepicker {
        */
       centralDate: {
         type: String,
+        attribute: 'centraldate',
         reflect: true
       },
 
@@ -13969,19 +14088,22 @@ class AuroCalendar extends RangeDatepicker {
        * The starting date of the selected range.
        */
       dateFrom: {
-        type: String
+        type: String,
+        attribute: 'datefrom'
       },
 
       /**
        * The ending date of the selected range.
        */
       dateTo: {
-        type: String
+        type: String,
+        attribute: 'dateto'
       },
 
       /**
        * Dropdown element that contains the calendar.
        * @private
+       * @type {HTMLElement}
        */
       dropdown: {
         type: Object
@@ -13992,6 +14114,7 @@ class AuroCalendar extends RangeDatepicker {
        */
       isFullscreen: {
         type: Boolean,
+        attribute: 'isfullscreen',
         reflect: true
       },
 
@@ -14001,6 +14124,7 @@ class AuroCalendar extends RangeDatepicker {
        */
       largeFullscreenHeadline: {
         type: Boolean,
+        attribute: 'largefullscreenheadline',
         reflect: true
       },
 
@@ -14009,6 +14133,7 @@ class AuroCalendar extends RangeDatepicker {
        */
       maxDate: {
         type: String,
+        attribute: 'maxdate',
         reflect: true
       },
 
@@ -14017,6 +14142,7 @@ class AuroCalendar extends RangeDatepicker {
        */
       minDate: {
         type: String,
+        attribute: 'mindate',
         reflect: true
       },
 
@@ -14026,6 +14152,7 @@ class AuroCalendar extends RangeDatepicker {
        */
       mobileBreakpoint: {
         type: Number,
+        attribute: 'mobilebreakpoint',
         reflect: false
       },
 
@@ -14035,7 +14162,8 @@ class AuroCalendar extends RangeDatepicker {
        * @private
        */
       monthFirst: {
-        type: Boolean
+        type: Boolean,
+        attribute: 'monthfirst'
       },
 
       /**
@@ -14043,7 +14171,8 @@ class AuroCalendar extends RangeDatepicker {
        * @private
        */
       numCalendars: {
-        type: Number
+        type: Number,
+        attribute: 'numcalendars'
       },
 
       /**
@@ -14059,14 +14188,17 @@ class AuroCalendar extends RangeDatepicker {
        * as wc-range-datepicker expects a `locale` prop, we use `localeCode` to avoid conflicts and pass the locale down to calendar-month elements.
        */
       localeCode: {
-        type: String
+        type: String,
+        attribute: 'localecode'
       },
 
       /**
        * Names of all 12 months. When omitted, names are derived from `localeCode`.
+       * @type {string[]}
        */
       monthNames: {
-        type: Array
+        type: Array,
+        attribute: 'monthnames'
       }
     };
   }
@@ -18883,8 +19015,11 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
 ];
 
 /**
+ * The `auro-dropdownbib` element renders the dropdown's bib as a dialog/popover container and manages its fullscreen and modal display.
  * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
  * @csspart bibContainer - Apply css to the bib container.
+ * @event auro-dropdownbib-connected - Notifies that the dropdown bib has connected to the DOM, passing a reference to the element in the event detail.
+ * @event auro-bib-cancel - Notifies that the bib was cancelled (e.g. via the ESC key) so parent components can close it.
  */
 
 class AuroDropdownBib extends i$1 {
@@ -18899,9 +19034,17 @@ class AuroDropdownBib extends i$1 {
 
     AuroLibraryRuntimeUtils$1$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
 
-    this.shape = "rounded";
     this.matchWidth = false;
     this.hasActiveDescendant = false;
+
+    this.initializeArchitectureDefaults();
+  }
+
+  // The `shape` default is set in a helper (not the constructor body) so the CEM
+  // analyzer keeps its `@type` union instead of inferring `string` from a
+  // constructor-literal assignment. See AlaskaAirlines/discussions#653.
+  initializeArchitectureDefaults() {
+    this.shape = "rounded";
   }
 
   static get styles() {
@@ -18920,6 +19063,7 @@ class AuroDropdownBib extends i$1 {
        */
       isFullscreen: {
         type: Boolean,
+        attribute: 'isfullscreen',
         reflect: true
       },
 
@@ -18945,6 +19089,7 @@ class AuroDropdownBib extends i$1 {
        */
       matchWidth: {
         type: Boolean,
+        attribute: 'matchwidth',
         reflect: true
       },
 
@@ -18960,11 +19105,18 @@ class AuroDropdownBib extends i$1 {
        * A reference to the associated bib template element.
        */
       bibTemplate: {
-        type: Object
+        type: Object,
+        attribute: 'bibtemplate'
       },
 
+      /**
+       * Sets the shape of the dropdown bib.
+       * @type {'box' | 'classic' | 'pill' | 'rounded' | 'snowflake'}
+       * @default 'rounded'
+       */
       shape: {
         type: String,
+        attribute: "shape",
         reflect: true
       },
 
@@ -18976,7 +19128,8 @@ class AuroDropdownBib extends i$1 {
        * @private
        */
       dialogLabel: {
-        type: String
+        type: String,
+        attribute: 'dialoglabel'
       },
 
       /**
@@ -18987,7 +19140,8 @@ class AuroDropdownBib extends i$1 {
        * @private
        */
       dialogRole: {
-        type: String
+        type: String,
+        attribute: 'dialogrole'
       },
 
       /**
@@ -18995,7 +19149,8 @@ class AuroDropdownBib extends i$1 {
        * @private
        */
       hasActiveDescendant: {
-        type: Boolean
+        type: Boolean,
+        attribute: 'hasactivedescendant'
       }
     };
   }
@@ -19346,6 +19501,8 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -19366,8 +19523,8 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
     return {
 
       /**
-       * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -19380,6 +19537,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -19387,6 +19545,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -19402,6 +19561,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -19472,39 +19632,39 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
   }
 };
 
-var formkitVersion$1 = '202608261850';
+var formkitVersion$1 = '202608300032';
 
+/**
+ * AuroElement is the shared base class for layout-aware Auro form components.
+ *
+ * It defines the common `layout`, `shape`, `size`, and `ondark` reactive
+ * properties and the architecture helpers (`renderLayout`, `resetShapeClasses`,
+ * `resetLayoutClasses`) that subclasses use to render a chosen layout and apply
+ * the matching `shape-*` / `layout-*` wrapper classes. Subclasses supply their
+ * own default and valid value set for `layout`, `shape`, and `size`.
+ */
 let AuroElement$2 = class AuroElement extends i$1 {
   static get properties() {
     return {
 
       /**
-       * Defines the language of an element.
-       * @default {'default'}
+       * When true, renders the component styled for use on a dark background.
        */
-      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
       }
+
+      // NOTE: `layout`, `shape`, and `size` are intentionally NOT declared here.
+      // Their valid value sets differ per component, and the CEM analyzer roots
+      // an inherited property's `type` in the class that declares it — a base
+      // declaration would force every subclass's `@type` to be discarded and
+      // emitted as plain `string`. Each subclass declares its own `layout` /
+      // `shape` / `size` with an exact `@type` union instead. AuroElement still
+      // consumes `this.layout` / `this.shape` / `this.size` in its render and
+      // architecture helpers below (subclasses guarantee the reactive props).
+      // See AlaskaAirlines/discussions#653.
     };
   }
 
@@ -19590,6 +19750,7 @@ let AuroElement$2 = class AuroElement extends i$1 {
  * @slot helpText - Defines the content of the helpText.
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
+ * @csspart wrapper - The trigger wrapper element surrounding the trigger content and chevron.
  * @csspart chevron - The collapsed/expanded state icon container.
  * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
@@ -19614,7 +19775,7 @@ class AuroDropdown extends AuroElement$2 {
 
     /**
      * When true, the dropdown skips its generic focus restoration on close.
-     * Set by consumers (e.g. combobox) that manage their own focus routing
+     * Set by consumers (for example combobox) that manage their own focus routing
      * via setClearBtnFocus / setInputFocus / keyboard strategy.
      * Separate from noHideOnThisFocusLoss (which controls auto-close behavior).
      * @private
@@ -19783,7 +19944,7 @@ class AuroDropdown extends AuroElement$2 {
   /**
    * Focus the trigger content. When the trigger wrapper itself is focusable
    * (has tabindex), focus it directly. Otherwise, focus the first focusable
-   * element slotted into the trigger slot (e.g. the auro-input).
+   * element slotted into the trigger slot (for example the auro-input).
    * @private
    */
   focusTrigger() {
@@ -19880,6 +20041,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       autoPlacement: {
         type: Boolean,
+        attribute: 'autoplacement',
         reflect: true
       },
 
@@ -19888,6 +20050,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       desktopModal: {
         type: Boolean,
+        attribute: 'desktopmodal',
         reflect: true
       },
 
@@ -19896,6 +20059,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       disableEventShow: {
         type: Boolean,
+        attribute: 'disableeventshow',
         reflect: true
       },
 
@@ -19929,14 +20093,16 @@ class AuroDropdown extends AuroElement$2 {
        */
       disableKeyboardHandling: {
         type: Boolean,
+        attribute: 'disablekeyboardhandling',
         reflect: true
       },
 
       /**
-       * @private
+       * Sets the width of the dropdown bib in pixels.
        */
       dropdownWidth: {
-        type: Number
+        type: Number,
+        attribute: 'dropdownwidth'
       },
 
       /**
@@ -19961,7 +20127,8 @@ class AuroDropdown extends AuroElement$2 {
        * Contains the help text message for the current validity error.
        */
       errorMessage: {
-        type: String
+        type: String,
+        attribute: 'errormessage'
       },
 
       /**
@@ -19969,6 +20136,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       focusShow: {
         type: Boolean,
+        attribute: 'focusshow',
         reflect: true
       },
 
@@ -19986,6 +20154,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       isBibFullscreen: {
         type: Boolean,
+        attribute: 'isbibfullscreen',
         reflect: true
       },
 
@@ -19994,6 +20163,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       hoverToggle: {
         type: Boolean,
+        attribute: 'hovertoggle',
         reflect: true
       },
 
@@ -20001,7 +20171,8 @@ class AuroDropdown extends AuroElement$2 {
        * @private
        */
       hasTriggerContent: {
-        type: Boolean
+        type: Boolean,
+        attribute: false
       },
 
       /**
@@ -20014,6 +20185,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       fullscreenBreakpoint: {
         type: String,
+        attribute: "fullscreenbreakpoint",
         reflect: true
       },
 
@@ -20024,6 +20196,27 @@ class AuroDropdown extends AuroElement$2 {
        */
       layout: {
         type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      /**
+       * Sets the shape of the dropdown.
+       * @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the dropdown.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       */
+      size: {
+        type: String,
+        attribute: "size",
         reflect: true
       },
 
@@ -20033,6 +20226,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       parentBorder: {
         type: Boolean,
+        attribute: 'parentborder',
         reflect: true
       },
 
@@ -20041,6 +20235,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       matchWidth: {
         type: Boolean,
+        attribute: 'matchwidth',
         reflect: true
       },
 
@@ -20050,6 +20245,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       noFlip: {
         type: Boolean,
+        attribute: 'noflip',
         reflect: true
       },
 
@@ -20066,6 +20262,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       noHideOnThisFocusLoss: {
         type: Boolean,
+        attribute: 'nohideonthisfocusloss',
         reflect: true
       },
 
@@ -20074,6 +20271,7 @@ class AuroDropdown extends AuroElement$2 {
        */
       noToggle: {
         type: Boolean,
+        attribute: 'notoggle',
         reflect: true
       },
 
@@ -20091,14 +20289,17 @@ class AuroDropdown extends AuroElement$2 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
       /**
        *  If declared, and a function is set, that function will execute when the slot content is updated.
+       * @type {() => void}
        */
       onSlotChange: {
         type: Function,
+        attribute: 'onslotchange',
         reflect: false
       },
 
@@ -20113,10 +20314,11 @@ class AuroDropdown extends AuroElement$2 {
       },
 
       /**
-       * @private
+       * Sets the tabindex applied to the dropdown trigger for keyboard focus order.
        */
       tabIndex: {
-        type: Number
+        type: Number,
+        attribute: 'tabindex'
       },
 
       /**
@@ -20340,7 +20542,7 @@ class AuroDropdown extends AuroElement$2 {
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.
      * @event auroDropdown-idAdded
-     * @type {Object<key: 'id', value: string>} - The ID of the dropdown bib element.
+     * @type {CustomEvent<{ id: string }>} - Detail carries the generated ID of the dropdown bib element.
      */
     this.dispatchEvent(new CustomEvent('auroDropdown-idAdded', {detail: {id: this.floater.element.id}}));
 
@@ -25489,37 +25691,37 @@ class AuroFormValidation {
   }
 }
 
+/**
+ * AuroElement is the shared base class for layout-aware Auro form components.
+ *
+ * It defines the common `layout`, `shape`, `size`, and `ondark` reactive
+ * properties and the architecture helpers (`renderLayout`, `resetShapeClasses`,
+ * `resetLayoutClasses`) that subclasses use to render a chosen layout and apply
+ * the matching `shape-*` / `layout-*` wrapper classes. Subclasses supply their
+ * own default and valid value set for `layout`, `shape`, and `size`.
+ */
 let AuroElement$1 = class AuroElement extends i$1 {
   static get properties() {
     return {
 
       /**
-       * Defines the language of an element.
-       * @default {'default'}
+       * When true, renders the component styled for use on a dark background.
        */
-      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
       }
+
+      // NOTE: `layout`, `shape`, and `size` are intentionally NOT declared here.
+      // Their valid value sets differ per component, and the CEM analyzer roots
+      // an inherited property's `type` in the class that declares it — a base
+      // declaration would force every subclass's `@type` to be discarded and
+      // emitted as plain `string`. Each subclass declares its own `layout` /
+      // `shape` / `size` with an exact `@type` union instead. AuroElement still
+      // consumes `this.layout` / `this.shape` / `this.size` in its render and
+      // architecture helpers below (subclasses guarantee the reactive props).
+      // See AlaskaAirlines/discussions#653.
     };
   }
 
@@ -31486,6 +31688,7 @@ class DomHandler {
  * Base class for auro-input component that provides core input functionality.
  * @event input - Event fires when the value of an `auro-input` has been changed.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
+ * @event auroInput-validityChange - Notifies that the `validity` state of the input has changed.
  */
 class BaseInput extends AuroElement$1 {
 
@@ -31516,7 +31719,10 @@ class BaseInput extends AuroElement$1 {
     // during its own update cycle sees a populated util instance.
     this.activeLabel = false;
 
-    /** @private */
+    /**
+     * @private
+     * @type {string[]}
+     */
     this.allowedInputTypes = [
       "text",
       "number",
@@ -31525,9 +31731,14 @@ class BaseInput extends AuroElement$1 {
       "credit-card",
       "tel"
     ];
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
 
-    /** @private */
+    /**
+     * @private
+     * @type {Record<string, string>}
+     */
     this.dateFormatMap = {
       'mm/dd/yyyy': 'dateMMDDYYYY',
       'dd/mm/yyyy': 'dateDDMMYYYY',
@@ -31558,7 +31769,6 @@ class BaseInput extends AuroElement$1 {
 
     /** @private */
     this.label = 'Input label is undefined';
-    this.layout = 'classic';
     this.locale = 'en-US';
     this._format = undefined;
 
@@ -31574,17 +31784,18 @@ class BaseInput extends AuroElement$1 {
     this.setCustomValidityForType = undefined;
     // Credit Card is intentionally excluded — its mask manages the cursor
     // itself, and listing it here caused cursor placement issues in Safari.
-    /** @private */
+    /**
+     * @private
+     * @type {string[]}
+     */
     this.setSelectionInputTypes = [
       "text",
       "password",
       "email"
     ];
-    this.shape = 'classic';
 
     /** @private */
     this.showPassword = false;
-    this.size = 'lg';
     this.touched = false;
 
     /** @private */
@@ -31602,6 +31813,24 @@ class BaseInput extends AuroElement$1 {
     /** @private */
     this.validationCCLength = undefined;
     this.value = undefined;
+
+    this.initializeArchitectureDefaults();
+  }
+
+  /**
+   * Sets the default `layout`, `shape`, and `size` values.
+   *
+   * These are assigned in a helper method rather than the constructor body so
+   * the CEM analyzer keeps their `@type` string-literal unions (a literal
+   * assignment in the constructor would make the analyzer infer `string` and
+   * override the union — see AlaskaAirlines/discussions#653, gotcha 1).
+   * @private
+   * @returns {void}
+   */
+  initializeArchitectureDefaults() {
+    this.layout = 'classic';
+    this.shape = 'classic';
+    this.size = 'lg';
   }
 
   // function to define props used within the scope of this component
@@ -31609,11 +31838,45 @@ class BaseInput extends AuroElement$1 {
     return {
       ...super.properties,
 
+      /**
+       * Sets the layout variant of the input.
+       * @type {'classic' | 'emphasized' | 'emphasized-left' | 'emphasized-right' | 'snowflake' | 'snowflake-left' | 'snowflake-right'}
+       * @default 'classic'
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      /**
+       * Sets the shape of the input.
+       * @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
+       * @default 'classic'
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the input.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       * @default 'lg'
+       */
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
       /**
        * The value for the role attribute.
        */
       a11yRole: {
         type: String,
+        attribute: 'a11yrole',
         reflect: true
       },
 
@@ -31622,6 +31885,7 @@ class BaseInput extends AuroElement$1 {
        */
       a11yControls: {
         type: String,
+        attribute: 'a11ycontrols',
         reflect: true
       },
 
@@ -31630,6 +31894,7 @@ class BaseInput extends AuroElement$1 {
        */
       a11yExpanded: {
         type: Boolean,
+        attribute: 'a11yexpanded',
         reflect: true
       },
 
@@ -31639,6 +31904,7 @@ class BaseInput extends AuroElement$1 {
        */
       a11yActivedescendant: {
         type: String,
+        attribute: 'a11yactivedescendant',
         reflect: true
       },
 
@@ -31649,6 +31915,7 @@ class BaseInput extends AuroElement$1 {
        */
       activeLabel: {
         type: Boolean,
+        attribute: 'activelabel',
         reflect: true
       },
 
@@ -31663,7 +31930,8 @@ class BaseInput extends AuroElement$1 {
       },
 
       /**
-       * An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters].
+       * An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+       * @type {'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'}
        */
       autocapitalize: {
         type: String,
@@ -31680,6 +31948,7 @@ class BaseInput extends AuroElement$1 {
 
       /**
        * When set to `off`, stops iOS from auto-correcting words when typed into a text box.
+       * @type {'on' | 'off'}
        */
       autocorrect: {
         type: String,
@@ -31690,7 +31959,8 @@ class BaseInput extends AuroElement$1 {
        * Custom help text message for email type validity.
        */
       customValidityTypeEmail: {
-        type: String
+        type: String,
+        attribute: 'customvaliditytypeemail'
       },
 
       /**
@@ -31706,6 +31976,7 @@ class BaseInput extends AuroElement$1 {
        */
       dvInputOnly: {
         type: Boolean,
+        attribute: 'dvinputonly',
         reflect: true
       },
 
@@ -31721,7 +31992,8 @@ class BaseInput extends AuroElement$1 {
        * Contains the help text message for the current validity error.
        */
       errorMessage: {
-        type: String
+        type: String,
+        attribute: 'errormessage'
       },
 
       /**
@@ -31757,6 +32029,7 @@ class BaseInput extends AuroElement$1 {
        */
       hideLabelVisually: {
         type: Boolean,
+        attribute: 'hidelabelvisually',
         reflect: true
       },
 
@@ -31823,6 +32096,7 @@ class BaseInput extends AuroElement$1 {
        */
       maxLength: {
         type: Number,
+        attribute: 'maxlength',
         reflect: true
       },
 
@@ -31838,6 +32112,7 @@ class BaseInput extends AuroElement$1 {
        */
       minLength: {
         type: Number,
+        attribute: 'minlength',
         reflect: true
       },
 
@@ -31863,6 +32138,7 @@ class BaseInput extends AuroElement$1 {
        */
       noValidate: {
         type: Boolean,
+        attribute: 'novalidate',
         reflect: true
       },
 
@@ -31871,6 +32147,7 @@ class BaseInput extends AuroElement$1 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -31910,77 +32187,88 @@ class BaseInput extends AuroElement$1 {
        * Sets a custom help text message to display for all validityStates.
        */
       setCustomValidity: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidity'
       },
 
       /**
        * Custom help text message to display when validity = `badInput`.
        */
       setCustomValidityBadInput: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditybadinput'
       },
 
       /**
        * Custom help text message to display when validity = `customError`.
        */
       setCustomValidityCustomError: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditycustomerror'
       },
 
       /**
        * Custom help text message to display for the declared element `type` and type validity fails.
        */
       setCustomValidityForType: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityfortype'
       },
 
       /**
        * Custom help text message to display when validity = `patternMismatch`.
        */
       setCustomValidityPatternMismatch: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditypatternmismatch'
       },
 
       /**
        * Custom help text message to display when validity = `rangeOverflow`.
        */
       setCustomValidityRangeOverflow: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityrangeoverflow'
       },
 
       /**
        * Custom help text message to display when validity = `rangeUnderflow`.
        */
       setCustomValidityRangeUnderflow: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityrangeunderflow'
       },
 
       /**
        * Custom help text message to display when validity = `tooLong`.
        */
       setCustomValidityTooLong: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditytoolong'
       },
 
       /**
        * Custom help text message to display when validity = `tooShort`.
        */
       setCustomValidityTooShort: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditytooshort'
       },
 
       /**
        * Custom help text message to display when validity = `valueMissing`.
        */
       setCustomValidityValueMissing: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityvaluemissing'
       },
 
       /**
        * @ignore
        */
       showPassword: {
-        state: true
+        state: true,
+        attribute: false
       },
 
       /**
@@ -31992,7 +32280,8 @@ class BaseInput extends AuroElement$1 {
       },
 
       /**
-       * An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
+       * An enumerated attribute defines whether the element may be checked for spelling errors. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
+       * @type {'true' | 'false'}
        */
       spellcheck: {
         type: String,
@@ -32023,7 +32312,8 @@ class BaseInput extends AuroElement$1 {
        * Sets validation mode to re-eval with each input.
        */
       validateOnInput: {
-        type: Boolean
+        type: Boolean,
+        attribute: 'validateoninput'
       },
 
       /**
@@ -33077,6 +33367,8 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -33097,8 +33389,8 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
     return {
 
       /**
-       * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -33111,6 +33403,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -33118,6 +33411,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -33133,6 +33427,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -33203,7 +33498,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
   }
 };
 
-var formkitVersion = '202608261850';
+var formkitVersion = '202608300032';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -34137,6 +34432,8 @@ class AuroHelpText extends i$1 {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -34157,8 +34454,8 @@ class AuroHelpText extends i$1 {
     return {
 
       /**
-       * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -34171,6 +34468,7 @@ class AuroHelpText extends i$1 {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -34178,6 +34476,7 @@ class AuroHelpText extends i$1 {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -34193,6 +34492,7 @@ class AuroHelpText extends i$1 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -34263,37 +34563,37 @@ class AuroHelpText extends i$1 {
   }
 }
 
+/**
+ * AuroElement is the shared base class for layout-aware Auro form components.
+ *
+ * It defines the common `layout`, `shape`, `size`, and `ondark` reactive
+ * properties and the architecture helpers (`renderLayout`, `resetShapeClasses`,
+ * `resetLayoutClasses`) that subclasses use to render a chosen layout and apply
+ * the matching `shape-*` / `layout-*` wrapper classes. Subclasses supply their
+ * own default and valid value set for `layout`, `shape`, and `size`.
+ */
 class AuroElement extends i$1 {
   static get properties() {
     return {
 
       /**
-       * Defines the language of an element.
-       * @default {'default'}
+       * When true, renders the component styled for use on a dark background.
        */
-      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
       }
+
+      // NOTE: `layout`, `shape`, and `size` are intentionally NOT declared here.
+      // Their valid value sets differ per component, and the CEM analyzer roots
+      // an inherited property's `type` in the class that declares it — a base
+      // declaration would force every subclass's `@type` to be discarded and
+      // emitted as plain `string`. Each subclass declares its own `layout` /
+      // `shape` / `size` with an exact `@type` union instead. AuroElement still
+      // consumes `this.layout` / `this.shape` / `this.size` in its render and
+      // architecture helpers below (subclasses guarantee the reactive props).
+      // See AlaskaAirlines/discussions#653.
     };
   }
 
@@ -34711,6 +35011,10 @@ const datepickerKeyboardStrategy = {
  * @slot popover_YYYY_MM_DD - Defines the content to display in the auro-calendar-cell popover for the specified date.
  * @csspart dropdown - Use for customizing the style of the dropdown.
  * @csspart trigger - Use for customizing the style of the datepicker trigger.
+ * @csspart wrapper - Use for customizing the style of the trigger content wrapper.
+ * @csspart mainLabel - Use for customizing the style of the main label in the snowflake layout.
+ * @csspart inputSection - Use for customizing the style of the input section within the trigger.
+ * @csspart accentIcon - Use for customizing the style of the leading calendar accent icon.
  * @csspart input - Use for customizing the style of the datepicker inputs.
  * @csspart calendarWrapper - Use for customizing the style of the calendar container.
  * @csspart calendar - Use for customizing the style of the calendar.
@@ -34720,6 +35024,7 @@ const datepickerKeyboardStrategy = {
  * @event auroDatePicker-monthChanged - Notifies that the visible calendar month(s) have changed.
  * @event auroFormElement-validated - Notifies that the component value(s) have been validated.
  * @event auroDatePicker-newSlotContent - Notifies that new slot content has been added to the datepicker.
+ * @event input - Notifies that the datepicker's value has changed.
  */
 class AuroDatePicker extends AuroElement {
   static get shadowRootOptions() {
@@ -34750,6 +35055,7 @@ class AuroDatePicker extends AuroElement {
     // If `calendarStartDate` is set, use that as the central date. Otherwise, use the current date.
     this.calendarRenderUtil.updateCentralDate(this, this.calendarStartDateObject ?? new Date());
 
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.touched = false;
     this.disabled = false;
@@ -34763,6 +35069,8 @@ class AuroDatePicker extends AuroElement {
     this.rangeLabelInRange = 'in range';
     this.rangeLabelAfterRange = 'after range';
     this.rangeLabelEndPreview = 'previewing range end';
+
+    /** @type {string[]} */
     this.blackoutDates = [];
     this.blackoutLabel = 'unavailable';
     this.navLabelPrevMonth = 'Previous month';
@@ -34789,6 +35097,7 @@ class AuroDatePicker extends AuroElement {
 
     /**
      * @private
+     * @type {HTMLElement[]}
      */
     this.dateSlotContent = [];
 
@@ -34883,11 +35192,17 @@ class AuroDatePicker extends AuroElement {
      */
     this.handleClearClick = this.handleClearClick.bind(this);
 
-    // Layout Config
+    this.initializeArchitectureDefaults();
+  }
+
+  // Defaults for the inherited layout/shape/size architecture props are set in a
+  // helper (not the constructor body) so the CEM analyzer keeps their `@type`
+  // unions instead of inferring `string` from a constructor-literal assignment.
+  // See AlaskaAirlines/discussions#653.
+  initializeArchitectureDefaults() {
     this.layout = 'classic';
     this.shape = 'classic';
     this.size = 'lg';
-
   }
 
   // This function is to define props used within the scope of this component
@@ -34913,6 +35228,7 @@ class AuroDatePicker extends AuroElement {
        */
       autoPlacement: {
         type: Boolean,
+        attribute: "autoplacement",
         reflect: true
       },
 
@@ -34926,9 +35242,11 @@ class AuroDatePicker extends AuroElement {
        * `blackoutDates[i] = ...`, `blackoutDates.splice(...)`) will not
        * invalidate the cache and the new entries will be silently ignored.
        * To update, reassign the property: `el.blackoutDates = [...el.blackoutDates, '2024-12-25']`.
+       * @type {string[]}
        */
       blackoutDates: {
         type: Array,
+        attribute: 'blackoutdates',
         reflect: true
       },
 
@@ -34938,6 +35256,7 @@ class AuroDatePicker extends AuroElement {
        */
       blackoutLabel: {
         type: String,
+        attribute: 'blackoutlabel',
         reflect: true
       },
 
@@ -34946,6 +35265,7 @@ class AuroDatePicker extends AuroElement {
        */
       calendarEndDate: {
         type: String,
+        attribute: 'calendarenddate',
         reflect: true
       },
 
@@ -34955,6 +35275,7 @@ class AuroDatePicker extends AuroElement {
        */
       calendarGridLabel: {
         type: String,
+        attribute: 'calendargridlabel',
         reflect: true
       },
 
@@ -34963,6 +35284,7 @@ class AuroDatePicker extends AuroElement {
        */
       calendarFocusDate: {
         type: String,
+        attribute: 'calendarfocusdate',
         reflect: true
       },
 
@@ -34971,6 +35293,7 @@ class AuroDatePicker extends AuroElement {
        */
       calendarStartDate: {
         type: String,
+        attribute: 'calendarstartdate',
         reflect: true
       },
 
@@ -34978,7 +35301,8 @@ class AuroDatePicker extends AuroElement {
        * The date that determines the currently visible month.
        */
       centralDate: {
-        type: String
+        type: String,
+        attribute: 'centraldate'
       },
 
       /**
@@ -34994,6 +35318,7 @@ class AuroDatePicker extends AuroElement {
        */
       dvInputOnly: {
         type: Boolean,
+        attribute: 'dvinputonly',
         reflect: true
       },
 
@@ -35031,6 +35356,7 @@ class AuroDatePicker extends AuroElement {
        */
       fullscreenBreakpoint: {
         type: String,
+        attribute: "fullscreenbreakpoint",
         reflect: true
       },
 
@@ -35039,11 +35365,13 @@ class AuroDatePicker extends AuroElement {
        */
       hasAllValues: {
         type: Boolean,
+        attribute: false,
         reflect: false
       },
 
       hasFocus: {
         type: Boolean,
+        attribute: false,
         reflect: false,
       },
 
@@ -35052,10 +35380,14 @@ class AuroDatePicker extends AuroElement {
        */
       hasValue: {
         type: Boolean,
+        attribute: false,
         reflect: false,
       },
 
-      /** Exposes inputmode attribute for input. */
+      /**
+       * Sets the `inputmode` attribute on the underlying input, hinting at the virtual keyboard to display.
+       * @type {'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'}
+       */
       inputmode: {
         type: String,
         attribute: true,
@@ -35068,6 +35400,7 @@ class AuroDatePicker extends AuroElement {
        */
       largeFullscreenHeadline: {
         type: Boolean,
+        attribute: 'largefullscreenheadline',
         reflect: true
       },
 
@@ -35078,6 +35411,29 @@ class AuroDatePicker extends AuroElement {
        */
       layout: {
         type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      /**
+       * Sets the shape of the datepicker.
+       * @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
+       * @default 'classic'
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the datepicker.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       * @default 'lg'
+       */
+      size: {
+        type: String,
+        attribute: "size",
         reflect: true
       },
 
@@ -35086,6 +35442,7 @@ class AuroDatePicker extends AuroElement {
        */
       maxDate: {
         type: String,
+        attribute: 'maxdate',
         reflect: true
       },
 
@@ -35094,22 +35451,26 @@ class AuroDatePicker extends AuroElement {
        */
       minDate: {
         type: String,
+        attribute: 'mindate',
         reflect: true
       },
 
       /**
-       * @private
+       * When set, the calendar displays the month before the year in the header.
        */
       monthFirst: {
-        type: Boolean
+        type: Boolean,
+        attribute: 'monthfirst'
       },
 
       /**
        * Names of all 12 months to render in the calendar.
        * When omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`).
+       * @type {string[]}
        */
       monthNames: {
-        type: Array
+        type: Array,
+        attribute: 'monthnames'
       },
 
       /**
@@ -35118,6 +35479,7 @@ class AuroDatePicker extends AuroElement {
        */
       navLabelNextMonth: {
         type: String,
+        attribute: 'navlabelnextmonth',
         reflect: true
       },
 
@@ -35127,6 +35489,7 @@ class AuroDatePicker extends AuroElement {
        */
       navLabelPrevMonth: {
         type: String,
+        attribute: 'navlabelprevmonth',
         reflect: true
       },
 
@@ -35136,6 +35499,7 @@ class AuroDatePicker extends AuroElement {
        */
       noFlip: {
         type: Boolean,
+        attribute: 'noflip',
         reflect: true
       },
 
@@ -35144,6 +35508,7 @@ class AuroDatePicker extends AuroElement {
        */
       noValidate: {
         type: Boolean,
+        attribute: 'novalidate',
         reflect: true
       },
 
@@ -35161,6 +35526,7 @@ class AuroDatePicker extends AuroElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -35179,6 +35545,7 @@ class AuroDatePicker extends AuroElement {
        */
       placeholderEndDate: {
         type: String,
+        attribute: 'placeholderenddate',
         reflect: true
       },
 
@@ -35209,6 +35576,7 @@ class AuroDatePicker extends AuroElement {
        */
       rangeLabelAfterRange: {
         type: String,
+        attribute: 'rangelabelafterrange',
         reflect: true
       },
 
@@ -35218,6 +35586,7 @@ class AuroDatePicker extends AuroElement {
        */
       rangeLabelBeforeRange: {
         type: String,
+        attribute: 'rangelabelbeforerange',
         reflect: true
       },
 
@@ -35227,6 +35596,7 @@ class AuroDatePicker extends AuroElement {
        */
       rangeLabelEnd: {
         type: String,
+        attribute: 'rangelabelend',
         reflect: true
       },
 
@@ -35238,6 +35608,7 @@ class AuroDatePicker extends AuroElement {
        */
       rangeLabelEndPreview: {
         type: String,
+        attribute: 'rangelabelendpreview',
         reflect: true
       },
 
@@ -35247,6 +35618,7 @@ class AuroDatePicker extends AuroElement {
        */
       rangeLabelInRange: {
         type: String,
+        attribute: 'rangelabelinrange',
         reflect: true
       },
 
@@ -35256,15 +35628,18 @@ class AuroDatePicker extends AuroElement {
        */
       rangeLabelStart: {
         type: String,
+        attribute: 'rangelabelstart',
         reflect: true
       },
 
       /**
        * Dates that the user should have for reference as part of their decision-making when selecting a date.
        * This should be a JSON string array of ISO date strings (`YYYY-MM-DD`).
+       * @type {string[]}
        */
       referenceDates: {
         type: Array,
+        attribute: 'referencedates',
         reflect: true
       },
 
@@ -35280,7 +35655,8 @@ class AuroDatePicker extends AuroElement {
        * Sets a custom help text message to display for all validityStates.
        */
       setCustomValidity: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidity'
       },
 
       /**
@@ -35288,28 +35664,32 @@ class AuroDatePicker extends AuroElement {
        * Also used as the validation message when a blackout date is typed into the input.
        */
       setCustomValidityCustomError: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditycustomerror'
       },
 
       /**
        * Custom help text message to display when validity = `rangeOverflow`.
        */
       setCustomValidityRangeOverflow: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityrangeoverflow'
       },
 
       /**
        * Custom help text message to display when validity = `rangeUnderflow`.
        */
       setCustomValidityRangeUnderflow: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityrangeunderflow'
       },
 
       /**
        * Custom help text message to display when validity = `valueMissing`.
        */
       setCustomValidityValueMissing: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityvaluemissing'
       },
 
       /**
@@ -35357,7 +35737,8 @@ class AuroDatePicker extends AuroElement {
        * Value selected for the second datepicker when using date range.
        */
       valueEnd: {
-        type: String
+        type: String,
+        attribute: 'valueend'
       }
     };
   }