@compa11y/web 0.1.0 → 0.1.3

package/dist/components/button.d.ts

@@ -0,0 +1,31 @@
+import { Compa11yElement } from '../utils/base-element';
+
+export declare class A11yButton extends Compa11yElement {
+    private _buttonEl;
+    static get observedAttributes(): string[];
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get discoverable(): boolean;
+    set discoverable(v: boolean);
+    get loading(): boolean;
+    set loading(v: boolean);
+    get variant(): string;
+    set variant(v: string);
+    get size(): string;
+    set size(v: string);
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
+    private handleClick;
+    private updateDisabledState;
+    private updateLoadingState;
+    /** Focus the button element */
+    focus(): void;
+    /** Blur the button element */
+    blur(): void;
+    /** Programmatically click the button */
+    click(): void;
+}
+export default A11yButton;

package/dist/components/checkbox.d.ts

@@ -0,0 +1,159 @@
+import { Compa11yElement } from '../utils/base-element';
+
+export declare class A11yCheckbox extends Compa11yElement {
+    private _checked;
+    private _indeterminate;
+    private _input;
+    static get observedAttributes(): string[];
+    /**
+     * Get/set the checked state
+     */
+    get checked(): boolean;
+    set checked(value: boolean);
+    /**
+     * Get/set the indeterminate state
+     */
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    /**
+     * Get/set the disabled state
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * Get/set the value
+     */
+    get value(): string;
+    set value(v: string);
+    /**
+     * Get/set the visible label
+     */
+    get label(): string;
+    set label(value: string);
+    /**
+     * Get/set the hint text
+     */
+    get hint(): string;
+    set hint(value: string);
+    /**
+     * Get/set the error message
+     */
+    get error(): string;
+    set error(value: string);
+    /**
+     * Get/set the size variant
+     */
+    get size(): 'sm' | 'md' | 'lg';
+    set size(value: 'sm' | 'md' | 'lg');
+    /**
+     * Get/set required state
+     */
+    get required(): boolean;
+    set required(value: boolean);
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
+    /**
+     * Handle change event from native input
+     */
+    private handleChange;
+    /**
+     * Update visual state of indicator
+     */
+    private updateVisualState;
+    /**
+     * Update disabled state
+     */
+    private updateDisabledState;
+    /**
+     * Update size class
+     */
+    private updateSizeClass;
+    /**
+     * Toggle the checkbox programmatically
+     */
+    toggle(): void;
+    /**
+     * Set checked state programmatically
+     */
+    setChecked(checked: boolean): void;
+}
+/**
+ * compa11y Checkbox Group Web Component
+ *
+ * Groups related checkboxes with a fieldset/legend for accessibility.
+ *
+ * @example
+ * ```html
+ * <a11y-checkbox-group legend="Select toppings" error="Pick at least 2">
+ *   <a11y-checkbox value="cheese" label="Cheese"></a11y-checkbox>
+ *   <a11y-checkbox value="peppers" label="Peppers"></a11y-checkbox>
+ *   <a11y-checkbox value="olives" label="Olives"></a11y-checkbox>
+ * </a11y-checkbox-group>
+ * ```
+ *
+ * @fires change - Emitted when any checkbox in the group changes, detail: { value: string[] }
+ *
+ * @attr {string} legend - Group label displayed as fieldset legend
+ * @attr {string} error - Group-level error message
+ * @attr {boolean} disabled - Disable all checkboxes in the group
+ * @attr {string} orientation - Layout: 'vertical' | 'horizontal' (default: 'vertical')
+ *
+ * @cssprop --compa11y-checkbox-group-gap - Gap between checkboxes
+ * @cssprop --compa11y-checkbox-group-legend-weight - Legend font weight
+ * @cssprop --compa11y-checkbox-group-legend-color - Legend text color
+ * @cssprop --compa11y-checkbox-group-error-color - Error text color
+ */
+export declare class A11yCheckboxGroup extends Compa11yElement {
+    private _value;
+    static get observedAttributes(): string[];
+    /**
+     * Get/set the selected values as an array
+     */
+    get value(): string[];
+    set value(val: string[]);
+    /**
+     * Get/set the disabled state
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * Get/set the legend text
+     */
+    get legend(): string;
+    set legend(value: string);
+    /**
+     * Get/set the error message
+     */
+    get error(): string;
+    set error(value: string);
+    /**
+     * Get/set the orientation
+     */
+    get orientation(): 'vertical' | 'horizontal';
+    set orientation(value: 'vertical' | 'horizontal');
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, _newValue: string | null): void;
+    /**
+     * Handle change events from child checkboxes
+     */
+    private handleChildChange;
+    /**
+     * Initialize value array from currently checked children
+     */
+    private initValueFromChildren;
+    /**
+     * Sync checkbox checked states from value array
+     */
+    private syncCheckboxStates;
+    /**
+     * Sync disabled state to children
+     */
+    private syncDisabledState;
+}
+export default A11yCheckbox;

