@compa11y/web 0.1.11 → 0.1.12

package/dist/components/pagination.d.ts

@@ -0,0 +1,45 @@
+import { Compa11yElement } from '../utils/base-element';
+
+export declare class A11yPagination extends Compa11yElement {
+    private _currentPage;
+    private _totalPages;
+    private _totalItems;
+    private _pageSize;
+    private _siblingCount;
+    private _boundaryCount;
+    private _showFirstLast;
+    private _showPageSize;
+    private _showJumpTo;
+    private _disabled;
+    private _pageSizeOptions;
+    static get observedAttributes(): string[];
+    get currentPage(): number;
+    set currentPage(value: number);
+    get totalPages(): number;
+    set totalPages(value: number);
+    protected setupAccessibility(): void;
+    protected render(): void;
+    protected setupEventListeners(): void;
+    protected cleanupEventListeners(): void;
+    protected onAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
+    private _readAttributes;
+    private _recomputeTotalPages;
+    private _devWarnings;
+    private _ariaLabel;
+    private _announce;
+    private _goToPage;
+    private _restoreFocus;
+    private _syncUI;
+    private _renderList;
+    private _renderExtras;
+    private _handleClick;
+    private _handleChange;
+    private _handleKeyDown;
+    /** Navigate to a specific page. */
+    goTo(page: number): void;
+    /** Navigate to the next page. */
+    next(): void;
+    /** Navigate to the previous page. */
+    previous(): void;
+}
+export default A11yPagination;

package/dist/components/popover.d.ts

@@ -11,11 +11,6 @@ export declare class A11yPopover extends Compa11yElement {
     private _focusPolicy;
     private _triggerEl;
     private _contentEl;
-    /**
-     * Element that had focus before we opened the popover. Used to decide
-     * whether to restore focus on close.
-     */
-    private _focusOrigin;
     /** Set to true only when WE move focus into the content. */
     private _weMovedFocus;
     static get observedAttributes(): string[];

package/dist/index.d.ts

@@ -20,7 +20,8 @@ import { A11yFormField } from './components/form-field';
 import { A11yPopover } from './components/popover';
 import { A11yAccordion } from './components/accordion';
 import { A11yTable } from './components/table';
+import { A11yPagination } from './components/pagination';
 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, A11yToast, A11yVisuallyHidden, A11ySkipLink, A11yAlert, A11yLink, A11yHeading, A11yText, A11yFormField, A11yPopover, A11yAccordion, A11yTable, };
+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, A11yPagination, };
 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

@@ -81,3 +81,7 @@ export declare const TOAST_STYLES = "\n  \n  :host {\n    display: block;\n    b
  */
 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";
 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";
+/**
+ * Pagination-specific styles
+ */
+export declare const PAGINATION_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  }\n\n  /* Visually hidden \u2014 live region always in DOM */\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  nav {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--compa11y-pagination-gap, 0.5rem);\n  }\n\n  ul {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--compa11y-pagination-btn-gap, 2px);\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  [data-compa11y-pagination-btn] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--compa11y-pagination-btn-size, 44px);\n    min-height: var(--compa11y-pagination-btn-size, 44px);\n    padding: var(--compa11y-pagination-btn-padding, 0.25rem 0.5rem);\n    border: var(--compa11y-pagination-btn-border, 1px solid #d1d5db);\n    border-radius: var(--compa11y-pagination-btn-radius, 4px);\n    background: var(--compa11y-pagination-btn-bg, transparent);\n    color: var(--compa11y-pagination-btn-color, inherit);\n    font: inherit;\n    cursor: pointer;\n    user-select: none;\n    transition: background 0.15s ease, border-color 0.15s ease;\n  }\n\n  [data-compa11y-pagination-btn]:not([disabled]):hover {\n    background: var(--compa11y-pagination-btn-hover-bg, #f3f4f6);\n    border-color: var(--compa11y-pagination-btn-hover-border, #9ca3af);\n  }\n\n  [data-compa11y-pagination-btn]:focus-visible {\n    outline: var(--compa11y-focus-width, 2px) solid\n      var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  [data-compa11y-pagination-btn][disabled] {\n    opacity: 0.4;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Current page \u2014 background + border so color is not the only indicator */\n  [data-compa11y-pagination-page][data-current=\"true\"] {\n    background: var(--compa11y-pagination-current-bg, #0066cc);\n    color: var(--compa11y-pagination-current-color, #fff);\n    border-color: var(--compa11y-pagination-current-bg, #0066cc);\n    font-weight: 600;\n    text-decoration: underline;\n  }\n\n  [aria-hidden=\"true\"] span {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--compa11y-pagination-btn-size, 44px);\n    min-height: var(--compa11y-pagination-btn-size, 44px);\n    color: var(--compa11y-pagination-ellipsis-color, #9ca3af);\n    user-select: none;\n  }\n\n  /* Rows-per-page selector */\n  .page-size-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  .page-size-wrapper label {\n    white-space: nowrap;\n    font-size: 0.875rem;\n  }\n\n  [data-compa11y-pagination-pagesize] {\n    padding: 0.25rem 0.5rem;\n    border: 1px solid #d1d5db;\n    border-radius: 4px;\n    font: inherit;\n    font-size: 0.875rem;\n    background: var(--compa11y-pagination-select-bg, #fff);\n    cursor: pointer;\n  }\n\n  [data-compa11y-pagination-pagesize]:focus-visible {\n    outline: var(--compa11y-focus-width, 2px) solid\n      var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  /* Jump-to-page input */\n  .jump-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n  }\n\n  .jump-wrapper label {\n    white-space: nowrap;\n    font-size: 0.875rem;\n  }\n\n  [data-compa11y-pagination-jump] {\n    width: 5rem;\n    padding: 0.25rem 0.5rem;\n    border: 1px solid #d1d5db;\n    border-radius: 4px;\n    font: inherit;\n    font-size: 0.875rem;\n    background: var(--compa11y-pagination-input-bg, #fff);\n  }\n\n  [data-compa11y-pagination-jump]:focus-visible {\n    outline: var(--compa11y-focus-width, 2px) solid\n      var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n    border-color: var(--compa11y-focus-color, #0066cc);\n  }\n\n  [data-compa11y-pagination-error] {\n    color: var(--compa11y-pagination-error-color, #dc2626);\n    font-size: 0.75rem;\n    width: 100%;\n  }\n\n  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    [data-compa11y-pagination-btn] {\n      transition: none !important;\n    }\n  }\n\n  /* Forced colours / high contrast */\n  @media (forced-colors: active) {\n    [data-compa11y-pagination-page][data-current=\"true\"] {\n      border: 2px solid ButtonText;\n      forced-color-adjust: none;\n    }\n\n    [data-compa11y-pagination-btn]:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compa11y/web",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "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.11"
+    "@compa11y/core": "0.1.12"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",