@auldrant/ui 0.0.0 → 0.5.1

package/dist/auldrant-ui.css

@@ -1 +1 @@
-._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_sfa1d_1{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em}._form_rchcx_1{display:grid;gap:1em}._actions_rchcx_6{display:grid;grid-auto-flow:column;justify-content:start;gap:.5em}._field_18ejg_1{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.5em}._label_18ejg_8{padding-top:.25em}._required_18ejg_12{color:var(--aui-color-error)}._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_19vke_1{border:none;padding:0}._legend_19vke_6{font-weight:700;margin-bottom:.5em}._option_19vke_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_roeo7_1{width:100%;border-collapse:collapse}._table_roeo7_1 th,._table_roeo7_1 td{padding:.5em;text-align:left;border-bottom:1px solid var(--aui-color-border)}._table_roeo7_1 th{font-weight:700;color:var(--aui-color-text)}._table_roeo7_1 td{color:var(--aui-color-text)}._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_13mb7_1{display:contents}._focus-ring_4m0e1_3:focus-visible{outline:2px solid var(--aui-color-focus-ring);outline-offset:2px}._disabled_4m0e1_8:disabled{opacity:.5;cursor:not-allowed}._text-input_4m0e1_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_4m0e1_22{color:var(--aui-color-primary);text-decoration:underline;cursor:pointer}._link_4m0e1_22:hover{color:var(--aui-color-primary-hover)}._check-input_4m0e1_32{accent-color:var(--aui-color-primary)}._visually-hidden_4m0e1_36{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+._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_13mb7_1{display:contents}

package/dist/auldrant-ui.js

@@ -1,424 +1,545 @@
-import { jsx as a, jsxs as _, Fragment as T } from "preact/jsx-runtime";
-import { useId as b } from "preact/hooks";
-import { signal as $, useSignal as j, effect as D } from "@preact/signals";
-function h(...t) {
+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) {
   return t.filter(Boolean).join(" ");
 }
-const E = "_button_4gn7y_1 _focus-ring_4m0e1_3 _disabled_4m0e1_8", B = {
-  button: E
-}, I = (t) => {
-  const { label: e, onClick: l, type: n = "button", disabled: s, class: c } = t;
-  return /* @__PURE__ */ a("button", { type: n, class: h(B.button, c), onClick: l, disabled: s, children: e });
-}, H = "_card_awzw5_1", O = {
-  card: H
-}, Te = (t) => {
-  const { children: e, class: l } = t;
-  return /* @__PURE__ */ a("div", { class: h(O.card, l), children: e });
-}, R = "_field_sfa1d_1", G = "_input_sfa1d_8 _check-input_4m0e1_32 _focus-ring_4m0e1_3 _disabled_4m0e1_8", C = {
-  field: R,
-  input: G
-}, De = (t) => {
-  const { label: e, name: l, checked: n, required: s, disabled: c, onChange: o, class: d } = t, u = b();
-  return /* @__PURE__ */ _("div", { class: h(C.field, d), children: [
-    /* @__PURE__ */ a(
+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(
       "input",
       {
-        id: u,
-        class: C.input,
+        id: h,
+        class: q.input,
         type: "checkbox",
-        name: l,
-        checked: n,
-        required: s,
+        name: n,
+        checked: s,
+        required: l,
         disabled: c,
-        onChange: o && ((m) => o(m.target.checked))
+        "aria-invalid": !!a || void 0,
+        "aria-describedby": g(a && p),
+        onChange: d && ((u) => d(u.target.checked))
       }
     ),
-    /* @__PURE__ */ a("label", { for: u, children: e })
+    /* @__PURE__ */ r("label", { for: h, children: e }),
+    a && /* @__PURE__ */ r("p", { id: p, class: q.error, role: "alert", children: a })
   ] });
-}, W = "_link_7wgic_1 _link_4m0e1_22 _focus-ring_4m0e1_3", z = {
-  link: W
-}, Ee = (t) => {
-  const { href: e, fileName: l, label: n, class: s } = t;
-  return /* @__PURE__ */ a("a", { href: e, download: l, class: h(z.link, s), children: n });
-}, A = "_form_rchcx_1", M = "_actions_rchcx_6", q = {
-  form: A,
-  actions: M
-}, Be = (t) => {
-  const { onSubmit: e, submitLabel: l = "Submit", resetLabel: n, children: s, class: c } = t;
-  return /* @__PURE__ */ _(
+}, 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) => {
+  const {
+    onSubmit: e,
+    submitLabel: n = "Submit",
+    resetLabel: s,
+    status: l,
+    children: c,
+    class: a
+  } = t;
+  return /* @__PURE__ */ b(
     "form",
     {
-      class: h(q.form, c),
-      onSubmit: (o) => {
-        o.preventDefault();
-        const d = new FormData(o.currentTarget);
-        e(d);
+      class: m(L.form, a),
+      onSubmit: (d) => {
+        d.preventDefault();
+        const i = new FormData(d.currentTarget);
+        e(i);
       },
       children: [
-        s,
-        /* @__PURE__ */ _("div", { class: q.actions, children: [
-          /* @__PURE__ */ a(I, { type: "submit", label: l }),
-          n && /* @__PURE__ */ a(I, { type: "reset", label: n })
-        ] })
+        c,
+        /* @__PURE__ */ b("div", { class: L.actions, children: [
+          /* @__PURE__ */ r(D, { type: "submit", label: n }),
+          s && /* @__PURE__ */ r(D, { type: "reset", label: s })
+        ] }),
+        l && /* @__PURE__ */ r("output", { class: L.status, children: l })
       ]
     }
   );
-}, U = "_field_18ejg_1", V = "_label_18ejg_8", J = "_required_18ejg_12", x = {
-  field: U,
-  label: V,
-  required: J
-}, g = (t) => {
-  const { for: e, label: l, required: n, children: s, class: c } = t;
-  return /* @__PURE__ */ _("div", { class: h(x.field, c), children: [
-    /* @__PURE__ */ _("label", { class: x.label, for: e, children: [
-      l,
+}, 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,
       ":",
-      n && /* @__PURE__ */ _("span", { class: x.required, "aria-hidden": "true", children: [
+      s && /* @__PURE__ */ b("span", { class: S.required, "aria-hidden": "true", children: [
         " ",
         "*"
       ] })
     ] }),
-    s
+    a,
+    l && /* @__PURE__ */ r("p", { id: c, class: S.error, role: "alert", children: l })
   ] });
-}, K = "_input_1j10x_1 _text-input_4m0e1_13 _focus-ring_4m0e1_3 _disabled_4m0e1_8", Q = {
-  input: K
-}, X = {
+}, ie = "_input_1j10x_1 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", de = {
+  input: ie
+}, ue = {
   email: "email",
   tel: "tel",
   url: "url"
-}, He = (t) => {
+}, nt = (t) => {
   const {
     label: e,
-    name: l,
-    type: n = "text",
-    value: s,
+    name: n,
+    type: s = "text",
+    value: l,
     placeholder: c,
-    maxLength: o,
+    maxLength: a,
     autocomplete: d,
-    readOnly: u,
-    pattern: m,
-    required: r,
-    disabled: i,
-    onInput: p,
-    class: f
-  } = t, v = b();
-  return /* @__PURE__ */ a(g, { label: e, for: v, required: r, class: f, children: /* @__PURE__ */ a(
-    "input",
+    readOnly: i,
+    pattern: h,
+    required: p,
+    disabled: u,
+    error: _,
+    onInput: o,
+    class: v
+  } = t, k = f(), y = `${k}-error`;
+  return /* @__PURE__ */ r(
+    w,
     {
-      id: v,
-      class: Q.input,
-      type: n,
-      name: l,
-      value: s,
-      placeholder: c,
-      maxLength: o,
-      autoComplete: d ?? X[n],
-      readOnly: u,
-      pattern: m,
-      required: r,
-      disabled: i,
-      onInput: p && ((P) => p(P.target.value))
+      label: e,
+      for: k,
+      required: p,
+      error: _,
+      errorId: y,
+      class: v,
+      children: /* @__PURE__ */ r(
+        "input",
+        {
+          id: k,
+          class: de.input,
+          type: s,
+          name: n,
+          value: l,
+          placeholder: c,
+          maxLength: a,
+          autoComplete: d ?? ue[s],
+          readOnly: i,
+          pattern: h,
+          required: p,
+          disabled: u,
+          "aria-invalid": !!_ || void 0,
+          "aria-describedby": g(_ && y),
+          onInput: o && ((I) => o(I.target.value))
+        }
+      )
     }
-  ) });
-}, N = $(window.location.pathname), F = $(window.location.hash.slice(1));
-function Y(t) {
+  );
+}, P = j(window.location.pathname), A = j(window.location.hash.slice(1));
+function _e(t) {
   const e = t.indexOf("#");
-  let l = "", n = t;
-  e >= 0 && (l = t.slice(e + 1), n = t.slice(0, e));
-  const s = n.indexOf("?");
-  let c = "", o = n;
-  return s >= 0 && (c = n.slice(s), o = n.slice(0, s)), { pathname: o || "/", search: c, hash: l };
+  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 };
 }
-function Z(t, e) {
-  const { pathname: l, search: n, hash: s } = Y(t), c = l + n + (s ? `#${s}` : "");
-  e?.replace ? history.replaceState(null, "", c) : history.pushState(null, "", c), N.value = l, F.value = 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;
 }
 window.addEventListener("popstate", () => {
-  N.value = window.location.pathname, F.value = window.location.hash.slice(1);
+  P.value = window.location.pathname, A.value = window.location.hash.slice(1);
 });
-const ee = "_link_7wgic_1 _link_4m0e1_22 _focus-ring_4m0e1_3", S = {
-  link: ee
+const he = "_link_7wgic_1 _link_4u8pk_22 _focus-ring_4u8pk_3", F = {
+  link: he
 };
-function te(t) {
+function be(t) {
   try {
     return new URL(t, window.location.href).origin !== window.location.origin;
   } catch {
     return !1;
   }
 }
-const Oe = (t) => {
-  const { href: e, children: l, external: n, class: s } = t;
-  return n ?? te(e) ? /* @__PURE__ */ a("a", { href: e, class: h(S.link, s), rel: "noopener noreferrer", children: l }) : /* @__PURE__ */ a(
+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(
     "a",
     {
       href: e,
-      class: h(S.link, s),
-      onClick: (o) => {
-        o.preventDefault(), Z(e);
+      class: m(F.link, l),
+      onClick: (a) => {
+        a.preventDefault(), pe(e);
       },
-      children: l
+      children: n
     }
   );
-}, se = "_nav_778nl_1", ne = "_title_778nl_6", L = {
-  nav: se,
-  title: ne
-}, Re = (t) => {
-  const { title: e, children: l, class: n } = t, s = b();
-  return /* @__PURE__ */ _("nav", { class: h(L.nav, n), "aria-labelledby": e ? s : void 0, children: [
-    e && /* @__PURE__ */ a("h2", { id: s, class: L.title, children: e }),
-    l
+}, 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
   ] });
-}, le = "_input_1j10x_1 _text-input_4m0e1_13 _focus-ring_4m0e1_3 _disabled_4m0e1_8", ae = {
-  input: le
-}, Ge = (t) => {
+}, fe = "_input_1j10x_1 _text-input_4u8pk_13 _focus-ring_4u8pk_3 _disabled_4u8pk_8", ke = {
+  input: fe
+}, rt = (t) => {
   const {
     label: e,
-    name: l,
-    min: n,
-    max: s,
+    name: n,
+    min: s,
+    max: l,
     step: c,
-    value: o,
+    value: a,
     placeholder: d,
-    required: u,
-    disabled: m,
-    onInput: r,
-    class: i
-  } = t, p = b();
-  return /* @__PURE__ */ a(g, { label: e, for: p, required: u, class: i, children: /* @__PURE__ */ a(
-    "input",
+    required: i,
+    disabled: h,
+    error: p,
+    onInput: u,
+    class: _
+  } = t, o = f(), v = `${o}-error`;
+  return /* @__PURE__ */ r(
+    w,
     {
-      id: p,
-      class: ae.input,
-      type: "number",
-      name: l,
-      min: n,
-      max: s,
-      step: c,
-      value: o,
-      placeholder: d,
-      required: u,
-      disabled: m,
-      onInput: r && ((f) => r(f.target.valueAsNumber))
+      label: e,
+      for: o,
+      required: i,
+      error: p,
+      errorId: v,
+      class: _,
+      children: /* @__PURE__ */ r(
+        "input",
+        {
+          id: o,
+          class: ke.input,
+          type: "number",
+          name: n,
+          min: s,
+          max: l,
+          step: c,
+          value: a,
+          placeholder: d,
+          required: i,
+          disabled: h,
+          "aria-invalid": !!p || void 0,
+          "aria-describedby": g(p && v),
+          onInput: u && ((k) => u(k.target.valueAsNumber))
+        }
+      )
     }
-  ) });
-}, ce = "_wrapper_1mu6v_1", oe = "_input_1mu6v_6 _text-input_4m0e1_13 _focus-ring_4m0e1_3 _disabled_4m0e1_8", ie = "_toggle_1mu6v_13 _focus-ring_4m0e1_3 _disabled_4m0e1_8", y = {
-  wrapper: ce,
-  input: oe,
-  toggle: ie
-}, re = {
+  );
+}, 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 = {
   current: "current-password",
   new: "new-password"
-}, We = (t) => {
+}, at = (t) => {
   const {
     label: e,
-    name: l,
-    purpose: n,
-    value: s,
+    name: n,
+    purpose: s,
+    value: l,
     placeholder: c,
-    required: o,
+    required: a,
     disabled: d,
-    onInput: u,
-    class: m
-  } = t, r = b(), i = j(!1);
-  return /* @__PURE__ */ a(g, { label: e, for: r, required: o, class: m, children: /* @__PURE__ */ _("div", { class: y.wrapper, children: [
-    /* @__PURE__ */ a(
-      "input",
-      {
-        id: r,
-        class: y.input,
-        type: i.value ? "text" : "password",
-        name: l,
-        value: s,
-        placeholder: c,
-        autoComplete: re[n],
-        required: o,
-        disabled: d,
-        onInput: u && ((p) => u(p.target.value))
-      }
-    ),
-    /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        class: y.toggle,
-        disabled: d,
-        onClick: () => {
-          i.value = !i.value;
-        },
-        children: i.value ? "Hide password" : "Show password"
-      }
-    )
-  ] }) });
-}, de = "_fieldset_19vke_1", ue = "_legend_19vke_6", _e = "_option_19vke_11", pe = "_input_19vke_19 _check-input_4m0e1_32 _focus-ring_4m0e1_3", w = {
-  fieldset: de,
-  legend: ue,
-  option: _e,
-  input: pe
-}, ze = (t) => {
-  const { legend: e, name: l, options: n, value: s, required: c, disabled: o, onChange: d, class: u } = t, m = b();
-  return /* @__PURE__ */ _("fieldset", { class: h(w.fieldset, u), children: [
-    /* @__PURE__ */ a("legend", { class: w.legend, children: e }),
-    n.map((r) => {
-      const i = `${m}-${r.value}`;
-      return /* @__PURE__ */ _("div", { class: w.option, children: [
-        /* @__PURE__ */ a(
+    error: i,
+    onInput: h,
+    class: p
+  } = t, u = f(), _ = `${u}-error`, o = x(!1);
+  return /* @__PURE__ */ r(
+    w,
+    {
+      label: e,
+      for: u,
+      required: a,
+      error: i,
+      errorId: _,
+      class: p,
+      children: /* @__PURE__ */ b("div", { class: T.wrapper, children: [
+        /* @__PURE__ */ r(
           "input",
           {
-            id: i,
-            class: w.input,
-            type: "radio",
-            name: l,
-            value: r.value,
-            checked: s === r.value,
-            required: c,
-            disabled: o,
-            onChange: d && (() => d(r.value))
+            id: u,
+            class: T.input,
+            type: o.value ? "text" : "password",
+            name: n,
+            value: l,
+            placeholder: c,
+            autoComplete: xe[s],
+            required: a,
+            disabled: d,
+            "aria-invalid": !!i || void 0,
+            "aria-describedby": g(i && _),
+            onInput: h && ((v) => h(v.target.value))
           }
         ),
-        /* @__PURE__ */ a("label", { for: i, children: r.label })
-      ] }, r.value);
-    })
-  ] });
-}, Ae = (t) => {
-  const { path: e, children: l } = t, n = N.value;
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            class: T.toggle,
+            disabled: d,
+            onClick: () => {
+              o.value = !o.value;
+            },
+            children: o.value ? "Hide password" : "Show password"
+          }
+        )
+      ] })
+    }
+  );
+}, 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) => {
+  const {
+    legend: e,
+    name: n,
+    options: s,
+    value: l,
+    required: c,
+    disabled: a,
+    error: d,
+    onChange: i,
+    class: h
+  } = t, p = f(), u = `${p}-error`;
+  return /* @__PURE__ */ b(
+    "fieldset",
+    {
+      class: m($.fieldset, h),
+      "aria-invalid": !!d || void 0,
+      "aria-describedby": g(d && u),
+      children: [
+        /* @__PURE__ */ r("legend", { class: $.legend, children: e }),
+        s.map((_) => {
+          const o = `${p}-${_.value}`;
+          return /* @__PURE__ */ b("div", { class: $.option, children: [
+            /* @__PURE__ */ r(
+              "input",
+              {
+                id: o,
+                class: $.input,
+                type: "radio",
+                name: n,
+                value: _.value,
+                checked: l === _.value,
+                required: c,
+                disabled: a,
+                onChange: i && (() => i(_.value))
+              }
+            ),
+            /* @__PURE__ */ r("label", { for: o, children: _.label })
+          ] }, _.value);
+        }),
+        d && /* @__PURE__ */ r("p", { id: u, class: $.error, role: "alert", children: d })
+      ]
+    }
+  );
+}, ot = (t) => {
+  const { path: e, children: n } = t, s = P.value;
   if (e.endsWith("/*")) {
-    const s = e.slice(0, -1);
-    if (!n.startsWith(s) && n !== s.slice(0, -1))
+    const l = e.slice(0, -1);
+    if (!s.startsWith(l) && s !== l.slice(0, -1))
       return null;
-  } else if (n !== e)
+  } else if (s !== e)
     return null;
