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

package/components/dropdown/demo/api.md

@@ -11,32 +11,34 @@ The `auro-dropdown` element provides a way to place content in a bib that can be
 |---------------------------|---------------------------|--------------------------------------------------|------------------|--------------------------------------------------|
 | `a11yRole`                |                           | `string`                                         |                  | The value for the role attribute of the trigger element. |
 | `appearance`              | `appearance`              | `'default' \| 'inverse'`                         | "'default'"      | Defines whether the component will be on lighter or darker backgrounds. |
-| `autoPlacement`           | `autoPlacement`           | `boolean`                                        |                  | If declared, bib's position will be automatically calculated where to appear. |
+| `autoPlacement`           | `autoplacement`           | `boolean`                                        |                  | If declared, bib's position will be automatically calculated where to appear. |
 | `chevron`                 | `chevron`                 | `boolean`                                        |                  | If declared, the dropdown displays a chevron on the right. |
-| `desktopModal`            | `desktopModal`            | `boolean`                                        |                  | If declared, the dropdown will behave as a modal dialog when in a desktop viewport size. |
-| `disableEventShow`        | `disableEventShow`        | `boolean`                                        |                  | If declared, the dropdown will only show by calling the API .show() public method. |
-| `disableKeyboardHandling` | `disableKeyboardHandling` | `boolean`                                        |                  | If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior. |
+| `desktopModal`            | `desktopmodal`            | `boolean`                                        |                  | If declared, the dropdown will behave as a modal dialog when in a desktop viewport size. |
+| `disableEventShow`        | `disableeventshow`        | `boolean`                                        |                  | If declared, the dropdown will only show by calling the API .show() public method. |
+| `disableKeyboardHandling` | `disablekeyboardhandling` | `boolean`                                        |                  | If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior. |
 | `disabled`                | `disabled`                | `boolean`                                        |                  | If declared, the dropdown is not interactive.    |
+| `dropdownWidth`           | `dropdownwidth`           | `number`                                         |                  | Sets the width of the dropdown bib in pixels.    |
 | `error`                   | `error`                   | `boolean`                                        |                  | If declared, will apply error UI to the dropdown. |
-| `errorMessage`            | `errorMessage`            | `string`                                         | "undefined"      | Contains the help text message for the current validity error. |
-| `focusShow`               | `focusShow`               | `boolean`                                        |                  | If declared, the bib will display when focus is applied to the trigger. |
-| `fullscreenBreakpoint`    | `fullscreenBreakpoint`    | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| `hoverToggle`             | `hoverToggle`             | `boolean`                                        |                  | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
-| `isBibFullscreen`         | `isBibFullscreen`         | `boolean`                                        | false            | If true, the dropdown bib is taking the fullscreen when it's open. |
+| `errorMessage`            | `errormessage`            | `string`                                         | "undefined"      | Contains the help text message for the current validity error. |
+| `focusShow`               | `focusshow`               | `boolean`                                        |                  | If declared, the bib will display when focus is applied to the trigger. |
+| `fullscreenBreakpoint`    | `fullscreenbreakpoint`    | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| `hoverToggle`             | `hovertoggle`             | `boolean`                                        |                  | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
+| `isBibFullscreen`         | `isbibfullscreen`         | `boolean`                                        | false            | If true, the dropdown bib is taking the fullscreen when it's open. |
 | `isPopoverVisible`        | `open`                    | `boolean`                                        | false            | If true, the dropdown bib is displayed.          |
 | `layout`                  | `layout`                  | `'classic' \| 'emphasized' \| 'snowflake'`       | "'classic'"      | Sets the layout of the dropdown.                 |
-| `matchWidth`              | `matchWidth`              | `boolean`                                        | false            | If declared, the popover and trigger will be set to the same width. |
-| `noFlip`                  | `noFlip`                  | `boolean`                                        |                  | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| `noHideOnThisFocusLoss`   | `noHideOnThisFocusLoss`   | `boolean`                                        | false            | If declared, the dropdown will not hide when moving focus outside the element. |
-| `noToggle`                | `noToggle`                | `boolean`                                        |                  | If declared, the trigger will only show the dropdown bib. |
+| `matchWidth`              | `matchwidth`              | `boolean`                                        | false            | If declared, the popover and trigger will be set to the same width. |
+| `noFlip`                  | `noflip`                  | `boolean`                                        |                  | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| `noHideOnThisFocusLoss`   | `nohideonthisfocusloss`   | `boolean`                                        | false            | If declared, the dropdown will not hide when moving focus outside the element. |
+| `noToggle`                | `notoggle`                | `boolean`                                        |                  | If declared, the trigger will only show the dropdown bib. |
 | `offset`                  | `offset`                  | `number`                                         | "0"              | Gap between the trigger element and bib.         |
