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

package/components/dropdown/demo/readme.md

@@ -1,160 +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`          |
--->
-
-# Dropdown
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
-<!-- The below content is automatically added from ./docs/partials/description.md -->
-The `auro-dropdown` component is a trigger and dropdown element combination intended to be used with dropdown content that is interactive. `auro-dropdown` is content agnostic and any valid HTML can be placed in either the trigger or the dropdown.
-
-_Note: if the dropdown content in your implementation is not interactive (e.g. a tooltip) [auro-popover](http://auro.alaskaair.com/components/auro/popover) may better serve your needs._
-<!-- 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 -->
-
-## Dropdown 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-dropdown` element should be used in situations where users may:
-
-* interact with an element to get clarification on content offering
-* provide definition to iconic imagery
-* when interactive help is required
-<!-- 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-dropdown/+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 { AuroDropdown } from '@aurodesignsystem/auro-formkit/auro-dropdown/class';
-
-// Register with a custom name if desired
-AuroDropdown.register('custom-dropdown');
-```
-
-This will create a new custom element `<custom-dropdown>` that behaves exactly like `<auro-dropdown>`, allowing both to coexist on the same page without interfering with each other.
-
-<div class="exampleWrapper exampleWrapper--flex">
-  <custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader">
-    <div style="padding: var(--ds-size-150);">
-      Lorem ipsum solar
-      <br />
-      <auro-button id="customCommonButton">
-        Dismiss Dropdown
-      </auro-button>
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </custom-dropdown>
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-```html
-  <custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader">
-    <div style="padding: var(--ds-size-150);">
-      Lorem ipsum solar
-      <br />
-      <auro-button id="customCommonButton">
-        Dismiss Dropdown
-      </auro-button>
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </custom-dropdown>
-```
-</auro-accordion>
-<!-- AURO-GENERATED-CONTENT:END -->

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

@@ -1,482 +0,0 @@
-/**
- * The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
- * @customElement auro-dropdown
- *
- * @slot - Default slot for the dropdown bib content.
- * @slot helpText - Defines the content of the helpText.
- * @slot trigger - Defines the content of the trigger.
- * @csspart trigger - The trigger content container.
- * @csspart chevron - The collapsed/expanded state icon container.
- * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
- * @csspart helpText - The helpText content container.
- * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
- * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
- * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
- */
-export class AuroDropdown extends AuroElement {
-    static get shadowRootOptions(): {
-        delegatesFocus: boolean;
-        clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    static get properties(): {
-        /**
-         * The value for the role attribute of the trigger element.
-         */
-        a11yRole: {
-            type: StringConstructor;
-            attribute: boolean;
-            reflect: boolean;
-        };
-        /**
-         * 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, the dropdown will only show by calling the API .show() public method.
-         */
-        disableEventShow: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, applies a border around the trigger slot.
-         */
-        simple: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, the dropdown displays a chevron on the right.
-         */
-        chevron: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        /**
-         * If declared, the dropdown is not interactive.
-         */
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, the focus trap inside of bib will be turned off.
-         */
-        disableFocusTrap: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * @private
-         */
-        dropdownWidth: {
-            type: NumberConstructor;
-        };
-        /**
-         * The unique ID for the dropdown bib element.
-         * @private
-         */
-        dropdownId: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * If declared, will apply error UI to the dropdown.
-         */
-        error: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Contains the help text message for the current validity error.
-         */
-        errorMessage: {
-            type: StringConstructor;
-        };
-        /**
-         * If declared, the bib will display when focus is applied to the trigger.
-         */
-        focusShow: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If true, the dropdown bib is displayed.
-         */
-        isPopoverVisible: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        /**
-         * If true, the dropdown bib is taking the fullscreen when it's open.
-         */
-        isBibFullscreen: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, the trigger will toggle the dropdown on mouseover/mouseout.
-         */
-        hoverToggle: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * @private
-         */
-        hasTriggerContent: {
-            type: BooleanConstructor;
-        };
-        /**
-         * 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";
-        /**
-         * Sets the layout of the dropdown.
-         * @type {'classic' | 'emphasized' | 'snowflake'}
-         * @default 'classic'
-         */
-        layout: "classic" | "emphasized" | "snowflake";
-        /**
-         * Defines if the trigger should size based on the parent element providing the border UI.
-         * @private
-         */
-        parentBorder: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * 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`.
-         */
-        noFlip: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-         */
-        shift: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, the dropdown will not hide when moving focus outside the element.
-         */
-        noHideOnThisFocusLoss: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, the trigger will only show the dropdown bib.
-         */
-        noToggle: {
-            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;
-        };
-        /**
-         *  If declared, and a function is set, that function will execute when the slot content is updated.
-         */
-        onSlotChange: {
-            type: FunctionConstructor;
-            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";
-        /**
-         * @private
-         */
-        tabIndex: {
-            type: NumberConstructor;
-        };
-        /**
-         * Accessible label for the dropdown bib dialog element.
-         * @private
-         */
-        bibDialogLabel: {
-            type: StringConstructor;
-            attribute: boolean;
-            reflect: boolean;
-        };
-    };
-    static get styles(): import("lit").CSSResult[];
-    /**
-     * This will register this element with the browser.
-     * @param {string} [name="auro-dropdown"] - The name of the element that you want to register.
-     *
-     * @example
-     * AuroDropdown.register("custom-dropdown") // this will register this element to <custom-dropdown/>
-     *
-     */
-    static register(name?: string): void;
-    isPopoverVisible: boolean;
-    isBibFullscreen: boolean;
-    matchWidth: boolean;
-    noHideOnThisFocusLoss: boolean;
-    errorMessage: any;
-    layout: any;
-    shape: any;
-    size: any;
-    parentBorder: boolean;
-    /**
-     * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
-     * @private
-     * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
-     */
-    private handleDropdownToggle;
-    /** @private */
-    private bibElement;
-    /**
-     * @private
-     * @returns {object} Class definition for the wrapper element.
-     */
-    private get commonWrapperClasses();
-    /**
-     * @private
-     * @returns {void} Internal defaults.
-     */
-    private _intializeDefaults;
-    appearance: string;
-    chevron: boolean;
-    disabled: boolean;
-    disableFocusTrap: boolean;
-    error: boolean;
-    noToggle: boolean;
-    a11yRole: string;
-    onDark: boolean;
-    showTriggerBorders: boolean;
-    triggerContentFocusable: any;
-    simple: boolean;
-    placement: string;
-    offset: number;
-    noFlip: boolean;
-    shift: boolean;
-    autoPlacement: boolean;
-    /**
-     * @private
-     */
-    private hasTriggerContent;
-    /**
-     * @private
-     */
-    private triggerContentSlot;
-    /**
-     * @private
-     */
-    private runtimeUtils;
-    /**
-     * @private
-     */
-    private floater;
-    /**
-     * @private
-     */
-    private iconTag;
-    /**
-     * @private
-     */
-    private dropdownBibTag;
-    /**
-     * @private
-     */
-    private helpTextTag;
-    /**
-     * Creates and dispatches a duplicate focus event on the trigger element.
-     * @private
-     * @param {Event} event - The original focus event.
-     */
-    private bindFocusEventToTrigger;
-    /**
-     * @ignore
-     */
-    get floaterConfig(): {
-        placement: string;
-        flip: boolean;
-        shift: boolean;
-        autoPlacement: boolean;
-        offset: number;
-    };
-    /**
-     * Public method to hide the dropdown.
-     * @returns {void}
-     */
-    hide(): void;
-    /**
-     * Public method to show the dropdown.
-     * @returns {void}
-     */
-    show(): void;
-    /**
-     * When bib is open, focus on the first element inside of bib.
-     * If not, trigger element will get focus.
-     */
-    focus(): void;
-    /**
-     * Sets the active descendant element for accessibility.
-     * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
-     * This function is used in components that contain `auro-dropdown` to set the active descendant.
-     * @private
-     * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
-     * @returns {void}
-     */
-    private setActiveDescendant;
-    /**
-     * Accessor for reusing the focusable entity query string.
-     * @private
-     * @returns {string}
-     */
-    private get focusableEntityQuery();
-    updated(changedProperties: any): void;
-    firstUpdated(): void;
-    dropdownId: any;
-    bibContent: any;
-    /**
-     * Exposes CSS parts for styling from parent components.
-     * @returns {void}
-     */
-    exposeCssParts(): void;
-    /**
-     * Determines if content is within a custom slot.
-     * @private
-     * @param {HTMLElement} element - The element to check.
-     * @returns {Boolean}
-     */
-    private isCustomSlotContent;
-    /**
-     * Function to support @focusin event.
-     * @private
-     * @return {void}
-     */
-    private handleFocusin;
-    hasFocus: boolean;
-    /**
-     * @private
-     */
-    private updateFocusTrap;
-    focusTrap: any;
-    /**
-     * Function to support @focusout event.
-     * @private
-     * @return {void}
-     */
-    private handleFocusout;
-    /**
-     * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
-     * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
-     * @private
-     */
-    private setupTriggerFocusEventBinding;
-    /**
-     * Clears focus and blur event listeners from nested Auro components within the trigger slot.
-     * @private
-     * @returns {void}
-     */
-    private clearTriggerFocusEventBinding;
-    clearTriggerA11yAttributes(triggerElement: any): void;
-    /**
-     * Handles changes to the trigger content slot and updates related properties.
-     *
-     * It first updates the floater settings
-     * Then, it retrieves the assigned nodes from the event target and checks if any of
-     * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
-     *
-     * @private
-     * @method handleTriggerContentSlotChange
-     * @param {Event} event - Native slotchange event.
-     * @returns {void}
-     */
-    private handleTriggerContentSlotChange;
-    triggerNode: EventTarget;
-    /**
-     * Handles the default slot change event and updates the content.
-     *
-     * This method retrieves all nodes assigned to the default slot of the event target and appends them
-     * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
-     * notify about the slot change.
-     *
-     * @private
-     * @method handleDefaultSlot
-     * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
-     */
-    private handleDefaultSlot;
-    /**
-     * Returns HTML for the common portion of the layouts.
-     * @private
-     * @param {Object} helpTextClasses - Classes to apply to the help text container.
-     * @returns {html} - Returns HTML.
-     */
-    private renderBasicHtml;
-    /**
-     * Returns HTML for the classic layout. Does not support type="*".
-     * @private
-     * @returns {html} - Returns HTML for the classic layout.
-     */
-    private renderLayoutClassic;
-    /**
-     * Returns HTML for the snowflake layout. Does not support type="*".
-     * @private
-     * @returns {html} - Returns HTML for the snowflake layout.
-     */
-    private renderLayoutSnowflake;
-    /**
-     * Returns HTML for the emphasized layout. Does not support type="*".
-     * @private
-     * @returns {html} - Returns HTML for the emphasized layout.
-     */
-    private renderLayoutEmphasized;
-    /**
-     * 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 {HTMLCollection} - Returns the HTML for the layout.
-     */
-    private renderLayout;
-}
-import { AuroElement } from '../../layoutElement/src/auroElement.js';