-  return /* @__PURE__ */ a(T, { children: l });
-}, he = "_section_4nogy_1", me = {
-  section: he
-}, Me = (t) => {
-  const { title: e, level: l = 2, children: n, class: s } = t, c = b(), o = `h${l}`;
-  return /* @__PURE__ */ _("section", { class: h(me.section, s), "aria-labelledby": c, children: [
-    /* @__PURE__ */ a(o, { id: c, children: e }),
-    n
+  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
   ] });
-}, be = "_select_1cxnx_1 _text-input_4m0e1_13 _focus-ring_4m0e1_3 _disabled_4m0e1_8", fe = {
-  select: be
-}, ve = (t) => "options" in t, Ue = (t) => {
+}, 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) => {
   const {
     label: e,
-    name: l,
-    value: n,
-    placeholder: s,
+    name: n,
+    value: s,
+    placeholder: l,
     options: c,
-    required: o,
+    required: a,
     disabled: d,
-    onChange: u,
-    class: m
-  } = t, r = b();
-  return /* @__PURE__ */ a(g, { label: e, for: r, required: o, class: m, children: /* @__PURE__ */ _(
-    "select",
+    error: i,
+    onChange: h,
+    class: p
+  } = t, u = f(), _ = `${u}-error`;
+  return /* @__PURE__ */ r(
+    w,
     {
-      id: r,
-      class: fe.select,
-      name: l,
-      value: n,
-      required: o,
-      disabled: d,
-      onChange: u && ((i) => u(i.target.value)),
-      children: [
-        s && /* @__PURE__ */ a("option", { value: "", disabled: !0, children: s }),
-        c.map(
-          (i) => ve(i) ? /* @__PURE__ */ a("optgroup", { label: i.label, children: i.options.map((p) => /* @__PURE__ */ a("option", { value: p.value, children: p.label }, p.value)) }, i.label) : /* @__PURE__ */ a("option", { value: i.value, children: i.label }, i.value)
-        )
-      ]
+      label: e,
+      for: u,
+      required: a,
+      error: i,
+      errorId: _,
+      class: p,
+      children: /* @__PURE__ */ b(
+        "select",
+        {
+          id: u,
+          class: Ee.select,
+          name: n,
+          value: s,
+          required: a,
+          disabled: d,
+          "aria-invalid": !!i || void 0,
+          "aria-describedby": g(i && _),
+          onChange: h && ((o) => h(o.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)
+            )
+          ]
+        }
+      )
     }
-  ) });
-}, ge = "_skip_xbsul_1 _focus-ring_4m0e1_3", we = {
-  skip: ge
-}, Ve = (t) => {
-  const { target: e = "#main", label: l = "Skip to main content", class: n } = t;
-  return /* @__PURE__ */ a("a", { href: e, class: h(we.skip, n), children: l });
-}, xe = "_table_roeo7_1", ye = {
-  table: xe
-}, Je = (t) => {
-  const { headers: e, data: l, class: n } = t;
-  return /* @__PURE__ */ _("table", { class: h(ye.table, n), children: [
-    /* @__PURE__ */ a("thead", { children: /* @__PURE__ */ a("tr", { children: e.map((s, c) => /* @__PURE__ */ a("th", { scope: "col", children: s }, `${s}-${c}`)) }) }),
-    /* @__PURE__ */ a("tbody", { children: l.map((s, c) => /* @__PURE__ */ a("tr", { children: s.map((o, d) => /* @__PURE__ */ a("td", { children: o }, `${e[d]}-${c}-${d}`)) }, c)) })
+  );
+}, 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)) })
   ] });