-| `onDark`                  | `onDark`                  | `boolean`                                        |                  | DEPRECATED - use `appearance="inverse"` instead. |
-| `onSlotChange`            | `onSlotChange`            |                                                  |                  | If declared, and a function is set, that function will execute when the slot content is updated. |
+| `onDark`                  | `ondark`                  | `boolean`                                        |                  | DEPRECATED - use `appearance="inverse"` instead. |
+| `onSlotChange`            | `onslotchange`            |                                                  |                  | If declared, and a function is set, that function will execute when the slot content is updated. |
 | `placement`               | `placement`               | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. |
-| `shape`                   |                           |                                                  | "undefined"      |                                                  |
+| `shape`                   | `shape`                   | `'box' \| 'classic' \| 'pill' \| 'pill-left' \| 'pill-right' \| 'rounded' \| 'snowflake'` | "undefined"      | Sets the shape of the dropdown.                  |
 | `shift`                   | `shift`                   | `boolean`                                        |                  | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
 | `simple`                  | `simple`                  | `boolean`                                        |                  | If declared, applies a border around the trigger slot. |
-| `size`                    |                           |                                                  | "undefined"      |                                                  |
+| `size`                    | `size`                    | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`           | "undefined"      | Sets the size of the dropdown.                   |
+| `tabIndex`                | `tabindex`                | `number`                                         |                  | Sets the tabindex applied to the dropdown trigger for keyboard focus order. |
 
 ## Methods
 
@@ -49,11 +51,11 @@ The `auro-dropdown` element provides a way to place content in a bib that can be
 
 ## Events
 
-| Event                       | Type                                 | Description                                      |
-|-----------------------------|--------------------------------------|--------------------------------------------------|
-| `auroDropdown-idAdded`      | `Object<key  : 'id', value: string>` | Notifies consumers that the unique ID for the dropdown bib has been generated. |
-| `auroDropdown-toggled`      |                                      | Notifies that the visibility of the dropdown bib has changed. |
-| `auroDropdown-triggerClick` | `CustomEvent<any>`                   | Notifies that the trigger has been clicked.      |
+| Event                       | Type                          | Description                                      |
+|-----------------------------|-------------------------------|--------------------------------------------------|
+| `auroDropdown-idAdded`      | `CustomEvent<{ id: string }>` | Notifies consumers that the unique ID for the dropdown bib has been generated. |
+| `auroDropdown-toggled`      |                               | Notifies that the visibility of the dropdown bib has changed. |
+| `auroDropdown-triggerClick` | `CustomEvent<any>`            | Notifies that the trigger has been clicked.      |
 
 ## Slots
 
@@ -71,4 +73,5 @@ The `auro-dropdown` element provides a way to place content in a bib that can be
 | `helpText` | The helpText content container.                  |
 | `size`     | The size of the dropdown bib. (height, width, maxHeight, maxWidth only) |
 | `trigger`  | The trigger content container.                   |
+| `wrapper`  | The trigger wrapper element surrounding the trigger content and chevron. |
 <!-- AURO-GENERATED-CONTENT:END -->

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

@@ -3191,8 +3191,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 {
@@ -3207,9 +3210,17 @@ class AuroDropdownBib extends i {
 
     AuroLibraryRuntimeUtils$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() {
@@ -3228,6 +3239,7 @@ class AuroDropdownBib extends i {
        */
       isFullscreen: {
         type: Boolean,
+        attribute: 'isfullscreen',
         reflect: true
       },
 
@@ -3253,6 +3265,7 @@ class AuroDropdownBib extends i {
        */
       matchWidth: {
         type: Boolean,
+        attribute: 'matchwidth',
         reflect: true
       },
 
@@ -3268,11 +3281,18 @@ class AuroDropdownBib extends i {
        * 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
       },
 
@@ -3284,7 +3304,8 @@ class AuroDropdownBib extends i {
        * @private
        */
       dialogLabel: {
-        type: String
+        type: String,
+        attribute: 'dialoglabel'
       },
 
       /**
@@ -3295,7 +3316,8 @@ class AuroDropdownBib extends i {
        * @private
        */
       dialogRole: {
-        type: String
+        type: String,
+        attribute: 'dialogrole'
       },
 
       /**
@@ -3303,7 +3325,8 @@ class AuroDropdownBib extends i {
        * @private
        */
       hasActiveDescendant: {
-        type: Boolean
+        type: Boolean,
+        attribute: 'hasactivedescendant'
       }
     };
   }
@@ -3654,6 +3677,8 @@ class AuroHelpText extends i {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -3674,8 +3699,8 @@ class AuroHelpText extends i {
     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: {
@@ -3688,6 +3713,7 @@ class AuroHelpText extends i {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -3695,6 +3721,7 @@ class AuroHelpText extends i {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -3710,6 +3737,7 @@ class AuroHelpText extends i {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -3780,39 +3808,39 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202608261850';
+var formkitVersion = '202608291822';
 
+/**
+ * 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 {
   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.
     };
   }
 
@@ -3898,6 +3926,7 @@ class AuroElement extends i {
  * @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.
@@ -3922,7 +3951,7 @@ class AuroDropdown extends AuroElement {
 
     /**
      * 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
@@ -4091,7 +4120,7 @@ class AuroDropdown extends AuroElement {
   /**
    * 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() {
@@ -4188,6 +4217,7 @@ class AuroDropdown extends AuroElement {
        */
       autoPlacement: {
         type: Boolean,
+        attribute: 'autoplacement',
         reflect: true
       },
 
@@ -4196,6 +4226,7 @@ class AuroDropdown extends AuroElement {
        */
       desktopModal: {
         type: Boolean,
+        attribute: 'desktopmodal',
         reflect: true
       },
 
@@ -4204,6 +4235,7 @@ class AuroDropdown extends AuroElement {
        */
       disableEventShow: {
         type: Boolean,
+        attribute: 'disableeventshow',
         reflect: true
       },
 
@@ -4237,14 +4269,16 @@ class AuroDropdown extends AuroElement {
        */
       disableKeyboardHandling: {
         type: Boolean,
+        attribute: 'disablekeyboardhandling',
         reflect: true
       },
 
       /**
-       * @private
+       * Sets the width of the dropdown bib in pixels.
        */
       dropdownWidth: {
-        type: Number
+        type: Number,
+        attribute: 'dropdownwidth'
       },
 
       /**
@@ -4269,7 +4303,8 @@ class AuroDropdown extends AuroElement {
        * Contains the help text message for the current validity error.
        */
       errorMessage: {
-        type: String
+        type: String,
+        attribute: 'errormessage'
       },
 
       /**
@@ -4277,6 +4312,7 @@ class AuroDropdown extends AuroElement {
        */
       focusShow: {
         type: Boolean,
+        attribute: 'focusshow',
         reflect: true
       },
 
@@ -4294,6 +4330,7 @@ class AuroDropdown extends AuroElement {
        */
       isBibFullscreen: {
         type: Boolean,
+        attribute: 'isbibfullscreen',
         reflect: true
       },
 
@@ -4302,6 +4339,7 @@ class AuroDropdown extends AuroElement {
        */
       hoverToggle: {
         type: Boolean,
+        attribute: 'hovertoggle',
         reflect: true
       },
 
@@ -4309,7 +4347,8 @@ class AuroDropdown extends AuroElement {
        * @private
        */
       hasTriggerContent: {
-        type: Boolean
+        type: Boolean,
+        attribute: 'hastriggercontent'
       },
 
       /**
@@ -4322,6 +4361,7 @@ class AuroDropdown extends AuroElement {
        */
       fullscreenBreakpoint: {
         type: String,
+        attribute: "fullscreenbreakpoint",
         reflect: true
       },
 
@@ -4332,6 +4372,27 @@ class AuroDropdown extends AuroElement {
        */
       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
       },
 
@@ -4341,6 +4402,7 @@ class AuroDropdown extends AuroElement {
        */
       parentBorder: {
         type: Boolean,
+        attribute: 'parentborder',
         reflect: true
       },
 
@@ -4349,6 +4411,7 @@ class AuroDropdown extends AuroElement {
        */
       matchWidth: {
         type: Boolean,
+        attribute: 'matchwidth',
         reflect: true
       },
 
@@ -4358,6 +4421,7 @@ class AuroDropdown extends AuroElement {
        */
       noFlip: {
         type: Boolean,
+        attribute: 'noflip',
         reflect: true
       },
 
@@ -4374,6 +4438,7 @@ class AuroDropdown extends AuroElement {
        */
       noHideOnThisFocusLoss: {
         type: Boolean,
+        attribute: 'nohideonthisfocusloss',
         reflect: true
       },
 
@@ -4382,6 +4447,7 @@ class AuroDropdown extends AuroElement {
        */
       noToggle: {
         type: Boolean,
+        attribute: 'notoggle',
         reflect: true
       },
 
@@ -4399,6 +4465,7 @@ class AuroDropdown extends AuroElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -4407,6 +4474,7 @@ class AuroDropdown extends AuroElement {
        */
       onSlotChange: {
         type: Function,
+        attribute: 'onslotchange',
         reflect: false
       },
 
@@ -4421,10 +4489,11 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * @private
+       * Sets the tabindex applied to the dropdown trigger for keyboard focus order.
        */
       tabIndex: {
-        type: Number
+        type: Number,
+        attribute: 'tabindex'
       },
 
       /**
@@ -4648,7 +4717,7 @@ class AuroDropdown extends AuroElement {
     /**
      * @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}}));