@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

package/components/select/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/select/demo/readme.md

@@ -18,6 +18,7 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Select
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
@@ -27,7 +28,15 @@ The following sections are editable by making changes to the following files:
 <!-- 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 -->
 
+## Select Use Cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+See description.
+<!-- 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 -->
 
@@ -40,30 +49,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-select> automatically
-import '@aurodesignsystem/auro-formkit/auro-select';
-```
-
-#### Custom Registration
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroSelect.register('custom-select')` method on the component class and pass in a unique name.
-
-```javascript
-// Import the class only
-import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
-
-// Register with a custom name if desired
-AuroSelect.register('custom-select');
-```
-
-#### TypeScript Module Resolution
+### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
@@ -76,37 +62,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-select>
-  <span slot="ariaLabel.bib.close">Close Popup</span>
-  <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Select Example</span>
-  <auro-menu>
-    <auro-menuoption value="stops">Stops</auro-menuoption>
-    <auro-menuoption value="price">Price</auro-menuoption>
-    <auro-menuoption value="duration">Duration</auro-menuoption>
-    <auro-menuoption value="departure">Departure</auro-menuoption>
-    <auro-menuoption value="arrival">Arrival</auro-menuoption>
-    <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-  </auro-menu>
-</auro-select>
-```
-<!-- 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.
@@ -116,19 +75,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-select use cases
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./docs/partials/useCases.md -->
-See description.
-<!-- 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 -->
@@ -142,4 +89,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 { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
+
+// Register with a custom name if desired
+AuroSelect.register('custom-select');
+```
+
+This will create a new custom element `<custom-select>` that behaves exactly like `<auro-select>`, allowing both to coexist on the same page without interfering with each other.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <custom-select placeholder="Placeholder Text">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Label</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </custom-select>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```html
+  <custom-select placeholder="Placeholder Text">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Label</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </custom-select>
+```
+</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

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

