@helixui/library 3.9.0-next.149 → 3.9.0-next.151

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.
Files changed (5) hide show
  1. package/README.md +111 -89
  2. package/custom-elements.json +415 -415
  3. package/dist/css/index.css +1 -1
  4. package/dist/css/manifest.json +1 -1
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -3,17 +3,17 @@
3
3
  **Enterprise Web Component Library** built with [Lit 3.x](https://lit.dev/), TypeScript, and Shadow DOM — designed for healthcare applications where accessibility and reliability are non-negotiable.
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/@helixui/library)](https://www.npmjs.com/package/@helixui/library)
6
- [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](../../LICENSE)
7
7
 
8
8
  ---
9
9
 
10
10
  ## Installation
11
11
 
12
12
  ```bash
13
- npm install @helixui/library
13
+ npm install @helixui/library @helixui/icons @floating-ui/dom
14
14
  ```
15
15
 
16
- Design tokens are included automatically as a dependency via `@helixui/tokens`.
16
+ `@helixui/icons` and `@floating-ui/dom` are declared as **peer dependencies** — every consumer must install them. Design tokens (`@helixui/tokens`) and `lit` ship as runtime dependencies and are installed automatically.
17
17
 
18
18
  ---
19
19
 
@@ -43,92 +43,111 @@ import '@helixui/library/components/hx-text-input';
43
43
  <hx-alert variant="warning">Please review before submitting.</hx-alert>
44
44
  ```
45
45
 
46
- ### CDN (placeholder — coming soon)
46
+ ### CDN
47
+
48
+ The published distribution imports `lit` and `@helixui/icons` from bare specifiers, so a CDN load needs an **import map** to resolve them:
47
49
 
48
50
  ```html
49
- <script type="module" src="https://cdn.example.com/@helixui/library/dist/index.js"></script>
51
+ <script type="importmap">
52
+ {
53
+ "imports": {
54
+ "lit": "https://cdn.jsdelivr.net/npm/lit@3/index.js",
55
+ "lit/": "https://cdn.jsdelivr.net/npm/lit@3/",
56
+ "@helixui/tokens": "https://cdn.jsdelivr.net/npm/@helixui/tokens@3/dist/index.js",
57
+ "@helixui/icons": "https://cdn.jsdelivr.net/npm/@helixui/icons@1/dist/index.js",
58
+ "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1/+esm"
59
+ }
60
+ }
61
+ </script>
62
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@helixui/library@3/dist/index.js"></script>
50
63
  ```
51
64
 
65
+ > All four bare specifiers above are required — `dist/index.js` opens with `import { lightTokenCss } from '@helixui/tokens'`, the shared chunks import `lit` / `lit/decorators.js` / `lit/directives/*`, the icon registry pulls `@helixui/icons`, and any popover-positioned component pulls `@floating-ui/dom`. Omit any one of them and the browser will fail to resolve the module before the first component renders.
66
+
67
+ For production loads, pin the major+minor (e.g. `@3.9`) and pair every CDN URL with an [SRI integrity hash](https://www.srihash.org). See the installation guide in the docs site for the full pattern.
68
+
52
69
  ---
53
70
 
54
71
  ## Components
55
72
 
56
- 73 component directories, 85 custom elements total.
57
-
58
- | Component | Tag |
59
- |---|---|
60
- | Accordion | `<hx-accordion>` |
61
- | Action Bar | `<hx-action-bar>` |
62
- | Alert | `<hx-alert>` |
63
- | Avatar | `<hx-avatar>` |
64
- | Badge | `<hx-badge>` |
65
- | Breadcrumb | `<hx-breadcrumb>` |
66
- | Button | `<hx-button>` |
67
- | Button Group | `<hx-button-group>` |
68
- | Card | `<hx-card>` |
69
- | Carousel | `<hx-carousel>` |
70
- | Checkbox | `<hx-checkbox>` |
71
- | Checkbox Group | `<hx-checkbox-group>` |
72
- | Code Snippet | `<hx-code-snippet>` |
73
- | Color Picker | `<hx-color-picker>` |
74
- | Combobox | `<hx-combobox>` |
75
- | Container | `<hx-container>` |
76
- | Copy Button | `<hx-copy-button>` |
77
- | Data Table | `<hx-data-table>` |
78
- | Date Picker | `<hx-date-picker>` |
79
- | Dialog | `<hx-dialog>` |
80
- | Divider | `<hx-divider>` |
81
- | Drawer | `<hx-drawer>` |
82
- | Dropdown | `<hx-dropdown>` |
83
- | Field | `<hx-field>` |
84
- | Field Label | `<hx-field-label>` |
85
- | File Upload | `<hx-file-upload>` |
86
- | Form | `<hx-form>` |
87
- | Format Date | `<hx-format-date>` |
88
- | Grid | `<hx-grid>` |
89
- | Help Text | `<hx-help-text>` |
90
- | Icon | `<hx-icon>` |
91
- | Image | `<hx-image>` |
92
- | Link | `<hx-link>` |
93
- | List | `<hx-list>` |
94
- | Menu | `<hx-menu>` |
95
- | Meter | `<hx-meter>` |
96
- | Nav | `<hx-nav>` |
97
- | Number Input | `<hx-number-input>` |
98
- | Overflow Menu | `<hx-overflow-menu>` |
99
- | Pagination | `<hx-pagination>` |
100
- | Popover | `<hx-popover>` |
101
- | Popup | `<hx-popup>` |
102
- | Progress Bar | `<hx-progress-bar>` |
103
- | Progress Ring | `<hx-progress-ring>` |
104
- | Prose | `<hx-prose>` |
105
- | Radio Group | `<hx-radio-group>` |
106
- | Rating | `<hx-rating>` |
107
- | Select | `<hx-select>` |
108
- | Side Nav | `<hx-side-nav>` |
109
- | Skeleton | `<hx-skeleton>` |
110
- | Slider | `<hx-slider>` |
111
- | Spinner | `<hx-spinner>` |
112
- | Split Button | `<hx-split-button>` |
113
- | Split Panel | `<hx-split-panel>` |
114
- | Stack | `<hx-stack>` |
73
+ `packages/hx-library/src/components/` ships **81 component directories** that register **102 custom elements** (some components — `hx-tabs`, `hx-accordion`, `hx-tree-view`, `hx-data-table`, etc. — register multiple related elements like `hx-tab` + `hx-tab-panel`).
74
+
75
+ The table below is a curated selection of the most commonly consumed elements; see [`custom-elements.json`](./custom-elements.json) for the authoritative inventory.
76
+
77
+ | Component | Tag |
78
+ | ---------------- | ----------------------- |
79
+ | Accordion | `<hx-accordion>` |
80
+ | Action Bar | `<hx-action-bar>` |
81
+ | Alert | `<hx-alert>` |
82
+ | Avatar | `<hx-avatar>` |
83
+ | Badge | `<hx-badge>` |
84
+ | Breadcrumb | `<hx-breadcrumb>` |
85
+ | Button | `<hx-button>` |
86
+ | Button Group | `<hx-button-group>` |
87
+ | Card | `<hx-card>` |
88
+ | Carousel | `<hx-carousel>` |
89
+ | Checkbox | `<hx-checkbox>` |
90
+ | Checkbox Group | `<hx-checkbox-group>` |
91
+ | Code Snippet | `<hx-code-snippet>` |
92
+ | Color Picker | `<hx-color-picker>` |
93
+ | Combobox | `<hx-combobox>` |
94
+ | Container | `<hx-container>` |
95
+ | Copy Button | `<hx-copy-button>` |
96
+ | Data Table | `<hx-data-table>` |
97
+ | Date Picker | `<hx-date-picker>` |
98
+ | Dialog | `<hx-dialog>` |
99
+ | Divider | `<hx-divider>` |
100
+ | Drawer | `<hx-drawer>` |
101
+ | Dropdown | `<hx-dropdown>` |
102
+ | Field | `<hx-field>` |
103
+ | Field Label | `<hx-field-label>` |
104
+ | File Upload | `<hx-file-upload>` |
105
+ | Form | `<hx-form>` |
106
+ | Format Date | `<hx-format-date>` |
107
+ | Grid | `<hx-grid>` |
108
+ | Help Text | `<hx-help-text>` |
109
+ | Icon | `<hx-icon>` |
110
+ | Image | `<hx-image>` |
111
+ | Link | `<hx-link>` |
112
+ | List | `<hx-list>` |
113
+ | Menu | `<hx-menu>` |
114
+ | Meter | `<hx-meter>` |
115
+ | Nav | `<hx-nav>` |
116
+ | Number Input | `<hx-number-input>` |
117
+ | Overflow Menu | `<hx-overflow-menu>` |
118
+ | Pagination | `<hx-pagination>` |
119
+ | Popover | `<hx-popover>` |
120
+ | Popup | `<hx-popup>` |
121
+ | Progress Bar | `<hx-progress-bar>` |
122
+ | Progress Ring | `<hx-progress-ring>` |
123
+ | Prose | `<hx-prose>` |
124
+ | Radio Group | `<hx-radio-group>` |
125
+ | Rating | `<hx-rating>` |
126
+ | Select | `<hx-select>` |
127
+ | Side Nav | `<hx-side-nav>` |
128
+ | Skeleton | `<hx-skeleton>` |
129
+ | Slider | `<hx-slider>` |
130
+ | Spinner | `<hx-spinner>` |
131
+ | Split Button | `<hx-split-button>` |
132
+ | Split Panel | `<hx-split-panel>` |
133
+ | Stack | `<hx-stack>` |
115
134
  | Status Indicator | `<hx-status-indicator>` |
116
- | Steps | `<hx-steps>` |
117
- | Structured List | `<hx-structured-list>` |
118
- | Switch | `<hx-switch>` |
119
- | Tabs | `<hx-tabs>` |
120
- | Tag | `<hx-tag>` |
121
- | Text | `<hx-text>` |
122
- | Text Input | `<hx-text-input>` |
123
- | Textarea | `<hx-textarea>` |
124
- | Theme | `<hx-theme>` |
125
- | Time Picker | `<hx-time-picker>` |
126
- | Toast | `<hx-toast>` |
127
- | Toggle Button | `<hx-toggle-button>` |
128
- | Tooltip | `<hx-tooltip>` |
129
- | Top Nav | `<hx-top-nav>` |
130
- | Tree View | `<hx-tree-view>` |
131
- | Visually Hidden | `<hx-visually-hidden>` |
135
+ | Steps | `<hx-steps>` |
136
+ | Structured List | `<hx-structured-list>` |
137
+ | Switch | `<hx-switch>` |
138
+ | Tabs | `<hx-tabs>` |
139
+ | Tag | `<hx-tag>` |
140
+ | Text | `<hx-text>` |
141
+ | Text Input | `<hx-text-input>` |
142
+ | Textarea | `<hx-textarea>` |
143
+ | Theme | `<hx-theme>` |
144
+ | Time Picker | `<hx-time-picker>` |
145
+ | Toast | `<hx-toast>` |
146
+ | Toggle Button | `<hx-toggle-button>` |
147
+ | Tooltip | `<hx-tooltip>` |
148
+ | Top Nav | `<hx-top-nav>` |
149
+ | Tree View | `<hx-tree-view>` |
150
+ | Visually Hidden | `<hx-visually-hidden>` |
132
151
 
133
152
  ---
134
153
 
@@ -138,10 +157,10 @@ All components consume design tokens from `@helixui/tokens` via CSS custom prope
138
157
 
139
158
  ```css
140
159
  :root {
141
- --hx-color-primary: #0057b8;
142
- --hx-color-primary-hover: #004a9e;
143
- --hx-spacing-md: 1rem;
144
- --hx-font-family-base: 'Inter', sans-serif;
160
+ --hx-color-action-primary-bg: #0057b8;
161
+ --hx-color-action-primary-bg-hover: #004a9e;
162
+ --hx-space-4: 1rem;
163
+ --hx-font-family-sans: 'Inter', sans-serif;
145
164
  }
146
165
  ```
147
166
 
@@ -165,7 +184,8 @@ Components are standard Custom Elements and work in any framework:
165
184
 
166
185
  Full component docs, API reference, and Storybook playground:
167
186
 
168
- > **Docs site coming soon**
187
+ - **Docs site:** [helixui.dev](https://helixui.dev) (Astro Starlight — prose, integration guides, AAA verdicts)
188
+ - **Storybook:** [storybook.helixui.dev](https://storybook.helixui.dev) (CEM-driven autodocs, every variant, interaction tests)
169
189
 
170
190
  ---
171
191
 
@@ -192,11 +212,13 @@ What that means in practice:
192
212
  `.reports/formal-aaa-audit/audit.matrix.md`, and the full machine-readable JSON in
193
213
  `.reports/formal-aaa-audit/audit.json`. The slim verdicts snapshot consumed by the docs site
194
214
  ships in this package as `aaa-verdicts.json`.
195
- - **Honest limits.** Where the harness surfaces a real gap, the verdict is published as
215
+ - **Honest limits.** Where the harness surfaces a real gap, the verdict would be published as
196
216
  Partially Supports (or Does Not Support) with the evidence prose explaining what's missing.
197
- The 3.9.0 release surfaces 2 honest Partial verdicts on WCAG 3.3.6 Error Prevention (All) for
198
- `hx-slider` and `hx-file-upload` — both are form-associated inputs that should expose
199
- ElementInternals + setValidity but do not yet. These are queued for 3.9.1.
217
+ The 3.9.0 release surfaces **0 Partial / 0 Fail** verdicts across the 44 P0 components × 11
218
+ criteria measured — every criterion resolves to Supports or Not Applicable. `hx-slider` and
219
+ `hx-file-upload` previously surfaced WCAG 3.3.6 Partial verdicts; both have since been
220
+ remediated with `ElementInternals` + `setValidity`, and `aaa-verdicts.json` records the
221
+ Supports verdicts with the form-association evidence.
200
222
  - **axe-core gap.** axe-core PR #5080 (unmerged) means ElementInternals-attached ARIA on
201
223
  form-associated components is not visible to axe's rule engine. The harness uses DOM-level
202
224
  fallback assertions where this matters. See `apps/docs/src/content/docs/accessibility/axe-element-internals-gap.mdx`