@travelopia/web-components 0.9.6 → 0.9.8

package/dist/declarations.d.ts

@@ -54,6 +54,26 @@ export class TPAccordionItemElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Set up beforematch event listener for find-in-page support.
+     */
+    private setupBeforeMatchListener;
+    /**
+     * Set up aria-controls linkage between button and content.
+     */
+    private setupAriaControls;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA management is enabled.
+     */
+    private isAriaEnabled;
+    /**
+     * Update ARIA state for handle button and content.
+     *
+     * @param {boolean} isOpen Whether the accordion item is open.
+     */
+    private updateAriaState;
     /**
      * Get observed attributes.
      *
@@ -110,6 +130,90 @@ export class TPAccordionElement extends HTMLElement {
 export class TPFormErrorElement extends HTMLElement {
 }
 
+/**
+ * TP Form Errors Error.
+ */
+export class TPFormErrorsErrorElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Handle click on error link.
+     *
+     * @param {Event} event Click event.
+     */
+    protected handleClick(event: Event): void;
+}
+
+/**
+ * TP Form Errors Heading.
+ *
+ * Displays the error count. User controls the heading element wrapper.
+ */
+export class TPFormErrorsHeadingElement extends HTMLElement {
+    /**
+     * Get format.
+     *
+     * @return {string} Format with $count placeholder.
+     */
+    get format(): string;
+    /**
+     * Set format.
+     *
+     * @param {string} format Format string.
+     */
+    set format(format: string);
+    /**
+     * Update the heading with the error count.
+     *
+     * @param {number} count Number of errors.
+     */
+    update(count: number): void;
+}
+
+/**
+ * Internal dependencies.
+ */
+import { TPFormFieldElement } from './tp-form-field';
+/**
+ * TP Form Errors List.
+ *
+ * Displays the list of error links using tp-form-errors-error elements.
+ */
+export class TPFormErrorsListElement extends HTMLElement {
+    /**
+     * Update the list with error links.
+     *
+     * @param {TPFormFieldElement[]} invalidFields Array of invalid form fields.
+     */
+    update(invalidFields: TPFormFieldElement[]): void;
+    /**
+     * Clear the list.
+     */
+    clear(): void;
+}
+
+/**
+ * Internal dependencies.
+ */
+import { TPFormFieldElement } from './tp-form-field';
+/**
+ * TP Form Errors.
+ */
+export class TPFormErrorsElement extends HTMLElement {
+    /**
+     * Update the error summary with the given invalid fields.
+     *
+     * @param {TPFormFieldElement[]} invalidFields Array of invalid form fields.
+     */
+    update(invalidFields: TPFormFieldElement[]): void;
+    /**
+     * Clear the error summary.
+     */
+    clear(): void;
+}
+
 /**
  * TP Form Field.
  */
@@ -118,6 +222,10 @@ export class TPFormFieldElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Set up accessibility attributes (label linking, IDs).
+     */
+    private setupAccessibility;
     /**
      * Update validation when the field has changed.
      */