@@ -1,5 +1,6 @@
 /**
- * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
+ * The `auro-select` element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
+ * @customElement auro-select
  *
  * @slot - Default slot for the menu content.
  * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
@@ -12,21 +13,24 @@
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
  * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
- *
  * @csspart dropdownTrigger - Apply CSS to the trigger content container.
  * @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
- * @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
+ * @csspart dropdownSize - Apply size styles to the dropdown bib (height, width, maxHeight, maxWidth only).
  * @csspart helpText - Apply CSS to the help text.
  */
 export class AuroSelect extends AuroElement {
     static get properties(): {
         /**
          * Defines whether the component will be on lighter or darker backgrounds.
-         * @property {'default', 'inverse'}
+         * @type {'default' | 'inverse'}
          * @default 'default'
          */
-        appearance: {
-            type: StringConstructor;
+        appearance: "default" | "inverse";
+        /**
+         * If declared, bib's position will be automatically calculated where to appear.
+         */
+        autoPlacement: {
+            type: BooleanConstructor;
             reflect: boolean;
         };
         /**
@@ -37,24 +41,23 @@ export class AuroSelect extends AuroElement {
             reflect: boolean;
         };
         /**
-         * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
+         * When attribute is present, element shows disabled state.
          */
-        forceDisplayValue: {
+        disabled: {
             type: BooleanConstructor;
             reflect: boolean;
         };
         /**
-         * If declared, bib's position will be automatically calculated where to appear.
-         * @default false
+         * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
          */
-        autoPlacement: {
-            type: BooleanConstructor;
+        error: {
+            type: StringConstructor;
             reflect: boolean;
         };
         /**
-         * When attribute is present, element shows disabled state.
+         * If declared, make the width of the bib match the width of the content, rather than the trigger.
          */
-        disabled: {
+        flexMenuWidth: {
             type: BooleanConstructor;
             reflect: boolean;
         };
@@ -66,36 +69,42 @@ export class AuroSelect extends AuroElement {
             reflect: boolean;
         };
         /**
-         * @private
+         * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
          */
-        isPopoverVisible: {
+        forceDisplayValue: {
             type: BooleanConstructor;
             reflect: boolean;
         };
         /**
-         * If declared, the popover and trigger will be set to the same width.
+         * Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+         *
+         * When expanded, the dropdown will automatically display in fullscreen mode
+         * if the screen size is equal to or smaller than the selected breakpoint.
+         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
+         * @default 'sm'
          */
-        matchWidth: {
+        fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
+        /**
+         * @private
+         */
+        hasDisplayValueContent: {
             type: BooleanConstructor;
             reflect: boolean;
+            attribute: boolean;
         };
         /**
-         * The name for the select element.
+         * @private
          */
-        name: {
-            type: StringConstructor;
+        hasFocus: {
+            type: BooleanConstructor;
             reflect: boolean;
+            attribute: 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.
-         *
-         * 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
+         * @private
          */
-        fullscreenBreakpoint: {
-            type: StringConstructor;
+        isPopoverVisible: {
+            type: BooleanConstructor;
             reflect: boolean;
         };
         /**
@@ -107,26 +116,45 @@ export class AuroSelect extends AuroElement {
             reflect: boolean;
         };
         /**
-         * When true, checkmark on selected option will no longer be present.
+         * Determines the overall layout of the select component.
+         * @type {'classic' | 'emphasized' | 'snowflake'}
+         * @default 'classic'
          */
-        noCheckmark: {
+        layout: "classic" | "emphasized" | "snowflake";
+        /**
+         * If declared, the popover and trigger will be set to the same width.
+         */
+        matchWidth: {
             type: BooleanConstructor;
             reflect: boolean;
         };
         /**
-         * If declared, the bib will NOT flip to an alternate position
-         * when there isn't enough space in the specified `placement`.
-         * @default false
+         * Sets multi-select mode, allowing multiple options to be selected at once.
          */
-        noFlip: {
+        multiSelect: {
             type: BooleanConstructor;
             reflect: boolean;
+            attribute: string;
         };
         /**
-         * If set, the dropdown will shift its position to avoid being cut off by the viewport.
-         * @default false
+         * The name for the select element.
          */
-        shift: {
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * When true, checkmark on selected option will no longer be present.
+         */
+        noCheckmark: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, the bib will NOT flip to an alternate position
+         * when there isn't enough space in the specified `placement`.
+         */
+        noFlip: {
             type: BooleanConstructor;
             reflect: boolean;
         };
@@ -146,30 +174,24 @@ export class AuroSelect extends AuroElement {
             reflect: boolean;
         };
         /**
-         * DEPRECATED - use `appearance` instead.
+         * DEPRECATED - use `appearance="inverse"` instead.
          */
         onDark: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * @private
+         */
+        options: {
+            type: ArrayConstructor;
+            state: boolean;
+        };
         /**
          * Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
          * @type {HTMLElement|Array<HTMLElement>}
          */
         optionSelected: HTMLElement | Array<HTMLElement>;
-        /**
-         * 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;
-            reflect: boolean;
-        };
         /**
          * Define custom placeholder text.
          */
@@ -177,6 +199,12 @@ export class AuroSelect extends AuroElement {
             type: StringConstructor;
             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";
         /**
          * Populates the `required` attribute on the element. Used for client-side validation.
          */
@@ -184,13 +212,6 @@ export class AuroSelect extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        /**
-         * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
-         */
-        error: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
         /**
          * Sets a custom help text message to display for all validityStates.
          */
@@ -210,57 +231,45 @@ export class AuroSelect extends AuroElement {
             type: StringConstructor;
         };
         /**
-         * Specifies the `validityState` this element is in.
+         * Determines the shape of the dropdown bib.
+         * @type {'classic' | 'pill' | 'pill-left' | 'pill-right' | 'snowflake'}
          */
-        validity: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Value selected for the component.
-         */
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
+        shape: "classic" | "pill" | "pill-left" | "pill-right" | "snowflake";
         /**
-         * Sets multi-select mode, allowing multiple options to be selected at once.
+         * If set, the dropdown will shift its position to avoid being cut off by the viewport.
          */
-        multiSelect: {
+        shift: {
             type: BooleanConstructor;
             reflect: boolean;
-            attribute: string;
         };
         /**
-         * Indicates whether the input is in a dirty state (has been interacted with).
-         * @type {boolean}
-         * @default false
-         * @private
+         * Determines the size of the dropdown bib. Only the `emphasized` layout supports size=`xl`, while all other layouts support size=`lg`.
+         * @type {'lg' | 'xl'}
          */
-        touched: boolean;
+        size: "lg" | "xl";
         /**
+         * Indicates whether the input is in a dirty state (has been interacted with).
          * @private
          */
-        hasFocus: {
+        touched: {
             type: BooleanConstructor;
             reflect: boolean;
             attribute: boolean;
         };
         /**
-         * @private
+         * Specifies the `validityState` this element is in.
          */
-        hasDisplayValueContent: {
-            type: BooleanConstructor;
+        validity: {
+            type: StringConstructor;
             reflect: boolean;
-            attribute: boolean;
         };
         /**
-         * @private
+         * Value selected for the component.
          */
-        options: {
-            type: ArrayConstructor;
-            state: boolean;
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
         };
     };
     static get styles(): import("lit").CSSResult[];
@@ -320,7 +329,7 @@ export class AuroSelect extends AuroElement {
      * @private
      * @returns {void} Internal defaults.
      */
-    private privateDefaults;
+    private _initializeDefaults;
     appearance: string;
     value: any;
     fullscreenBreakpoint: string;