@compa11y/web 0.1.9 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/compa11y.iife.js +705 -133
- package/dist/compa11y.js +1642 -311
- package/dist/components/accordion.d.ts +30 -0
- package/dist/components/form-field.d.ts +14 -0
- package/dist/components/link.d.ts +8 -0
- package/dist/components/popover.d.ts +52 -0
- package/dist/components/table.d.ts +78 -0
- package/dist/components/text.d.ts +16 -0
- package/dist/index.d.ts +7 -1
- package/dist/utils/styles.d.ts +5 -0
- package/package.json +2 -2
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Compa11yElement } from '../utils/base-element';
|
|
2
|
+
|
|
3
|
+
export declare class A11yAccordion extends Compa11yElement {
|
|
4
|
+
private _triggers;
|
|
5
|
+
private _panels;
|
|
6
|
+
private _openItems;
|
|
7
|
+
private _defaultSlotEl;
|
|
8
|
+
static get observedAttributes(): string[];
|
|
9
|
+
/** Whether one or multiple items can be open at once. @default 'single' */
|
|
10
|
+
get type(): 'single' | 'multiple';
|
|
11
|
+
/** Whether the open item can be collapsed in single mode. */
|
|
12
|
+
get collapsible(): boolean;
|
|
13
|
+
protected setupAccessibility(): void;
|
|
14
|
+
protected render(): void;
|
|
15
|
+
protected setupEventListeners(): void;
|
|
16
|
+
protected cleanupEventListeners(): void;
|
|
17
|
+
protected onAttributeChange(name: string, _oldValue: string | null, _newValue: string | null): void;
|
|
18
|
+
private updateItems;
|
|
19
|
+
private handleClick;
|
|
20
|
+
private handleKeyDown;
|
|
21
|
+
private toggleItem;
|
|
22
|
+
private syncState;
|
|
23
|
+
/** Open an item by index */
|
|
24
|
+
open(index: number): void;
|
|
25
|
+
/** Close an item by index */
|
|
26
|
+
close(index: number): void;
|
|
27
|
+
/** Toggle an item by index */
|
|
28
|
+
toggle(index: number): void;
|
|
29
|
+
}
|
|
30
|
+
export default A11yAccordion;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Compa11yElement } from '../utils/base-element';
|
|
2
|
+
|
|
3
|
+
export declare class A11yFormField extends Compa11yElement {
|
|
4
|
+
static get observedAttributes(): string[];
|
|
5
|
+
protected setupAccessibility(): void;
|
|
6
|
+
protected render(): void;
|
|
7
|
+
protected setupEventListeners(): void;
|
|
8
|
+
protected cleanupEventListeners(): void;
|
|
9
|
+
/**
|
|
10
|
+
* Find the first focusable control in the slot and wire ARIA attributes.
|
|
11
|
+
*/
|
|
12
|
+
private wireControl;
|
|
13
|
+
protected onAttributeChange(name: string, _oldValue: string | null, _newValue: string | null): void;
|
|
14
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Compa11yElement } from '../utils/base-element';
|
|
2
|
+
|
|
3
|
+
export declare class A11yLink extends Compa11yElement {
|
|
4
|
+
static get observedAttributes(): string[];
|
|
5
|
+
protected setupAccessibility(): void;
|
|
6
|
+
protected render(): void;
|
|
7
|
+
protected onAttributeChange(name: string, _oldValue: string | null, _newValue: string | null): void;
|
|
8
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { Compa11yElement } from '../utils/base-element';
|
|
2
|
+
|
|
3
|
+
export declare class A11yPopover extends Compa11yElement {
|
|
4
|
+
private _open;
|
|
5
|
+
private _placement;
|
|
6
|
+
private _offset;
|
|
7
|
+
private _disabled;
|
|
8
|
+
private _haspopup;
|
|
9
|
+
private _contentRole;
|
|
10
|
+
private _contentLabel;
|
|
11
|
+
private _focusPolicy;
|
|
12
|
+
private _triggerEl;
|
|
13
|
+
private _contentEl;
|
|
14
|
+
/**
|
|
15
|
+
* Element that had focus before we opened the popover. Used to decide
|
|
16
|
+
* whether to restore focus on close.
|
|
17
|
+
*/
|
|
18
|
+
private _focusOrigin;
|
|
19
|
+
/** Set to true only when WE move focus into the content. */
|
|
20
|
+
private _weMovedFocus;
|
|
21
|
+
static get observedAttributes(): string[];
|
|
22
|
+
get open(): boolean;
|
|
23
|
+
set open(value: boolean);
|
|
24
|
+
get disabled(): boolean;
|
|
25
|
+
set disabled(value: boolean);
|
|
26
|
+
protected setupAccessibility(): void;
|
|
27
|
+
protected render(): void;
|
|
28
|
+
protected setupEventListeners(): void;
|
|
29
|
+
protected cleanupEventListeners(): void;
|
|
30
|
+
protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
|
|
31
|
+
private _wireTrigger;
|
|
32
|
+
/** Update ARIA attributes on the trigger without re-wiring listeners. */
|
|
33
|
+
private _updateTriggerAria;
|
|
34
|
+
/** Apply disabled state to the trigger element. */
|
|
35
|
+
private _updateTriggerDisabled;
|
|
36
|
+
private _detachTriggerListeners;
|
|
37
|
+
private _onTriggerSlotChange;
|
|
38
|
+
private _show;
|
|
39
|
+
private _hide;
|
|
40
|
+
private _updatePosition;
|
|
41
|
+
private _addGlobalListeners;
|
|
42
|
+
private _removeGlobalListeners;
|
|
43
|
+
/**
|
|
44
|
+
* Use composedPath() so that events originating inside the shadow DOM or
|
|
45
|
+
* inside portaled content are correctly identified as "inside".
|
|
46
|
+
*/
|
|
47
|
+
private _onOutsidePointerDown;
|
|
48
|
+
private _onDocumentKeyDown;
|
|
49
|
+
private _onScrollOrResize;
|
|
50
|
+
private _onTriggerClick;
|
|
51
|
+
private _onTriggerKeyDown;
|
|
52
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { Compa11yElement } from '../utils/base-element';
|
|
2
|
+
|
|
3
|
+
export type SortDirection = 'ascending' | 'descending' | 'none';
|
|
4
|
+
export interface ColumnDef {
|
|
5
|
+
/** Unique column key — matched against row object keys */
|
|
6
|
+
key: string;
|
|
7
|
+
/** Visible header label */
|
|
8
|
+
label: string;
|
|
9
|
+
/** Allow sorting on this column */
|
|
10
|
+
sortable?: boolean;
|
|
11
|
+
/** Text alignment for cells in this column */
|
|
12
|
+
align?: 'left' | 'center' | 'right';
|
|
13
|
+
/** Render the cell as a <th scope="row"> instead of <td> */
|
|
14
|
+
rowHeader?: boolean;
|
|
15
|
+
}
|
|
16
|
+
export type RowData = Record<string, unknown> & {
|
|
17
|
+
id?: string;
|
|
18
|
+
};
|
|
19
|
+
export declare class A11yTable extends Compa11yElement {
|
|
20
|
+
private _columns;
|
|
21
|
+
private _rows;
|
|
22
|
+
private _sortKey;
|
|
23
|
+
private _sortDirection;
|
|
24
|
+
private _selectedRows;
|
|
25
|
+
private _tableEl;
|
|
26
|
+
static get observedAttributes(): string[];
|
|
27
|
+
get caption(): string;
|
|
28
|
+
set caption(v: string);
|
|
29
|
+
get selectable(): boolean;
|
|
30
|
+
get loading(): boolean;
|
|
31
|
+
get emptyMessage(): string;
|
|
32
|
+
get sortKey(): string | null;
|
|
33
|
+
set sortKey(v: string | null);
|
|
34
|
+
get sortDirection(): SortDirection;
|
|
35
|
+
set sortDirection(v: SortDirection);
|
|
36
|
+
get columns(): ColumnDef[];
|
|
37
|
+
set columns(v: ColumnDef[]);
|
|
38
|
+
get rows(): RowData[];
|
|
39
|
+
set rows(v: RowData[]);
|
|
40
|
+
get selectedRows(): string[];
|
|
41
|
+
set selectedRows(v: string[]);
|
|
42
|
+
/**
|
|
43
|
+
* Re-apply JS properties that were set before the element was upgraded.
|
|
44
|
+
*
|
|
45
|
+
* When a custom element is used before its class is registered (e.g. inline
|
|
46
|
+
* script sets `el.columns = [...]` before the module loads), the value lands
|
|
47
|
+
* as a plain "own" property on the HTMLElement, shadowing the class
|
|
48
|
+
* getter/setter. This method detects that, removes the own property, and
|
|
49
|
+
* re-routes the value through the real setter so private fields are updated.
|
|
50
|
+
*/
|
|
51
|
+
private upgradeProperty;
|
|
52
|
+
protected setupAccessibility(): void;
|
|
53
|
+
protected render(): void;
|
|
54
|
+
protected setupEventListeners(): void;
|
|
55
|
+
protected cleanupEventListeners(): void;
|
|
56
|
+
protected onAttributeChange(name: string, _oldValue: string | null, _newValue: string | null): void;
|
|
57
|
+
/** Sort the table by a column key, cycling direction automatically */
|
|
58
|
+
sort(key: string, direction?: SortDirection): void;
|
|
59
|
+
selectRow(id: string): void;
|
|
60
|
+
deselectRow(id: string): void;
|
|
61
|
+
selectAll(): void;
|
|
62
|
+
deselectAll(): void;
|
|
63
|
+
/**
|
|
64
|
+
* Preserve focus on a sort button across full re-renders.
|
|
65
|
+
* We save the sort-key of the focused sort button, re-render, then
|
|
66
|
+
* move focus back to the newly rendered sort button.
|
|
67
|
+
*/
|
|
68
|
+
private rerenderTable;
|
|
69
|
+
private renderTable;
|
|
70
|
+
private renderThead;
|
|
71
|
+
private renderTbody;
|
|
72
|
+
/** Re-sync selection state without full re-render (preserves focus) */
|
|
73
|
+
private syncSelectionState;
|
|
74
|
+
private handleClick;
|
|
75
|
+
private handleChange;
|
|
76
|
+
private emitSelectEvent;
|
|
77
|
+
}
|
|
78
|
+
export default A11yTable;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Compa11yElement } from '../utils/base-element';
|
|
2
|
+
|
|
3
|
+
export declare class A11yHeading extends Compa11yElement {
|
|
4
|
+
static get observedAttributes(): string[];
|
|
5
|
+
private get headingLevel();
|
|
6
|
+
protected setupAccessibility(): void;
|
|
7
|
+
protected render(): void;
|
|
8
|
+
protected onAttributeChange(): void;
|
|
9
|
+
}
|
|
10
|
+
export declare class A11yText extends Compa11yElement {
|
|
11
|
+
static get observedAttributes(): string[];
|
|
12
|
+
private get tagName_();
|
|
13
|
+
protected setupAccessibility(): void;
|
|
14
|
+
protected render(): void;
|
|
15
|
+
protected onAttributeChange(): void;
|
|
16
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -14,7 +14,13 @@ import { A11yToast } from './components/toast';
|
|
|
14
14
|
import { A11yVisuallyHidden } from './components/visually-hidden';
|
|
15
15
|
import { A11ySkipLink } from './components/skip-link';
|
|
16
16
|
import { A11yAlert } from './components/alert';
|
|
17
|
+
import { A11yLink } from './components/link';
|
|
18
|
+
import { A11yHeading, A11yText } from './components/text';
|
|
19
|
+
import { A11yFormField } from './components/form-field';
|
|
20
|
+
import { A11yPopover } from './components/popover';
|
|
21
|
+
import { A11yAccordion } from './components/accordion';
|
|
22
|
+
import { A11yTable } from './components/table';
|
|
17
23
|
import { initAnnouncer, announce, announcePolite, announceAssertive, announceStatus, announceError, initFocusVisible, createFocusTrap, createFocusScope, createRovingTabindex, createKeyboardManager, KeyboardPatterns, createTypeAhead, aria, buildAriaProps, hasAccessibleName, isBrowser, prefersReducedMotion, prefersHighContrast, prefersDarkMode } from '@compa11y/core';
|
|
18
24
|
|
|
19
|
-
export { A11yDialog, A11yMenu, A11yTabs, A11yCombobox, A11ySwitch, A11ySelect, A11yInput, A11yTextarea, A11yButton, A11yListbox, A11yOption, A11yOptgroup, A11yCheckbox, A11yCheckboxGroup, A11yRadioGroup, A11yRadio, A11yToast, A11yVisuallyHidden, A11ySkipLink, A11yAlert, };
|
|
25
|
+
export { A11yDialog, A11yMenu, A11yTabs, A11yCombobox, A11ySwitch, A11ySelect, A11yInput, A11yTextarea, A11yButton, A11yListbox, A11yOption, A11yOptgroup, A11yCheckbox, A11yCheckboxGroup, A11yRadioGroup, A11yRadio, A11yToast, A11yVisuallyHidden, A11ySkipLink, A11yAlert, A11yLink, A11yHeading, A11yText, A11yFormField, A11yPopover, A11yAccordion, A11yTable, };
|
|
20
26
|
export { initAnnouncer, announce, announcePolite, announceAssertive, announceStatus, announceError, initFocusVisible, createFocusTrap, createFocusScope, createRovingTabindex, createKeyboardManager, KeyboardPatterns, createTypeAhead, aria, buildAriaProps, hasAccessibleName, isBrowser, prefersReducedMotion, prefersHighContrast, prefersDarkMode, };
|
package/dist/utils/styles.d.ts
CHANGED
|
@@ -76,3 +76,8 @@ export declare const RADIO_STYLES = "\n \n :host {\n display: block;\n b
|
|
|
76
76
|
* Toast-specific styles
|
|
77
77
|
*/
|
|
78
78
|
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";
|
|
79
|
+
/**
|
|
80
|
+
* Accordion-specific styles (injected into document head for light DOM styling)
|
|
81
|
+
*/
|
|
82
|
+
export declare const ACCORDION_GLOBAL_STYLES = "\n a11y-accordion {\n display: block;\n border: 1px solid var(--compa11y-accordion-border-color, #e0e0e0);\n border-radius: var(--compa11y-accordion-radius, 6px);\n overflow: hidden;\n }\n\n a11y-accordion h1,\n a11y-accordion h2,\n a11y-accordion h3,\n a11y-accordion h4,\n a11y-accordion h5,\n a11y-accordion h6 {\n margin: 0;\n font-size: inherit;\n font-weight: inherit;\n }\n\n a11y-accordion [data-accordion-trigger] {\n appearance: none;\n -webkit-appearance: none;\n background: var(--compa11y-accordion-trigger-bg, #ffffff);\n border: none;\n border-bottom: 1px solid var(--compa11y-accordion-border-color, #e0e0e0);\n padding: var(--compa11y-accordion-trigger-padding, 1rem);\n font: inherit;\n font-size: 1rem;\n font-weight: 500;\n color: var(--compa11y-accordion-trigger-color, #1a1a1a);\n width: 100%;\n text-align: left;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n transition: background 0.15s ease;\n }\n\n a11y-accordion [data-accordion-trigger]:hover {\n background: var(--compa11y-accordion-trigger-hover-bg, #f9f9f9);\n }\n\n a11y-accordion [data-accordion-trigger]:focus-visible {\n outline: 2px solid var(--compa11y-focus-color, #0066cc);\n outline-offset: -2px;\n }\n\n a11y-accordion [data-accordion-trigger][aria-disabled=\"true\"],\n a11y-accordion [data-accordion-trigger]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n a11y-accordion [data-accordion-trigger]::after {\n content: '';\n flex-shrink: 0;\n width: 0.5rem;\n height: 0.5rem;\n border-right: 2px solid currentColor;\n border-bottom: 2px solid currentColor;\n transform: rotate(45deg) translateY(-2px);\n transition: transform 0.2s ease;\n }\n\n a11y-accordion [data-accordion-trigger][aria-expanded=\"true\"]::after {\n transform: rotate(-135deg) translateY(-2px);\n }\n\n a11y-accordion [data-accordion-panel] {\n padding: var(--compa11y-accordion-content-padding, 1rem);\n background: var(--compa11y-accordion-content-bg, #ffffff);\n border-bottom: 1px solid var(--compa11y-accordion-border-color, #e0e0e0);\n }\n\n a11y-accordion [data-accordion-panel][hidden] {\n display: none;\n }\n\n a11y-accordion > *:last-child [data-accordion-trigger],\n a11y-accordion > [data-accordion-panel]:last-child {\n border-bottom: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n a11y-accordion [data-accordion-trigger],\n a11y-accordion [data-accordion-trigger]::after {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n a11y-accordion {\n border: 2px solid ButtonText;\n }\n a11y-accordion [data-accordion-trigger] {\n border-bottom: 1px solid ButtonText;\n forced-color-adjust: none;\n }\n }\n";
|
|
83
|
+
export declare const TABLE_GLOBAL_STYLES = "\n /* \u2500\u2500 Host \u2500\u2500 */\n a11y-table {\n display: block;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n /* \u2500\u2500 Table element \u2500\u2500 */\n a11y-table table {\n border-collapse: collapse;\n width: 100%;\n font-size: 0.9375rem;\n color: var(--compa11y-table-color, #1a1a1a);\n background: var(--compa11y-table-bg, #ffffff);\n }\n\n /* \u2500\u2500 Caption \u2500\u2500 */\n a11y-table caption {\n caption-side: top;\n text-align: left;\n font-weight: 600;\n font-size: 1rem;\n padding-bottom: 0.5rem;\n color: var(--compa11y-table-caption-color, #1a1a1a);\n }\n\n /* \u2500\u2500 Header cells \u2500\u2500 */\n a11y-table th {\n text-align: left;\n font-weight: 600;\n padding: var(--compa11y-table-cell-padding, 0.625rem 0.875rem);\n background: var(--compa11y-table-head-bg, #f5f5f5);\n border-bottom: 2px solid var(--compa11y-table-border-color, #d0d0d0);\n white-space: nowrap;\n }\n\n /* \u2500\u2500 Data cells \u2500\u2500 */\n a11y-table td {\n padding: var(--compa11y-table-cell-padding, 0.625rem 0.875rem);\n border-bottom: 1px solid var(--compa11y-table-border-color, #e8e8e8);\n vertical-align: top;\n }\n\n /* \u2500\u2500 Row hover \u2500\u2500 */\n a11y-table tbody tr:hover {\n background: var(--compa11y-table-row-hover-bg, #fafafa);\n }\n\n /* \u2500\u2500 Selected row \u2500\u2500 */\n a11y-table tr[aria-selected=\"true\"] {\n background: var(--compa11y-table-selected-bg, #e8f0fe);\n }\n a11y-table tr[aria-selected=\"true\"]:hover {\n background: var(--compa11y-table-selected-hover-bg, #dde7fd);\n }\n\n /* \u2500\u2500 Sort button \u2500\u2500 */\n a11y-table [data-sort-btn] {\n appearance: none;\n -webkit-appearance: none;\n background: none;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 0.375em;\n text-align: left;\n width: 100%;\n }\n\n a11y-table [data-sort-btn]:focus-visible {\n outline: 2px solid var(--compa11y-focus-color, #0066cc);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n a11y-table [data-sort-icon] {\n font-size: 0.75em;\n opacity: 0.6;\n flex-shrink: 0;\n }\n\n /* \u2500\u2500 Select checkboxes \u2500\u2500 */\n a11y-table [data-select-cb] {\n cursor: pointer;\n width: 1rem;\n height: 1rem;\n }\n a11y-table [data-select-cb]:focus-visible {\n outline: 2px solid var(--compa11y-focus-color, #0066cc);\n outline-offset: 2px;\n }\n\n /* \u2500\u2500 Empty / Loading cells \u2500\u2500 */\n a11y-table [data-empty-cell],\n a11y-table [data-loading-cell] {\n text-align: center;\n padding: 2rem 1rem;\n color: var(--compa11y-table-muted-color, #6b6b6b);\n font-style: italic;\n }\n\n /* \u2500\u2500 Footer \u2500\u2500 */\n a11y-table tfoot td,\n a11y-table tfoot th {\n background: var(--compa11y-table-foot-bg, #f5f5f5);\n border-top: 2px solid var(--compa11y-table-border-color, #d0d0d0);\n border-bottom: none;\n font-weight: 600;\n }\n\n /* \u2500\u2500 Reduced motion \u2500\u2500 */\n @media (prefers-reduced-motion: reduce) {\n a11y-table tr,\n a11y-table td,\n a11y-table th {\n transition: none;\n }\n }\n\n /* \u2500\u2500 Windows High Contrast \u2500\u2500 */\n @media (forced-colors: active) {\n a11y-table table {\n border: 1px solid ButtonText;\n forced-color-adjust: none;\n }\n a11y-table th,\n a11y-table td {\n border: 1px solid ButtonText;\n }\n a11y-table tr[aria-selected=\"true\"] {\n outline: 2px solid Highlight;\n }\n a11y-table [data-sort-btn]:focus-visible {\n outline: 2px solid Highlight;\n }\n }\n";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@compa11y/web",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "Accessible Web Components for any HTML page - CDN ready",
|
|
5
5
|
"author": "Ivan Trajkovski",
|
|
6
6
|
"license": "MIT",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"LICENSE"
|
|
84
84
|
],
|
|
85
85
|
"dependencies": {
|
|
86
|
-
"@compa11y/core": "0.1.
|
|
86
|
+
"@compa11y/core": "0.1.11"
|
|
87
87
|
},
|
|
88
88
|
"devDependencies": {
|
|
89
89
|
"@types/node": "^20.11.0",
|