-}, ke = "_wrapper_1kyv1_1", $e = "_textarea_1kyv1_6 _text-input_4m0e1_13 _focus-ring_4m0e1_3 _disabled_4m0e1_8", Ne = "_counter_1kyv1_11", k = {
-  wrapper: ke,
-  textarea: $e,
-  counter: Ne
-}, Ke = (t) => {
+}, Fe = "_hidden_19nib_1 _visually-hidden_4u8pk_42", Oe = {
+  hidden: Fe
+}, Re = (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 0;
+}
+const pt = (t) => {
   const {
     label: e,
-    name: l,
-    maxChars: n,
-    value: s,
+    name: n,
+    maxChars: s,
+    value: l,
     placeholder: c,
-    required: o,
+    required: a,
     disabled: d,
-    onInput: u,
-    class: m
-  } = t, r = b(), i = `${r}-counter`, p = j(s?.length ?? 0);
-  return /* @__PURE__ */ a(g, { label: e, for: r, required: o, class: m, children: /* @__PURE__ */ _("div", { class: k.wrapper, children: [
-    /* @__PURE__ */ a(
-      "textarea",
-      {
-        id: r,
-        class: k.textarea,
-        name: l,
-        maxLength: n,
-        placeholder: c,
-        required: o,
-        disabled: d,
-        "aria-describedby": i,
-        onInput: (f) => {
-          const v = f.target.value;
-          p.value = v.length, u?.(v);
-        },
-        children: s
-      }
-    ),
-    /* @__PURE__ */ _("span", { id: i, class: k.counter, children: [
-      p,
-      " / ",
-      n
-    ] })
-  ] }) });
-}, Ie = "_theme_13mb7_1", Ce = {
-  theme: Ie
-}, Qe = (t) => {
-  const { children: e, class: l } = t;
-  return /* @__PURE__ */ a("div", { class: h(Ce.theme, l), children: e });
-}, qe = "_hidden_19nib_1 _visually-hidden_4m0e1_36", Se = {
-  hidden: qe
-}, Xe = (t) => {
-  const { children: e } = t;
-  return /* @__PURE__ */ a("span", { class: Se.hidden, children: e });
-}, Le = $(document.title);
-D(() => {
-  document.title = Le.value;
+    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,
+    {
+      label: e,
+      for: u,
+      required: a,
+      error: i,
+      errorId: _,
+      class: p,
+      children: /* @__PURE__ */ b("div", { class: E.wrapper, children: [
+        /* @__PURE__ */ r(
+          "textarea",
+          {
+            id: u,
+            class: E.textarea,
+            name: n,
+            maxLength: s,
+            placeholder: c,
+            required: a,
+            disabled: d,
+            "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);
+            },
+            children: l
+          }
+        ),
+        /* @__PURE__ */ b("span", { id: o, class: E.counter, children: [
+          v,
+          " / ",
+          s
+        ] }),
+        /* @__PURE__ */ r(Re, { children: /* @__PURE__ */ r("span", { "aria-live": "polite", children: k }) })
+      ] })
+    }
+  );
+}, Me = "_theme_13mb7_1", 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;
 });
 export {
-  I as Button,
-  Te as Card,
-  De as Checkbox,
-  Ee as DownloadLink,
-  Be as Form,
-  He as Input,
-  Oe as Link,
-  Re as Nav,
-  Ge as NumberInput,
-  We as PasswordInput,
-  ze as RadioGroup,
-  Ae as Route,
-  Me as Section,
-  Ue as Select,
-  Ve as SkipLink,
-  Je as Table,
-  Ke as Textarea,
-  Qe as Theme,
-  Xe as VisuallyHidden,
-  h as cx,
-  F as hash,
-  N as location,
-  Z as navigate,
-  Le as title
+  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,
+  P as location,
+  pe as navigate,
+  Je as title
 };

