{"_id":"@a11ypros/a11y-ui-elements","_rev":"2-8f97a311b51e8f949a9a89f5b0a95b5f","name":"@a11ypros/a11y-ui-elements","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@a11ypros/a11y-ui-elements","version":"0.2.0","author":{"name":"Ryan Mack","email":"ryan@a11ypros.com"},"license":"MIT","_id":"@a11ypros/a11y-ui-elements@0.2.0","maintainers":[{"name":"digitizzle","email":"ryan.mack1200@gmail.com"}],"homepage":"https://ui.a11ypros.com","bugs":{"url":"https://github.com/A11YPros/a11y-ui/issues"},"dist":{"shasum":"3294c4ec1794152c348e91b32b09fc109e37f508","tarball":"https://registry.npmjs.org/@a11ypros/a11y-ui-elements/-/a11y-ui-elements-0.2.0.tgz","fileCount":61,"integrity":"sha512-WLQu2PE82nbux11Kq4kyYGWZ8+Drn7qvY/X0jaOIA7MHQmj09552qgUSiCbyLk2eP4Cedbd0gEr72jP5MAZK+Q==","signatures":[{"sig":"MEUCIQCTRYmnwfr9F32ph/jjPGCMjXuwb91WoCIXF9vDBybzFgIgNuhe3TyuNKhWkljAJ6GlfKh83h3xM4shNmwYlcNPl10=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":463245},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./link":{"types":"./dist/components/link/a11y-link.d.ts","import":"./dist/components/link/a11y-link.js"},"./menu":{"types":"./dist/components/menu/a11y-menu.d.ts","import":"./dist/components/menu/a11y-menu.js"},"./tabs":{"types":"./dist/components/tabs/a11y-tabs.d.ts","import":"./dist/components/tabs/a11y-tabs.js"},"./input":{"types":"./dist/components/form/a11y-input.d.ts","import":"./dist/components/form/a11y-input.js"},"./label":{"types":"./dist/components/form/a11y-label.d.ts","import":"./dist/components/form/a11y-label.js"},"./modal":{"types":"./dist/components/modal/a11y-modal.d.ts","import":"./dist/components/modal/a11y-modal.js"},"./radio":{"types":"./dist/components/form/a11y-radio.d.ts","import":"./dist/components/form/a11y-radio.js"},"./table":{"types":"./dist/components/table/a11y-data-table.d.ts","import":"./dist/components/table/a11y-data-table.js"},"./banner":{"types":"./dist/components/banner/a11y-banner.d.ts","import":"./dist/components/banner/a11y-banner.js"},"./button":{"types":"./dist/components/button/a11y-button.d.ts","import":"./dist/components/button/a11y-button.js"},"./select":{"types":"./dist/components/form/a11y-select.d.ts","import":"./dist/components/form/a11y-select.js"},"./switch":{"types":"./dist/components/switch/a11y-switch.d.ts","import":"./dist/components/switch/a11y-switch.js"},"./menubar":{"types":"./dist/components/menubar/a11y-menubar.d.ts","import":"./dist/components/menubar/a11y-menubar.js"},"./tooltip":{"types":"./dist/components/tooltip/a11y-tooltip.d.ts","import":"./dist/components/tooltip/a11y-tooltip.js"},"./checkbox":{"types":"./dist/components/form/a11y-checkbox.d.ts","import":"./dist/components/form/a11y-checkbox.js"},"./fieldset":{"types":"./dist/components/form/a11y-fieldset.d.ts","import":"./dist/components/form/a11y-fieldset.js"},"./textarea":{"types":"./dist/components/form/a11y-textarea.d.ts","import":"./dist/components/form/a11y-textarea.js"},"./accordion":{"types":"./dist/components/accordion/a11y-accordion.d.ts","import":"./dist/components/accordion/a11y-accordion.js"},"./package.json":"./package.json"},"gitHead":"ad4668362d92f9f272451ff6f80ee6ffea81b30d","scripts":{"test":"vitest run","build":"npm run build:tsc && npm run build:bundle && npm run build:css","build:css":"esbuild src/styles.css --bundle --outfile=dist/styles.css","build:tsc":"tsc","test:watch":"vitest","build:bundle":"esbuild src/index.ts --bundle --outfile=dist/bundle.js --format=iife","prepublishOnly":"npm run build"},"_npmUser":{"name":"digitizzle","email":"ryan.mack1200@gmail.com"},"repository":{"url":"git+https://github.com/A11YPros/a11y-ui.git","type":"git","directory":"packages/elements"},"_npmVersion":"10.9.2","description":"Accessible, framework-agnostic Web Components (Custom Elements) built for WCAG 2.1/2.2 AA & AAA compliance.","directories":{},"_nodeVersion":"22.13.1","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^1.1.0","esbuild":"^0.25.0","typescript":"^5.3.3"},"_npmOperationalInternal":{"tmp":"tmp/a11y-ui-elements_0.2.0_1788362410089_0.02999815927194094","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@a11ypros/a11y-ui-elements","version":"0.2.1","description":"Accessible, framework-agnostic Web Components (Custom Elements) built for WCAG 2.1/2.2 AA & AAA compliance.","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./switch":{"types":"./dist/components/switch/a11y-switch.d.ts","import":"./dist/components/switch/a11y-switch.js"},"./button":{"types":"./dist/components/button/a11y-button.d.ts","import":"./dist/components/button/a11y-button.js"},"./accordion":{"types":"./dist/components/accordion/a11y-accordion.d.ts","import":"./dist/components/accordion/a11y-accordion.js"},"./modal":{"types":"./dist/components/modal/a11y-modal.d.ts","import":"./dist/components/modal/a11y-modal.js"},"./input":{"types":"./dist/components/form/a11y-input.d.ts","import":"./dist/components/form/a11y-input.js"},"./textarea":{"types":"./dist/components/form/a11y-textarea.d.ts","import":"./dist/components/form/a11y-textarea.js"},"./select":{"types":"./dist/components/form/a11y-select.d.ts","import":"./dist/components/form/a11y-select.js"},"./checkbox":{"types":"./dist/components/form/a11y-checkbox.d.ts","import":"./dist/components/form/a11y-checkbox.js"},"./radio":{"types":"./dist/components/form/a11y-radio.d.ts","import":"./dist/components/form/a11y-radio.js"},"./fieldset":{"types":"./dist/components/form/a11y-fieldset.d.ts","import":"./dist/components/form/a11y-fieldset.js"},"./label":{"types":"./dist/components/form/a11y-label.d.ts","import":"./dist/components/form/a11y-label.js"},"./banner":{"types":"./dist/components/banner/a11y-banner.d.ts","import":"./dist/components/banner/a11y-banner.js"},"./link":{"types":"./dist/components/link/a11y-link.d.ts","import":"./dist/components/link/a11y-link.js"},"./tabs":{"types":"./dist/components/tabs/a11y-tabs.d.ts","import":"./dist/components/tabs/a11y-tabs.js"},"./tooltip":{"types":"./dist/components/tooltip/a11y-tooltip.d.ts","import":"./dist/components/tooltip/a11y-tooltip.js"},"./menu":{"types":"./dist/components/menu/a11y-menu.d.ts","import":"./dist/components/menu/a11y-menu.js"},"./menubar":{"types":"./dist/components/menubar/a11y-menubar.d.ts","import":"./dist/components/menubar/a11y-menubar.js"},"./table":{"types":"./dist/components/table/a11y-data-table.d.ts","import":"./dist/components/table/a11y-data-table.js"},"./package.json":"./package.json"},"publishConfig":{"access":"public","provenance":true},"repository":{"type":"git","url":"git+https://github.com/A11YPros/a11y-ui.git","directory":"packages/elements"},"bugs":{"url":"https://github.com/A11YPros/a11y-ui/issues"},"homepage":"https://ui.a11ypros.com","scripts":{"build:tsc":"tsc","build:bundle":"esbuild src/index.ts --bundle --outfile=dist/bundle.js --format=iife","build:css":"esbuild src/styles.css --bundle --outfile=dist/styles.css","build":"npm run build:tsc && npm run build:bundle && npm run build:css","prepublishOnly":"npm run build","test":"vitest run","test:watch":"vitest"},"devDependencies":{"esbuild":"^0.25.0","typescript":"^5.3.3","vitest":"^1.1.0"},"author":{"name":"Ryan Mack","email":"ryan@a11ypros.com"},"license":"MIT","_id":"@a11ypros/a11y-ui-elements@0.2.1","gitHead":"ae4efeb603fd58bb5c8554bc70f2147c1a47f9de","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-oml/zb5e80iRfE0TMUFS8yEAsmPJSAZWyGv4UMkTaAeQ0coYBSUIDFRwqQJjRJFHnE6OvLg1F5+HyM/hW0hfKQ==","shasum":"ca174b0521b642ad577d99b8ef78aba101ed8dff","tarball":"https://registry.npmjs.org/@a11ypros/a11y-ui-elements/-/a11y-ui-elements-0.2.1.tgz","fileCount":61,"unpackedSize":468456,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@a11ypros%2fa11y-ui-elements@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCcs8KfH2H1ZHZWeEYAEMB3TmMnRrtO6oRg6BSVx+vVlQIhAMdxIqaJlgJXlq19HOlJ3bYpBmEYyIs9oJRcBB+sfgDq"}]},"_npmUser":{"name":"digitizzle","email":"ryan.mack1200@gmail.com"},"directories":{},"maintainers":[{"name":"digitizzle","email":"ryan.mack1200@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/a11y-ui-elements_0.2.1_1788364893165_0.7898356907184516"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T15:20:09.868Z","modified":"2026-09-02T16:01:33.699Z","0.2.0":"2026-09-02T15:20:10.263Z","0.2.1":"2026-09-02T16:01:33.343Z"},"bugs":{"url":"https://github.com/A11YPros/a11y-ui/issues"},"author":{"name":"Ryan Mack","email":"ryan@a11ypros.com"},"license":"MIT","homepage":"https://ui.a11ypros.com","repository":{"type":"git","url":"git+https://github.com/A11YPros/a11y-ui.git","directory":"packages/elements"},"description":"Accessible, framework-agnostic Web Components (Custom Elements) built for WCAG 2.1/2.2 AA & AAA compliance.","maintainers":[{"name":"digitizzle","email":"ryan.mack1200@gmail.com"}],"readme":"# @a11ypros/a11y-ui-elements\n\n[![npm version](https://img.shields.io/npm/v/@a11ypros/a11y-ui-elements.svg?color=0e8168)](https://www.npmjs.com/package/@a11ypros/a11y-ui-elements)\n[![npm downloads](https://img.shields.io/npm/dm/@a11ypros/a11y-ui-elements.svg?color=0e8168)](https://www.npmjs.com/package/@a11ypros/a11y-ui-elements)\n[![WCAG 2.1 AAA](https://img.shields.io/badge/WCAG%202.1-AA%20%2F%20AAA-success.svg?color=0e8168)](https://ui.a11ypros.com/accessibility)\n[![Storybook Playground](https://img.shields.io/badge/Storybook-Playground-ff69b4.svg)](https://ui.a11ypros.com/storybook-static/index.html?path=/docs/web-components-button--docs)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\nStandard, framework-agnostic Web Components (Custom Elements v1) built for WCAG 2.1/2.2 Level AA & AAA compliance, keyboard navigation, and screen reader support.\n\n🌐 **Live Documentation & Demos**: [https://ui.a11ypros.com](https://ui.a11ypros.com)  \n🎨 **Storybook Playground**: [https://ui.a11ypros.com/storybook-static/index.html](https://ui.a11ypros.com/storybook-static/index.html?path=/docs/web-components-button--docs)\n\n> **Building with React?**  \n> Check out [**`@a11ypros/a11y-ui-components`**](https://www.npmjs.com/package/@a11ypros/a11y-ui-components) ([GitHub](../design-system)) — our dedicated React component library with custom hooks, focus traps, and full TypeScript typing.\n\n---\n\n## Highlights\n\n- **Standard Custom Elements (v1)**: Works natively in plain HTML, Vue, Angular, Svelte, Astro, Solid, PHP/WordPress, Rails, Django, and React 19+.\n- **Light DOM Architecture**: Eliminates shadow DOM boundaries for form association (`<form>`, `<label for=\"...\">`) and cross-element ARIA references (`aria-labelledby`, `aria-describedby`).\n- **Zero Runtime Dependencies**: 0 kB third-party runtime overhead.\n- **Accessible by Default**: Keyboard focus management, ARIA live regions, and high-contrast / reduced-motion support built in.\n- **Design Token System**: Uses standard CSS custom properties (`--a11y-*`) with seamless light and dark theme support.\n\n---\n\n## Installation\n\n```bash\nnpm install @a11ypros/a11y-ui-elements\n```\n\nor with yarn / pnpm:\n\n```bash\nyarn add @a11ypros/a11y-ui-elements\n# or\npnpm add @a11ypros/a11y-ui-elements\n```\n\n---\n\n## Quick Start\n\n### 1. Include Styles\n\nImport the component and design token styles:\n\n```ts\nimport '@a11ypros/a11y-ui-elements/dist/styles.css';\n```\n\nOr via `<link>` in HTML:\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@a11ypros/a11y-ui-elements/dist/styles.css\" />\n```\n\n### 2. Register & Use Elements\n\n#### Option A: Register All Elements\n\n```ts\nimport '@a11ypros/a11y-ui-elements';\n```\n\n#### Option B: Tree-Shaken Subpath Imports\n\n```ts\nimport '@a11ypros/a11y-ui-elements/button';\nimport '@a11ypros/a11y-ui-elements/modal';\nimport '@a11ypros/a11y-ui-elements/switch';\n```\n\n#### Option C: Plain HTML / CDN\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@a11ypros/a11y-ui-elements/dist/styles.css\" />\n    <script\n      type=\"module\"\n      src=\"https://unpkg.com/@a11ypros/a11y-ui-elements/dist/bundle.js\"\n    ></script>\n  </head>\n  <body>\n    <a11y-button variant=\"primary\">Click Me</a11y-button>\n    <a11y-switch label=\"Dark Mode\" checked></a11y-switch>\n  </body>\n</html>\n```\n\n---\n\n## Framework Integration Examples\n\n### Vue 3\n\n```vue\n<script setup>\nimport '@a11ypros/a11y-ui-elements';\nimport { ref } from 'vue';\n\nconst isChecked = ref(false);\n</script>\n\n<template>\n  <a11y-switch\n    :checked=\"isChecked\"\n    @change=\"isChecked = $event.detail.checked\"\n    label=\"Email Alerts\"\n  />\n  <a11y-button variant=\"primary\">Submit</a11y-button>\n</template>\n```\n\n### Svelte\n\n```svelte\n<script>\n  import '@a11ypros/a11y-ui-elements';\n  let open = false;\n</script>\n\n<a11y-button variant=\"secondary\" on:click={() => open = true}>Open Dialog</a11y-button>\n<a11y-modal title=\"Notice\" {open} on:close={() => open = false}>\n  <p>Accessible modal with native dialog backing and focus trapping.</p>\n</a11y-modal>\n```\n\n### React 19+\n\n```tsx\nimport '@a11ypros/a11y-ui-elements';\n\nexport function Header() {\n  return (\n    <nav>\n      <a11y-button variant=\"primary\">Save Changes</a11y-button>\n      <a11y-switch label=\"Airplane Mode\" />\n    </nav>\n  );\n}\n```\n\n---\n\n## Component Suite\n\n| Element             | Description                                                                                              | Keyboard / A11y Features                                                       |\n| ------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |\n| `<a11y-button>`     | Primary, secondary, ghost, danger buttons                                                                | Accessible loading states, `aria-busy`, live announcements                     |\n| `<a11y-switch>`     | WAI-ARIA Switch toggle                                                                                   | `Space`/`Enter` activation, `role=\"switch\"`, `aria-checked`                    |\n| `<a11y-modal>`      | Dialog overlay                                                                                           | Native `<dialog>`, focus trap, `Escape` key dismiss, focus return              |\n| `<a11y-accordion>`  | Expandable disclosure sections                                                                           | `Enter`/`Space` expand, `aria-expanded`, single/multi-expand                   |\n| `<a11y-tabs>`       | Tabbed navigation                                                                                        | Arrow key roving tab navigation, `role=\"tablist\"`, `aria-selected`             |\n| `<a11y-data-table>` | Data table with sortable headers                                                                         | In-place sorting, row selection, `aria-sort`, screen reader alerts             |\n| `<a11y-tooltip>`    | Contextual popup hint                                                                                    | Focus/hover activation, `Escape` dismiss, `role=\"tooltip\"`, `aria-describedby` |\n| `<a11y-banner>`     | Info, success, warning, error banner                                                                     | Alert roles (`role=\"alert\"`, `role=\"status\"`), dismissible                     |\n| `<a11y-link>`       | Accessible hyperlink                                                                                     | External link warnings, screen-reader-only labels, high contrast               |\n| `<a11y-menu>`       | Dropdown menu                                                                                            | Arrow key navigation, `Enter`/`Space` activation, submenus                     |\n| `<a11y-menubar>`    | Application menu bar                                                                                     | Horizontal arrow key roving, WAI-ARIA menubar pattern                          |\n| **Form Suite**      | `<a11y-input>`, `<a11y-textarea>`, `<a11y-select>`, `<a11y-checkbox>`, `<a11y-radio>`, `<a11y-fieldset>` | Native form association, validation errors, helper text, live regions          |\n\n---\n\n## Related Packages\n\n- [**`@a11ypros/a11y-ui-components`**](https://www.npmjs.com/package/@a11ypros/a11y-ui-components) — The native React component library version of this design system.\n\n---\n\n## License\n\nMIT © [Ryan Mack](mailto:ryan@a11ypros.com) / [A11YPros](https://a11ypros.com)\n","readmeFilename":"README.md"}