@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

package/components/combobox/demo/readme.html

@@ -48,10 +48,9 @@
           Prism.highlightAll();
         })
     </script>
-    <script type="module">
-      import { initExamples } from "./index.min.js";
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
 
-      initExamples();
-    </script>
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
   </body>
 </html>

package/components/combobox/demo/readme.md

@@ -18,6 +18,7 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Combobox
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
@@ -29,7 +30,23 @@ By default, `auro-combobox` behaves as a suggestion list. This means any value m
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
+## Combobox Use Cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `<auro-combobox>` element should be used in situations where users may:
+
+* Search
+  * Airports: user looks for a specific airport by searching for the city name or airport code
+  * Site wide: user searches for a topic site wide and combobox makes suggestions on searchable results
+* Filter
+  * Options: user chooses filters for their search by using combobox
+* Select
+  * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34)
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Getting Started
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
@@ -42,30 +59,7 @@ $ npm i @aurodesignsystem/auro-formkit
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Import Options
-
-#### Automatic Registration
-
-For automatic registration, simply import the component:
-
-```javascript
-// Registers <auro-combobox> automatically
-import '@aurodesignsystem/auro-formkit/auro-combobox';
-```
-
-#### Custom Registration
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroCombobox.register('custom-combobox')` method on the component class and pass in a unique name.
-
-```javascript
-// Import the class only
-import { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
-
-// Register with a custom name if desired
-AuroCombobox.register('custom-combobox');
-```
-
-#### TypeScript Module Resolution
+### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
@@ -78,38 +72,10 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
 ```
 
 This configuration enables proper module resolution for the component's TypeScript files.
-<!-- AURO-GENERATED-CONTENT:END -->
-**Reference component in HTML**
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-combobox>
-  <span slot="ariaLabel.bib.close">Close combobox</span>
-  <span slot="ariaLabel.input.clear">Clear All</span>
-  <span slot="bib.fullscreen.headline">Bib Header</span>
-  <span slot="label">Name</span>
-  <auro-menu>
-    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
-    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
-    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
-    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
-    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
-    <auro-menuoption static nomatch>No matching option</auro-menuoption>
-  </auro-menu>
-</auro-combobox>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Design Token CSS Custom Property dependency
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install from CDN
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
@@ -119,27 +85,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## auro-combobox use cases
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The `<auro-combobox>` element should be used in situations where users may:
-
-* Search
-  * Airports: user looks for a specific airport by searching for the city name or airport code
-  * Site wide: user searches for a topic site wide and combobox makes suggestions on searchable results
-* Filter
-  * Options: user chooses filters for their search by using combobox
-* Select
-  * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34)
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Formkit development
+## Formkit Development
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
 <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
