@compa11y/web 0.1.2 → 0.1.5

package/dist/components/button.d.ts

@@ -29,4 +29,3 @@ export declare class A11yButton extends Compa11yElement {
     click(): void;
 }
 export default A11yButton;
-//# sourceMappingURL=button.d.ts.map

package/dist/components/checkbox.d.ts

@@ -157,4 +157,3 @@ export declare class A11yCheckboxGroup extends Compa11yElement {
     private syncDisabledState;
 }
 export default A11yCheckbox;
-//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/combobox.d.ts

@@ -48,4 +48,3 @@ export declare class A11yCombobox extends Compa11yElement {
     clear(): void;
 }
 export default A11yCombobox;
-//# sourceMappingURL=combobox.d.ts.map

package/dist/components/dialog.d.ts

@@ -33,4 +33,3 @@ export declare class A11yDialog extends Compa11yElement {
     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

@@ -38,4 +38,3 @@ export declare class A11yInput extends Compa11yElement {
     select(): void;
 }
 export default A11yInput;
-//# sourceMappingURL=input.d.ts.map

package/dist/components/listbox.d.ts

@@ -13,7 +13,7 @@ export declare class A11yOptgroup extends Compa11yElement {
     protected setupEventListeners(): void;
     protected cleanupEventListeners(): void;
     private updateLabel;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
 }
 export declare class A11yOption extends Compa11yElement {
     private _value;
@@ -38,7 +38,7 @@ export declare class A11yOption extends Compa11yElement {
     protected setupEventListeners(): void;
     protected cleanupEventListeners(): void;
     private handleClick;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
 }
 export declare class A11yListbox extends Compa11yElement {
     private _value;
@@ -81,6 +81,5 @@ export declare class A11yListbox extends Compa11yElement {
     private handleFocus;
     private handleOptionSelect;
     private handleKeyDown;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-//# sourceMappingURL=listbox.d.ts.map

package/dist/components/menu.d.ts

@@ -4,6 +4,9 @@ export declare class A11yMenu extends Compa11yElement {
     private _open;
     private _highlightedIndex;
     private _menuItems;
+    private _triggerEl;
+    private _triggerSlotEl;
+    private _defaultSlotEl;
     static get observedAttributes(): string[];
     get open(): boolean;
     set open(value: boolean);
@@ -37,4 +40,3 @@ export declare class A11yMenu extends Compa11yElement {
     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

@@ -84,4 +84,3 @@ export declare class A11yRadio extends Compa11yElement {
     private updateVisual;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
-//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/select.d.ts

@@ -44,4 +44,3 @@ export declare class A11ySelect extends Compa11yElement {
     close(): void;
 }
 export default A11ySelect;
-//# sourceMappingURL=select.d.ts.map

package/dist/components/switch.d.ts

@@ -65,4 +65,3 @@ export declare class A11ySwitch extends Compa11yElement {
     setChecked(checked: boolean): void;
 }
 export default A11ySwitch;
-//# sourceMappingURL=switch.d.ts.map

package/dist/components/tabs.d.ts

@@ -4,6 +4,10 @@ export declare class A11yTabs extends Compa11yElement {
     private _tabs;
     private _panels;
     private _selectedIndex;
+    private _focusedIndex;
+    private _tabSlotEl;
+    private _panelSlotEl;
+    private _defaultSlotEl;
     static get observedAttributes(): string[];
     get selectedIndex(): number;
     set selectedIndex(value: number);
@@ -12,6 +16,7 @@ export declare class A11yTabs extends Compa11yElement {
     protected setupAccessibility(): void;
     protected render(): void;
     protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
     protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
     private updateTabsAndPanels;
     private handleClick;
@@ -32,4 +37,3 @@ export declare class A11yTabs extends Compa11yElement {
     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

@@ -38,4 +38,3 @@ export declare class A11yTextarea extends Compa11yElement {
     select(): void;
 }
 export default A11yTextarea;
-//# sourceMappingURL=textarea.d.ts.map

package/dist/components/toast.d.ts

@@ -0,0 +1,48 @@
+import { Compa11yElement } from '../utils/base-element';
+
+export interface ToastOptions {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    description?: string;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export declare class A11yToast extends Compa11yElement {
+    private _toasts;
+    private _counter;
+    private _containerEl;
+    private _maxToasts;
+    static get observedAttributes(): string[];
+    get position(): string;
+    get duration(): number;
+    get maxToasts(): number;
+    get label(): string;
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
+    /**
+     * Add a toast notification. Returns the toast ID.
+     */
+    add(options: ToastOptions): string;
+    /**
+     * Remove a toast by ID.
+     */
+    remove(id: string): void;
+    /**
+     * Remove all toasts.
+     */
+    clear(): void;
+    private _renderToast;
+    private _removeElement;
+    private _startTimer;
+    private _pauseTimer;
+    private _resumeTimer;
+    private _handleClick;
+    private _escapeHtml;
+}
+export default A11yToast;

package/dist/index.d.ts

@@ -10,8 +10,8 @@ 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 { A11yToast } from './components/toast';
 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, A11ySelect, A11yInput, A11yTextarea, A11yButton, A11yListbox, A11yOption, A11yOptgroup, A11yCheckbox, A11yCheckboxGroup, A11yRadioGroup, A11yRadio, };
+export { A11yDialog, A11yMenu, A11yTabs, A11yCombobox, A11ySwitch, A11ySelect, A11yInput, A11yTextarea, A11yButton, A11yListbox, A11yOption, A11yOptgroup, A11yCheckbox, A11yCheckboxGroup, A11yRadioGroup, A11yRadio, A11yToast, };
 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

@@ -58,4 +58,3 @@ export declare abstract class Compa11yElement extends HTMLElement {
  * Helper to define a custom element safely
  */
 export declare function defineElement(name: string, constructor: CustomElementConstructor): void;
-//# sourceMappingURL=base-element.d.ts.map

package/dist/utils/styles.d.ts

@@ -47,7 +47,7 @@ export declare const BUTTON_STYLES = "\n  \n  :host {\n    display: block;\n
 /**
  * Listbox-specific styles
  */
-export declare const LISTBOX_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: block;\n    width: var(--compa11y-listbox-width, 250px);\n  }\n\n  .listbox-wrapper {\n    max-height: var(--compa11y-listbox-max-height, 300px);\n    overflow-y: auto;\n    border: var(--compa11y-listbox-border, 1px solid #e0e0e0);\n    border-radius: var(--compa11y-listbox-radius, 4px);\n    background: var(--compa11y-listbox-bg, white);\n    padding: var(--compa11y-listbox-padding, 0.25rem 0);\n  }\n\n  :host([disabled]) .listbox-wrapper {\n    opacity: var(--compa11y-listbox-disabled-opacity, 0.5);\n    cursor: not-allowed;\n  }\n\n  :host(:focus-visible) .listbox-wrapper {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  :host([orientation=\"horizontal\"]) .listbox-wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    max-height: none;\n    overflow-y: visible;\n  }\n";
+export declare const LISTBOX_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: block;\n    width: var(--compa11y-listbox-width, 250px);\n  }\n\n  .listbox-wrapper {\n    max-height: var(--compa11y-listbox-max-height, 300px);\n    overflow-y: auto;\n    border: var(--compa11y-listbox-border, 1px solid #e0e0e0);\n    border-radius: var(--compa11y-listbox-radius, 4px);\n    background: var(--compa11y-listbox-bg, white);\n    padding: var(--compa11y-listbox-padding, 0.25rem 0);\n  }\n\n  :host([disabled]) .listbox-wrapper {\n    opacity: var(--compa11y-listbox-disabled-opacity, 0.5);\n    cursor: not-allowed;\n  }\n\n  /* Focus indicator lives on the active option (via data-focused),\n     not on the container, to avoid a double focus ring. */\n  :host(:focus-visible) .listbox-wrapper {\n    outline: none;\n  }\n\n  :host([orientation=\"horizontal\"]) .listbox-wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    max-height: none;\n    overflow-y: visible;\n  }\n";
 /**
  * Option-specific styles (for a11y-option inside listbox)
  */
@@ -72,4 +72,7 @@ export declare const RADIO_GROUP_STYLES = "\n  \n  :host {\n    display: block;\
  * Radio-specific styles
  */
 export declare const RADIO_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: inline-block;\n  }\n\n  .radio-wrapper {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--compa11y-radio-gap, 0.5rem);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  :host([disabled]) .radio-wrapper {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .radio-control {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .radio-input {\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    cursor: inherit;\n    z-index: 1;\n  }\n\n  .radio-circle {\n    width: var(--compa11y-radio-size, 1.25rem);\n    height: var(--compa11y-radio-size, 1.25rem);\n    min-width: 24px;\n    min-height: 24px;\n    border: var(--compa11y-radio-border, 2px solid #666);\n    border-radius: 50%;\n    background: var(--compa11y-radio-bg, white);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n    pointer-events: none;\n  }\n\n  :host([checked]) .radio-circle {\n    background: var(--compa11y-radio-checked-bg, #0066cc);\n    border-color: var(--compa11y-radio-checked-border, #0066cc);\n  }\n\n  /* Focus visible on circle when input is focused */\n  .radio-input:focus-visible + .radio-circle {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  /* Hover */\n  .radio-wrapper:hover:not([disabled]) .radio-circle {\n    border-color: var(--compa11y-radio-hover-border, #0066cc);\n  }\n\n  /* Inner dot */\n  .radio-dot {\n    width: var(--compa11y-radio-dot-size, 0.5rem);\n    height: var(--compa11y-radio-dot-size, 0.5rem);\n    border-radius: 50%;\n    background: var(--compa11y-radio-dot-color, white);\n    opacity: 0;\n    transform: scale(0);\n    transition: all 0.15s ease;\n  }\n\n  :host([checked]) .radio-dot {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  /* Label and text */\n  .radio-content {\n    display: flex;\n    flex-direction: column;\n    gap: 0.125rem;\n    padding-top: 0.125rem;\n  }\n\n  .radio-label {\n    color: var(--compa11y-radio-label-color, inherit);\n    font-size: var(--compa11y-radio-label-size, 1rem);\n    cursor: inherit;\n  }\n\n  .radio-hint {\n    color: var(--compa11y-radio-hint-color, #666);\n    font-size: var(--compa11y-radio-hint-size, 0.8125rem);\n  }\n\n  /* Forced colors / high contrast mode */\n  @media (forced-colors: active) {\n    .radio-circle {\n      border: 2px solid ButtonText;\n    }\n\n    :host([checked]) .radio-circle {\n      background: Highlight;\n      border-color: Highlight;\n    }\n\n    .radio-dot {\n      background: HighlightText;\n    }\n  }\n";
-//# sourceMappingURL=styles.d.ts.map
+/**
+ * Toast-specific styles
+ */
+export declare const TOAST_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    position: fixed;\n    z-index: var(--compa11y-toast-z-index, 9999);\n    padding: var(--compa11y-toast-viewport-padding, 1rem);\n    display: flex;\n    flex-direction: column;\n    gap: var(--compa11y-toast-gap, 0.5rem);\n    pointer-events: none;\n  }\n\n  /* Position variants */\n  :host([position=\"top-left\"]) { top: 0; left: 0; }\n  :host([position=\"top-center\"]) { top: 0; left: 50%; transform: translateX(-50%); }\n  :host([position=\"top-right\"]) { top: 0; right: 0; }\n  :host([position=\"bottom-left\"]) { bottom: 0; left: 0; }\n  :host(:not([position])),\n  :host([position=\"bottom-right\"]) { bottom: 0; right: 0; }\n  :host([position=\"bottom-center\"]) { bottom: 0; left: 50%; transform: translateX(-50%); }\n\n  .toast {\n    pointer-events: auto;\n    display: flex;\n    align-items: flex-start;\n    gap: 0.75rem;\n    padding: var(--compa11y-toast-padding, 0.75rem 1rem);\n    background: var(--compa11y-toast-bg, white);\n    border: var(--compa11y-toast-border, 1px solid #e0e0e0);\n    border-radius: var(--compa11y-toast-radius, 6px);\n    box-shadow: var(--compa11y-toast-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));\n    min-width: var(--compa11y-toast-min-width, 250px);\n    max-width: var(--compa11y-toast-max-width, 420px);\n  }\n\n  .toast[data-type=\"error\"] {\n    border-left: 4px solid var(--compa11y-toast-error-color, #ef4444);\n  }\n\n  .toast[data-type=\"warning\"] {\n    border-left: 4px solid var(--compa11y-toast-warning-color, #f59e0b);\n  }\n\n  .toast[data-type=\"success\"] {\n    border-left: 4px solid var(--compa11y-toast-success-color, #22c55e);\n  }\n\n  .toast[data-type=\"info\"] {\n    border-left: 4px solid var(--compa11y-toast-info-color, #3b82f6);\n  }\n\n  .toast-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .toast-title {\n    font-weight: var(--compa11y-toast-title-weight, 600);\n    font-size: var(--compa11y-toast-title-size, 0.875rem);\n  }\n\n  .toast-description {\n    color: var(--compa11y-toast-description-color, #666);\n    font-size: var(--compa11y-toast-description-size, 0.8125rem);\n    margin-top: 0.125rem;\n  }\n\n  .toast-close {\n    \n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--compa11y-toast-close-radius, 4px);\n    color: var(--compa11y-toast-close-color, #999);\n    font-size: 1.125rem;\n    line-height: 1;\n  }\n\n  .toast-close:hover {\n    background: var(--compa11y-toast-close-hover-bg, rgba(0, 0, 0, 0.05));\n    color: var(--compa11y-toast-close-hover-color, #333);\n  }\n\n  .toast-close:focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  .toast-action {\n    \n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n\n    margin-top: 0.375rem;\n    font-size: var(--compa11y-toast-action-size, 0.8125rem);\n    font-weight: 500;\n    color: var(--compa11y-toast-action-color, #0066cc);\n    text-decoration: underline;\n  }\n\n  .toast-action:hover {\n    color: var(--compa11y-toast-action-hover-color, #0052a3);\n  }\n\n  .toast-action:focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compa11y/web",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "Accessible Web Components for any HTML page - CDN ready",
   "author": "Ivan Trajkovski",
   "license": "MIT",
@@ -83,7 +83,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@compa11y/core": "0.1.2"
+    "@compa11y/core": "0.1.5"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",