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

package/dist/types/components.d.ts

@@ -27,6 +27,10 @@ export { NavTabItem } from "./components/xplor-nav-tabs/xplor-nav-tabs";
 export { TooltipPosition, TooltipTrigger } from "./components/xplor-tooltip/xplor-tooltip";
 export namespace Components {
     interface XplorAlertDialog {
+        /**
+          * Accessible label for the dialog (used if no title slot)
+         */
+        "ariaLabel": string;
         /**
           * Whether the dialog is open
           * @default false
@@ -91,6 +95,10 @@ export namespace Components {
         "userName": string;
     }
     interface XplorAutocomplete {
+        /**
+          * Accessible label for the input when no visible label is provided
+         */
+        "ariaLabel": string;
         /**
           * Clear button
           * @default false
@@ -294,6 +302,11 @@ export namespace Components {
         "minWidth": string;
     }
     interface XplorBtnBackToParent {
+        /**
+          * Accessible label for the button
+          * @default 'Back to parent'
+         */
+        "ariaLabel": string;
         /**
           * Background color
           * @default 'white'
@@ -321,6 +334,10 @@ export namespace Components {
         "variant": 'text' | 'outlined' | 'elevated' | 'tonal';
     }
     interface XplorBtnIcon {
+        /**
+          * Accessible label for the icon button (required for screen readers)
+         */
+        "ariaLabel": string;
         /**
           * Button color variant
           * @default 'secondary'
@@ -348,6 +365,10 @@ export namespace Components {
         "variant": 'text' | 'outlined' | 'elevated' | 'tonal';
     }
     interface XplorBtnMenu {
+        /**
+          * Accessible label for the menu trigger button when no visible label is provided
+         */
+        "ariaLabel": string;
         /**
           * Button color
           * @default 'secondary'
@@ -449,7 +470,16 @@ export namespace Components {
         "type": 'primary' | 'secondary' | 'ghost' | 'disabled';
     }
     interface XplorButton {
+        /**
+          * Accessible label for icon-only buttons
+         */
+        "ariaLabel": string;
         "clickAction": () => void;
+        /**
+          * Whether the button is disabled
+          * @default false
+         */
+        "disabled": boolean;
         /**
           * Icon to display (defaults to plus sign)
           * @default '+'
@@ -511,6 +541,10 @@ export namespace Components {
           * @default true
          */
         "allowCustom": boolean;
+        /**
+          * Accessible label for the input when no visible label is provided
+         */
+        "ariaLabel": string;
         /**
           * Clear button
           * @default false
@@ -706,6 +740,10 @@ export namespace Components {
           * @default DEFAULT_ACCEPT_ALL
          */
         "accepts": string;
+        /**
+          * Accessible label for the drop zone area
+         */
+        "ariaLabel": string;
         /**
           * Browse button label text
           * @default 'Browse Files'
@@ -966,6 +1004,10 @@ export namespace Components {
         "value": string;
     }
     interface XplorInputSelect {
+        /**
+          * Accessible label for the select when no visible label is provided
+         */
+        "ariaLabel": string;
         /**
           * Background color
           * @default 'white'
@@ -1235,6 +1277,11 @@ export namespace Components {
         "value": string;
     }
     interface XplorInputTitle {
+        /**
+          * Accessible label for the input
+          * @default 'Title'
+         */
+        "ariaLabel": string;
         /**
           * Whether the input is disabled
           * @default false
@@ -1258,8 +1305,17 @@ export namespace Components {
     }
     interface XplorLinks {
         "brand": string;
+        /**
+          * Alt text for the image
+          * @default ''
+         */
+        "imageAlt": string;
     }
     interface XplorModal {
+        /**
+          * Accessible label for the modal (used if no title slot)
+         */
+        "ariaLabel": string;
         /**
           * Loading state
           * @default false
@@ -1344,6 +1400,40 @@ export namespace Components {
         "value": string;
     }
     interface XplorRadioBtn {
+        /**
+          * Programmatically deselect this radio button
+         */
+        "deselect": () => Promise<void>;
+        /**
+          * Whether this radio button is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether this radio button is in an error state
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * Whether this radio button is initially selected
+          * @default false
+         */
+        "initialChecked": boolean;
+        /**
+          * The label text displayed next to the radio button
+          * @default ''
+         */
+        "label": string;
+        /**
+          * The name attribute to group radio buttons together
+          * @default ''
+         */
+        "name": string;
+        /**
+          * The value associated with this radio button
+          * @default ''
+         */
+        "value": string;
     }
     interface XplorSectionCard {
         /**
@@ -1360,6 +1450,11 @@ export namespace Components {
         "rounded": boolean;
     }
     interface XplorSectionHeading {
+        /**
+          * Heading level (1-6), renders as h1-h6. Defaults to 2.
+          * @default 2
+         */
+        "level": 1 | 2 | 3 | 4 | 5 | 6;
         /**
           * @default 'medium'
          */
@@ -1698,6 +1793,10 @@ export interface XplorNavTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplorNavTabsElement;
 }
+export interface XplorRadioBtnCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplorRadioBtnElement;
+}
 export interface XplorTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplorTableElement;