package/dist/components/Form.d.ts

@@ -8,6 +8,8 @@ interface IFormProps extends IBaseProps {
     submitLabel?: string;
     /** Label for the optional reset button. Omit to hide. */
     resetLabel?: string;
+    /** Status message displayed after submission (e.g., success/failure feedback). */
+    status?: string;
     /** Form field children. */
     children: ComponentChildren;
 }

package/dist/components/FormField.d.ts

@@ -8,6 +8,10 @@ interface IFormFieldProps extends IBaseProps {
     for: string;
     /** Whether the field shows a required indicator. Accepts `undefined` for prop forwarding. */
     required?: boolean | undefined;
+    /** Error message to display below the input. Accepts `undefined` for prop forwarding. */
+    error?: string | undefined;
+    /** ID for the error message element (used for aria-describedby on the input). Accepts `undefined` for prop forwarding. */
+    errorId?: string | undefined;
     /** Field input element(s). */
     children: ComponentChildren;
 }

package/dist/components/RadioGroup.d.ts

@@ -21,6 +21,8 @@ interface IRadioGroupProps extends IBaseProps {
     required?: boolean;
     /** Whether the group is disabled. */
     disabled?: boolean;
+    /** Error message. When set, renders an error message and marks the fieldset as invalid. */
+    error?: string;
     /** Called with the selected value on change. */
     onChange?: (value: string) => void;
 }

