@auldrant/ui 0.8.1 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/README.md +8 -1
- package/dist/auldrant-ui.css +1 -1
- package/dist/auldrant-ui.js +597 -356
- package/dist/components/Dialog.d.ts +26 -0
- package/dist/components/DialogBase.d.ts +45 -0
- package/dist/components/Modal.d.ts +31 -0
- package/dist/components/Table.d.ts +8 -0
- package/dist/components/Theme.d.ts +9 -0
- package/dist/index.d.ts +4 -1
- package/package.json +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,30 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/).
|
|
7
7
|
|
|
8
|
+
## [0.10.0] - 2026-03-05
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- Add `rowHeader` prop to render first column as `<th scope="row">` for row identification ([#57](https://github.com/coloneljade/auldrant-ui/pull/57))
|
|
13
|
+
- Add `striped` prop for alternating row backgrounds for improved scanability ([#57](https://github.com/coloneljade/auldrant-ui/pull/57))
|
|
14
|
+
- Add `dense` prop to reduce cell padding for data-dense displays ([#57](https://github.com/coloneljade/auldrant-ui/pull/57))
|
|
15
|
+
- Add `captionHidden` prop to visually hide caption while keeping it accessible ([#57](https://github.com/coloneljade/auldrant-ui/pull/57))
|
|
16
|
+
- Refactor CSS to use class-based selectors (no raw element selectors) ([#57](https://github.com/coloneljade/auldrant-ui/pull/57))
|
|
17
|
+
- Add tests for new props and axe-core a11y verification ([#57](https://github.com/coloneljade/auldrant-ui/pull/57))
|
|
18
|
+
- Expand dev test page to showcase all Table variants ([#57](https://github.com/coloneljade/auldrant-ui/pull/57))
|
|
19
|
+
- Add CSS class-selector rule to style guide ([#57](https://github.com/coloneljade/auldrant-ui/pull/57))
|
|
20
|
+
- Update `/push` skill to return to main after pushing ([#57](https://github.com/coloneljade/auldrant-ui/pull/57))
|
|
21
|
+
- Update `/pr` skill to resolve feature branch when called from main ([#57](https://github.com/coloneljade/auldrant-ui/pull/57))
|
|
22
|
+
|
|
23
|
+
## [0.9.0] - 2026-03-05
|
|
24
|
+
|
|
25
|
+
### Added
|
|
26
|
+
|
|
27
|
+
- Add Dialog (dismissible) and Modal (action-required alertdialog) components with native `<dialog>` element ([#56](https://github.com/coloneljade/auldrant-ui/pull/56))
|
|
28
|
+
- Export Palette constants for preset palette theme classes ([#56](https://github.com/coloneljade/auldrant-ui/pull/56))
|
|
29
|
+
- Add Dialog and Modal demos to dev test page with dismissible, confirmation, and destructive variants ([#56](https://github.com/coloneljade/auldrant-ui/pull/56))
|
|
30
|
+
- Update README with Overlay component category and `IDialogAction` type reference ([#56](https://github.com/coloneljade/auldrant-ui/pull/56))
|
|
31
|
+
|
|
8
32
|
## [0.8.0] - 2026-02-27
|
|
9
33
|
|
|
10
34
|
### Added
|
package/README.md
CHANGED
|
@@ -47,6 +47,13 @@ function App() {
|
|
|
47
47
|
| `Select` | Select dropdown with label | `options`, `value?`, `onChange?` |
|
|
48
48
|
| `Textarea` | Textarea with character counter | `maxChars`, `value?`, `onInput?` |
|
|
49
49
|
|
|
50
|
+
### Overlay
|
|
51
|
+
|
|
52
|
+
| Component | Description | Key Props |
|
|
53
|
+
|-----------|-------------|-----------|
|
|
54
|
+
| `Dialog` | Dismissible dialog (Escape, backdrop, X button) | `open`, `title`, `onClose`, `message?`, `defaultAction?` |
|
|
55
|
+
| `Modal` | Action-required modal (`role="alertdialog"`) | `open`, `title`, `onCancel`, `defaultAction`, `focusCancel?` |
|
|
56
|
+
|
|
50
57
|
### Layout
|
|
51
58
|
|
|
52
59
|
| Component | Description | Key Props |
|
|
@@ -67,7 +74,7 @@ function App() {
|
|
|
67
74
|
| `Route` | Renders children when location matches path | `path`, `children` |
|
|
68
75
|
| `SkipLink` | Skip navigation link, hidden until focused | `target?`, `label?` |
|
|
69
76
|
|
|
70
|
-
All components extend `IBaseProps` which includes `class?` and `id?`. Form controls extend `IFieldProps` which adds `label`, `name?`, `required?`, and `disabled?`. Full prop types are available in the `.d.ts` files.
|
|
77
|
+
All components extend `IBaseProps` which includes `class?` and `id?`. Form controls extend `IFieldProps` which adds `label`, `name?`, `required?`, and `disabled?`. Dialog and Modal actions use the exported `IDialogAction` type (`label`, `description`, `onClick`, `shortcut`). Full prop types are available in the `.d.ts` files.
|
|
71
78
|
|
|
72
79
|
## Theming
|
|
73
80
|
|
package/dist/auldrant-ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
: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}.
|
|
1
|
+
: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}._dialog_1lxj9_1{border:none;padding:0;background:transparent;color:var(--aui-color-text);max-width:min(90vw,32em);width:100%}._dialog_1lxj9_1::backdrop{background:#0000007f}._panel_1lxj9_14{display:grid;gap:1em;padding:1.5em;border:1px solid var(--aui-color-border);border-radius:.5em;background:var(--aui-color-surface)}._header_1lxj9_23{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5em}._title_1lxj9_30{margin:0;font-size:1.25em}._close_1lxj9_35{padding:.25em .5em;border:none;background:none;color:var(--aui-color-text-muted);font:inherit;font-size:1.25em;line-height:1;cursor:pointer}._close_1lxj9_35:hover{color:var(--aui-color-text)}._body_1lxj9_51{display:grid;gap:1em}._message_1lxj9_56{margin:0}._footer_1lxj9_60{display:grid;grid-auto-flow:column;justify-content:end;gap:.5em}._action_1lxj9_67{padding:.5em 1em;border:1px solid var(--aui-color-border);border-radius:.25em;background:var(--aui-color-surface);color:var(--aui-color-text);font:inherit;cursor:pointer}._action_1lxj9_67:hover{background:var(--aui-color-background-hover)}._primary_1lxj9_82{background:var(--aui-color-primary);color:var(--aui-color-background);border-color:var(--aui-color-primary)}._primary_1lxj9_82:hover{background:var(--aui-color-primary-hover);border-color:var(--aui-color-primary-hover)}._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_185y9_1{width:100%;border-collapse:collapse}._caption_185y9_6{text-align:left;padding:.5em 0;font-weight:700}._headerCell_185y9_16,._cell_185y9_17{padding:.5em;text-align:left;border-bottom:1px solid var(--aui-color-border)}._head_185y9_16{background:var(--aui-color-surface);border-bottom:2px solid var(--aui-color-border)}._head_185y9_16 ._headerCell_185y9_16{border-bottom:none}._headerCell_185y9_16{font-weight:700;color:var(--aui-color-text)}._cell_185y9_17{color:var(--aui-color-text)}._row_185y9_41:hover{background:var(--aui-color-background-hover)}._striped_185y9_45 ._row_185y9_41:nth-child(2n){background:var(--aui-color-surface)}._striped_185y9_45 ._row_185y9_41:hover{background:var(--aui-color-background-hover)}._dense_185y9_53 ._headerCell_185y9_16,._dense_185y9_53 ._cell_185y9_17{padding:.25em}._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)}
|