@@ -2384,7 +2483,18 @@ declare global {
         prototype: HTMLXplorNavTabsElement;
         new (): HTMLXplorNavTabsElement;
     };
+    interface HTMLXplorRadioBtnElementEventMap {
+        "radioChange": { value: string; checked: boolean };
+    }
     interface HTMLXplorRadioBtnElement extends Components.XplorRadioBtn, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplorRadioBtnElementEventMap>(type: K, listener: (this: HTMLXplorRadioBtnElement, ev: XplorRadioBtnCustomEvent<HTMLXplorRadioBtnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplorRadioBtnElementEventMap>(type: K, listener: (this: HTMLXplorRadioBtnElement, ev: XplorRadioBtnCustomEvent<HTMLXplorRadioBtnElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLXplorRadioBtnElement: {
         prototype: HTMLXplorRadioBtnElement;
@@ -2534,6 +2644,10 @@ declare global {
 }
 declare namespace LocalJSX {
     interface XplorAlertDialog {
+        /**
+          * Accessible label for the dialog (used if no title slot)
+         */
+        "ariaLabel"?: string;
         /**
           * Close event
          */
@@ -2607,6 +2721,10 @@ declare namespace LocalJSX {
         "userName": string;
     }
     interface XplorAutocomplete {
+        /**
+          * Accessible label for the input when no visible label is provided
+         */
+        "ariaLabel"?: string;
         /**
           * Clear button
           * @default false
@@ -2818,6 +2936,11 @@ declare namespace LocalJSX {
         "onXplorClick"?: (event: XplorBtnBackCustomEvent<MouseEvent>) => void;
     }
     interface XplorBtnBackToParent {
+        /**
+          * Accessible label for the button
+          * @default 'Back to parent'
+         */
+        "ariaLabel"?: string;
         /**
           * Background color
           * @default 'white'
@@ -2849,6 +2972,10 @@ declare namespace LocalJSX {
         "variant"?: 'text' | 'outlined' | 'elevated' | 'tonal';
     }
     interface XplorBtnIcon {
+        /**
+          * Accessible label for the icon button (required for screen readers)
+         */
+        "ariaLabel"?: string;
         /**
           * Button color variant
           * @default 'secondary'
@@ -2880,6 +3007,10 @@ declare namespace LocalJSX {
         "variant"?: 'text' | 'outlined' | 'elevated' | 'tonal';
     }
     interface XplorBtnMenu {
+        /**
+          * Accessible label for the menu trigger button when no visible label is provided
+         */
+        "ariaLabel"?: string;
         /**
           * Button color
           * @default 'secondary'
@@ -2993,7 +3124,16 @@ declare namespace LocalJSX {
         "type"?: 'primary' | 'secondary' | 'ghost' | 'disabled';
     }
     interface XplorButton {
+        /**
+          * Accessible label for icon-only buttons
+         */
+        "ariaLabel"?: string;
         "clickAction"?: () => void;
+        /**
+          * Whether the button is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
         /**
           * Icon to display (defaults to plus sign)
           * @default '+'
@@ -3056,6 +3196,10 @@ declare namespace LocalJSX {
           * @default true
          */
         "allowCustom"?: boolean;
+        /**
+          * Accessible label for the input when no visible label is provided
+         */
+        "ariaLabel"?: string;
         /**
           * Clear button
           * @default false
@@ -3276,6 +3420,10 @@ declare namespace LocalJSX {
           * @default DEFAULT_ACCEPT_ALL
          */
         "accepts"?: string;
+        /**
+          * Accessible label for the drop zone area
+         */
+        "ariaLabel"?: string;
         /**
           * Browse button label text
           * @default 'Browse Files'
@@ -3572,6 +3720,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface XplorInputSelect {
+        /**
+          * Accessible label for the select when no visible label is provided
+         */
+        "ariaLabel"?: string;
         /**
           * Background color
           * @default 'white'
@@ -3879,6 +4031,11 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface XplorInputTitle {
+        /**
+          * Accessible label for the input
+          * @default 'Title'
+         */
+        "ariaLabel"?: string;
         /**
           * Whether the input is disabled
           * @default false
@@ -3910,8 +4067,17 @@ declare namespace LocalJSX {
     }
     interface XplorLinks {
         "brand"?: string;
+        /**
+          * Alt text for the image
+          * @default ''
+         */
+        "imageAlt"?: string;
     }
     interface XplorModal {
+        /**
+          * Accessible label for the modal (used if no title slot)
+         */
+        "ariaLabel"?: string;
         /**
           * Loading state
           * @default false
@@ -4005,6 +4171,40 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface XplorRadioBtn {
+        /**
+          * Whether this radio button is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether this radio button is in an error state
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * Whether this radio button is initially selected
+          * @default false
+         */
+        "initialChecked"?: boolean;
+        /**
+          * The label text displayed next to the radio button
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * The name attribute to group radio buttons together
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Emitted when the radio button selection changes
+         */
+        "onRadioChange"?: (event: XplorRadioBtnCustomEvent<{ value: string; checked: boolean }>) => void;
+        /**
+          * The value associated with this radio button
+          * @default ''
+         */
+        "value"?: string;
     }
     interface XplorSectionCard {
         /**
@@ -4021,6 +4221,11 @@ declare namespace LocalJSX {
         "rounded"?: boolean;
     }
     interface XplorSectionHeading {
+        /**
+          * Heading level (1-6), renders as h1-h6. Defaults to 2.
+          * @default 2
+         */
+        "level"?: 1 | 2 | 3 | 4 | 5 | 6;
         /**
           * @default 'medium'
          */

package/dist/types/test-utils/index.d.ts

@@ -0,0 +1,2 @@
+export { renderComponent, triggerEvent, triggerKeyboard, typeIntoInput, eventSpy } from './spec-helpers';
+export { createMockFile, mockBoundingClientRect, mockFetch, mockRequestAnimationFrame } from './mocks';

package/dist/types/test-utils/mocks.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Creates a mock File object for testing file upload components.
+ */
+export declare function createMockFile(name?: string, size?: number, type?: string, lastModified?: number): File;
+/**
+ * Mocks getBoundingClientRect for positioning tests (tooltip, picker, dropdown).
+ */
+export declare function mockBoundingClientRect(el: Element, rect?: Partial<DOMRect>): void;
+/**
+ * Mocks global fetch for API-calling components like xplor-assistant.
+ */
+export declare function mockFetch(response: any, ok?: boolean): jest.SpyInstance;
+/**
+ * Mocks requestAnimationFrame for JSDOM environments.
+ */
+export declare function mockRequestAnimationFrame(): void;

package/dist/types/test-utils/spec-helpers.d.ts

@@ -0,0 +1,26 @@
+import { SpecPage } from '@stencil/core/testing';
+/**
+ * Wraps newSpecPage to reduce boilerplate. Renders a single component with the given HTML.
+ */
+export declare function renderComponent(opts: {
+    components: any[];
+    html: string;
+    autoApplyChanges?: boolean;
+}): Promise<SpecPage>;
+/**
+ * Dispatches a DOM event on the given element and waits for Stencil to process changes.
+ */
+export declare function triggerEvent(page: SpecPage, el: Element, eventName: string, eventInit?: EventInit): Promise<void>;
+/**
+ * Dispatches a keyboard event on the given element and waits for changes.
+ */
+export declare function triggerKeyboard(page: SpecPage, el: Element, eventName: 'keydown' | 'keyup' | 'keypress', key: string, options?: Partial<KeyboardEventInit>): Promise<void>;
+/**
+ * Simulates typing into an input element by setting its value and dispatching an input event.
+ */
+export declare function typeIntoInput(page: SpecPage, input: HTMLInputElement | HTMLTextAreaElement, value: string): Promise<void>;
+/**
+ * Attaches a Jest spy to capture events emitted by a Stencil component.
+ * Returns the spy which can be used to check calls.
+ */
+export declare function eventSpy(el: Element, eventName: string): jest.Mock;