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

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

@@ -0,0 +1,482 @@
+/**
+ * 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 dropdown will not handle keyboard events and will require the consumer to manage this behavior.
+         */
+        disableKeyboardHandling: {
+            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;
+    disableKeyboardHandling: 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';

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

@@ -0,0 +1,128 @@
+/**
+ * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+ * @csspart bibContainer - Apply css to the bib container.
+ */
+export class AuroDropdownBib extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    static get properties(): {
+        /**
+         * If declared, will take the fullscreen when the bib is displayed.
+         */
+        isFullscreen: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, will apply all styles for the common theme.
+         */
+        common: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, will apply extra padding to bib content.
+         */
+        inset: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, the bib width will match the trigger width.
+         * @private
+         */
+        matchWidth: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, will apply border-radius to the bib.
+         */
+        rounded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * A reference to the associated bib template element.
+         */
+        bibTemplate: {
+            type: ObjectConstructor;
+        };
+        shape: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Accessible label for the dialog element, used when displayed as a modal.
+         * Applied via aria-labelledby on a visually hidden element rather than
+         * aria-label because iOS VoiceOver does not reliably read aria-label
+         * on <dialog> elements.
+         * @private
+         */
+        dialogLabel: {
+            type: StringConstructor;
+        };
+        /**
+         * Overrides the native role of the dialog element.
+         * For example, set to `"presentation"` on desktop combobox to prevent
+         * VoiceOver from announcing "listbox inside of a dialog".
+         * When `undefined`, the dialog keeps its native role.
+         * @private
+         */
+        dialogRole: {
+            type: StringConstructor;
+        };
+        /**
+         * Tracks whether a menu option is currently highlighted.
+         * @private
+         */
+        hasActiveDescendant: {
+            type: BooleanConstructor;
+        };
+    };
+    /**
+     * @private
+     */
+    private _mobileBreakpointName;
+    shape: string;
+    matchWidth: boolean;
+    hasActiveDescendant: boolean;
+    set mobileFullscreenBreakpoint(value: string);
+    get mobileFullscreenBreakpoint(): string;
+    updated(changedProperties: any): void;
+    bibTemplate: any;
+    firstUpdated(changedProperties: any): void;
+    /**
+     * Forwards the dialog's native `cancel` event (fired on ESC) as
+     * an `auro-bib-cancel` custom event so parent components can close.
+     * @param {HTMLDialogElement} dialog - The dialog element to attach the cancel listener to.
+     * @private
+     */
+    private _setupCancelHandler;
+    /**
+     * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
+     *
+     * The showModal() function places the dialog in the browser's **top layer**,
+     * which is a separate rendering layer above the normal DOM. On mobile, the
+     * compositor processes visual-viewport panning before top-layer touch
+     * handling. This means the entire viewport — including the top-layer dialog
+     * — can be panned by a touch gesture, causing the page behind the dialog to
+     * scroll into view. To prevent this, we add a touchmove listener that cancels
+     * the event if the touch started outside the dialog or any scrollable child within it.
+     *
+     * @private
+     */
+    private _lockTouchScroll;
+    _touchMoveHandler: (event: any) => void;
+    /**
+     * Removes the touchmove listener added by _lockTouchScroll().
+     * @private
+     */
+    private _unlockTouchScroll;
+    open(modal?: boolean): void;
+    /**
+     * Closes the dialog.
+     */
+    close(): void;
+    render(): import("lit-html").TemplateResult;
+}
+import { LitElement } from "lit";

package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Creates a keyboard strategy for dialog-specific key handling.
+ * All other keydown behavior is left to the browser's native bubbling path.
+ * @param {HTMLElement} bib - The dropdown bib element.
+ * @returns {Object} Keyboard handlers keyed by `event.key`.
+ */
+export function createDropdownBibKeyboardStrategy(bib: HTMLElement): any;

package/components/dropdown/dist/iconVersion.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "9.1.2";
+export default _default;

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

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