@@ -232,6 +340,16 @@ export class TPFormElement extends HTMLElement {
      * @return {boolean} Whether the form is valid or not.
      */
     validate(): Promise<boolean>;
+    /**
+     * Handle validation error - update error summary and manage focus.
+     *
+     * @param {NodeList} fields All form fields.
+     */
+    protected handleValidationError(fields: NodeListOf<TPFormFieldElement>): void;
+    /**
+     * Clear the error summary.
+     */
+    protected clearErrorSummary(): void;
     /**
      * Validate one field.
      *
@@ -406,6 +524,8 @@ export class TPLightboxElement extends HTMLElement {
     protected swipeThreshold: number;
     protected dialogElement: HTMLDialogElement | null;
     protected lightboxNavItems: NodeListOf<TPLightboxNavItemElement> | null;
+    protected previouslyFocusedElement: HTMLElement | null;
+    protected readonly boundHandleKeyDown: (e: KeyboardEvent) => void;
     /**
      * Constructor.
      */
@@ -424,6 +544,12 @@ export class TPLightboxElement extends HTMLElement {
      * @param {string} newValue New value.
      */
     attributeChangedCallback(name?: string, oldValue?: string, newValue?: string): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA is enabled.
+     */
+    isAriaEnabled(): boolean;
     /**
      * Get template.
      */
@@ -514,6 +640,17 @@ export class TPLightboxElement extends HTMLElement {
      * Update current item in navigation.
      */
     updateNavCurrentItem(): void;
+    /**
+     * Set initial focus when lightbox opens.
+     * Looks for [autofocus] element, otherwise focuses the dialog.
+     */
+    private setInitialFocus;
+    /**
+     * Handle keydown events for arrow navigation.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    private handleKeyDown;
 }
 
 /**
@@ -534,6 +671,18 @@ export class TPModalCloseElement extends HTMLElement {
  * TP Modal.
  */
 export class TPModalElement extends HTMLElement {
+    /**
+     * Previously focused element before modal opened.
+     */
+    private previouslyFocusedElement;
+    /**
+     * Elements that were made inert when modal opened.
+     */
+    private inertedElements;
+    /**
+     * Bound event handlers for cleanup.
+     */
+    private readonly boundHandleKeyDown;
     /**
      * Constructor.
      */
@@ -546,6 +695,29 @@ export class TPModalElement extends HTMLElement {
      * Close the modal.
      */
     close(): void;
+    /**
+     * Set initial focus when modal opens.
+     * Looks for [autofocus] element, otherwise focuses the modal container.
+     */
+    private setInitialFocus;
+    /**
+     * Set or remove inert and aria-hidden on all siblings.
+     *
+     * @param {boolean} inert Whether to make siblings inert.
+     */
+    private setSiblingsInert;
+    /**
+     * Handle keydown events for Escape and focus trap.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    private handleKeyDown;
+    /**
+     * Trap focus within the modal.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    private trapFocus;
     /**
      * Handle when the component is clicked.
      *
@@ -562,6 +734,26 @@ export class TPMultiSelectFieldElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Handle keydown events to open the dropdown.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    handleKeydown(e: KeyboardEvent): void;
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Setup label click to focus this field.
+     * Enables clicking the label to focus the field when aria-labelledby is present.
+     */
+    setupLabelClick(): void;
+    /**
+     * Setup ARIA attributes for the field element.
+     * Only applies when there is no search input (field acts as combobox).
+     */
+    setupAriaAttributes(): void;
     /**
      * Toggle opening this component.
      */
@@ -576,6 +768,32 @@ export class TPMultiSelectOptionElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} List of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Attribute changed callback.
+     *
+     * @param {string} name     Attribute name.
+     * @param {string} oldValue Old value.
+     * @param {string} newValue New value.
+     */
+    attributeChangedCallback(name?: string, oldValue?: string, newValue?: string): void;
+    /**
+     * Setup ARIA attributes for the option.
+     */
+    setupAriaAttributes(): void;
+    /**
+     * Update ARIA state based on selected attribute.
+     */
+    updateAriaState(): void;
     /**
      * Select / un-select this option.
      *
@@ -588,6 +806,14 @@ export class TPMultiSelectOptionElement extends HTMLElement {
  * TP Multi Select Options.
  */
 export class TPMultiSelectOptionsElement extends HTMLElement {
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Setup ARIA attributes for the listbox.
+     */
+    setupAriaAttributes(): void;
 }
 
 /**
@@ -640,6 +866,32 @@ export class TPMultiSelectPillsElement extends HTMLElement {
 export class TPMultiSelectPlaceholderElement extends HTMLElement {
 }
 
+/**
+ * TP Multi Select Search Status.
+ */
+export class TPMultiSelectSearchStatusElement extends HTMLElement {
+    /**
+     * Store the default role from markup.
+     */
+    protected defaultRole: string | null;
+    /**
+     * Store the default aria-live from markup.
+     */
+    protected defaultAriaLive: string | null;
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Update this component.
+     */
+    update(): void;
+}
+
 /**
  * TP Multi Select Search.
  */
@@ -648,6 +900,14 @@ export class TPMultiSelectSearchElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Setup ARIA attributes for the search input (combobox).
+     */
+    setupAriaAttributes(): void;
     /**
      * Handle keyboard inputs.
      *
@@ -682,6 +942,18 @@ export class TPMultiSelectSelectAllElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Setup ARIA attributes for the select all option.
+     */
+    setupAriaAttributes(): void;
+    /**
+     * Update ARIA state based on selected attribute.
+     */
+    updateAriaState(): void;
     /**
      * Handle value changed.
      */
@@ -735,6 +1007,12 @@ export class TPMultiSelectElement extends HTMLElement {
      * @return {Array} List of observed attributes.
      */
     static get observedAttributes(): string[];
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA is enabled.
+     */
+    isAriaEnabled(): boolean;
     /**
      * Attribute changed callback.
      *
@@ -815,6 +1093,30 @@ export class TPMultiSelectElement extends HTMLElement {
      * Un-highlight all options.
      */
     unHighlightAllOptions(): void;
+    /**
+     * Get the combobox element (search input or field).
+     *
+     * @return {HTMLElement | null} The combobox element.
+     */
+    getComboboxElement(): HTMLElement | null;
+    /**
+     * Update aria-expanded on the combobox element.
+     *
+     * @param {boolean} isOpen Whether the dropdown is open.
+     */
+    updateAriaExpanded(isOpen: boolean): void;
+    /**
+     * Update aria-activedescendant on the combobox element.
+     *
+     * @param {string | null} optionId The ID of the highlighted option, or null to clear.
+     */
+    updateAriaActiveDescendant(optionId: string | null): void;
+    /**
+     * Handle focus out events to close the dropdown.
+     *
+     * @param {FocusEvent} e Focus event.
+     */
+    handleFocusOut(e: FocusEvent): void;
 }
 
 /**
@@ -855,6 +1157,48 @@ export class TPNumberSpinnerInput extends HTMLElement {
  * TP Number Spinner Element.
  */
 export class TPNumberSpinner extends HTMLElement {
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA is enabled.
+     */
+    isAriaEnabled(): boolean;
+    /**
+     * Get the input element.
+     *
+     * @return {HTMLInputElement|null} The input element.
+     */
+    getInput(): HTMLInputElement | null;
+    /**
+     * Set up ARIA attributes on the input.
+     */
+    setupAria(): void;
+    /**
+     * Set tabindex="-1" on buttons if not already set by consumer.
+     */
+    setupButtonTabindex(): void;
+    /**
+     * Handle keydown events on the input.
+     *
+     * @param {KeyboardEvent} event The keyboard event.
+     */
+    handleInputKeydown(event: KeyboardEvent): void;
+    /**
+     * Update ARIA attributes on input and buttons.
+     */
+    updateAriaAttributes(): void;
+    /**
+     * Update aria-disabled state on buttons.
+     *
+     * @param {number}      currentValue Current value.
+     * @param {number|null} min          Minimum value.
+     * @param {number|null} max          Maximum value.
+     */
+    updateButtonStates(currentValue: number, min: number | null, max: number | null): void;
     /**
      * Get minimum value.
      *
@@ -975,6 +1319,20 @@ export class TPSliderNavItemElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} List of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Attribute changed callback.
+     *
+     * @param {string} name      Attribute name.
+     * @param {string} _oldValue Old value.
+     * @param {string} newValue  New value.
+     */
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
     /**
      * Handle when the button is clicked.
      */
@@ -1056,6 +1414,12 @@ export class TPSliderElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Handle keydown events for arrow key navigation.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    protected handleKeyDown(e: KeyboardEvent): void;
     /**
      * Connected callback.
      */
@@ -1207,15 +1571,57 @@ export class TPTabsNavItemElement extends HTMLElement {
      */
     constructor();
     /**
-     * Handle link click.
+     * Get the trigger element (button or anchor).
+     *
+     * @return {HTMLButtonElement | HTMLAnchorElement | null} The trigger element.
+     */
+    getTrigger(): HTMLButtonElement | HTMLAnchorElement | null;
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} List of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Attribute changed callback.
+     *
+     * @param {string} name     Attribute name.
+     * @param {string} oldValue Old value.
+     * @param {string} newValue New value.
+     */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA management is enabled.
+     */
+    private isAriaEnabled;
+    /**
+     * Set up ARIA attributes on the trigger element.
+     */
+    private setupAriaAttributes;
+    /**
+     * Get the panel ID that this nav item controls.
+     *
+     * @return {string} The panel ID.
+     */
+    getPanelId(): string;
+    /**
+     * Update ARIA state on the trigger element.
+     *
+     * @param {boolean} isActive Whether this tab is active.
+     */
+    private updateAriaState;
+    /**
+     * Handle trigger click.
      *
      * @param {Event} e Click event.
      *
      * @protected
      */
-    protected handleLinkClick(e: Event): void;
+    protected handleTriggerClick(e: Event): void;
     /**
-     * Check if this component contains the link to the current tab.
+     * Check if this component contains the trigger for the current tab.
      *
      * @param {string} currentTab Current tab ID.
      *
@@ -1228,12 +1634,68 @@ export class TPTabsNavItemElement extends HTMLElement {
  * TP Tabs Nav Element.
  */
 export class TPTabsNavElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA management is enabled.
+     */
+    private isAriaEnabled;
+    /**
+     * Get all tab trigger elements (buttons or anchors).
+     *
+     * @return {Array<HTMLButtonElement | HTMLAnchorElement>} Array of trigger elements.
+     */
+    private getTabTriggers;
+    /**
+     * Handle keydown events for keyboard navigation.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    private handleKeyDown;
 }
 
 /**
  * TP Tabs Tab Element.
  */
 export class TPTabsTabElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} List of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Attribute changed callback.
+     *
+     * @param {string} name     Attribute name.
+     * @param {string} oldValue Old value.
+     * @param {string} newValue New value.
+     */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA management is enabled.
+     */
+    private isAriaEnabled;
+    /**
+     * Set up ARIA attributes on this tab panel.
+     */
+    private setupAriaAttributes;
+    /**
+     * Update ARIA state on this tab panel.
+     *
+     * @param {boolean} isOpen Whether this panel is open.
+     */
+    private updateAriaState;
 }
 
 /**
@@ -1250,6 +1712,12 @@ export class TPTabsElement extends HTMLElement {
      * @return {Array} List of observed attributes.
      */
     static get observedAttributes(): string[];
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA management is enabled.
+     */
+    isAriaEnabled(): boolean;
     /**
      * Attribute changed callback.
      *
@@ -1358,6 +1826,10 @@ export class TPToggleAttributeElement extends HTMLElement {
 export class TPTooltipArrow extends HTMLElement {
 }
 
+/**
+ * Internal dependencies.
+ */
+import { TPTooltip } from './tp-tooltip';
 /**
  * TP Tooltip Trigger.
  */
@@ -1366,6 +1838,38 @@ export class TPTooltipTrigger extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA is enabled.
+     */
+    isAriaEnabled(): boolean;
+    /**
+     * Get the tooltip element.
+     *
+     * @return {TPTooltip|null} The tooltip element.
+     */
+    getTooltip(): TPTooltip | null;
+    /**
+     * Get the trigger element (focusable child).
+     *
+     * @return {HTMLElement|null} The trigger element.
+     */
+    getTriggerElement(): HTMLElement | null;
+    /**
+     * Set up ARIA attributes.
+     */
+    setupAria(): void;
+    /**
+     * Handle keydown events.
+     *
+     * @param {KeyboardEvent} event The keyboard event.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
     /**
      * Toggle the tooltip.
      */
@@ -1408,6 +1912,20 @@ export class TPTooltip extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA is enabled.
+     */
+    isAriaEnabled(): boolean;
+    /**
+     * Set up ARIA attributes.
+     */
+    setupAria(): void;
     /**
      * Get offset.
      */