@@ -153,4 +99,60 @@ To only develop a single component, use the `--filter` flag:
 ```shell
 npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+
+## Custom Component Registration for Version Management
+
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
+
+When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
+
+However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
+
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
+
+```js
+// Import the class only
+import { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
+
+// Register with a custom name if desired
+AuroCombobox.register('custom-combobox');
+```
+
+This will create a new custom element `<custom-combobox>` that behaves exactly like `<auro-combobox>`, allowing both to coexist on the same page without interfering with each other.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <custom-combobox>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </custom-combobox>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```html
+  <custom-combobox>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </custom-combobox>
+```
+</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/combobox/dist/auro-combobox.d.ts

@@ -1,4 +1,7 @@
 /**
+ * The `auro-combobox` element provides users with a way to select an option from a list of filtered or suggested options based on user input.
+ * @customElement auro-combobox
+ *
  * @slot - Default slot for the menu content.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot ariaLabel.input.clear - Sets aria-label on clear button
@@ -16,7 +19,7 @@ export class AuroCombobox extends AuroElement {
     static get properties(): {
         /**
          * Defines whether the component will be on lighter or darker backgrounds.
-         * @property {'default', 'inverse'}
+         * @property {'default' | 'inverse'}
          * @default 'default'
          */
         appearance: {
@@ -25,7 +28,6 @@ export class AuroCombobox extends AuroElement {
         };
         /**
          * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
-         * @default false
          */
         autocomplete: {
             type: StringConstructor;
@@ -51,12 +53,10 @@ export class AuroCombobox extends AuroElement {
          * Sets the behavior of the combobox, "filter" or "suggestion".
          * "filter" requires the user to select an option from the menu.
          * "suggestion" allows the user to enter a value not present in the menu options.
-         * @default suggestion
+         * @type {'filter' | 'suggestion'}
+         * @default 'suggestion'
          */
-        behavior: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        behavior: "filter" | "suggestion";
         /**
          * When attribute is present auro-menu will apply check marks to selected options.
          */
@@ -116,8 +116,15 @@ export class AuroCombobox extends AuroElement {
             attribute: boolean;
             reflect: boolean;
         };
+        /**
+         * Sets the layout of the combobox.
+         * @type {'classic' | 'emphasized' | 'snowflake'}
+         * @default 'classic'
+         */
+        layout: "classic" | "emphasized" | "snowflake";
         /**
          * If declared, the popover and trigger will be set to the same width.
+         * @private
          */
         matchWidth: {
             type: BooleanConstructor;
@@ -133,7 +140,6 @@ export class AuroCombobox extends AuroElement {
         /**
          * If declared, the bib will NOT flip to an alternate position
          * when there isn't enough space in the specified `placement`.
-         * @default false
          */
         noFlip: {
             type: BooleanConstructor;
@@ -141,7 +147,6 @@ export class AuroCombobox extends AuroElement {
         };
         /**
          * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-         * @default false
          */
         shift: {
             type: BooleanConstructor;
@@ -163,7 +168,7 @@ export class AuroCombobox extends AuroElement {
             reflect: boolean;
         };
         /**
-         * DEPRECATED - use `appearance` instead.
+         * DEPRECATED - use `appearance="inverse"` instead.
          */
         onDark: {
             type: BooleanConstructor;
@@ -178,22 +183,17 @@ export class AuroCombobox extends AuroElement {
          * If declared, selecting a menu option will not change the input value. By doing so,
          * the current menu filter will be preserved and the user can continue from their last
          * filter state. It is recommended to use this in combination with the `displayValue` slot.
-         * @type {Boolean}
          */
-        persistInput: boolean;
-        /**
-         * Position where the bib should appear relative to the trigger.
-         * Accepted values:
-         * "top" | "right" | "bottom" | "left" |
-         * "bottom-start" | "top-start" | "top-end" |
-         * "right-start" | "right-end" | "bottom-end" |
-         * "left-start" | "left-end"
-         * @default bottom-start
-         */
-        placement: {
-            type: StringConstructor;
+        persistInput: {
+            type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * Position where the bib should appear relative to the trigger.
+         * @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
+         * @default 'bottom-start'
+         */
+        placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
         /**
          * Define custom placeholder text, only supported by date input formats.
          */
@@ -234,11 +234,13 @@ export class AuroCombobox extends AuroElement {
         };
         /**
          * Indicates whether the combobox is in a dirty state (has been interacted with).
-         * @type {boolean}
-         * @default false
          * @private
          */
-        touched: boolean;
+        touched: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
         /**
          * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
          */
@@ -247,7 +249,7 @@ export class AuroCombobox extends AuroElement {
             reflect: boolean;
         };
         /**
-         * Applies the defined value as the type attribute on auro-input.
+         * Applies the defined value as the type attribute on `auro-input`.
          */
         type: {
             type: StringConstructor;
@@ -282,17 +284,14 @@ export class AuroCombobox extends AuroElement {
             reflect: boolean;
         };
         /**
-         * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
-         * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+         * Defines the screen size breakpointat which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
          *
          * When expanded, the dropdown will automatically display in fullscreen mode
          * if the screen size is equal to or smaller than the selected breakpoint.
-         * @default sm
+         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
+         * @default 'sm'
          */
-        fullscreenBreakpoint: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
         /**
          * Specifies the currently active option.
          * @private
@@ -306,13 +305,18 @@ export class AuroCombobox extends AuroElement {
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
-     * @param {string} [name='auro-combobox'] - The name of element that you want to register to.
+     * @param {string} [name='auro-combobox'] - The name of the element that you want to register.
      *
      * @example
      * AuroCombobox.register('custom-combobox') // this will register this element to <custom-combobox/>
      *
      */
     static register(name?: string): void;
+    /**
+     * @private
+     * @returns {void} Internal defaults.
+     */
+    private _initializeDefaults;
     appearance: string;
     disabled: boolean;
     msgSelectionMissing: string;
@@ -336,11 +340,6 @@ export class AuroCombobox extends AuroElement {
     noFlip: boolean;
     shift: boolean;
     autoPlacement: boolean;
-    /**
-     * @private
-     * @returns {void} Internal defaults.
-     */
-    private privateDefaults;
     dropdownTag: any;
     bibtemplateTag: any;
     inputTag: any;
@@ -381,6 +380,7 @@ export class AuroCombobox extends AuroElement {
     private syncValuesAndStates;
     /**
      * Update displayValue or input.value, it's called when making a selection.
+     * @param {string} label - The label of the selected option.
      * @private
      */
     private updateTriggerTextDisplay;
@@ -500,7 +500,7 @@ export class AuroCombobox extends AuroElement {
      * @param {boolean} [force=false] - Whether to force validation.
      */
     validate(force?: boolean): void;
-    updated(changedProperties: any): void;
+    updated(changedProperties: any): Promise<void>;
     hasValue: boolean;
     /**
      * Applies slotted nodes to a target element with a new slot name.
@@ -526,4 +526,4 @@ export class AuroCombobox extends AuroElement {
     render(): import("lit-html").TemplateResult;
 }
 import { AuroElement } from '../../layoutElement/src/auroElement.js';
-import AuroFormValidation from '@auro-formkit/form-validation';
+import AuroFormValidation from '@aurodesignsystem/form-validation';