@xplor-education/core-stencil-components 2.1.0 → 3.1.1

package/dist/types/components/xplor-alert-dialog/xplor-alert-dialog.d.ts

@@ -12,6 +12,10 @@ export declare class XplorAlertDialog {
      * Persistent mode - prevents closing on backdrop click
      */
     persistent: boolean;
+    /**
+     * Accessible label for the dialog (used if no title slot)
+     */
+    ariaLabel: string;
     /**
      * Close event
      */
@@ -20,8 +24,15 @@ export declare class XplorAlertDialog {
      * Dialog state change event
      */
     xplorDialogChange: EventEmitter<boolean>;
+    el: HTMLElement;
+    private previouslyFocusedElement;
+    private dialogEl;
     handleOpenChange(newValue: boolean): void;
     disconnectedCallback(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private getFocusableElements;
+    private trapFocus;
+    private setInitialFocus;
     private handleBackdropClick;
     private handleCardClick;
     private closeDialog;

package/dist/types/components/xplor-autocomplete/xplor-autocomplete.d.ts

@@ -23,6 +23,10 @@ export declare class XplorAutocomplete {
      * Label for the input
      */
     label: string;
+    /**
+     * Accessible label for the input when no visible label is provided
+     */
+    ariaLabel: string;
     /**
      * Disable the autocomplete
      */

package/dist/types/components/xplor-btn-back-to-parent/xplor-btn-back-to-parent.d.ts

@@ -20,6 +20,10 @@ export declare class XplorBtnBackToParent {
      * Visual variant
      */
     variant: 'text' | 'outlined' | 'elevated' | 'tonal';
+    /**
+     * Accessible label for the button
+     */
+    ariaLabel: string;
     /**
      * Back event (emitted on click)
      */

package/dist/types/components/xplor-btn-icon/xplor-btn-icon.d.ts

@@ -20,6 +20,10 @@ export declare class XplorBtnIcon {
      * Whether the button is disabled
      */
     disabled: boolean;
+    /**
+     * Accessible label for the icon button (required for screen readers)
+     */
+    ariaLabel: string;
     /**
      * Click event
      */

package/dist/types/components/xplor-btn-menu/xplor-btn-menu.d.ts

@@ -5,6 +5,11 @@ export interface MenuOption {
     [key: string]: any;
 }
 export declare class XplorBtnMenu {
+    el: HTMLElement;
+    /**
+     * Accessible label for the menu trigger button when no visible label is provided
+     */
+    ariaLabel: string;
     /**
      * Button label
      */
@@ -33,16 +38,30 @@ export declare class XplorBtnMenu {
      * Whether the menu is open
      */
     show: boolean;
+    /**
+     * Index of the currently focused menu item for keyboard navigation
+     */
+    focusedIndex: number;
     /**
      * Click event - emits the clicked option
      */
     xplorClick: EventEmitter<MenuOption>;
     private menuRef;
+    private triggerBtnRef;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private handleOutsideClick;
     private toggleMenu;
     private handleClickOption;
+    /**
+     * Returns the list of visible (non-hidden) options for keyboard navigation
+     */
+    private getVisibleOptions;
+    /**
+     * Focuses the menu item at the given index in the visible options list
+     */
+    private focusMenuItem;
+    handleKeyDown(event: KeyboardEvent): void;
     private isHidden;
     private isDisabled;
     render(): any;

package/dist/types/components/xplor-button/xplor-button.d.ts

@@ -5,6 +5,10 @@ export declare class XplorButton {
     size?: string;
     styles?: string;
     clickAction: () => void;
+    /** Accessible label for icon-only buttons */
+    ariaLabel: string;
+    /** Whether the button is disabled */
+    disabled: boolean;
     /**
      * Icon position: 'start' | 'end' | null
      */

package/dist/types/components/xplor-checkbox/xplor-checkbox.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplorCheckbox {
+    private labelId;
     initialChecked: boolean;
     initialIndeterminate: boolean;
     disabled: boolean;

package/dist/types/components/xplor-combobox/xplor-combobox.d.ts

@@ -23,6 +23,10 @@ export declare class XplorCombobox {
      * Label for the input
      */
     label: string;
+    /**
+     * Accessible label for the input when no visible label is provided
+     */
+    ariaLabel: string;
     /**
      * Disable the combobox
      */

package/dist/types/components/xplor-date-picker/xplor-date-picker.d.ts

@@ -28,6 +28,9 @@ export declare class XplorDatePicker {
     isOpen: boolean;
     inputText: string;
     dropdownPosition: 'bottom' | 'top';
+    private inputId;
+    private labelId;
+    private errorId;
     dateChange: EventEmitter<string>;
     xplorFocus: EventEmitter<FocusEvent>;
     xplorBlur: EventEmitter<FocusEvent>;

package/dist/types/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.d.ts

@@ -16,6 +16,10 @@ export declare class XplorDragAndDropInput {
      * Browse button label text
      */
     browseLabel: string;
+    /**
+     * Accessible label for the drop zone area
+     */
+    ariaLabel: string;
     /**
      * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.
      */

package/dist/types/components/xplor-inline-date-picker/xplor-inline-date-picker.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplorInlineDatePicker {
+    el: HTMLElement;
     /**
      * Selected date (YYYY-MM-DD format)
      */
@@ -38,10 +39,12 @@ export declare class XplorInlineDatePicker {
     currentYear: number;
     currentMonth: number;
     viewDate: Date;
+    focusedDay: number;
     private monthNames;
     private dayNames;
     private dayNamesStartMonday;
     componentWillLoad(): void;
+    handleKeyDown(event: KeyboardEvent): void;
     private previousMonth;
     private nextMonth;
     private selectDate;

package/dist/types/components/xplor-input-file/xplor-input-file.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplorInputFile {
     private fileInputRef;
+    private inputId;
     /**
      * Input label
      */

package/dist/types/components/xplor-input-search/xplor-input-search.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplorInputSearch {
+    private inputId;
     /**
      * Search value
      */

package/dist/types/components/xplor-input-select/xplor-input-select.d.ts

@@ -6,8 +6,13 @@ export interface SelectOption {
     [key: string]: any;
 }
 export declare class XplorInputSelect {
+    el: HTMLElement;
     private selectRef;
     private fieldRef;
+    /**
+     * Accessible label for the select when no visible label is provided
+     */
+    ariaLabel: string;
     /**
      * Selected value(s)
      */
@@ -71,8 +76,11 @@ export declare class XplorInputSelect {
         left: number;
         width: number;
     };
+    highlightedIndex: number;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private scrollToHighlightedOption;
     private updateMenuPosition;
     private handleOutsideClick;
     private toggleDropdown;

package/dist/types/components/xplor-input-text/xplor-input-text.d.ts

@@ -1,5 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplorInputText {
+    private inputId;
+    private errorId;
+    private helperId;
     /**
      * Input value
      */

package/dist/types/components/xplor-input-text-area/xplor-input-text-area.d.ts

@@ -1,5 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplorInputTextArea {
+    private inputId;
+    private errorId;
+    private helperId;
     /**
      * Input value
      */

package/dist/types/components/xplor-input-text-secondary/xplor-input-text-secondary.d.ts

@@ -1,5 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplorInputTextSecondary {
+    private inputId;
+    private errorId;
+    private helperId;
     value: string;
     label: string;
     placeholder: string;

package/dist/types/components/xplor-input-title/xplor-input-title.d.ts

@@ -16,6 +16,10 @@ export declare class XplorInputTitle {
      * Whether the input is readonly
      */
     readonly: boolean;
+    /**
+     * Accessible label for the input
+     */
+    ariaLabel: string;
     /**
      * Input event
      */

package/dist/types/components/xplor-links/xplor-links.d.ts

@@ -1,4 +1,6 @@
 export declare class XplorLinks {
     brand: string;
+    /** Alt text for the image */
+    imageAlt: string;
     render(): any;
 }

package/dist/types/components/xplor-modal/xplor-modal.d.ts

@@ -32,12 +32,23 @@ export declare class XplorModal {
      * Whether to show the title area (for spacing)
      */
     showTitle: boolean;
+    /**
+     * Accessible label for the modal (used if no title slot)
+     */
+    ariaLabel: string;
     /**
      * Close event
      */
     xplorClose: EventEmitter<void>;
+    el: HTMLElement;
+    private previouslyFocusedElement;
+    private dialogEl;
     handleOpenChange(newValue: boolean): void;
     disconnectedCallback(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private getFocusableElements;
+    private trapFocus;
+    private setInitialFocus;
     private handleBackdropClick;
     private handleCardClick;
     private closeModal;

package/dist/types/components/xplor-nav-tabs/xplor-nav-tabs.d.ts

@@ -5,11 +5,13 @@ export interface NavTabItem {
     disabled?: boolean;
 }
 export declare class XplorNavTabs {
+    el: HTMLElement;
     value: string;
     items: NavTabItem[];
     color: 'primary' | 'secondary';
     grow: boolean;
     xplorChange: EventEmitter<string>;
     private handleTabClick;
+    handleKeyDown(event: KeyboardEvent): void;
     render(): any;
 }

package/dist/types/components/xplor-radio-btn/xplor-radio-btn.d.ts

@@ -1,3 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplorRadioBtn {
+    el: HTMLElement;
+    /** The label text displayed next to the radio button */
+    label: string;
+    /** The value associated with this radio button */
+    value: string;
+    /** The name attribute to group radio buttons together */
+    name: string;
+    /** Whether this radio button is initially selected */
+    initialChecked: boolean;
+    /** Whether this radio button is disabled */
+    disabled: boolean;
+    /** Whether this radio button is in an error state */
+    error: boolean;
+    checked: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isPressed: boolean;
+    /** Emitted when the radio button selection changes */
+    radioChange: EventEmitter<{
+        value: string;
+        checked: boolean;
+    }>;
+    watchCheckedProp(newValue: boolean): void;
+    componentWillLoad(): void;
+    /** Programmatically deselect this radio button */
+    deselect(): Promise<void>;
+    private getSiblingRadios;
+    private handleClick;
+    private handleKeyDown;
+    private handleKeyUp;
+    private getRadioClass;
     render(): any;
 }

package/dist/types/components/xplor-section-heading/xplor-section-heading.d.ts

@@ -1,5 +1,9 @@
 export declare class XplorSectionHeading {
     size: 'small' | 'medium' | 'large';
     text: string;
+    /**
+     * Heading level (1-6), renders as h1-h6. Defaults to 2.
+     */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
     render(): any;
 }

package/dist/types/components/xplor-tooltip/xplor-tooltip.d.ts

@@ -10,6 +10,7 @@ export declare class XplorTooltip {
     disabled: boolean;
     tooltipStyle: any;
     arrowStyle: any;
+    private tooltipId;
     private triggerEl;
     private tooltipEl;
     private hideTimeout;
@@ -19,6 +20,8 @@ export declare class XplorTooltip {
     private cleanupListeners;
     private handleMouseEnter;
     private handleMouseLeave;
+    private handleFocusIn;
+    private handleFocusOut;
     private handleClick;
     handleDocumentClick(event: MouseEvent): void;
     private showTooltip;