@aurodesignsystem-dev/auro-formkit 0.0.0-pr1413.2 → 0.0.0-pr1419.0

package/components/checkbox/demo/readme.md

@@ -1,142 +0,0 @@
-<!--
-The README.md file is a compiled document. No edits should be made directly to this file.
-
-README.md is created by running `npm run build:docs`.
-
-This file is generated based on a template fetched from
-`../../docs/templates/componentReadmeTemplate.md`
-and copied to `./componentDocs/README.md` each time the docs are compiled.
-
-The following sections are editable by making changes to the following files:
-
-| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
-|------------------------|---------------------------------------------------|-------------------------------------|
-| Description            | Description of the component                      | `./docs/partials/description.md`    |
-| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
-| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
-| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
--->
-
-# Checkbox
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
-<!-- The below content is automatically added from ./docs/partials/description.md -->
-`<auro-checkbox>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of allowing users to select one or more options of a limited number of choices.
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
-<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
-<!-- 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 -->
-
-## Checkbox 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-checkbox>` element should be used in situations where users may:
-
-* Be filling out a form
-* Need to select one or more options
-<!-- 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 -->
-
-#### NPM Installation
-
-```shell
-$ npm i @aurodesignsystem/auro-formkit
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
-<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
-
-### TypeScript Module Resolution
-
-When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
-
-```json
-{
-    "compilerOptions": {
-        "moduleResolution": "bundler"
-    }
-}
-```
-
-This configuration enables proper module resolution for the component's TypeScript files.
-<!-- 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.
-
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-checkbox/+esm"></script>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Formkit Development
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
-<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
-
-### Filtering
-
-Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
-
-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 { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
-
-// Register with a custom name if desired
-AuroCheckbox.register('custom-checkbox');
-AuroCheckboxGroup.register('custom-checkbox-group');
-```
-
-This will create a new custom element `<custom-checkbox>` and `<custom-checkbox-group>` that behaves exactly like `<auro-checkbox>` and `<auro-checkbox-group>`, allowing both to coexist on the same page without interfering with each other.
-
-<div class="exampleWrapper exampleWrapper--flex">
-  <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>
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-```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/checkbox/dist/auro-checkbox-group.d.ts

@@ -1,176 +0,0 @@
-/**
- * The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
- * @customElement auro-checkbox-group
- *
- * @slot legend - Allows for the legend to be overridden.
- * @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
- * @slot helpText - Allows for the helper text to be overridden.
- * @slot default - The default slot for the checkbox items.
- * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
- */
-export class AuroCheckboxGroup extends LitElement {
-    static get styles(): import("lit").CSSResult[];
-    static get properties(): {
-        /**
-         * Defines whether the component will be on lighter or darker backgrounds.
-         * @type {'default' | 'inverse'}
-         * @default 'default'
-         */
-        appearance: "default" | "inverse";
-        /**
-         * If set, disables the checkbox group.
-         */
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
-         */
-        error: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If set, checkboxes will be aligned horizontally.
-         */
-        horizontal: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If set, disables auto-validation on blur.
-         */
-        noValidate: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * DEPRECATED - use `appearance="inverse"` instead.
-         */
-        onDark: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Populates the `required` attribute on the element. Used for client-side validation.
-         */
-        required: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Sets a custom help text message to display for all validityStates.
-         */
-        setCustomValidity: {
-            type: StringConstructor;
-        };
-        /**
-         * Custom help text message to display when validity = `customError`.
-         */
-        setCustomValidityCustomError: {
-            type: StringConstructor;
-        };
-        /**
-         * Custom help text message to display when validity = `valueMissing`.
-         */
-        setCustomValidityValueMissing: {
-            type: StringConstructor;
-        };
-        /**
-         * Specifies the `validityState` this element is in.
-         */
-        validity: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    /**
-     * This will register this element with the browser.
-     * @param {string} [name="auro-checkbox-group"] - The name of the element that you want to register.
-     *
-     * @example
-     * AuroCheckboxGroup.register("custom-checkbox-group") // this will register this element to <custom-checkbox-group/>
-     *
-     */
-    static register(name?: string): void;
-    _initializeDefaults(): void;
-    appearance: string;
-    validity: any;
-    disabled: any;
-    required: boolean;
-    horizontal: boolean;
-    onDark: boolean;
-    /**
-     * Indicates whether the checkbox group is in a dirty state (has been interacted with).
-     * @type {boolean}
-     * @default false
-     * @private
-     */
-    private touched;
-    /**
-     * @private
-     */
-    private value;
-    /**
-     * @private
-     */
-    private index;
-    /**
-     * @private
-     */
-    private maxNumber;
-    /**
-     * @private
-     */
-    private validation;
-    /**
-     * @private
-     */
-    private runtimeUtils;
-    /**
-     * @private
-     */
-    private helpTextTag;
-    /**
-     * Helper method to handle checkbox value changing.
-     * @private
-     * @param {String} value - The value of the checkbox.
-     * @param {Boolean} selected - The checked state of the checkbox.
-     * @returns {void}
-     */
-    private handleValueUpdate;
-    firstUpdated(): void;
-    focusWithin: boolean;
-    /**
-     * Helper method that handles the state of preselected checkboxes.
-     * @private
-     * @returns {void}
-     */
-    private handlePreselectedItems;
-    /**
-     * Helper method that handles the state of checkboxes.
-     * @private
-     * @returns {void}
-     */
-    private handleItems;
-    checkboxes: Element[];
-    /**
-     * Resets component to initial state.
-     * @returns {void}
-     */
-    reset(): void;
-    /**
-     * LitElement lifecycle method. Called after the DOM has been updated.
-     * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
-     * @returns {void}
-     */
-    updated(changedProperties: Map<string, any>): void;
-    /**
-     * Validates value.
-     * @param {boolean} [force=false] - Whether to force validation.
-     */
-    validate(force?: boolean): void;
-    render(): import("lit-html").TemplateResult;
-}
-import { LitElement } from 'lit';

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

@@ -1,209 +0,0 @@
-/**
- * The `auro-checkbox` element is for the purpose of allowing users to select one or more options of a limited number of choices.
- * @customElement auro-checkbox
- *
- * @csspart checkbox - apply css to a specific checkbox.
- * @csspart checkbox-input - apply css to a specific checkbox's input.
- * @csspart checkbox-label - apply css to a specific checkbox's label.
- *
- * @slot default - The default slot for the checkbox label.
- *
- * @fires {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
- * @fires {InputEvent} input - Notifies when when checked value is changed by user's interface.
- */
-export class AuroCheckbox extends LitElement {
-    static get styles(): import("lit").CSSResult[];
-    static get properties(): {
-        /**
-         * Defines whether the component will be on lighter or darker backgrounds.
-         * @type {'default' | 'inverse'}
-         * @default 'default'
-         */
-        appearance: "default" | "inverse";
-        /**
-         * If set to true, the checkbox will be filled with a checkmark.
-         */
-        checked: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If set to true, the checkbox will not be clickable.
-         */
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If set to true, the checkbox will be displayed with an error state.
-         */
-        error: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * The id global attribute defines an identifier (ID) which must be unique in the whole document.
-         */
-        id: {
-            type: StringConstructor;
-        };
-        /**
-         * The id for input node.
-         * @private
-         */
-        inputId: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * Accepts any string and is used to identify related checkboxes when submitting form data.
-         */
-        name: {
-            type: StringConstructor;
-        };
-        /**
-         * DEPRECATED - use `appearance="inverse"` instead.
-         */
-        onDark: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Indicates whether the checkbox has been interacted with.
-         * @private
-         */
-        touched: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * Sets the element's input value. Must be unique within an auro-checkbox-group element.
-         */
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * The tabindex attribute for the checkbox.
-         * @private
-         */
-        tabIndex: {
-            type: NumberConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        /**
-         * The aria-checked attribute for the checkbox.
-         * @private
-         */
-        ariaChecked: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        /**
-         * The aria-disabled attribute for the checkbox.
-         * @private
-         */
-        ariaDisabled: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        /**
-         * The ARIA role for the element. Must remain 'checkbox' for screen readers
-         * to correctly identify this as a checkbox control.
-         * @private
-         */
-        role: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    /**
-     * This will register this element with the browser.
-     * @param {string} [name="auro-checkbox"] - The name of element that you want to register to.
-     *
-     * @example
-     * AuroCheckbox.register("custom-checkbox") // this will register this element to <custom-checkbox/>
-     *
-     */
-    static register(name?: string): void;
-    _initializeDefaults(): void;
-    apperance: string;
-    checked: any;
-    disabled: boolean;
-    error: boolean;
-    onDark: boolean;
-    touched: boolean;
-    /**
-     * @private
-     */
-    private runtimeUtils;
-    /**
-     * Handles the change event for the checkbox input.
-     * Updates the checked state and dispatches a corresponding custom event.
-     * This custom event is only for the purpose of supporting IE.
-     * @private
-     * @param {Event} event - The change event from the checkbox input.
-     * @returns {void}
-     */
-    private handleChange;
-    /**
-     * Handles the input event for the checkbox input.
-     * Updates the checked state and dispatches a custom 'auroCheckbox-input' event.
-     * @private
-     * @param {Event} event - The input event from the checkbox input.
-     * @returns {void}
-     */
-    private handleInput;
-    /**
-     * Function to support @focusin event.
-     * @private
-     * @returns {void}
-     */
-    private handleFocusin;
-    /**
-     * Function to generate checkmark svg.
-     * @private
-     * @returns {HTMLElement}
-     */
-    private generateIconHtml;
-    dom: Document;
-    svg: ChildNode;
-    /**
-     * Resets component to initial state.
-     * @returns {void}
-     */
-    reset(): void;
-    /**
-     * Updates the aria-label based on slot content.
-     * @private
-     * @returns {void}
-     */
-    private updateAriaLabel;
-    firstUpdated(): void;
-    inputId: string;
-    /**
-     * Handles keydown event to toggle the checkbox with Space key.
-     * @private
-     * @param {KeyboardEvent} event - The keydown event from the checkbox input.
-     * @returns {void}
-     */
-    private handleKeyDown;
-    /**
-     * Updates ARIA attributes when properties change.
-     * @private
-     * @param {Map} changedProperties - Map of changed properties.
-     * @returns {void}
-     */
-    private updated;
-    /**
-     * @private
-     * @returns {HTMLElement}
-     */
-    private render;
-}
-import { LitElement } from "lit";

package/components/checkbox/dist/index.d.ts

@@ -1,3 +0,0 @@
-import { AuroCheckbox } from './auro-checkbox.js';
-import { AuroCheckboxGroup } from './auro-checkbox-group.js';
-export { AuroCheckbox, AuroCheckboxGroup };