@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

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

@@ -18,6 +18,7 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Counter
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the `auro-counter-group` to facilitate a collection of counters to add passenger types to a flight.
@@ -27,7 +28,18 @@ The `auro-counter` component is a ui element that enables a way to increment or
 <!-- 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 -->
 
+## Counter 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-counter` element should be used in situations where users may:
+
+* Need to input a numeric value within a defined range
+* Need a user-friendly interface for quantity selection
+<!-- 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 +52,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-counter> automatically
-import '@aurodesignsystem/auro-formkit/auro-counter';
-```
-
-#### Custom Registration
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroCounter.register('custom-counter')` method on the component class and pass in a unique name.
-
-```javascript
-// Import the class only
-import { AuroCounter } from '@aurodesignsystem/auro-formkit/auro-counter/class';
-
-// Register with a custom name if desired
-AuroCounter.register('custom-counter');
-```
-
-#### TypeScript Module Resolution
+### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
@@ -76,35 +65,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-counter-group>
-  <auro-counter>
-    Short label
-  </auro-counter>
-  <auro-counter>
-    Another short label
-  </auro-counter>
-  <auro-counter>
-    This is an example of the wrapping behavior for a long label
-  </auro-counter>
-</auro-counter-group>
-```
-<!-- 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.
@@ -114,22 +78,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-counter 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-counter` element should be used in situations where users may:
-
-* Need to input a numeric value within a defined range
-* Need a user-friendly interface for quantity selection
-<!-- 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 -->
@@ -143,4 +92,70 @@ 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 { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
+
+// Register with a custom name if desired
+AuroCounter.register('custom-counter');
+AuroCounterGroup.register('custom-counter-group');
+```
+
+This will create a new custom element `<custom-counter>` and `<custom-counter-group>` that behaves exactly like `<auro-counter>` and `<auro-counter-group>`, allowing both to coexist on the same page without interfering with each other.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <custom-counter-group>
+    <div slot="bib.fullscreen.headline">Passengers</div>
+    <div slot="label">Passengers</div>
+    <custom-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </custom-counter>
+    <custom-counter>
+      Children
+      <span slot="description">2-17 years</span>
+    </custom-counter>
+  </custom-counter-group>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```html
+  <custom-counter-group>
+    <div slot="bib.fullscreen.headline">Passengers</div>
+    <div slot="label">Passengers</div>
+    <custom-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </custom-counter>
+    <custom-counter>
+      Children
+      <span slot="description">2-17 years</span>
+    </custom-counter>
+  </custom-counter-group>
+
+```html
+  <custom-checkbox-group>
+    <span slot="legend">Form label goes here</span>
+    <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
+  </custom-checkbox-group>
+```
+</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/counter/dist/auro-counter-group.d.ts

@@ -1,11 +1,7 @@
 /**
- * Auro Counter Group is a group of counter components.
+ * The `auro-counter-group` element provides a flexible interface for grouping multiple counters, supporting validation, custom validity messages, and disabled states based on the group's value.
+ * @customElement auro-counter-group
  *
- * This web component provides a flexible interface for grouping multiple counters, supporting
- * validation, custom validity messages, and disabled states based on the group's value.
- *
- * @element auro-counter-group
- * @extends LitElement
  * @slot default - Slot for counter elements.
  * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline -  Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
@@ -13,20 +9,16 @@
  * @slot label - Dropdown label content. Only used when `isDropdown` is true.
  * @slot valueText - Dropdown value text display. Only used when `isDropdown` is true.
  * @slot helpText - Dropdown help text content. Only used when `isDropdown` is true.
- * @property {'classic'|'snowflake'} layout - Determines the layout style of the counter group when it is a dropdown. Options are 'classic' or 'snowflake'. Default is 'classic'.
  */
-export class AuroCounterGroup extends LitElement {
+export class AuroCounterGroup extends AuroElement {
     static get styles(): import("lit").CSSResult[];
     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;
-            reflect: boolean;
-        };
+        appearance: "default" | "inverse";
         /**
          * If declared, bib's position will be automatically calculated where to appear.
          * @default false
@@ -53,23 +45,26 @@ export class AuroCounterGroup extends LitElement {
             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.
+         * 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.
-         * @default sm
+         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
+         * @default 'sm'
          */
-        fullscreenBreakpoint: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
         /**
-         * Indicates if the counter group is displayed as a dropdown.
+         * If true, the counter group is displayed as a dropdown.
          */
         isDropdown: {
             type: BooleanConstructor;
         };
+        /**
+         * Determines the layout style of the counter group when it is a dropdown.
+         * @type {'classic' | 'snowflake'}
+         * @default 'classic'
+         */
+        layout: "classic" | "snowflake";
         /**
          * If declared, the dropdown will expand to the width of its parent container.
          * Otherwise, the dropdown width will be determined by its content.
@@ -103,7 +98,6 @@ export class AuroCounterGroup extends LitElement {
         /**
          * 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;
@@ -111,7 +105,6 @@ export class AuroCounterGroup extends LitElement {
         };
         /**
          * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-         * @default false
          */
         shift: {
             type: BooleanConstructor;
@@ -134,17 +127,10 @@ export class AuroCounterGroup extends LitElement {
         };
         /**
          * 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
+         * @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: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
         /**
          * The total value of the counters.
          */
@@ -176,7 +162,7 @@ export class AuroCounterGroup extends LitElement {
     };
     /**
      * Registers the custom element with the browser.
-     * @param {string} [name="auro-counter-group"] - Custom element name to register.
+     * @param {string} [name="auro-counter-group"] - The name of the element that you want to register.
      * @example
      * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
      */
@@ -386,7 +372,6 @@ export class AuroCounterGroup extends LitElement {
      */
     private renderLayoutClassic;
     shape: any;
-    layout: any;
     size: any;
     /**
      * Render the snowflake layout.
@@ -402,4 +387,4 @@ export class AuroCounterGroup extends LitElement {
      */
     private renderLayout;
 }
-import { LitElement } from "lit";
+import { AuroElement } from "../../layoutElement/src/auroElement.js";

package/components/counter/dist/auro-counter-wrapper.d.ts

@@ -1,11 +1,6 @@
 /**
- * Auro Counter Wrapper is a group of counter components.
+ * Wrapper element for auro-counter elements in an application to provide layout structure for multiple counters.
  *
- * This web component provides a flexible interface for grouping multiple counters, supporting
- * validation, custom validity messages, and disabled states based on the group's value.
- *
- * @element auro-counter-group
- * @extends LitElement
  * @slot Default - Slot for counter elements.
  */
 export class AuroCounterWrapper extends LitElement {

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

@@ -1,12 +1,8 @@
 /**
- * Auro Counter is a customizable counter component for user interface interactions.
+ * The `auro-counter` element provides a flexible counter interface with increment and decrement buttons, supporting optional sub-labels and disabled states.
+ * @customElement auro-counter
  *
- * This web component provides a flexible counter interface with increment and decrement buttons,
- * supporting optional sub-labels and disabled states.
- *
- * @element auro-counter
- * @extends LitElement
- * @slot - Main label content for the counter.
+ * @slot default - Main label content for the counter.
  * @slot ariaLabel.minus - Accessible label for the decrement button.
  * @slot ariaLabel.plus - Accessible label for the increment button.
  * @slot helpText - Help text content for the counter.
@@ -20,12 +16,13 @@ export class AuroCounter extends LitElement {
     static get properties(): any;
     /**
      * Registers the custom element with the browser.
-     * @param {string} [name="auro-counter"] - Custom element name to register.
+     * @param {string} [name="auro-counter"] - The name of the element that you want to register.
      * @example
      * AuroCounter.register("custom-counter") // registers <custom-counter/>
      */
     static register(name?: string): void;
     static get styles(): import("lit").CSSResult[];
+    _initializeDefaults(): void;
     appearance: string;
     defaultSlot: any;
     disabled: boolean;