@auldrant/ui 0.6.0 → 0.8.1

package/CHANGELOG.md

@@ -0,0 +1,116 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/),
+and this project adheres to [Semantic Versioning](https://semver.org/).
+
+## [0.8.0] - 2026-02-27
+
+### Added
+
+- feat(deps): add lucide-preact icon library ([#44](https://github.com/coloneljade/auldrant-ui/pull/44))
+- feat(password-input): replace text toggle with icon overlay ([#44](https://github.com/coloneljade/auldrant-ui/pull/44))
+- chore(dev): add missing error variants to test page ([#44](https://github.com/coloneljade/auldrant-ui/pull/44))
+
+## [0.7.0] - 2026-02-27
+
+### Added
+
+- Change default primary from blue to green (hue 160) ([#40](https://github.com/coloneljade/auldrant-ui/pull/40))
+- Ship 6 AAA-verified preset CSS classes (aui-blue, aui-purple, aui-teal, aui-red, aui-orange, aui-yellow) ([#40](https://github.com/coloneljade/auldrant-ui/pull/40))
+- Expand contrast test coverage to all hues × all recommended pairs × both modes × raw + hover states ([#40](https://github.com/coloneljade/auldrant-ui/pull/40))
+- Update README with green default and pre-built palette reference ([#40](https://github.com/coloneljade/auldrant-ui/pull/40))
+
+## [0.6.0] - 2026-02-26
+
+### Changed
+
+- feat(a11y): theme contrast system with color-mix() derivation ([#34](https://github.com/coloneljade/auldrant-ui/pull/34))
+- test: automated WCAG contrast validation ([#34](https://github.com/coloneljade/auldrant-ui/pull/34))
+- feat: dev test page for visual testing (#19) ([#34](https://github.com/coloneljade/auldrant-ui/pull/34))
+- docs: rewrite theming section with contrast guidance ([#34](https://github.com/coloneljade/auldrant-ui/pull/34))
+- chore: align PR template with /pr skill format ([#34](https://github.com/coloneljade/auldrant-ui/pull/34))
+- docs: rewrite CONTRIBUTING.md with DCO, dev test page, and merge bot workflow ([#34](https://github.com/coloneljade/auldrant-ui/pull/34))
+
+## [0.5.2] - 2026-02-26
+
+### Fixed
+
+- Add `homepage` and `bugs` fields to `package.json` ([#31](https://github.com/coloneljade/auldrant-ui/pull/31))
+- npm renders these as links on the public package page ([#31](https://github.com/coloneljade/auldrant-ui/pull/31))
+
+## [0.5.1] - 2026-02-26
+
+### Fixed
+
+- Add `repository` field to `package.json` with the GitHub repo URL ([#30](https://github.com/coloneljade/auldrant-ui/pull/30))
+- Required by Sigstore provenance verification during `npm publish --provenance` ([#30](https://github.com/coloneljade/auldrant-ui/pull/30))
+- Without it, publish fails with E422: `repository.url is "", expected to match` ([#30](https://github.com/coloneljade/auldrant-ui/pull/30))
+
+## [0.5.0] - 2026-02-26
+
+### Added
+
+- Add `error` prop to all form field components with `aria-invalid`, `aria-describedby`, and `role="alert"` error messages ([#28](https://github.com/coloneljade/auldrant-ui/pull/28))
+- Add required `caption` prop to Table for accessible name via `<caption>` ([#28](https://github.com/coloneljade/auldrant-ui/pull/28))
+- Add `status` prop to Form rendered as `<output>` for submission feedback ([#28](https://github.com/coloneljade/auldrant-ui/pull/28))
+- Add `aria-live` character limit announcements to Textarea at threshold breakpoints ([#28](https://github.com/coloneljade/auldrant-ui/pull/28))
+- Add `describeBy()` utility and shared `field-error` CSS class ([#28](https://github.com/coloneljade/auldrant-ui/pull/28))
+- Remove 11 duplicate behavioral tests already covered by a11y tests with better query patterns ([#28](https://github.com/coloneljade/auldrant-ui/pull/28))
+- Replace `querySelector` calls with accessible queries (`getByRole`, `getByLabelText`) in behavioral tests ([#28](https://github.com/coloneljade/auldrant-ui/pull/28))
+- Add AAA section comments (`// Arrange`, `// Act`, `// Assert`) to all behavioral tests ([#28](https://github.com/coloneljade/auldrant-ui/pull/28))
+- Configure coverage to exclude test infrastructure (`coverageSkipTestFiles`, `coveragePathIgnorePatterns`) ([#28](https://github.com/coloneljade/auldrant-ui/pull/28))
+- Fix publishing config: correct CHANGELOG format, remove CHANGELOG from package files ([#28](https://github.com/coloneljade/auldrant-ui/pull/28))
+
+## [0.4.0] - 2026-02-26
+
+### Added
+
+- **feat(test)**: add axe-core a11y test suite (19 files, setup helpers, 18 test files) ([#20](https://github.com/coloneljade/auldrant-ui/pull/20))
+- **refactor(test)**: migrate a11y assertions out of behavioral tests (cleanup + deletions) ([#20](https://github.com/coloneljade/auldrant-ui/pull/20))
+- **docs(rules)**: mandate AAA comments and WCAG SC references in tests ([#20](https://github.com/coloneljade/auldrant-ui/pull/20))
+
+## [0.3.0] - 2026-02-25
+
+### Added
+
+- Configure Vite, TypeScript, Biome, devcontainer, and test setup ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- Add routing and title signals for SPA navigation ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- Shared types, utilities, and composable CSS classes ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- Semantic HTML-first — native elements before ARIA ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- CSS Grid layout, em-based spacing, CSS modules ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- Accessible form field management (`FormField` wrapper) ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- SkipLink and Nav for keyboard navigation ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- Type-safe component props (TypeScript strict mode) ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- Comprehensive test coverage (114 tests) ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- Pit of success design principle for component APIs ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- Binary tools principle (Biome fixes, not manual edits) ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- Mandatory skills workflow (staging, pushing, PRs) ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- Import aliases (`@components`, `@scripts`, `@signals`, `@styles`) ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- **Head component** — meta/document head management (issue #18) ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+- **Form data typing** — generic type parameter for typed onSubmit (issue #8) ([#7](https://github.com/coloneljade/auldrant-ui/pull/7))
+
+## [0.2.0] - 2026-02-24
+
+### Added
+
+- Remove CJS output and UMD name — ESM-only library ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+- Fix CI publish failure by skipping lefthook in CI environment ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+- Add `@components` and `@styles` import path aliases (tsconfig + vite) ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+- Add GitHub CLI feature and YAML extension to devcontainer ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+- Create VSCode tasks for all project scripts (test, build, check, typecheck, storybook) ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+- Add component base types (BaseProps, FieldProps) and cx() class utility ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+
+## [0.1.0] - 2026-02-24
+
+### Added
+
+- Remove CJS output and UMD name — ESM-only library ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+- Fix CI publish failure by skipping lefthook in CI environment ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+- Add `@components` and `@styles` import path aliases (tsconfig + vite) ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+- Add GitHub CLI feature and YAML extension to devcontainer ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+- Create VSCode tasks for all project scripts (test, build, check, typecheck, storybook) ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+- Add component base types (BaseProps, FieldProps) and cx() class utility ([#6](https://github.com/coloneljade/auldrant-ui/pull/6))
+
+## [0.0.0]

package/NOTICES

@@ -0,0 +1,49 @@
+This project includes third-party software. Their licenses and copyright
+notices are reproduced below.
+
+================================================================================
+
+lucide-preact — https://github.com/lucide-icons/lucide
+Icons used in component library UI.
+
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2026 as part
+of Feather (MIT). All other copyright (c) for Lucide are held by Lucide
+Contributors 2026.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The MIT License (MIT) (for portions derived from Feather)
+
+Copyright (c) 2013-2026 Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -113,7 +113,7 @@ Override primary, white, and black for complete control:
 
 | Token | Default | Description |
 |-------|---------|-------------|
-| `--aui-base-primary` | `oklch(0.78 0.18 260)` | Brand accent color (blue) |
+| `--aui-base-primary` | `oklch(0.78 0.18 160)` | Brand accent color (green) |
 | `--aui-base-white` | `#f5f5f5` | Light endpoint (light-mode background, dark-mode text) |
 | `--aui-base-black` | `#1a1a1a` | Dark endpoint (dark-mode background, light-mode text) |
 | `--aui-base-error` | `oklch(0.78 0.22 27)` | Error/danger semantic color |
@@ -155,9 +155,31 @@ Custom white/black pairs with lower inherent contrast (e.g. `#e8e8e8` / `#2a2a2a
 
 ### Primary color guidance
 
-Use oklch lightness **0.75–0.80** and chroma **0.15–0.22** for the primary color. Most hue families (blue, purple, teal, green, red) work well at these ranges.
+Use oklch lightness **0.75–0.80** and chroma **0.15–0.22** for the primary color. All verified hue families are available as pre-built palettes (see below). Custom hues at these ranges generally pass AAA — verify with a [contrast checker](https://webaim.org/resources/contrastchecker/) if using untested values.
 
-Yellows and oranges (hue 60–110) are harder to guarantee at AAA because oklch lightness maps non-linearly to WCAG luminance for warm hues. Test these with a [contrast checker](https://webaim.org/resources/contrastchecker/).
+### Pre-built palettes
+
+AAA-verified preset classes — apply directly on `<Theme>`:
+
+| Class | Value | Notes |
+|-------|-------|-------|
+| *(default)* | `oklch(0.78 0.18 160)` | Green — no class needed |
+| `aui-blue` | `oklch(0.78 0.18 260)` | |
+| `aui-purple` | `oklch(0.78 0.18 300)` | |
+| `aui-teal` | `oklch(0.78 0.15 195)` | Lower chroma for teal gamut |
+| `aui-red` | `oklch(0.78 0.22 27)` | Higher chroma for red vibrancy |
+| `aui-orange` | `oklch(0.78 0.18 55)` | |
+| `aui-yellow` | `oklch(0.78 0.18 95)` | Light mode shifts toward olive/amber (expected) |
+
+```tsx
+<Theme class="aui-blue">   {/* override default green with blue */}
+  <App />
+</Theme>
+
+<Theme>                     {/* green — the default, no class needed */}
+  <App />
+</Theme>
+```
 
 ### Nestable themes
 

package/dist/auldrant-ui.css

@@ -1 +1 @@
-:root{--aui-base-primary: oklch(.78 .18 260);--aui-base-white: #f5f5f5;--aui-base-black: #1a1a1a;--aui-base-error: oklch(.78 .22 27);--aui-base-success: oklch(.78 .18 145);--_aui-fg: var(--aui-base-white);--_aui-bg: var(--aui-base-black);--aui-color-text: var(--_aui-fg);--aui-color-text-muted: color-mix(in oklch, var(--_aui-fg) 82%, var(--_aui-bg));--aui-color-background: var(--_aui-bg);--aui-color-background-hover: color-mix(in oklch, var(--_aui-bg) 92%, var(--_aui-fg));--aui-color-surface: color-mix(in oklch, var(--_aui-bg) 97%, var(--_aui-fg));--aui-color-border: color-mix(in oklch, var(--_aui-bg) 50%, var(--_aui-fg));--aui-color-primary: var(--aui-base-primary);--aui-color-primary-hover: color-mix(in oklch, var(--aui-base-primary) 85%, var(--_aui-fg));--aui-color-focus-ring: var(--aui-base-primary);--aui-color-error: var(--aui-base-error);--aui-color-success: var(--aui-base-success)}@media(prefers-color-scheme:light){:root{--_aui-fg: var(--aui-base-black);--_aui-bg: var(--aui-base-white);--aui-color-primary: color-mix(in oklch, var(--aui-base-primary) 33%, var(--_aui-fg));--aui-color-primary-hover: color-mix(in oklch, var(--aui-base-primary) 25%, var(--_aui-fg));--aui-color-focus-ring: color-mix(in oklch, var(--aui-base-primary) 33%, var(--_aui-fg));--aui-color-error: color-mix(in oklch, var(--aui-base-error) 33%, var(--_aui-fg));--aui-color-success: color-mix(in oklch, var(--aui-base-success) 33%, var(--_aui-fg))}}._button_4gn7y_1{padding:.5em 1em;border:1px solid var(--aui-color-border);border-radius:.25em;background:var(--aui-color-primary);color:var(--aui-color-background);font:inherit;cursor:pointer}._button_4gn7y_1:hover{background:var(--aui-color-primary-hover)}._card_awzw5_1{display:grid;gap:.5em;padding:1em;border:1px solid var(--aui-color-border);border-radius:.25em;background:var(--aui-color-surface)}._field_17xwz_1{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em}._error_17xwz_12{grid-column:2}._form_jr324_1{display:grid;gap:1em}._actions_jr324_6{display:grid;grid-auto-flow:column;justify-content:start;gap:.5em}._status_jr324_13{margin:0;font-size:.875em;color:var(--aui-color-text-muted)}._field_7l9ux_1{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.5em}._label_7l9ux_8{padding-top:.25em}._required_7l9ux_12{color:var(--aui-color-error)}._error_7l9ux_16{grid-column:2}._nav_778nl_1{display:grid;gap:.5em}._title_778nl_6{font-weight:700}._wrapper_1mu6v_1{display:grid;grid-template-columns:1fr auto}._input_1mu6v_6{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}._toggle_1mu6v_13{padding:.375em .75em;border:1px solid var(--aui-color-border);border-top-right-radius:.25em;border-bottom-right-radius:.25em;background:var(--aui-color-background);color:var(--aui-color-text);font:inherit;font-size:.875em;cursor:pointer}._toggle_1mu6v_13:hover:not(:disabled){background:var(--aui-color-background-hover, var(--aui-color-background))}._fieldset_lymkd_1{border:none;padding:0}._legend_lymkd_6{font-weight:700;margin-bottom:.5em}._option_lymkd_11{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;margin-bottom:.25em}._section_4nogy_1{display:grid;gap:1em}._skip_xbsul_1{position:absolute;top:-100%;left:0;padding:.5em 1em;background:var(--aui-color-background);color:var(--aui-color-primary);z-index:1000}._skip_xbsul_1:focus{top:0}._table_dls60_1{width:100%;border-collapse:collapse}._caption_dls60_6{text-align:left;padding:.5em 0;font-weight:700}._table_dls60_1 th,._table_dls60_1 td{padding:.5em;text-align:left;border-bottom:1px solid var(--aui-color-border)}._table_dls60_1 th{font-weight:700;color:var(--aui-color-text)}._table_dls60_1 td{color:var(--aui-color-text)}._focus-ring_4u8pk_3:focus-visible{outline:2px solid var(--aui-color-focus-ring);outline-offset:2px}._disabled_4u8pk_8:disabled{opacity:.5;cursor:not-allowed}._text-input_4u8pk_13{padding:.375em .5em;border:1px solid var(--aui-color-border);border-radius:.25em;background:var(--aui-color-background);color:var(--aui-color-text);font:inherit}._link_4u8pk_22{color:var(--aui-color-primary);text-decoration:underline;cursor:pointer}._link_4u8pk_22:hover{color:var(--aui-color-primary-hover)}._check-input_4u8pk_32{accent-color:var(--aui-color-primary)}._field-error_4u8pk_36{margin:0;font-size:.875em;color:var(--aui-color-error)}._visually-hidden_4u8pk_42{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._wrapper_1kyv1_1{display:grid;gap:.25em}._textarea_1kyv1_6{resize:vertical}._counter_1kyv1_11{justify-self:end;font-size:.875em;color:var(--aui-color-text-muted)}._theme_1x47p_11{display:contents;--aui-color-text: var(--_aui-fg);--aui-color-text-muted: color-mix(in oklch, var(--_aui-fg) 82%, var(--_aui-bg));--aui-color-background: var(--_aui-bg);--aui-color-background-hover: color-mix(in oklch, var(--_aui-bg) 92%, var(--_aui-fg));--aui-color-surface: color-mix(in oklch, var(--_aui-bg) 97%, var(--_aui-fg));--aui-color-border: color-mix(in oklch, var(--_aui-bg) 50%, var(--_aui-fg));--aui-color-primary: var(--aui-base-primary);--aui-color-primary-hover: color-mix(in oklch, var(--aui-base-primary) 85%, var(--_aui-fg));--aui-color-focus-ring: var(--aui-base-primary);--aui-color-error: var(--aui-base-error);--aui-color-success: var(--aui-base-success)}
+:root{--aui-base-primary: oklch(.78 .18 160);--aui-base-white: #f5f5f5;--aui-base-black: #1a1a1a;--aui-base-error: oklch(.78 .22 27);--aui-base-success: oklch(.78 .18 145);--_aui-fg: var(--aui-base-white);--_aui-bg: var(--aui-base-black);--aui-color-text: var(--_aui-fg);--aui-color-text-muted: color-mix(in oklch, var(--_aui-fg) 82%, var(--_aui-bg));--aui-color-background: var(--_aui-bg);--aui-color-background-hover: color-mix(in oklch, var(--_aui-bg) 92%, var(--_aui-fg));--aui-color-surface: color-mix(in oklch, var(--_aui-bg) 97%, var(--_aui-fg));--aui-color-border: color-mix(in oklch, var(--_aui-bg) 50%, var(--_aui-fg));--aui-color-primary: var(--aui-base-primary);--aui-color-primary-hover: color-mix(in oklch, var(--aui-base-primary) 85%, var(--_aui-fg));--aui-color-focus-ring: var(--aui-base-primary);--aui-color-error: var(--aui-base-error);--aui-color-success: var(--aui-base-success)}@media(prefers-color-scheme:light){:root{--_aui-fg: var(--aui-base-black);--_aui-bg: var(--aui-base-white);--aui-color-primary: color-mix(in oklch, var(--aui-base-primary) 33%, var(--_aui-fg));--aui-color-primary-hover: color-mix(in oklch, var(--aui-base-primary) 25%, var(--_aui-fg));--aui-color-focus-ring: color-mix(in oklch, var(--aui-base-primary) 33%, var(--_aui-fg));--aui-color-error: color-mix(in oklch, var(--aui-base-error) 33%, var(--_aui-fg));--aui-color-success: color-mix(in oklch, var(--aui-base-success) 33%, var(--_aui-fg))}}.aui-blue{--aui-base-primary: oklch(.78 .18 260)}.aui-purple{--aui-base-primary: oklch(.78 .18 300)}.aui-teal{--aui-base-primary: oklch(.78 .15 195)}.aui-red{--aui-base-primary: oklch(.78 .22 27)}.aui-orange{--aui-base-primary: oklch(.78 .18 55)}.aui-yellow{--aui-base-primary: oklch(.78 .18 95)}._button_4gn7y_1{padding:.5em 1em;border:1px solid var(--aui-color-border);border-radius:.25em;background:var(--aui-color-primary);color:var(--aui-color-background);font:inherit;cursor:pointer}._button_4gn7y_1:hover{background:var(--aui-color-primary-hover)}._card_awzw5_1{display:grid;gap:.5em;padding:1em;border:1px solid var(--aui-color-border);border-radius:.25em;background:var(--aui-color-surface)}._field_17xwz_1{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em}._error_17xwz_12{grid-column:2}._form_jr324_1{display:grid;gap:1em}._actions_jr324_6{display:grid;grid-auto-flow:column;justify-content:start;gap:.5em}._status_jr324_13{margin:0;font-size:.875em;color:var(--aui-color-text-muted)}._field_7l9ux_1{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.5em}._label_7l9ux_8{padding-top:.25em}._required_7l9ux_12{color:var(--aui-color-error)}._error_7l9ux_16{grid-column:2}._nav_778nl_1{display:grid;gap:.5em}._title_778nl_6{font-weight:700}._wrapper_16zfv_1{position:relative}._input_16zfv_5{width:100%;padding-right:2.5em}._toggle_16zfv_11{position:absolute;right:.5em;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.25em;border:none;background:none;color:var(--aui-color-text);cursor:pointer}._fieldset_lymkd_1{border:none;padding:0}._legend_lymkd_6{font-weight:700;margin-bottom:.5em}._option_lymkd_11{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;margin-bottom:.25em}._section_4nogy_1{display:grid;gap:1em}._skip_xbsul_1{position:absolute;top:-100%;left:0;padding:.5em 1em;background:var(--aui-color-background);color:var(--aui-color-primary);z-index:1000}._skip_xbsul_1:focus{top:0}._table_dls60_1{width:100%;border-collapse:collapse}._caption_dls60_6{text-align:left;padding:.5em 0;font-weight:700}._table_dls60_1 th,._table_dls60_1 td{padding:.5em;text-align:left;border-bottom:1px solid var(--aui-color-border)}._table_dls60_1 th{font-weight:700;color:var(--aui-color-text)}._table_dls60_1 td{color:var(--aui-color-text)}._focus-ring_4u8pk_3:focus-visible{outline:2px solid var(--aui-color-focus-ring);outline-offset:2px}._disabled_4u8pk_8:disabled{opacity:.5;cursor:not-allowed}._text-input_4u8pk_13{padding:.375em .5em;border:1px solid var(--aui-color-border);border-radius:.25em;background:var(--aui-color-background);color:var(--aui-color-text);font:inherit}._link_4u8pk_22{color:var(--aui-color-primary);text-decoration:underline;cursor:pointer}._link_4u8pk_22:hover{color:var(--aui-color-primary-hover)}._check-input_4u8pk_32{accent-color:var(--aui-color-primary)}._field-error_4u8pk_36{margin:0;font-size:.875em;color:var(--aui-color-error)}._visually-hidden_4u8pk_42{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._wrapper_1kyv1_1{display:grid;gap:.25em}._textarea_1kyv1_6{resize:vertical}._counter_1kyv1_11{justify-self:end;font-size:.875em;color:var(--aui-color-text-muted)}._theme_1x47p_11{display:contents;--aui-color-text: var(--_aui-fg);--aui-color-text-muted: color-mix(in oklch, var(--_aui-fg) 82%, var(--_aui-bg));--aui-color-background: var(--_aui-bg);--aui-color-background-hover: color-mix(in oklch, var(--_aui-bg) 92%, var(--_aui-fg));--aui-color-surface: color-mix(in oklch, var(--_aui-bg) 97%, var(--_aui-fg));--aui-color-border: color-mix(in oklch, var(--_aui-bg) 50%, var(--_aui-fg));--aui-color-primary: var(--aui-base-primary);--aui-color-primary-hover: color-mix(in oklch, var(--aui-base-primary) 85%, var(--_aui-fg));--aui-color-focus-ring: var(--aui-base-primary);--aui-color-error: var(--aui-base-error);--aui-color-success: var(--aui-base-success)}

package/dist/auldrant-ui.js

@@ -1,545 +1,642 @@
-import { jsx as r, jsxs as b, Fragment as W } from "preact/jsx-runtime";
-import { useId as f } from "preact/hooks";
-import { signal as j, useSignal as x, effect as M } from "@preact/signals";
-function m(...t) {
+import { jsx as l, jsxs as m, Fragment as V } from "preact/jsx-runtime";
+import { useId as v } from "preact/hooks";
+import { signal as A, useSignal as $, effect as J } from "@preact/signals";
+import { h as T, toChildArray as Q } from "preact";
+function b(...t) {
   return t.filter(Boolean).join(" ");
 }
 function g(...t) {
   return t.filter(Boolean).join(" ") || void 0;
 }
-const V = "_button_4gn7y_1 _focus-ring_4u8pk_3 _disabled_4u8pk_8", J = {
-  button: V
-}, D = (t) => {
-  const { label: e, onClick: n, type: s = "button", disabled: l, class: c } = t;
-  return /* @__PURE__ */ r("button", { type: s, class: m(J.button, c), onClick: n, disabled: l, children: e });
-}, K = "_card_awzw5_1", Q = {
-  card: K
-}, Ye = (t) => {
-  const { children: e, class: n } = t;
-  return /* @__PURE__ */ r("div", { class: m(Q.card, n), children: e });
-}, X = "_field_17xwz_1", Y = "_input_17xwz_8 _check-input_4u8pk_32 _focus-ring_4u8pk_3 _disabled_4u8pk_8", Z = "_error_17xwz_12 _field-error_4u8pk_36", q = {
-  field: X,
-  input: Y,
-  error: Z
-}, Ze = (t) => {
-  const { label: e, name: n, checked: s, required: l, disabled: c, error: a, onChange: d, class: i } = t, h = f(), p = `${h}-error`;
-  return /* @__PURE__ */ b("div", { class: m(q.field, i), children: [
-    /* @__PURE__ */ r(
+const X = "_button_4gn7y_1 _focus-ring_4u8pk_3 _disabled_4u8pk_8", Y = {
+  button: X
+}, O = (t) => {
+  const { label: e, onClick: s, type: n = "button", disabled: r, class: o } = t;
+  return /* @__PURE__ */ l("button", { type: n, class: b(Y.button, o), onClick: s, disabled: r, children: e });
+}, ee = "_card_awzw5_1", te = {
+  card: ee
+}, ut = (t) => {
+  const { children: e, class: s } = t;
+  return /* @__PURE__ */ l("div", { class: b(te.card, s), children: e });
+}, se = "_field_17xwz_1", ne = "_input_17xwz_8 _check-input_4u8pk_32 _focus-ring_4u8pk_3 _disabled_4u8pk_8", re = "_error_17xwz_12 _field-error_4u8pk_36", L = {
+  field: se,
+  input: ne,
+  error: re
+}, _t = (t) => {
+  const { label: e, name: s, checked: n, required: r, disabled: o, error: a, onChange: c, class: i } = t, p = v(), h = `${p}-error`;
+  return /* @__PURE__ */ m("div", { class: b(L.field, i), children: [
+    /* @__PURE__ */ l(
       "input",
       {
-        id: h,
-        class: q.input,
+        id: p,
+        class: L.input,
         type: "checkbox",
-        name: n,
-        checked: s,
-        required: l,
-        disabled: c,
+        name: s,
+        checked: n,
+        required: r,
+        disabled: o,
         "aria-invalid": !!a || void 0,
-        "aria-describedby": g(a && p),
-        onChange: d && ((u) => d(u.target.checked))
+        "aria-describedby": g(a && h),
+        onChange: c && ((u) => c(u.target.checked))
       }
     ),
-    /* @__PURE__ */ r("label", { for: h, children: e }),
-    a && /* @__PURE__ */ r("p", { id: p, class: q.error, role: "alert", children: a })
+    /* @__PURE__ */ l("label", { for: p, children: e }),
+    a && /* @__PURE__ */ l("p", { id: h, class: L.error, role: "alert", children: a })
   ] });
-}, ee = "_link_7wgic_1 _link_4u8pk_22 _focus-ring_4u8pk_3", te = {
-  link: ee
-}, et = (t) => {
-  const { href: e, fileName: n, label: s, class: l } = t;
-  return /* @__PURE__ */ r("a", { href: e, download: n, class: m(te.link, l), children: s });
-}, ne = "_form_jr324_1", se = "_actions_jr324_6", le = "_status_jr324_13", L = {
-  form: ne,
-  actions: se,
-  status: le
-}, tt = (t) => {
+}, le = "_link_7wgic_1 _link_4u8pk_22 _focus-ring_4u8pk_3", ae = {
+  link: le
+}, pt = (t) => {
+  const { href: e, fileName: s, label: n, class: r } = t;
+  return /* @__PURE__ */ l("a", { href: e, download: s, class: b(ae.link, r), children: n });
+}, oe = "_form_jr324_1", ce = "_actions_jr324_6", ie = "_status_jr324_13", j = {
+  form: oe,
+  actions: ce,
+  status: ie
+}, ht = (t) => {
   const {
     onSubmit: e,
-    submitLabel: n = "Submit",
-    resetLabel: s,
-    status: l,
-    children: c,
+    submitLabel: s = "Submit",
+    resetLabel: n,
+    status: r,
+    children: o,
     class: a
   } = t;
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ m(
     "form",
     {
-      class: m(L.form, a),
-      onSubmit: (d) => {
-        d.preventDefault();
-        const i = new FormData(d.currentTarget);
+      class: b(j.form, a),
+      onSubmit: (c) => {
+        c.preventDefault();
+        const i = new FormData(c.currentTarget);
         e(i);
       },
       children: [
-        c,
-        /* @__PURE__ */ b("div", { class: L.actions, children: [
-          /* @__PURE__ */ r(D, { type: "submit", label: n }),
-          s && /* @__PURE__ */ r(D, { type: "reset", label: s })
+        o,
+        /* @__PURE__ */ m("div", { class: j.actions, children: [
+          /* @__PURE__ */ l(O, { type: "submit", label: s }),
+          n && /* @__PURE__ */ l(O, { type: "reset", label: n })
         ] }),
-        l && /* @__PURE__ */ r("output", { class: L.status, children: l })
+        r && /* @__PURE__ */ l("output", { class: j.status, children: r })
       ]
     }
   );
-}, re = "_field_7l9ux_1", ae = "_label_7l9ux_8", ce = "_required_7l9ux_12", oe = "_error_7l9ux_16 _field-error_4u8pk_36", S = {
-  field: re,
-  label: ae,
-  required: ce,
-  error: oe
-}, w = (t) => {
-  const { for: e, label: n, required: s, error: l, errorId: c, children: a, class: d } = t;
-  return /* @__PURE__ */ b("div", { class: m(S.field, d), children: [
-    /* @__PURE__ */ b("label", { class: S.label, for: e, children: [
-      n,
+}, de = "_field_7l9ux_1", ue = "_label_7l9ux_8", _e = "_required_7l9ux_12", pe = "_error_7l9ux_16 _field-error_4u8pk_36", S = {
+  field: de,
+  label: ue,
+  required: _e,
+  error: pe
+}, x = (t) => {
+  const { for: e, label: s, required: n, error: r, errorId: o, children: a, class: c } = t;
+  return /* @__PURE__ */ m("div", { class: b(S.field, c), children: [
+    /* @__PURE__ */ m("label", { class: S.label, for: e, children: [
+      s,
       ":",
-      s && /* @__PURE__ */ b("span", { class: S.required, "aria-hidden": "true", children: [
+      n && /* @__PURE__ */ m("span", { class: S.required, "aria-hidden": "true", children: [
         " ",
         "*"
       ] })
     ] }),
     a,
-    l && /* @__PURE__ */ r("p", { id: c, class: S.error, role: "alert", children: l })
+    r && /* @__PURE__ */ l("p", { id: o, class: S.error, role: "alert", children: r })
   ] });
-}, ie = "_input_1j10x_1 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", de = {
-  input: ie
-}, ue = {
+}, he = "_input_1j10x_1 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", me = {
+  input: he
+}, be = {
   email: "email",
   tel: "tel",
   url: "url"
-}, nt = (t) => {
+}, mt = (t) => {
   const {
     label: e,
-    name: n,
-    type: s = "text",
-    value: l,
-    placeholder: c,
+    name: s,
+    type: n = "text",
+    value: r,
+    placeholder: o,
     maxLength: a,
-    autocomplete: d,
+    autocomplete: c,
     readOnly: i,
-    pattern: h,
-    required: p,
+    pattern: p,
+    required: h,
     disabled: u,
     error: _,
-    onInput: o,
-    class: v
-  } = t, k = f(), y = `${k}-error`;
-  return /* @__PURE__ */ r(
-    w,
+    onInput: d,
+    class: f
+  } = t, k = v(), y = `${k}-error`;
+  return /* @__PURE__ */ l(
+    x,
     {
       label: e,
       for: k,
-      required: p,
+      required: h,
       error: _,
       errorId: y,
-      class: v,
-      children: /* @__PURE__ */ r(
+      class: f,
+      children: /* @__PURE__ */ l(
         "input",
         {
           id: k,
-          class: de.input,
-          type: s,
-          name: n,
-          value: l,
-          placeholder: c,
+          class: me.input,
+          type: n,
+          name: s,
+          value: r,
+          placeholder: o,
           maxLength: a,
-          autoComplete: d ?? ue[s],
+          autoComplete: c ?? be[n],
           readOnly: i,
-          pattern: h,
-          required: p,
+          pattern: p,
+          required: h,
           disabled: u,
           "aria-invalid": !!_ || void 0,
           "aria-describedby": g(_ && y),
-          onInput: o && ((I) => o(I.target.value))
+          onInput: d && ((C) => d(C.target.value))
         }
       )
     }
   );
-}, P = j(window.location.pathname), A = j(window.location.hash.slice(1));
-function _e(t) {
+}, P = A(window.location.pathname), G = A(window.location.hash.slice(1));
+function fe(t) {
   const e = t.indexOf("#");
-  let n = "", s = t;
-  e >= 0 && (n = t.slice(e + 1), s = t.slice(0, e));
-  const l = s.indexOf("?");
-  let c = "", a = s;
-  return l >= 0 && (c = s.slice(l), a = s.slice(0, l)), { pathname: a || "/", search: c, hash: n };
+  let s = "", n = t;
+  e >= 0 && (s = t.slice(e + 1), n = t.slice(0, e));
+  const r = n.indexOf("?");
+  let o = "", a = n;
+  return r >= 0 && (o = n.slice(r), a = n.slice(0, r)), { pathname: a || "/", search: o, hash: s };
 }
-function pe(t, e) {
-  const { pathname: n, search: s, hash: l } = _e(t), c = n + s + (l ? `#${l}` : "");
-  e?.replace ? history.replaceState(null, "", c) : history.pushState(null, "", c), P.value = n, A.value = l;
+function ve(t, e) {
+  const { pathname: s, search: n, hash: r } = fe(t), o = s + n + (r ? `#${r}` : "");
+  e?.replace ? history.replaceState(null, "", o) : history.pushState(null, "", o), P.value = s, G.value = r;
 }
 window.addEventListener("popstate", () => {
-  P.value = window.location.pathname, A.value = window.location.hash.slice(1);
+  P.value = window.location.pathname, G.value = window.location.hash.slice(1);
 });
-const he = "_link_7wgic_1 _link_4u8pk_22 _focus-ring_4u8pk_3", F = {
-  link: he
+const ke = "_link_7wgic_1 _link_4u8pk_22 _focus-ring_4u8pk_3", H = {
+  link: ke
 };
-function be(t) {
+function ge(t) {
   try {
     return new URL(t, window.location.href).origin !== window.location.origin;
   } catch {
     return !1;
   }
 }
-const st = (t) => {
-  const { href: e, children: n, external: s, class: l } = t;
-  return s ?? be(e) ? /* @__PURE__ */ r("a", { href: e, class: m(F.link, l), rel: "noopener noreferrer", children: n }) : /* @__PURE__ */ r(
+const bt = (t) => {
+  const { href: e, children: s, external: n, class: r } = t;
+  return n ?? ge(e) ? /* @__PURE__ */ l("a", { href: e, class: b(H.link, r), rel: "noopener noreferrer", children: s }) : /* @__PURE__ */ l(
     "a",
     {
       href: e,
-      class: m(F.link, l),
+      class: b(H.link, r),
       onClick: (a) => {
-        a.preventDefault(), pe(e);
+        a.preventDefault(), ve(e);
       },
-      children: n
+      children: s
     }
   );
-}, me = "_nav_778nl_1", ve = "_title_778nl_6", O = {
-  nav: me,
-  title: ve
-}, lt = (t) => {
-  const { title: e, children: n, class: s } = t, l = f();
-  return /* @__PURE__ */ b("nav", { class: m(O.nav, s), "aria-labelledby": e ? l : void 0, children: [
-    e && /* @__PURE__ */ r("h2", { id: l, class: O.title, children: e }),
-    n
+}, ye = "_nav_778nl_1", we = "_title_778nl_6", D = {
+  nav: ye,
+  title: we
+}, ft = (t) => {
+  const { title: e, children: s, class: n } = t, r = v();
+  return /* @__PURE__ */ m("nav", { class: b(D.nav, n), "aria-labelledby": e ? r : void 0, children: [
+    e && /* @__PURE__ */ l("h2", { id: r, class: D.title, children: e }),
+    s
   ] });
-}, fe = "_input_1j10x_1 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", ke = {
-  input: fe
-}, rt = (t) => {
+}, $e = "_input_1j10x_1 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", xe = {
+  input: $e
+}, vt = (t) => {
   const {
     label: e,
-    name: n,
-    min: s,
-    max: l,
-    step: c,
+    name: s,
+    min: n,
+    max: r,
+    step: o,
     value: a,
-    placeholder: d,
+    placeholder: c,
     required: i,
-    disabled: h,
-    error: p,
+    disabled: p,
+    error: h,
     onInput: u,
     class: _
-  } = t, o = f(), v = `${o}-error`;
-  return /* @__PURE__ */ r(
-    w,
+  } = t, d = v(), f = `${d}-error`;
+  return /* @__PURE__ */ l(
+    x,
     {
       label: e,
-      for: o,
+      for: d,
       required: i,
-      error: p,
-      errorId: v,
+      error: h,
+      errorId: f,
       class: _,
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ l(
         "input",
         {
-          id: o,
-          class: ke.input,
+          id: d,
+          class: xe.input,
           type: "number",
-          name: n,
-          min: s,
-          max: l,
-          step: c,
+          name: s,
+          min: n,
+          max: r,
+          step: o,
           value: a,
-          placeholder: d,
+          placeholder: c,
           required: i,
-          disabled: h,
-          "aria-invalid": !!p || void 0,
-          "aria-describedby": g(p && v),
+          disabled: p,
+          "aria-invalid": !!h || void 0,
+          "aria-describedby": g(h && f),
           onInput: u && ((k) => u(k.target.valueAsNumber))
         }
       )
     }
   );
-}, ge = "_wrapper_1mu6v_1", ye = "_input_1mu6v_6 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", $e = "_toggle_1mu6v_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", T = {
-  wrapper: ge,
-  input: ye,
-  toggle: $e
-}, xe = {
+}, Ce = "_wrapper_16zfv_1", Ie = "_input_16zfv_5 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", Ne = "_toggle_16zfv_11 _focus-ring_4u8pk_3 _disabled_4u8pk_8", q = {
+  wrapper: Ce,
+  input: Ie,
+  toggle: Ne
+};
+const Se = (...t) => t.filter((e, s, n) => !!e && e.trim() !== "" && n.indexOf(e) === s).join(" ").trim();
+const F = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const Le = (t) => t.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (e, s, n) => n ? n.toUpperCase() : s.toLowerCase()
+);
+const R = (t) => {
+  const e = Le(t);
+  return e.charAt(0).toUpperCase() + e.slice(1);
+};
+var je = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const qe = (t) => {
+  for (const e in t)
+    if (e.startsWith("aria-") || e === "role" || e === "title")
+      return !0;
+  return !1;
+};
+const Ee = ({
+  color: t = "currentColor",
+  size: e = 24,
+  strokeWidth: s = 2,
+  absoluteStrokeWidth: n,
+  children: r,
+  iconNode: o,
+  class: a = "",
+  ...c
+}) => T(
+  "svg",
+  {
+    ...je,
+    width: String(e),
+    height: e,
+    stroke: t,
+    "stroke-width": n ? Number(s) * 24 / Number(e) : s,
+    class: ["lucide", a].join(" "),
+    ...!r && !qe(c) && { "aria-hidden": "true" },
+    ...c
+  },
+  [...o.map(([i, p]) => T(i, p)), ...Q(r)]
+);
+const W = (t, e) => {
+  const s = ({ class: n = "", className: r = "", children: o, ...a }) => T(
+    Ee,
+    {
+      ...a,
+      iconNode: e,
+      class: Se(
+        `lucide-${F(R(t))}`,
+        `lucide-${F(t)}`,
+        n,
+        r
+      )
+    },
+    o
+  );
+  return s.displayName = R(t), s;
+};
+const Te = W("eye-off", [
+  [
+    "path",
+    {
+      d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",
+      key: "ct8e1f"
+    }
+  ],
+  ["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242", key: "151rxh" }],
+  [
+    "path",
+    {
+      d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143",
+      key: "13bj9a"
+    }
+  ],
+  ["path", { d: "m2 2 20 20", key: "1ooewy" }]
+]);
+const Ae = W("eye", [
+  [
+    "path",
+    {
+      d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
+      key: "1nclc0"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+]), Pe = {
   current: "current-password",
   new: "new-password"
-}, at = (t) => {
+}, kt = (t) => {
   const {
     label: e,
-    name: n,
-    purpose: s,
-    value: l,
-    placeholder: c,
+    name: s,
+    purpose: n,
+    value: r,
+    placeholder: o,
     required: a,
-    disabled: d,
+    disabled: c,
     error: i,
-    onInput: h,
-    class: p
-  } = t, u = f(), _ = `${u}-error`, o = x(!1);
-  return /* @__PURE__ */ r(
-    w,
+    onInput: p,
+    class: h
+  } = t, u = v(), _ = `${u}-error`, d = $(!1);
+  return /* @__PURE__ */ l(
+    x,
     {
       label: e,
       for: u,
       required: a,
       error: i,
       errorId: _,
-      class: p,
-      children: /* @__PURE__ */ b("div", { class: T.wrapper, children: [
-        /* @__PURE__ */ r(
+      class: h,
+      children: /* @__PURE__ */ m("div", { class: q.wrapper, children: [
+        /* @__PURE__ */ l(
           "input",
           {
             id: u,
-            class: T.input,
-            type: o.value ? "text" : "password",
-            name: n,
-            value: l,
-            placeholder: c,
-            autoComplete: xe[s],
+            class: q.input,
+            type: d.value ? "text" : "password",
+            name: s,
+            value: r,
+            placeholder: o,
+            autoComplete: Pe[n],
             required: a,
-            disabled: d,
+            disabled: c,
             "aria-invalid": !!i || void 0,
             "aria-describedby": g(i && _),
-            onInput: h && ((v) => h(v.target.value))
+            onInput: p && ((f) => p(f.target.value))
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ l(
           "button",
           {
             type: "button",
-            class: T.toggle,
-            disabled: d,
+            class: q.toggle,
+            disabled: c,
+            "aria-label": d.value ? "Hide password" : "Show password",
             onClick: () => {
-              o.value = !o.value;
+              d.value = !d.value;
             },
-            children: o.value ? "Hide password" : "Show password"
+            children: d.value ? /* @__PURE__ */ l(Te, { size: "1em" }) : /* @__PURE__ */ l(Ae, { size: "1em" })
           }
         )
       ] })
     }
   );
-}, we = "_fieldset_lymkd_1", Ie = "_legend_lymkd_6", Ne = "_option_lymkd_11", Ce = "_input_lymkd_19 _check-input_4u8pk_32 _focus-ring_4u8pk_3", Se = "_error_lymkd_23 _field-error_4u8pk_36", $ = {
-  fieldset: we,
-  legend: Ie,
-  option: Ne,
-  input: Ce,
-  error: Se
-}, ct = (t) => {
+}, ze = "_fieldset_lymkd_1", Be = "_legend_lymkd_6", Oe = "_option_lymkd_11", He = "_input_lymkd_19 _check-input_4u8pk_32 _focus-ring_4u8pk_3", De = "_error_lymkd_23 _field-error_4u8pk_36", w = {
+  fieldset: ze,
+  legend: Be,
+  option: Oe,
+  input: He,
+  error: De
+}, gt = (t) => {
   const {
     legend: e,
-    name: n,
-    options: s,
-    value: l,
-    required: c,
+    name: s,
+    options: n,
+    value: r,
+    required: o,
     disabled: a,
-    error: d,
+    error: c,
     onChange: i,
-    class: h
-  } = t, p = f(), u = `${p}-error`;
-  return /* @__PURE__ */ b(
+    class: p
+  } = t, h = v(), u = `${h}-error`;
+  return /* @__PURE__ */ m(
     "fieldset",
     {
-      class: m($.fieldset, h),
-      "aria-invalid": !!d || void 0,
-      "aria-describedby": g(d && u),
+      class: b(w.fieldset, p),
+      "aria-invalid": !!c || void 0,
+      "aria-describedby": g(c && u),
       children: [
-        /* @__PURE__ */ r("legend", { class: $.legend, children: e }),
-        s.map((_) => {
-          const o = `${p}-${_.value}`;
-          return /* @__PURE__ */ b("div", { class: $.option, children: [
-            /* @__PURE__ */ r(
+        /* @__PURE__ */ l("legend", { class: w.legend, children: e }),
+        n.map((_) => {
+          const d = `${h}-${_.value}`;
+          return /* @__PURE__ */ m("div", { class: w.option, children: [
+            /* @__PURE__ */ l(
               "input",
               {
-                id: o,
-                class: $.input,
+                id: d,
+                class: w.input,
                 type: "radio",
-                name: n,
+                name: s,
                 value: _.value,
-                checked: l === _.value,
-                required: c,
+                checked: r === _.value,
+                required: o,
                 disabled: a,
                 onChange: i && (() => i(_.value))
               }
             ),
-            /* @__PURE__ */ r("label", { for: o, children: _.label })
+            /* @__PURE__ */ l("label", { for: d, children: _.label })
           ] }, _.value);
         }),
-        d && /* @__PURE__ */ r("p", { id: u, class: $.error, role: "alert", children: d })
+        c && /* @__PURE__ */ l("p", { id: u, class: w.error, role: "alert", children: c })
       ]
     }
   );
-}, ot = (t) => {
-  const { path: e, children: n } = t, s = P.value;
+}, yt = (t) => {
+  const { path: e, children: s } = t, n = P.value;
   if (e.endsWith("/*")) {
-    const l = e.slice(0, -1);
-    if (!s.startsWith(l) && s !== l.slice(0, -1))
+    const r = e.slice(0, -1);
+    if (!n.startsWith(r) && n !== r.slice(0, -1))
       return null;
-  } else if (s !== e)
+  } else if (n !== e)
     return null;
-  return /* @__PURE__ */ r(W, { children: n });
-}, qe = "_section_4nogy_1", Le = {
-  section: qe
-}, it = (t) => {
-  const { title: e, level: n = 2, children: s, class: l } = t, c = f(), a = `h${n}`;
-  return /* @__PURE__ */ b("section", { class: m(Le.section, l), "aria-labelledby": c, children: [
-    /* @__PURE__ */ r(a, { id: c, children: e }),
-    s
+  return /* @__PURE__ */ l(V, { children: s });
+}, Fe = "_section_4nogy_1", Re = {
+  section: Fe
+}, wt = (t) => {
+  const { title: e, level: s = 2, children: n, class: r } = t, o = v(), a = `h${s}`;
+  return /* @__PURE__ */ m("section", { class: b(Re.section, r), "aria-labelledby": o, children: [
+    /* @__PURE__ */ l(a, { id: o, children: e }),
+    n
   ] });
-}, Te = "_select_1cxnx_1 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", Ee = {
-  select: Te
-}, je = (t) => "options" in t, dt = (t) => {
+}, Me = "_select_1cxnx_1 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", Ue = {
+  select: Me
+}, Ge = (t) => "options" in t, $t = (t) => {
   const {
     label: e,
-    name: n,
-    value: s,
-    placeholder: l,
-    options: c,
+    name: s,
+    value: n,
+    placeholder: r,
+    options: o,
     required: a,
-    disabled: d,
+    disabled: c,
     error: i,
-    onChange: h,
-    class: p
-  } = t, u = f(), _ = `${u}-error`;
-  return /* @__PURE__ */ r(
-    w,
+    onChange: p,
+    class: h
+  } = t, u = v(), _ = `${u}-error`;
+  return /* @__PURE__ */ l(
+    x,
     {
       label: e,
       for: u,
       required: a,
       error: i,
       errorId: _,
-      class: p,
-      children: /* @__PURE__ */ b(
+      class: h,
+      children: /* @__PURE__ */ m(
         "select",
         {
           id: u,
-          class: Ee.select,
-          name: n,
-          value: s,
+          class: Ue.select,
+          name: s,
+          value: n,
           required: a,
-          disabled: d,
+          disabled: c,
           "aria-invalid": !!i || void 0,
           "aria-describedby": g(i && _),
-          onChange: h && ((o) => h(o.target.value)),
+          onChange: p && ((d) => p(d.target.value)),
           children: [
-            l && /* @__PURE__ */ r("option", { value: "", disabled: !0, children: l }),
-            c.map(
-              (o) => je(o) ? /* @__PURE__ */ r("optgroup", { label: o.label, children: o.options.map((v) => /* @__PURE__ */ r("option", { value: v.value, children: v.label }, v.value)) }, o.label) : /* @__PURE__ */ r("option", { value: o.value, children: o.label }, o.value)
+            r && /* @__PURE__ */ l("option", { value: "", disabled: !0, children: r }),
+            o.map(
+              (d) => Ge(d) ? /* @__PURE__ */ l("optgroup", { label: d.label, children: d.options.map((f) => /* @__PURE__ */ l("option", { value: f.value, children: f.label }, f.value)) }, d.label) : /* @__PURE__ */ l("option", { value: d.value, children: d.label }, d.value)
             )
           ]
         }
       )
     }
   );
-}, Pe = "_skip_xbsul_1 _focus-ring_4u8pk_3", He = {
-  skip: Pe
-}, ut = (t) => {
-  const { target: e = "#main", label: n = "Skip to main content", class: s } = t;
-  return /* @__PURE__ */ r("a", { href: e, class: m(He.skip, s), children: n });
-}, Be = "_table_dls60_1", De = "_caption_dls60_6", R = {
-  table: Be,
-  caption: De
-}, _t = (t) => {
-  const { caption: e, headers: n, data: s, class: l } = t;
-  return /* @__PURE__ */ b("table", { class: m(R.table, l), children: [
-    /* @__PURE__ */ r("caption", { class: R.caption, children: e }),
-    /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: n.map((c, a) => /* @__PURE__ */ r("th", { scope: "col", children: c }, `${c}-${a}`)) }) }),
-    /* @__PURE__ */ r("tbody", { children: s.map((c, a) => /* @__PURE__ */ r("tr", { children: c.map((d, i) => /* @__PURE__ */ r("td", { children: d }, `${n[i]}-${a}-${i}`)) }, a)) })
+}, We = "_skip_xbsul_1 _focus-ring_4u8pk_3", Ze = {
+  skip: We
+}, xt = (t) => {
+  const { target: e = "#main", label: s = "Skip to main content", class: n } = t;
+  return /* @__PURE__ */ l("a", { href: e, class: b(Ze.skip, n), children: s });
+}, Ke = "_table_dls60_1", Ve = "_caption_dls60_6", M = {
+  table: Ke,
+  caption: Ve
+}, Ct = (t) => {
+  const { caption: e, headers: s, data: n, class: r } = t;
+  return /* @__PURE__ */ m("table", { class: b(M.table, r), children: [
+    /* @__PURE__ */ l("caption", { class: M.caption, children: e }),
+    /* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: s.map((o, a) => /* @__PURE__ */ l("th", { scope: "col", children: o }, `${o}-${a}`)) }) }),
+    /* @__PURE__ */ l("tbody", { children: n.map((o, a) => /* @__PURE__ */ l("tr", { children: o.map((c, i) => /* @__PURE__ */ l("td", { children: c }, `${s[i]}-${a}-${i}`)) }, a)) })
   ] });
-}, Fe = "_hidden_19nib_1 _visually-hidden_4u8pk_42", Oe = {
-  hidden: Fe
-}, Re = (t) => {
+}, Je = "_hidden_19nib_1 _visually-hidden_4u8pk_42", Qe = {
+  hidden: Je
+}, Xe = (t) => {
   const { children: e } = t;
-  return /* @__PURE__ */ r("span", { class: Oe.hidden, children: e });
-}, ze = "_wrapper_1kyv1_1", Ae = "_textarea_1kyv1_6 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", Ue = "_counter_1kyv1_11", E = {
-  wrapper: ze,
-  textarea: Ae,
-  counter: Ue
-}, z = [75, 90, 100], Ge = 10;
-function We(t) {
-  for (let e = z.length - 1; e >= 0; e--) {
-    const n = z[e];
-    if (n !== void 0 && t >= n)
-      return n;
+  return /* @__PURE__ */ l("span", { class: Qe.hidden, children: e });
+}, Ye = "_wrapper_1kyv1_1", et = "_textarea_1kyv1_6 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", tt = "_counter_1kyv1_11", E = {
+  wrapper: Ye,
+  textarea: et,
+  counter: tt
+}, U = [75, 90, 100], st = 10;
+function nt(t) {
+  for (let e = U.length - 1; e >= 0; e--) {
+    const s = U[e];
+    if (s !== void 0 && t >= s)
+      return s;
   }
   return 0;
 }
-const pt = (t) => {
+const It = (t) => {
   const {
     label: e,
-    name: n,
-    maxChars: s,
-    value: l,
-    placeholder: c,
+    name: s,
+    maxChars: n,
+    value: r,
+    placeholder: o,
     required: a,
-    disabled: d,
+    disabled: c,
     error: i,
-    onInput: h,
-    class: p
-  } = t, u = f(), _ = `${u}-error`, o = `${u}-counter`, v = x(l?.length ?? 0), k = x(""), y = x(0), I = x(!1);
-  return /* @__PURE__ */ r(
-    w,
+    onInput: p,
+    class: h
+  } = t, u = v(), _ = `${u}-error`, d = `${u}-counter`, f = $(r?.length ?? 0), k = $(""), y = $(0), C = $(!1);
+  return /* @__PURE__ */ l(
+    x,
     {
       label: e,
       for: u,
       required: a,
       error: i,
       errorId: _,
-      class: p,
-      children: /* @__PURE__ */ b("div", { class: E.wrapper, children: [
-        /* @__PURE__ */ r(
+      class: h,
+      children: /* @__PURE__ */ m("div", { class: E.wrapper, children: [
+        /* @__PURE__ */ l(
           "textarea",
           {
             id: u,
             class: E.textarea,
-            name: n,
-            maxLength: s,
-            placeholder: c,
+            name: s,
+            maxLength: n,
+            placeholder: o,
             required: a,
-            disabled: d,
+            disabled: c,
             "aria-invalid": !!i || void 0,
-            "aria-describedby": g(i && _, o),
-            onInput: (U) => {
-              const N = U.target.value;
-              v.value = N.length;
-              const C = s - N.length, G = N.length / s * 100, H = We(G), B = !I.value && C <= Ge && C > 0;
-              (H > y.value || B) && (k.value = `${C} character${C === 1 ? "" : "s"} remaining`, y.value = H, B && (I.value = !0)), h?.(N);
+            "aria-describedby": g(i && _, d),
+            onInput: (Z) => {
+              const I = Z.target.value;
+              f.value = I.length;
+              const N = n - I.length, K = I.length / n * 100, z = nt(K), B = !C.value && N <= st && N > 0;
+              (z > y.value || B) && (k.value = `${N} character${N === 1 ? "" : "s"} remaining`, y.value = z, B && (C.value = !0)), p?.(I);
             },
-            children: l
+            children: r
           }
         ),
-        /* @__PURE__ */ b("span", { id: o, class: E.counter, children: [
-          v,
+        /* @__PURE__ */ m("span", { id: d, class: E.counter, children: [
+          f,
           " / ",
-          s
+          n
         ] }),
-        /* @__PURE__ */ r(Re, { children: /* @__PURE__ */ r("span", { "aria-live": "polite", children: k }) })
+        /* @__PURE__ */ l(Xe, { children: /* @__PURE__ */ l("span", { "aria-live": "polite", children: k }) })
       ] })
     }
   );
-}, Me = "_theme_1x47p_11", Ve = {
-  theme: Me
-}, ht = (t) => {
-  const { children: e, class: n } = t;
-  return /* @__PURE__ */ r("div", { class: m(Ve.theme, n), children: e });
-}, Je = j(document.title);
-M(() => {
-  document.title = Je.value;
+}, rt = "_theme_1x47p_11", lt = {
+  theme: rt
+}, Nt = (t) => {
+  const { children: e, class: s } = t;
+  return /* @__PURE__ */ l("div", { class: b(lt.theme, s), children: e });
+}, at = A(document.title);
+J(() => {
+  document.title = at.value;
 });
 export {
-  D as Button,
-  Ye as Card,
-  Ze as Checkbox,
-  et as DownloadLink,
-  tt as Form,
-  nt as Input,
-  st as Link,
-  lt as Nav,
-  rt as NumberInput,
-  at as PasswordInput,
-  ct as RadioGroup,
-  ot as Route,
-  it as Section,
-  dt as Select,
-  ut as SkipLink,
-  _t as Table,
-  pt as Textarea,
-  ht as Theme,
-  Re as VisuallyHidden,
-  m as cx,
-  A as hash,
+  O as Button,
+  ut as Card,
+  _t as Checkbox,
+  pt as DownloadLink,
+  ht as Form,
+  mt as Input,
+  bt as Link,
+  ft as Nav,
+  vt as NumberInput,
+  kt as PasswordInput,
+  gt as RadioGroup,
+  yt as Route,
+  wt as Section,
+  $t as Select,
+  xt as SkipLink,
+  Ct as Table,
+  It as Textarea,
+  Nt as Theme,
+  Xe as VisuallyHidden,
+  b as cx,
+  G as hash,
   P as location,
-  pe as navigate,
-  Je as title
+  ve as navigate,
+  at as title
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auldrant/ui",
-  "version": "0.6.0",
+  "version": "0.8.1",
   "type": "module",
   "description": "Accessible Preact component library with design tokens and CSS modules",
   "author": "Colonel Jade",
@@ -37,7 +37,9 @@
   "files": [
     "dist",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "NOTICES",
+    "CHANGELOG.md"
   ],
   "sideEffects": [
     "**/*.css"
@@ -53,7 +55,7 @@
     "test:watch": "bun test --watch",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "bun run build",
-    "dev": "vite",
+    "dev": "vite --host",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepare": "test -n \"$CI\" || lefthook install"
@@ -78,5 +80,8 @@
   "peerDependencies": {
     "@preact/signals": "^2.8.1",
     "preact": "^10.28.4"
+  },
+  "dependencies": {
+    "lucide-preact": "^0.575.0"
   }
 }