package/dist/components/Table.d.ts

@@ -2,6 +2,8 @@ import { IBaseProps } from '../scripts/types';
 import { ComponentChildren, FunctionComponent } from 'preact';
 /** Props for {@link Table}. */
 interface ITableProps extends IBaseProps {
+    /** Accessible table name. Rendered as a `<caption>` element. */
+    caption: string;
     /** Column header labels. */
     headers: string[];
     /** Row data as a 2D array of renderable content. */

package/dist/scripts/types.d.ts

@@ -13,4 +13,6 @@ export interface IFieldProps extends IBaseProps {
     required?: boolean;
     /** Whether the field is disabled. */
     disabled?: boolean;
+    /** Error message. When set, renders an error message and marks the field as invalid. */
+    error?: string;
 }

package/dist/scripts/utils.d.ts

@@ -33,3 +33,21 @@
  * @returns Space-separated class string, or empty string if no truthy values.
  */
 export declare function cx(...classes: (string | false | undefined)[]): string;
+/**
+ * Compose `aria-describedby` from a list of element IDs, filtering falsy values.
+ *
+ * Returns `undefined` when no truthy IDs remain — this keeps the attribute off the
+ * element entirely rather than rendering an empty string.
+ *
+ * @example
+ * // Single description
+ * describeBy(error && errorId)              // "field-error" | undefined
+ *
+ * @example
+ * // Multiple descriptions
+ * describeBy(error && errorId, counterId)   // "field-error counter" | undefined
+ *
+ * @param ids - IDs to compose. `false` and `undefined` values are filtered out.
+ * @returns Space-separated ID string, or `undefined` if empty.
+ */
+export declare function describeBy(...ids: (string | false | undefined)[]): string | undefined;

package/package.json

@@ -1,12 +1,28 @@
 {
   "name": "@auldrant/ui",
-  "version": "0.0.0",
+  "version": "0.5.1",
   "type": "module",
   "description": "Accessible Preact component library with design tokens and CSS modules",
   "author": "Colonel Jade",
   "license": "MIT",
-  "keywords": ["preact", "components", "ui", "component-library", "accessibility", "a11y", "css-modules", "design-tokens", "typescript"],
-  "publishConfig": { "access": "public" },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/coloneljade/auldrant-ui"
+  },
+  "keywords": [
+    "preact",
+    "components",
+    "ui",
+    "component-library",
+    "accessibility",
+    "a11y",
+    "css-modules",
+    "design-tokens",
+    "typescript"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "module": "./dist/auldrant-ui.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -19,8 +35,7 @@
   "files": [
     "dist",
     "README.md",
-    "LICENSE",
-    "CHANGELOG.md"
+    "LICENSE"
   ],
   "sideEffects": [
     "**/*.css"

package/CHANGELOG.md

@@ -1,58 +0,0 @@
-# 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.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))
-
-## [Unreleased]