@auldrant/ui 0.8.1 → 0.9.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +8 -1
  3. package/dist/auldrant-ui.css +1 -1
  4. package/dist/auldrant-ui.js +574 -351
  5. package/dist/components/Dialog.d.ts +26 -0
  6. package/dist/components/DialogBase.d.ts +45 -0
  7. package/dist/components/Modal.d.ts +31 -0
  8. package/dist/components/Theme.d.ts +9 -0
  9. package/dist/index.d.ts +4 -1
  10. package/package.json +3 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,15 @@ 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.9.0] - 2026-03-05
9
+
10
+ ### Added
11
+
12
+ - Add Dialog (dismissible) and Modal (action-required alertdialog) components with native `<dialog>` element ([#56](https://github.com/coloneljade/auldrant-ui/pull/56))
13
+ - Export Palette constants for preset palette theme classes ([#56](https://github.com/coloneljade/auldrant-ui/pull/56))
14
+ - Add Dialog and Modal demos to dev test page with dismissible, confirmation, and destructive variants ([#56](https://github.com/coloneljade/auldrant-ui/pull/56))
15
+ - Update README with Overlay component category and `IDialogAction` type reference ([#56](https://github.com/coloneljade/auldrant-ui/pull/56))
16
+
8
17
  ## [0.8.0] - 2026-02-27
9
18
 
10
19
  ### 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}._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)}
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_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)}