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

package/components/radio/demo/readme.md

@@ -1,141 +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`          |
--->
-
-# Radio
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
-<!-- The below content is automatically added from ./docs/partials/description.md -->
-`<auro-radio>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) that is rendered as a small circle, which is filled or highlighted when selected. Only one `<auro-radio>` component in a given `<auro-radio-group>` can be selected at the same time.
-<!-- 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 -->
-
-## Radio 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-radio>` element is designed to be a single component for the use of creating an input `type="radio"` with an associated `<label>` that meets all use case and accessibility standards.
-
-The following examples illustrate fully functional `<auro-radio>` elements wrapped with the `<auro-radio-group>` element. The `<auro-radio-group>` element is REQUIRED in order to mantain the relationship between individual `<auro-radio>` elements for functional radio button actions.
-
-**Note**: The `<auro-radio>` element is only for to for use as a set of two or more `<auro-radio>` elements within an `<auro-radio-group>` element.
-<!-- 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-radio/+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 { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';
-
-// Register with a custom name if desired
-AuroRadio.register('custom-radio');
-AuroRadioGroup.register('custom-radio-group');
-```
-
-This will create a new custom element `<custom-radio>` and `<custom-radio-group>` that behaves exactly like `<auro-radio>` and `<auro-radio-group>`, allowing both to coexist on the same page without interfering with each other.
-
-<div class="exampleWrapper exampleWrapper--flex">
-  <custom-radio-group>
-    <span slot="legend">Form label goes here</span>
-    <custom-radio id="customRadio1" label="Yes" name="radioDemo" value="yes"></custom-radio>
-    <custom-radio id="customRadio2" label="No" name="radioDemo" value="no"></custom-radio>
-    <custom-radio id="customRadio3" label="Maybe" name="radioDemo" value="maybe"></custom-radio>
-  </custom-radio-group>
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-```html
-  <custom-radio-group>
-    <span slot="legend">Form label goes here</span>
-    <custom-radio id="customRadio1" label="Yes" name="radioDemo" value="yes"></custom-radio>
-    <custom-radio id="customRadio2" label="No" name="radioDemo" value="no"></custom-radio>
-    <custom-radio id="customRadio3" label="Maybe" name="radioDemo" value="maybe"></custom-radio>
-  </custom-radio-group>
-```
-</auro-accordion>
-<!-- AURO-GENERATED-CONTENT:END -->

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

@@ -1,250 +0,0 @@
-/**
- * The `auro-radio-group` element is used to group a set `auro-radio` elements.
- * @customElement auro-radio-group
- *
- * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
- * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
- * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
- * @event auroFormElement-validated - Notifies that the element has been validated.
- * @event input - Notifies every time the value prop of the element is changed.
- */
-export class AuroRadioGroup 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 true, all radio buttons will be disabled.
-         */
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
-         */
-        error: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Indicates whether the legend slot is set or not.
-         * @private
-         */
-        hasLegend: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * If true, displays radio buttons horizontally.
-         */
-        horizontal: {
-            type: BooleanConstructor;
-        };
-        /**
-         * If true, disables auto-validation on blur.
-         */
-        noValidate: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * DEPRECATED - use `appearance="inverse"` instead.
-         */
-        onDark: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Specifies the current selected radio button.
-         */
-        optionSelected: {
-            type: ObjectConstructor;
-        };
-        /**
-         * 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;
-        };
-        /**
-         * Indicates whether the radio group is in a dirty state (has been interacted with).
-         * @private
-         */
-        touched: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * Specifies the `validityState` this element is in.
-         */
-        validity: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Specifies the current value of the selected radio button.
-         */
-        value: {
-            type: StringConstructor;
-        };
-    };
-    /**
-     * This will register this element with the browser.
-     * @param {string} [name="auro-radio-group"] - The name of the element that you want to register.
-     *
-     * @example
-     * AuroRadioGroup.register("custom-radio-group") // This will register this element to <custom-radio-group/>
-     *
-     */
-    static register(name?: string): void;
-    _initializeDefaults(): void;
-    appearance: string;
-    disabled: boolean;
-    horizontal: boolean;
-    required: boolean;
-    validity: any;
-    value: any;
-    optionSelected: EventTarget;
-    onDark: boolean;
-    touched: boolean;
-    hasLegend: boolean;
-    /**
-     * @private
-     */
-    private validation;
-    /**
-     * @private
-     */
-    private index;
-    /**
-     * @private
-     */
-    private max;
-    /**
-     * @private
-     */
-    private runtimeUtils;
-    /**
-     * @private
-     */
-    private helpTextTag;
-    firstUpdated(): void;
-    /**
-     * Method for handling of selection of a radio element.
-     * @private
-     * @param {Event} event - The trigger event tied to this function.
-     * @returns {void}
-     */
-    private handleSelection;
-    /**
-     * Method handles radio element blur.
-     * @private
-     * @returns {void}
-     */
-    private handleRadioBlur;
-    /**
-     * 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;
-    /**
-     * Resets component to initial state.
-     * @returns {void}
-     */
-    reset(): void;
-    /**
-     * Validates value.
-     * @param {boolean} [force=false] - Whether to force validation.
-     */
-    validate(force?: boolean): void;
-    /**
-     * Method handles the reset event from a radio element.
-     * @private
-     * @returns {void}
-     */
-    private resetRadio;
-    /**
-     * Method for handling the attributes of each radio input.
-     * @private
-     * @returns {void}
-     */
-    private handleItems;
-    items: Element[];
-    /**
-     * Method for handling slot content changes.
-     * @private
-     * @returns {void}
-     */
-    private handleSlotChange;
-    /**
-     * Method for handling legend slot changes.
-     * @private
-     * @returns {void}
-     */
-    private handleLegendSlotChange;
-    /**
-     * Method for initializing the tab index of the checked radio input.
-     * @private
-     * @returns {void}
-     */
-    private initializeIndex;
-    /**
-     * Method for handling a newly selected radio input.
-     * @private
-     * @param {Event} event - The trigger event tied to this function.
-     * @returns {void}
-     */
-    private handleToggleSelected;
-    /**
-     * Method for selecting a radio input.
-     * @private
-     * @param {Number} index - The value of the element's index attribute.
-     * @returns {void}
-     */
-    private selectItem;
-    /**
-     * Method for selecting the next radio input.
-     * @private
-     * @param {Number} index - The value of the element's index attribute.
-     * @param {String} moveDirection - Arrow key pressed by user.
-     * @returns {void}
-     */
-    private selectNextItem;
-    /**
-     * Method for handling a keydown event.
-     * @private
-     * @param {Event} event - The trigger event tied to this function.
-     * @returns {void}
-     */
-    private handleKeyDown;
-    render(): import("lit-html").TemplateResult;
-}
-import { LitElement } from "lit";

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

@@ -1,180 +0,0 @@
-/**
- * The `auro-radio` element is used to a button that allows the user to select one option from a set.
- * @customElement auro-radio
- *
- * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
- * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
- * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
- * @event focusSelected - Notifies that the component has gained focus.
- * @event auroRadio-blur - Notifies that the component has lost focus.
- * @event resetRadio - Notifies that the component has reset the checked/selected state.
- * @event auroRadio-selected - Notifies that the component has been marked as checked/selected.
- *
- * @csspart radio - apply css to a specific checkbox.
- * @csspart radio-input - apply css to a specific checkbox's input.
- * @csspart radio-label - apply css to a specific checkbox's label.
- */
-export class AuroRadio 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 radio button will be filled.
-         */
-        checked: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If set to true, the radio button will be non-clickable.
-         */
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If set to true, sets an error state on the radio button.
-         */
-        error: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * The id global attribute defines an identifier (ID) which must be unique in the whole document.
-         */
-        id: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * ID for input node.
-         * @private
-         */
-        inputId: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * Label for the radio button.
-         */
-        label: {
-            type: StringConstructor;
-        };
-        /**
-         * Name for the radio button group.
-         */
-        name: {
-            type: StringConstructor;
-        };
-        /**
-         * DEPRECATED - use `appearance="inverse"` instead.
-         */
-        onDark: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Defines element as required.
-         */
-        required: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Don't add to api.md since changing of this can easily break a11y.
-         * @private
-         */
-        role: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Whether or not the radio button has been touched by the user.
-         * @private
-         */
-        touched: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * The value of the radio button.
-         */
-        value: {
-            type: StringConstructor;
-        };
-    };
-    /**
-     * This will register this element with the browser.
-     * @param {string} [name="auro-radio"] - The name of the element that you want to register.
-     *
-     * @example
-     * AuroRadio.register("custom-radio") // This will resgiter this element to <custom-radio/>
-     *
-     */
-    static register(name?: string): void;
-    _initializeDefaults(): void;
-    appearance: string;
-    checked: any;
-    disabled: boolean;
-    required: boolean;
-    error: boolean;
-    onDark: boolean;
-    touched: boolean;
-    /**
-     * @private
-     */
-    private runtimeUtils;
-    /**
-     * Method for handling content when change event is fired.
-     * @private
-     * @param {Event} event - The trigger event tied to this function.
-     * @returns {void}
-     */
-    private handleChange;
-    /**
-     * Method for handling content when input event is fired.
-     * @private
-     * @param {Event} event - The trigger event tied to this function.
-     * @returns {void}
-     */
-    private handleInput;
-    /**
-     * Method for handling focus event.
-     * @private
-     * @param {Event} event - The trigger event tied to this function.
-     * @returns {void}
-     */
-    private handleFocus;
-    /**
-     * Method for handling blur event.
-     * @private
-     * @param {Event} event - The trigger event tied to this function.
-     * @returns {void}
-     */
-    private handleBlur;
-    /**
-     * Resets component to initial state.
-     * @returns {void}
-     */
-    reset(): void;
-    updated(changedProperties: any): void;
-    /**
-     * Method for handling passing the required status to aria.
-     * @private
-     * @param {Boolean} required - The element's required attribute.
-     * @returns {void}
-     */
-    private isRequired;
-    firstUpdated(): void;
-    input: HTMLInputElement;
-    inputId: string;
-    render(): import("lit-html").TemplateResult<1>;
-}
-import { LitElement } from "lit";

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

@@ -1,3 +0,0 @@
-import { AuroRadio } from './auro-radio.js';
-import { AuroRadioGroup } from './auro-radio-group.js';
-export { AuroRadio, AuroRadioGroup };