package/dist/components/combobox.d.ts

@@ -1,6 +1,6 @@
-import { A11yKitElement } from '../utils/base-element';
+import { Compa11yElement } from '../utils/base-element';
 
-export declare class A11yCombobox extends A11yKitElement {
+export declare class A11yCombobox extends Compa11yElement {
     private _open;
     private _highlightedIndex;
     private _options;
@@ -48,4 +48,3 @@ export declare class A11yCombobox extends A11yKitElement {
     clear(): void;
 }
 export default A11yCombobox;
-//# sourceMappingURL=combobox.d.ts.map

package/dist/components/dialog.d.ts

@@ -1,6 +1,6 @@
-import { A11yKitElement } from '../utils/base-element';
+import { Compa11yElement } from '../utils/base-element';
 
-export declare class A11yDialog extends A11yKitElement {
+export declare class A11yDialog extends Compa11yElement {
     private _open;
     private _previouslyFocused;
     private _triggerElement;
@@ -33,4 +33,3 @@ export declare class A11yDialog extends A11yKitElement {
     close(): void;
 }
 export default A11yDialog;
-//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog.test.d.ts

@@ -1,2 +1 @@
 
-//# sourceMappingURL=dialog.test.d.ts.map

package/dist/components/input.d.ts

@@ -0,0 +1,40 @@
+import { Compa11yElement } from '../utils/base-element';
+
+export declare class A11yInput extends Compa11yElement {
+    private _value;
+    private _inputEl;
+    private _labelEl;
+    private _hintEl;
+    private _errorEl;
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get readOnly(): boolean;
+    set readOnly(v: boolean);
+    get required(): boolean;
+    set required(v: boolean);
+    get error(): string;
+    set error(v: string);
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private updateError;
+    private updateHint;
+    private updateAriaDescribedBy;
+    private updateRequiredIndicator;
+    /** Focus the input element */
+    focus(): void;
+    /** Blur the input element */
+    blur(): void;
+    /** Select all text in the input */
+    select(): void;
+}
+export default A11yInput;

package/dist/components/listbox.d.ts

@@ -0,0 +1,85 @@
+import { Compa11yElement } from '../utils/base-element';
+
+export declare class A11yOptgroup extends Compa11yElement {
+    private _label;
+    private _disabled;
+    static get observedAttributes(): string[];
+    get label(): string;
+    set label(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    private updateLabel;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare class A11yOption extends Compa11yElement {
+    private _value;
+    private _disabled;
+    private _selected;
+    private _discoverable;
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get selected(): boolean;
+    set selected(v: boolean);
+    get discoverable(): boolean;
+    set discoverable(v: boolean);
+    /**
+     * Whether this option is effectively disabled (own disabled or group disabled)
+     */
+    get effectivelyDisabled(): boolean;
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    private handleClick;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare class A11yListbox extends Compa11yElement {
+    private _value;
+    private _values;
+    private _multiple;
+    private _disabled;
+    private _discoverable;
+    private _orientation;
+    private _focusedIndex;
+    private _typeAhead;
+    static get observedAttributes(): string[];
+    get value(): string | string[];
+    set value(v: string | string[]);
+    get multiple(): boolean;
+    set multiple(v: boolean);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get discoverable(): boolean;
+    set discoverable(v: boolean);
+    get orientation(): 'horizontal' | 'vertical';
+    set orientation(v: 'horizontal' | 'vertical');
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    private getAllOptions;
+    private getEnabledOptions;
+    private getEnabledIndices;
+    private syncOptionStates;
+    private updateFocusHighlight;
+    private findNextEnabled;
+    private findFirstEnabled;
+    private findLastEnabled;
+    private selectOption;
+    private selectSingle;
+    private toggleOptionSelection;
+    private selectRange;
+    private toggleSelectAll;
+    private rebuildTypeAhead;
+    private handleFocus;
+    private handleOptionSelect;
+    private handleKeyDown;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/dist/components/menu.d.ts

@@ -1,6 +1,6 @@
-import { A11yKitElement } from '../utils/base-element';
+import { Compa11yElement } from '../utils/base-element';
 
-export declare class A11yMenu extends A11yKitElement {
+export declare class A11yMenu extends Compa11yElement {
     private _open;
     private _highlightedIndex;
     private _menuItems;
@@ -37,4 +37,3 @@ export declare class A11yMenu extends A11yKitElement {
     toggle(): void;
 }
 export default A11yMenu;
-//# sourceMappingURL=menu.d.ts.map

package/dist/components/menu.test.d.ts

@@ -1,2 +1 @@
 
-//# sourceMappingURL=menu.test.d.ts.map

package/dist/components/radio-group.d.ts

@@ -0,0 +1,86 @@
+import { Compa11yElement } from '../utils/base-element';
+
+export declare class A11yRadioGroup extends Compa11yElement {
+    private _value;
+    private _disabled;
+    private _discoverable;
+    private _orientation;
+    private _required;
+    private _name;
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get discoverable(): boolean;
+    set discoverable(v: boolean);
+    get required(): boolean;
+    set required(v: boolean);
+    get name(): string;
+    set name(v: string);
+    get orientation(): 'horizontal' | 'vertical';
+    set orientation(v: 'horizontal' | 'vertical');
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    private getRadios;
+    private getEnabledRadios;
+    private syncRadioStates;
+    selectRadio(value: string): void;
+    private handleRadioSelect;
+    private handleKeyDown;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+/**
+ * Individual radio option for use within a11y-radio-group.
+ *
+ * @example
+ * ```html
+ * <a11y-radio value="option1" label="Option 1"></a11y-radio>
+ * <a11y-radio value="option2" label="Option 2" hint="Additional info"></a11y-radio>
+ * <a11y-radio value="option3" label="Option 3" disabled></a11y-radio>
+ * ```
+ *
+ * @attr {string} value - Radio value
+ * @attr {string} label - Visible label text
+ * @attr {string} hint - Helper/description text
+ * @attr {boolean} checked - Whether this radio is checked
+ * @attr {boolean} disabled - Whether this radio is disabled
+ * @attr {boolean} discoverable - Whether disabled radio remains in tab order
+ *
+ * @cssprop --compa11y-radio-size - Radio circle size
+ * @cssprop --compa11y-radio-bg - Background when unchecked
+ * @cssprop --compa11y-radio-border - Border when unchecked
+ * @cssprop --compa11y-radio-checked-bg - Background when checked
+ * @cssprop --compa11y-radio-checked-border - Border when checked
+ * @cssprop --compa11y-radio-dot-size - Inner dot size
+ * @cssprop --compa11y-radio-dot-color - Inner dot color
+ * @cssprop --compa11y-radio-hover-border - Border on hover
+ * @cssprop --compa11y-radio-label-color - Label text color
+ * @cssprop --compa11y-radio-hint-color - Hint text color
+ * @cssprop --compa11y-focus-color - Focus outline color
+ */
+export declare class A11yRadio extends Compa11yElement {
+    private _value;
+    private _checked;
+    private _disabled;
+    private _discoverable;
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(v: string);
+    get checked(): boolean;
+    set checked(v: boolean);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get discoverable(): boolean;
+    set discoverable(v: boolean | string);
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    private handleClick;
+    private handleKeyDown;
+    private updateVisual;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/dist/components/select.d.ts

@@ -0,0 +1,46 @@
+import { Compa11yElement } from '../utils/base-element';
+
+export declare class A11ySelect extends Compa11yElement {
+    private _open;
+    private _highlightedIndex;
+    private _options;
+    private _selectedValue;
+    private _triggerElement;
+    private _listboxElement;
+    private _typeAhead;
+    static get observedAttributes(): string[];
+    get open(): boolean;
+    set open(value: boolean);
+    get value(): string | null;
+    set value(val: string | null);
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
+    private updateOptions;
+    private renderOptions;
+    private handleTriggerClick;
+    private handleKeyDown;
+    private handleBlur;
+    private handleListboxMouseDown;
+    private handleOptionClick;
+    private handleOptionHover;
+    private handleOutsideClick;
+    private openAndHighlight;
+    private selectOption;
+    private updateTriggerText;
+    private highlightNext;
+    private highlightPrevious;
+    private findNextEnabled;
+    private findFirstEnabled;
+    private findLastEnabled;
+    private updateHighlight;
+    private updateListboxVisibility;
+    private updateListboxPosition;
+    /** Programmatic open */
+    show(): void;
+    /** Programmatic close */
+    close(): void;
+}
+export default A11ySelect;

package/dist/components/switch.d.ts

@@ -1,6 +1,6 @@
-import { A11yKitElement } from '../utils/base-element';
+import { Compa11yElement } from '../utils/base-element';
 
-export declare class A11ySwitch extends A11yKitElement {
+export declare class A11ySwitch extends Compa11yElement {
     private _checked;
     private _button;
     private _label;
@@ -65,4 +65,3 @@ export declare class A11ySwitch extends A11yKitElement {
     setChecked(checked: boolean): void;
 }
 export default A11ySwitch;
-//# sourceMappingURL=switch.d.ts.map

package/dist/components/tabs.d.ts

@@ -1,6 +1,6 @@
-import { A11yKitElement } from '../utils/base-element';
+import { Compa11yElement } from '../utils/base-element';
 
-export declare class A11yTabs extends A11yKitElement {
+export declare class A11yTabs extends Compa11yElement {
     private _tabs;
     private _panels;
     private _selectedIndex;
@@ -32,4 +32,3 @@ export declare class A11yTabs extends A11yKitElement {
     previous(): void;
 }
 export default A11yTabs;
-//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.test.d.ts

@@ -1,2 +1 @@
 
-//# sourceMappingURL=tabs.test.d.ts.map

package/dist/components/textarea.d.ts

@@ -0,0 +1,40 @@
+import { Compa11yElement } from '../utils/base-element';
+
+export declare class A11yTextarea extends Compa11yElement {
+    private _value;
+    private _textareaEl;
+    private _labelEl;
+    private _hintEl;
+    private _errorEl;
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get readOnly(): boolean;
+    set readOnly(v: boolean);
+    get required(): boolean;
+    set required(v: boolean);
+    get error(): string;
+    set error(v: string);
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private updateError;
+    private updateHint;
+    private updateAriaDescribedBy;
+    private updateRequiredIndicator;
+    /** Focus the textarea element */
+    focus(): void;
+    /** Blur the textarea element */
+    blur(): void;
+    /** Select all text in the textarea */
+    select(): void;
+}
+export default A11yTextarea;

package/dist/index.d.ts

@@ -3,8 +3,14 @@ import { A11yMenu } from './components/menu';
 import { A11yTabs } from './components/tabs';
 import { A11yCombobox } from './components/combobox';
 import { A11ySwitch } from './components/switch';
+import { A11ySelect } from './components/select';
+import { A11yInput } from './components/input';
+import { A11yTextarea } from './components/textarea';
+import { A11yButton } from './components/button';
+import { A11yListbox, A11yOption, A11yOptgroup } from './components/listbox';
+import { A11yCheckbox, A11yCheckboxGroup } from './components/checkbox';
+import { A11yRadioGroup, A11yRadio } from './components/radio-group';
 import { initAnnouncer, announce, announcePolite, announceAssertive, announceStatus, announceError, initFocusVisible, createFocusTrap, createFocusScope, createRovingTabindex, createKeyboardManager, KeyboardPatterns, createTypeAhead, aria, buildAriaProps, hasAccessibleName, isBrowser, prefersReducedMotion, prefersHighContrast, prefersDarkMode } from '@compa11y/core';
 
-export { A11yDialog, A11yMenu, A11yTabs, A11yCombobox, A11ySwitch };
+export { A11yDialog, A11yMenu, A11yTabs, A11yCombobox, A11ySwitch, A11ySelect, A11yInput, A11yTextarea, A11yButton, A11yListbox, A11yOption, A11yOptgroup, A11yCheckbox, A11yCheckboxGroup, A11yRadioGroup, A11yRadio, };
 export { initAnnouncer, announce, announcePolite, announceAssertive, announceStatus, announceError, initFocusVisible, createFocusTrap, createFocusScope, createRovingTabindex, createKeyboardManager, KeyboardPatterns, createTypeAhead, aria, buildAriaProps, hasAccessibleName, isBrowser, prefersReducedMotion, prefersHighContrast, prefersDarkMode, };
-//# sourceMappingURL=index.d.ts.map

package/dist/utils/base-element.d.ts

@@ -1,7 +1,7 @@
 /**
  * Base class for compa11y Web Components
  */
-export declare abstract class A11yKitElement extends HTMLElement {
+export declare abstract class Compa11yElement extends HTMLElement {
     protected _internals: ElementInternals | null;
     protected _id: string;
     constructor();
@@ -58,4 +58,3 @@ export declare abstract class A11yKitElement extends HTMLElement {
  * Helper to define a custom element safely
  */
 export declare function defineElement(name: string, constructor: CustomElementConstructor): void;
-//# sourceMappingURL=base-element.d.ts.map