@aurodesignsystem-dev/auro-formkit 0.0.0-pr1379.0 → 0.0.0-pr1379.10

package/components/select/demo/readme.md

@@ -1,148 +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`          |
--->
-
-# 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.
-<!-- 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 -->
-
-## 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 -->
-
-#### 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-select/+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 { 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,545 +0,0 @@
-/**
- * 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
- * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
- * @slot label - Defines the content of the label.
- * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
- * @slot helpText - Defines the content of the helpText.
- * @slot valueText - Dropdown value text display.
- * @slot displayValue - Allows custom HTML content to display the selected value when select is not focused.
- * @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 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.
-         * @type {'default' | 'inverse'}
-         * @default 'default'
-         */
-        appearance: "default" | "inverse";
-        /**
-         * If declared, bib's position will be automatically calculated where to appear.
-         */
-        autoPlacement: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, sets the autocomplete attribute for the select element.
-         */
-        autocomplete: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * When attribute is present, element shows disabled state.
-         */
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
-         */
-        error: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, make the width of the bib match the width of the content, rather than the trigger.
-         */
-        flexMenuWidth: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * When attribute is present, element will be 100% width of container element.
-         */
-        fluid: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
-         */
-        forceDisplayValue: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * 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'
-         */
-        fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
-        /**
-         * @private
-         */
-        hasDisplayValueContent: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * @private
-         */
-        hasFocus: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * @private
-         */
-        isPopoverVisible: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, make bib.fullscreen.headline in HeadingDisplay.
-         * Otherwise, Heading 600.
-         */
-        largeFullscreenHeadline: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Determines the overall layout of the select component.
-         * @type {'classic' | 'emphasized' | 'snowflake'}
-         * @default 'classic'
-         */
-        layout: "classic" | "emphasized" | "snowflake";
-        /**
-         * If declared, the popover and trigger will be set to the same width.
-         */
-        matchWidth: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Sets multi-select mode, allowing multiple options to be selected at once.
-         */
-        multiSelect: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        /**
-         * The name for the select element.
-         */
-        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;
-        };
-        /**
-         * If set, disables auto-validation on blur.
-         */
-        noValidate: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Gap between the trigger element and bib.
-         * @default 0
-         */
-        offset: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        /**
-         * 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>;
-        /**
-         * Define custom placeholder text.
-         */
-        placeholder: {
-            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.
-         */
-        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;
-        };
-        /**
-         * Determines the shape of the dropdown bib.
-         * @type {'classic' | 'pill' | 'pill-left' | 'pill-right' | 'snowflake'}
-         */
-        shape: "classic" | "pill" | "pill-left" | "pill-right" | "snowflake";
-        /**
-         * If set, the dropdown will shift its position to avoid being cut off by the viewport.
-         */
-        shift: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Determines the size of the dropdown bib. Only the `emphasized` layout supports size=`xl`, while all other layouts support size=`lg`.
-         * @type {'lg' | 'xl'}
-         */
-        size: "lg" | "xl";
-        /**
-         * Indicates whether the input 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;
-        };
-        /**
-         * Value selected for the component.
-         */
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-    };
-    static get styles(): import("lit").CSSResult[];
-    /**
-     * This will register this element with the browser.
-     * @param {string} [name="auro-select"] - The name of element that you want to register to.
-     *
-     * @example
-     * AuroSelect.register("custom-select") // this will register this element to <custom-select/>
-     *
-     */
-    static register(name?: string): void;
-    matchWidth: boolean;
-    placement: string;
-    offset: number;
-    noFlip: boolean;
-    shift: boolean;
-    autoPlacement: boolean;
-    forceDisplayValue: boolean;
-    /**
-     * @private
-     */
-    private uniqueId;
-    /**
-     * @private
-     */
-    private validation;
-    /**
-     * @private
-     */
-    private runtimeUtils;
-    /**
-     * @private
-     */
-    private dropdownTag;
-    /**
-     * @private
-     */
-    private bibtemplateTag;
-    /**
-     * @private
-     */
-    private helpTextTag;
-    /**
-     * @private
-     */
-    private isHiddenWhileLoading;
-    /**
-     * @private
-     */
-    private hasFocus;
-    /**
-     * @private
-     */
-    private hasDisplayValueContent;
-    /**
-     * @private
-     * @returns {void} Internal defaults.
-     */
-    private _initializeDefaults;
-    appearance: string;
-    value: any;
-    fullscreenBreakpoint: string;
-    onDark: boolean;
-    isPopoverVisible: any;
-    shape: string;
-    size: string;
-    /**
-     * Formatted value based on `multiSelect` state.
-     * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
-     * @private
-     * @returns {String|Array<String>}
-     */
-    private get formattedValue();
-    /**
-     * Returns classmap configuration for html5 input labels in all layouts.
-     * @private
-     * @returns {Record<string, boolean>}
-     */
-    private get commonLabelClasses();
-    /**
-     * Returns the label font class based on layout and selection state.
-     * @private
-     * @returns {string} - The font class for the label.
-     */
-    private get labelFontClass();
-    /**
-     * Whether or not the component has a value.
-     * @returns {boolean} - Returns true if the component has a value or placeholder.
-     * @private
-     */
-    private get hasValue();
-    /**
-     * Binds all behavior needed to the dropdown after rendering.
-     * @private
-     * @returns {void}
-     */
-    private configureDropdown;
-    dropdown: any;
-    optionActive: any;
-    bibtemplate: any;
-    /**
-     * Updates the displayed value in an Auro dropdown component based on optionSelected.
-     * @private
-     * @returns {void}
-     */
-    private updateDisplayedValue;
-    /**
-     * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
-     * @private
-     */
-    private updateMenuShapeSize;
-    /**
-     * Sets aria-setsize and aria-posinset on each menu option so screen readers
-     * can announce position even when the listbox context is broken by
-     * shadow DOM boundaries.
-     * @private
-     * @returns {void}
-     */
-    private updateOptionPositions;
-    /**
-     * Binds all behavior needed to the menu after rendering.
-     * @private
-     * @returns {void}
-     */
-    private configureMenu;
-    menu: Element;
-    defaultMenuSize: string;
-    defaultMenuShape: string;
-    options: any;
-    optionSelected: any;
-    /**
-     * Binds all behavior needed to the component after rendering.
-     * @private
-     * @returns {void}
-     */
-    private configureSelect;
-    nativeSelect: HTMLSelectElement;
-    /**
-     * Updates the active option in the menu.
-     * @param {number} index - Index of the option to make active.
-     */
-    updateActiveOption(index: number): void;
-    /**
-     * Updates the active option in the menu based on keyboard input.
-     * @private
-     * @param {string} _key - The key pressed by the user.
-     * @returns {void}
-     */
-    private updateActiveOptionBasedOnKey;
-    sameLetterTimes: any;
-    lastLetter: string;
-    /**
-     * Manages the visibility of the dropdown based on loading state changes.
-     *
-     * This method listens for loading state changes and adjusts the visibility of the dropdown accordingly.
-     * If the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown
-     * and sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously
-     * hidden, it checks if the active element is within the dropdown and shows it again if true.
-     *
-     * @private
-     * @param {CustomEvent} event - The event object containing details about the loading state change.
-     * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
-     * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
-     * @returns {void}
-     */
-    private handleMenuLoadingChange;
-    /**
-     * Hides the dropdown bib if its open.
-     * @returns {void}
-     */
-    hideBib(): void;
-    /**
-     * Shows the dropdown bib if there are options to show.
-     * @returns {void}
-     */
-    showBib(): void;
-    /**
-     * Function to support @focusin event.
-     * @private
-     * @return {void}
-     */
-    private handleFocusin;
-    touched: boolean;
-    /**
-     * Watch for slot changes and recalculate the menuoptions.
-     * @private
-     * @param {Event} event - `slotchange` event.
-     * @returns {void}
-     */
-    private handleSlotChange;
-    /**
-     * Resets all options to their default state.
-     * @private
-     */
-    private clearSelection;
-    firstUpdated(): void;
-    setMenuValue(value: any): void;
-    /**
-     * Scrolls the currently active option into view.
-     * Respects user's motion preferences for accessibility.
-     * @private
-     */
-    private scrollActiveOptionIntoView;
-    /**
-     * Scrolls the currently selected option into view.
-     * Respects user's motion preferences for accessibility.
-     * @private
-     */
-    private scrollSelectedOptionIntoView;
-    updated(changedProperties: 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;
-    /**
-     * Syncs the value from the native select element to the component's value.
-     * @param {Event} event // The change event from the native select element.
-     * @returns {void}
-     * @private
-     */
-    private _handleNativeSelectChange;
-    /**
-     * Updates the native select element's value based on the component's value.
-     * @returns {void}
-     * @private
-     */
-    private _updateNativeSelect;
-    /**
-     * Returns HTML for the hidden HTML5 select.
-     * @private
-     * @returns {html} - Returns HTML for the hidden HTML5 select.
-     */
-    private renderNativeSelect;
-    /**
-     * Returns HTML for the help text and error message.
-     * @private
-     * @returns {html} - Returns HTML for the help text and error message.
-     */
-    private renderHtmlHelpText;
-    /**
-     * Returns HTML for the emphasized layout.
-     * @private
-     * @returns {import("lit").TemplateResult} - Returns HTML for the emphasized layout.
-     */
-    private renderLayoutEmphasized;
-    /**
-     * Returns HTML for the snowflake layout.
-     * @private
-     * @returns {import("lit").TemplateResult} - Returns HTML for the snowflake layout.
-     */
-    private renderLayoutSnowflake;
-    /**
-     * Returns HTML for the classic layout.
-     * @private
-     * @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
-     */
-    private renderLayoutClassic;
-    /**
-     * Logic to determine the layout of the component.
-     * @private
-     * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
-     * @returns {void}
-     */
-    private renderLayout;
-}
-import { AuroElement } from '../../layoutElement/src/auroElement.js';

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

@@ -1,2 +0,0 @@
-export { AuroSelect };
-import { AuroSelect } from './auro-select.js';