klods-js 1.6.0 → 1.8.0

package/dist/index.cjs

@@ -32,35 +32,46 @@ __export(index_exports, {
   cardFooter: () => cardFooter,
   cardTitle: () => cardTitle,
   center: () => center,
+  checkbox: () => checkbox,
   classNames: () => classNames,
   cluster: () => cluster,
   codeBlock: () => codeBlock,
   content: () => content,
   el: () => el,
+  field: () => field,
   fill: () => fill,
   footer: () => footer,
+  form: () => form,
   grid: () => grid,
   header: () => header,
   inlineCode: () => inlineCode,
+  input: () => input,
   lead: () => lead,
   mergeClasses: () => mergeClasses,
   muted: () => muted,
   nav: () => nav,
   navLink: () => navLink,
   navList: () => navList,
+  option: () => option,
   page: () => page,
   prose: () => prose,
   push: () => push,
+  radio: () => radio,
+  radioGroup: () => radioGroup,
   raw: () => raw,
   row: () => row,
   section: () => section,
+  select: () => select,
   sidebar: () => sidebar,
   spread: () => spread,
   stack: () => stack,
+  switchInput: () => switchInput,
   table: () => table,
   tbody: () => tbody,
   td: () => td,
   text: () => text,
+  textCenter: () => textCenter,
+  textarea: () => textarea,
   th: () => th,
   thead: () => thead,
   toc: () => toc,
@@ -99,11 +110,11 @@ function escapeHtml(str) {
 function escapeAttr(str) {
   return str.replace(/&/g, "&").replace(/"/g, """);
 }
-function classNames(input) {
-  if (!input) return "";
-  if (typeof input === "string") return input.trim();
-  if (Array.isArray(input)) return input.filter(Boolean).join(" ").trim();
-  return Object.entries(input).filter(([, v]) => Boolean(v)).map(([k]) => k).join(" ").trim();
+function classNames(input2) {
+  if (!input2) return "";
+  if (typeof input2 === "string") return input2.trim();
+  if (Array.isArray(input2)) return input2.filter(Boolean).join(" ").trim();
+  return Object.entries(input2).filter(([, v]) => Boolean(v)).map(([k]) => k).join(" ").trim();
 }
 function mergeClasses(...inputs) {
   return inputs.map((c) => classNames(c)).filter(Boolean).join(" ");
@@ -296,6 +307,7 @@ function alert(props, children) {
 var prose = builder({ tag: "div", base: "klods-prose" });
 var muted = builder({ tag: "span", base: "klods-muted" });
 var lead = builder({ tag: "p", base: "klods-lead" });
+var textCenter = builder({ tag: "div", base: "klods-text-center" });
 var table = builder({
   tag: "table",
   base: "klods-table",
@@ -309,6 +321,193 @@ var tbody = (attrs, children) => el("tbody", attrs ?? {}, children);
 var tr = (attrs, children) => el("tr", attrs ?? {}, children);
 var th = (attrs, children) => el("th", attrs ?? {}, children);
 var td = (attrs, children) => el("td", attrs ?? {}, children);
+function slugId(prefix, text2) {
+  const safe = text2 ?? "";
+  const slug = safe.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  if (slug) return `${prefix}-${slug}`;
+  let h = 5381;
+  for (let i = 0; i < safe.length; i++) h = (h << 5) + h + safe.charCodeAt(i) | 0;
+  return `${prefix}-${(h >>> 0).toString(36)}`;
+}
+var form = builder({ tag: "form", base: "klods-form" });
+var FORM_CONTROLS = /* @__PURE__ */ new Set(["input", "select", "textarea"]);
+function patchAriaAttrs(node, attrs) {
+  if (FORM_CONTROLS.has(node.tag)) {
+    return new KlodsNode(node.tag, { ...node.attrs, ...attrs }, node.children);
+  }
+  const patchedChildren = node.children.map(
+    (child) => child instanceof KlodsNode && FORM_CONTROLS.has(child.tag) ? new KlodsNode(child.tag, { ...child.attrs, ...attrs }, child.children) : child
+  );
+  return new KlodsNode(node.tag, node.attrs, patchedChildren);
+}
+function field(props, renderInput) {
+  const { label: labelText, id: explicitId, help, error, required, invalid, class: extraClass, ...rest } = props;
+  const id = explicitId ?? slugId("klods-field", labelText);
+  const helpId = help ? `${id}-help` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const isInvalid = invalid ?? !!error;
+  const describedBy = isInvalid ? errorId : helpId;
+  const inputNode = renderInput(id);
+  const patchedInput = patchAriaAttrs(inputNode, {
+    ...describedBy ? { "aria-describedby": describedBy } : {},
+    ...isInvalid ? { "aria-invalid": "true" } : {}
+  });
+  const fieldClass = classNames([
+    "klods-field",
+    isInvalid ? "klods-field--invalid" : "",
+    classNames(extraClass)
+  ]);
+  const children = [
+    el("label", { for: id, class: `klods-label${required ? " klods-label--required" : ""}` }, labelText),
+    patchedInput
+  ];
+  if (help) children.push(el("p", { id: helpId, class: "klods-help" }, help));
+  if (error) children.push(el("p", { id: errorId, class: "klods-error", role: "alert" }, error));
+  return el("div", { ...rest, class: fieldClass || void 0 }, children);
+}
+function input(props) {
+  const { type, class: extraClass, oninput: userOninput, ...rest } = props;
+  const cls = (extra) => classNames(["klods-input", extra, classNames(extraClass)]) || void 0;
+  const id = rest.id ?? slugId(
+    "klods-input",
+    rest["aria-label"] ?? rest.placeholder ?? type ?? "field"
+  );
+  if (type === "range") {
+    const initial = rest.value ?? "50";
+    return el("span", { class: cls("klods-input--range") }, [
+      el("input", {
+        type: "range",
+        ...rest,
+        id,
+        oninput: (e) => {
+          const inp = e.target;
+          inp.closest(".klods-input--range")?.querySelector("output")?.textContent !== void 0 && (inp.closest(".klods-input--range").querySelector("output").textContent = inp.value);
+          userOninput?.(e);
+        }
+      }),
+      el("output", { for: id }, initial)
+    ]);
+  }
+  if (type === "color") {
+    const initial = rest.value ?? "#000000";
+    return el("span", { class: cls("klods-input--color") }, [
+      el("input", {
+        type: "color",
+        ...rest,
+        id,
+        oninput: (e) => {
+          const inp = e.target;
+          inp.closest(".klods-input--color")?.querySelector("output")?.textContent !== void 0 && (inp.closest(".klods-input--color").querySelector("output").textContent = inp.value);
+          userOninput?.(e);
+        }
+      }),
+      el("output", { for: id }, initial)
+    ]);
+  }
+  return new KlodsNode("input", {
+    type,
+    ...rest,
+    id,
+    class: cls("")
+  });
+}
+var selectEl = builder({ tag: "select", base: "klods-select" });
+function select(attrs, children) {
+  return el("div", { class: "klods-select-wrapper" }, selectEl(attrs, children));
+}
+var option = (attrs, children) => el("option", attrs ?? {}, children);
+var textarea = builder({ tag: "textarea", base: "klods-textarea" });
+function checkbox(props) {
+  const {
+    label: labelText,
+    name,
+    value,
+    checked,
+    disabled,
+    required,
+    form: form2,
+    autofocus,
+    class: extraClass,
+    ...rest
+  } = props;
+  const inputAttrs = { type: "checkbox" };
+  if (name !== void 0) inputAttrs.name = name;
+  if (value !== void 0) inputAttrs.value = value;
+  if (checked) inputAttrs.checked = true;
+  if (disabled) inputAttrs.disabled = true;
+  if (required) inputAttrs.required = true;
+  if (form2 !== void 0) inputAttrs.form = form2;
+  if (autofocus) inputAttrs.autofocus = true;
+  return el(
+    "label",
+    { ...rest, class: classNames(["klods-checkbox", classNames(extraClass)]) || void 0 },
+    [el("input", inputAttrs), el("span", {}, labelText)]
+  );
+}
+function radio(props) {
+  const {
+    label: labelText,
+    name,
+    value,
+    checked,
+    disabled,
+    required,
+    form: form2,
+    autofocus,
+    class: extraClass,
+    ...rest
+  } = props;
+  const inputAttrs = { type: "radio" };
+  if (name !== void 0) inputAttrs.name = name;
+  if (value !== void 0) inputAttrs.value = value;
+  if (checked) inputAttrs.checked = true;
+  if (disabled) inputAttrs.disabled = true;
+  if (required) inputAttrs.required = true;
+  if (form2 !== void 0) inputAttrs.form = form2;
+  if (autofocus) inputAttrs.autofocus = true;
+  return el(
+    "label",
+    { ...rest, class: classNames(["klods-radio", classNames(extraClass)]) || void 0 },
+    [el("input", inputAttrs), el("span", {}, labelText)]
+  );
+}
+function radioGroup(props, children) {
+  const { legend: legendText, class: extraClass, ...rest } = props;
+  const legendId = legendText ? slugId("klods-rg", legendText) : void 0;
+  const cls = classNames(["klods-field", classNames(extraClass)]) || void 0;
+  return el("div", { ...rest, class: cls, role: "group", ...legendId ? { "aria-labelledby": legendId } : {} }, [
+    legendText ? el("p", { id: legendId, class: "klods-label" }, legendText) : null,
+    ...children
+  ]);
+}
+function switchInput(props) {
+  const { label: labelText, name, value, checked, disabled, reverse, class: extraClass, ...rest } = props;
+  const inputAttrs = {
+    type: "checkbox",
+    class: "klods-switch__input",
+    role: "switch"
+  };
+  if (name !== void 0) inputAttrs.name = name;
+  if (value !== void 0) inputAttrs.value = value;
+  if (checked) inputAttrs.checked = true;
+  if (disabled) inputAttrs.disabled = true;
+  return el(
+    "label",
+    {
+      ...rest,
+      class: classNames([
+        "klods-switch",
+        reverse ? "klods-switch--reverse" : "",
+        classNames(extraClass)
+      ]) || void 0
+    },
+    [
+      el("input", inputAttrs),
+      el("span", { class: "klods-switch__track" }),
+      el("span", { class: "klods-switch__label" }, labelText)
+    ]
+  );
+}
 function codeBlock(attrs, content2) {
   return el("pre", attrs ?? {}, el("code", {}, content2));
 }
@@ -384,35 +583,46 @@ var fill = builder({ tag: "div", base: "klods-fill" });
   cardFooter,
   cardTitle,
   center,
+  checkbox,
   classNames,
   cluster,
   codeBlock,
   content,
   el,
+  field,
   fill,
   footer,
+  form,
   grid,
   header,
   inlineCode,
+  input,
   lead,
   mergeClasses,
   muted,
   nav,
   navLink,
   navList,
+  option,
   page,
   prose,
   push,
+  radio,
+  radioGroup,
   raw,
   row,
   section,
+  select,
   sidebar,
   spread,
   stack,
+  switchInput,
   table,
   tbody,
   td,
   text,
+  textCenter,
+  textarea,
   th,
   thead,
   toc,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/core.ts","../src/components.ts","../src/layout.ts","../src/utilities.ts"],"sourcesContent":["// Public API surface for the `klods` package.\n\nexport * from \"./components.js\";\nexport * from \"./core.js\";\nexport * from \"./layout.js\";\nexport * from \"./utilities.js\";\n","// Core — a tiny VDOM-ish node with two faces:\n//   - .render(target?) → HTMLElement (uses real DOM)\n//   - .toString()      → HTML string  (works in Node / Rails / SSR)\n//\n// Both are produced from the same KlodsNode tree, so the docs site can show the\n// TS source, the rendered HTML and the live preview from one source of truth.\n\nexport type KlodsChild = string | number | bigint | boolean | null | undefined | KlodsNode | Node | KlodsChild[];\n\nexport type KlodsAttrs = {\n  class?: string | string[] | Record<string, boolean | undefined> | undefined;\n  id?: string | undefined;\n  style?: string | Partial<CSSStyleDeclaration> | undefined;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n  [key: `aria-${string}`]: string | number | boolean | undefined;\n  // Allow any other HTML attribute or DOM event handler (onClick, onInput, …).\n  [key: string]: unknown;\n};\n\nconst VOID_TAGS = new Set([\n  \"area\",\n  \"base\",\n  \"br\",\n  \"col\",\n  \"embed\",\n  \"hr\",\n  \"img\",\n  \"input\",\n  \"link\",\n  \"meta\",\n  \"source\",\n  \"track\",\n  \"wbr\",\n]);\n\nconst RAW = Symbol(\"klods.raw\");\n\ntype RawHtml = { [RAW]: true; html: string };\n\n/** Mark a string as already-escaped HTML; pass it as a child to inject as-is. */\nexport function raw(html: string): RawHtml {\n  return { [RAW]: true, html };\n}\n\nfunction isRaw(value: unknown): value is RawHtml {\n  return typeof value === \"object\" && value !== null && (value as { [RAW]?: unknown })[RAW] === true;\n}\n\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\");\n}\n\nfunction escapeAttr(str: string): string {\n  return str.replace(/&/g, \"&amp;\").replace(/\"/g, \"&quot;\");\n}\n\n/** Normalise a `class` value (string | array | record) into a clean string. */\nexport function classNames(input: KlodsAttrs[\"class\"]): string {\n  if (!input) return \"\";\n  if (typeof input === \"string\") return input.trim();\n  if (Array.isArray(input)) return input.filter(Boolean).join(\" \").trim();\n  return Object.entries(input)\n    .filter(([, v]) => Boolean(v))\n    .map(([k]) => k)\n    .join(\" \")\n    .trim();\n}\n\n/** Merge two class values (used internally to combine builder defaults + user-supplied). */\nexport function mergeClasses(...inputs: Array<KlodsAttrs[\"class\"]>): string {\n  return inputs\n    .map((c) => classNames(c))\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction styleToString(style: string | Partial<CSSStyleDeclaration>): string {\n  if (typeof style === \"string\") return style;\n  return Object.entries(style)\n    .filter(([, v]) => v !== undefined && v !== null && v !== \"\")\n    .map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${String(v)}`)\n    .join(\";\");\n}\n\nfunction flattenChildren(children: KlodsChild | KlodsChild[]): Array<Exclude<KlodsChild, KlodsChild[]>> {\n  const out: Array<Exclude<KlodsChild, KlodsChild[]>> = [];\n  const stack: KlodsChild[] = Array.isArray(children) ? [...children] : [children];\n  while (stack.length) {\n    const next = stack.shift();\n    if (Array.isArray(next)) stack.unshift(...next);\n    else if (next !== null && next !== undefined && next !== false && next !== true) out.push(next);\n  }\n  return out;\n}\n\nexport class KlodsNode {\n  readonly tag: string;\n  readonly attrs: KlodsAttrs;\n  readonly children: KlodsChild[];\n\n  constructor(tag: string, attrs: KlodsAttrs = {}, children: KlodsChild | KlodsChild[] = []) {\n    this.tag = tag;\n    this.attrs = attrs;\n    this.children = Array.isArray(children) ? children : [children];\n  }\n\n  /** Render to a real DOM element. If `target` is given, append to it. */\n  render(target?: Element | null): HTMLElement {\n    const el = document.createElement(this.tag);\n    for (const [name, value] of Object.entries(this.attrs)) {\n      if (value === undefined || value === null || value === false) continue;\n      if (name === \"children\") continue;\n      if (name === \"class\") {\n        const cls = classNames(value as KlodsAttrs[\"class\"]);\n        if (cls) el.setAttribute(\"class\", cls);\n        continue;\n      }\n      if (name === \"style\") {\n        el.setAttribute(\"style\", styleToString(value as string | Partial<CSSStyleDeclaration>));\n        continue;\n      }\n      if (name.startsWith(\"on\") && typeof value === \"function\") {\n        el.addEventListener(name.slice(2).toLowerCase(), value as EventListener);\n        continue;\n      }\n      if (value === true) {\n        el.setAttribute(name, \"\");\n        continue;\n      }\n      el.setAttribute(name, String(value));\n    }\n    for (const child of flattenChildren(this.children)) {\n      if (child instanceof KlodsNode) el.appendChild(child.render());\n      else if (typeof child === \"object\" && child !== null && \"nodeType\" in child) {\n        el.appendChild(child as Node);\n      } else if (isRaw(child)) {\n        const tpl = document.createElement(\"template\");\n        tpl.innerHTML = child.html;\n        el.appendChild(tpl.content);\n      } else {\n        el.appendChild(document.createTextNode(String(child)));\n      }\n    }\n    if (target) target.appendChild(el);\n    return el;\n  }\n\n  /** Render to a string of HTML. */\n  toString(): string {\n    const parts: string[] = [`<${this.tag}`];\n    for (const [name, value] of Object.entries(this.attrs)) {\n      if (value === undefined || value === null || value === false) continue;\n      if (name === \"children\") continue;\n      if (name.startsWith(\"on\") && typeof value === \"function\") continue;\n      if (name === \"class\") {\n        const cls = classNames(value as KlodsAttrs[\"class\"]);\n        if (cls) parts.push(` class=\"${escapeAttr(cls)}\"`);\n        continue;\n      }\n      if (name === \"style\") {\n        parts.push(` style=\"${escapeAttr(styleToString(value as string | Partial<CSSStyleDeclaration>))}\"`);\n        continue;\n      }\n      if (value === true) {\n        parts.push(` ${name}`);\n        continue;\n      }\n      parts.push(` ${name}=\"${escapeAttr(String(value))}\"`);\n    }\n    if (VOID_TAGS.has(this.tag)) {\n      parts.push(\" />\");\n      return parts.join(\"\");\n    }\n    parts.push(\">\");\n    for (const child of flattenChildren(this.children)) {\n      if (child instanceof KlodsNode) parts.push(child.toString());\n      else if (isRaw(child)) parts.push(child.html);\n      else if (typeof child === \"object\" && child !== null && \"outerHTML\" in child) {\n        parts.push((child as Element).outerHTML);\n      } else {\n        parts.push(escapeHtml(String(child)));\n      }\n    }\n    parts.push(`</${this.tag}>`);\n    return parts.join(\"\");\n  }\n}\n\n/**\n * Generic element builder. Most consumers use the named builders (page, header, …)\n * rather than calling `el` directly, but it's exported as an escape hatch.\n */\nexport function el(tag: string, attrs: KlodsAttrs = {}, children: KlodsChild | KlodsChild[] = []): KlodsNode {\n  return new KlodsNode(tag, attrs, children);\n}\n\n/**\n * Factory that produces a typed builder for a tag with a base class. Modifier\n * props are converted into `--modifier` BEM classes and stripped from the output\n * attributes; everything else passes through untouched, so consumers can attach\n * arbitrary `id`, `data-*`, `aria-*`, event handlers, `style`, etc.\n */\nexport function builder<P extends Record<string, unknown> = Record<never, never>>(options: {\n  tag: string;\n  base: string;\n  /** Map of prop name → class (or function returning a class) when the prop is truthy. */\n  modifiers?: { [K in keyof P]?: string | ((value: P[K]) => string | undefined) };\n}): (props?: (P & KlodsAttrs) | null, children?: KlodsChild | KlodsChild[]) => KlodsNode {\n  const { tag, base, modifiers = {} } = options;\n  const modifierMap = modifiers as Record<string, string | ((value: unknown) => string | undefined) | undefined>;\n  return (props, children) => {\n    const userProps = (props ?? {}) as P & KlodsAttrs;\n    const modClasses: string[] = [];\n    const passthrough: KlodsAttrs = {};\n    for (const [key, value] of Object.entries(userProps)) {\n      const m = modifierMap[key];\n      if (m !== undefined) {\n        if (typeof m === \"function\") {\n          const c = m(value);\n          if (c) modClasses.push(c);\n        } else if (value) {\n          modClasses.push(m);\n        }\n      } else {\n        passthrough[key] = value;\n      }\n    }\n    const finalClass = mergeClasses(base, ...modClasses, userProps.class);\n    const resolvedChildren =\n      children !== undefined ? children : ((userProps.children as KlodsChild | KlodsChild[] | undefined) ?? []);\n    delete passthrough.children;\n    return new KlodsNode(tag, { ...passthrough, class: finalClass || undefined }, resolvedChildren);\n  };\n}\n","// First wave of components: nav, card, button, badge, alert, prose helpers.\n// All match the BEM classes shipped by klods-css.\n\nimport type { KlodsAttrs, KlodsChild } from \"./core.js\";\nimport { builder, el, KlodsNode } from \"./core.js\";\n\n// ── Nav ──────────────────────────────────────────────────────────────────\nexport const nav = builder({ tag: \"nav\", base: \"klods-nav\" });\nexport const navList = builder({ tag: \"ul\", base: \"klods-nav__list\" });\nexport const buttonGroup = builder({ tag: \"div\", base: \"klods-button-group\" });\nexport type TocProps = { sub?: boolean };\nexport const toc = builder<TocProps>({ tag: \"ul\", base: \"klods-toc\", modifiers: { sub: \"klods-toc--sub\" } });\nexport const tocItem = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"li\", attrs ?? {}, children);\nexport const tocLink = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"a\", attrs ?? {}, children);\n\nexport type NavLinkProps = {\n  href?: string;\n  active?: boolean;\n};\nconst navLinkBuilder = builder<NavLinkProps>({\n  tag: \"a\",\n  base: \"klods-nav__link\",\n  modifiers: { active: \"klods-nav__link--active\" },\n});\nexport function navLink(props?: (NavLinkProps & KlodsAttrs) | null, children?: KlodsChild | KlodsChild[]): KlodsNode {\n  // Wrap each link in <li> so it's idiomatic inside <ul class=\"klods-nav__list\">.\n  return el(\"li\", {}, [navLinkBuilder(props ?? null, children)]);\n}\n\n// ── Card ─────────────────────────────────────────────────────────────────\nexport type CardProps = {\n  elevated?: boolean;\n};\nexport const card = builder<CardProps>({\n  tag: \"div\",\n  base: \"klods-card\",\n  modifiers: { elevated: \"klods-card--elevated\" },\n});\nexport const cardTitle = builder({ tag: \"h3\", base: \"klods-card__title\" });\nexport const cardBody = builder({ tag: \"div\", base: \"klods-card__body\" });\nexport const cardFooter = builder({ tag: \"div\", base: \"klods-card__footer\" });\n\n// ── Button ───────────────────────────────────────────────────────────────\nexport type ButtonProps = {\n  variant?: \"default\" | \"primary\" | \"danger\" | \"ghost\";\n  type?: \"button\" | \"submit\" | \"reset\";\n};\nconst buttonBase = builder<ButtonProps>({\n  tag: \"button\",\n  base: \"klods-button\",\n  modifiers: {\n    variant: (v) => (v && v !== \"default\" ? `klods-button--${v}` : undefined),\n  },\n});\nexport function button(props?: (ButtonProps & KlodsAttrs) | null, children?: KlodsChild | KlodsChild[]): KlodsNode {\n  // Default `type=\"button\"` so it never accidentally submits a form.\n  const merged = { type: \"button\", ...(props ?? {}) } as ButtonProps & KlodsAttrs;\n  return buttonBase(merged, children);\n}\n\n// ── Badge ────────────────────────────────────────────────────────────────\nexport type BadgeProps = {\n  variant?: \"default\" | \"accent\" | \"success\" | \"danger\";\n};\nexport const badge = builder<BadgeProps>({\n  tag: \"span\",\n  base: \"klods-badge\",\n  modifiers: {\n    variant: (v) => (v && v !== \"default\" ? `klods-badge--${v}` : undefined),\n  },\n});\n\n// ── Alert ────────────────────────────────────────────────────────────────\nexport type AlertProps = {\n  variant?: \"default\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n};\nconst alertBase = builder<AlertProps>({\n  tag: \"div\",\n  base: \"klods-alert\",\n  modifiers: {\n    variant: (v) => (v && v !== \"default\" ? `klods-alert--${v}` : undefined),\n  },\n});\nexport function alert(props?: (AlertProps & KlodsAttrs) | null, children?: KlodsChild | KlodsChild[]): KlodsNode {\n  // role=alert by default for assistive tech, overridable.\n  const merged = { role: \"alert\", ...(props ?? {}) } as AlertProps & KlodsAttrs;\n  return alertBase(merged, children);\n}\n\n// ── Prose helpers ────────────────────────────────────────────────────────\nexport const prose = builder({ tag: \"div\", base: \"klods-prose\" });\nexport const muted = builder({ tag: \"span\", base: \"klods-muted\" });\nexport const lead = builder({ tag: \"p\", base: \"klods-lead\" });\n\n// ── Table ────────────────────────────────────────────────────────────────\nexport type TableProps = {\n  striped?: boolean;\n  dense?: boolean;\n};\nexport const table = builder<TableProps>({\n  tag: \"table\",\n  base: \"klods-table\",\n  modifiers: {\n    striped: \"klods-table--striped\",\n    dense: \"klods-table--dense\",\n  },\n});\nexport const thead = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"thead\", attrs ?? {}, children);\nexport const tbody = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"tbody\", attrs ?? {}, children);\nexport const tr = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"tr\", attrs ?? {}, children);\nexport const th = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"th\", attrs ?? {}, children);\nexport const td = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"td\", attrs ?? {}, children);\n\n// ── Code ─────────────────────────────────────────────────────────────────\nexport function codeBlock(attrs?: KlodsAttrs | null, content?: KlodsChild | KlodsChild[]): KlodsNode {\n  return el(\"pre\", attrs ?? {}, el(\"code\", {}, content));\n}\nexport function inlineCode(attrs?: KlodsAttrs | null, content?: KlodsChild | KlodsChild[]): KlodsNode {\n  return el(\"code\", attrs ?? {}, content);\n}\n\n// ── Box ──────────────────────────────────────────────────────────────────\nexport const box = builder({ tag: \"div\", base: \"klods-box\" });\n","// Layout builders — the four corners and the \"I-always-forget\" utilities.\n// Each builder is a thin wrapper around `builder()` from core.ts.\n\nimport type { KlodsAttrs, KlodsChild } from \"./core.js\";\nimport { builder, KlodsNode } from \"./core.js\";\n\n// ── Page ─────────────────────────────────────────────────────────────────\nexport type PageProps = {\n  /** Render with a sidebar column. */\n  sidebar?: boolean;\n  /** Which side the sidebar appears on. Defaults to `\"leading\"` (inline-start). */\n  sidebarPosition?: \"leading\" | \"trailing\";\n  /** Keep the header pinned to the top of the viewport while the page scrolls. */\n  stickyHeader?: boolean;\n};\n\nexport const page = builder<PageProps>({\n  tag: \"div\",\n  base: \"klods-page\",\n  modifiers: {\n    sidebar: \"klods-page--with-sidebar\",\n    sidebarPosition: (v) => (v === \"trailing\" ? \"klods-page--sidebar-trailing\" : undefined),\n    stickyHeader: \"klods-page--sticky-header\",\n  },\n});\n\n// ── Page slots ───────────────────────────────────────────────────────────\nexport const header = builder({ tag: \"header\", base: \"klods-header\" });\nexport const sidebar = builder({ tag: \"aside\", base: \"klods-sidebar\" });\n\nexport type ContentProps = {\n  /** Cap content width to --klods-content-max and centre it. */\n  narrow?: boolean;\n};\nexport const content = builder<ContentProps>({\n  tag: \"main\",\n  base: \"klods-content\",\n  modifiers: { narrow: \"klods-content--narrow\" },\n});\n\nexport const footer = builder({ tag: \"footer\", base: \"klods-footer\" });\nexport const section = builder({ tag: \"section\", base: \"klods-section\" });\n\n// ── Layout utilities ─────────────────────────────────────────────────────\ntype GapProp = { gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 };\n\nconst gapModifier = (prefix: string) => (v: number | undefined) =>\n  v === undefined ? undefined : `${prefix}--gap-${v}`;\n\nexport const stack = builder<GapProp>({\n  tag: \"div\",\n  base: \"klods-stack\",\n  modifiers: { gap: gapModifier(\"klods-stack\") },\n});\n\nexport const cluster = builder<GapProp>({\n  tag: \"div\",\n  base: \"klods-cluster\",\n  modifiers: { gap: gapModifier(\"klods-cluster\") },\n});\n\ntype RowProps = GapProp & { inline?: boolean };\nexport const row = builder<RowProps>({\n  tag: \"div\",\n  base: \"klods-row\",\n  modifiers: { gap: gapModifier(\"klods-row\"), inline: \"klods-row--inline\" },\n});\n\nexport type GridProps = GapProp & {\n  cols?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Auto-fit responsive columns; pair with `--klods-grid-min` if you want a custom minimum. */\n  fit?: boolean;\n};\nexport const grid = builder<GridProps>({\n  tag: \"div\",\n  base: \"klods-grid\",\n  modifiers: {\n    gap: gapModifier(\"klods-grid\"),\n    cols: (v) => (v === undefined ? undefined : `klods-grid--cols-${v}`),\n    fit: \"klods-grid--fit\",\n  },\n});\n\nexport const center = builder({ tag: \"div\", base: \"klods-center\" });\nexport const spread = builder({ tag: \"div\", base: \"klods-spread\" });\n\n// ── Convenience: empty fragment-ish wrapper for quick text + nodes ──────\nexport function text(value: string | number): KlodsNode {\n  // Wrap loose text in a span so it composes anywhere a KlodsNode is expected.\n  return new KlodsNode(\"span\", {}, [String(value)]);\n}\n\n// Re-export attribute / child types so consumers can extend a builder neatly.\nexport type { KlodsAttrs, KlodsChild };\n","// Utility builders — thin wrappers over the most-reached-for klods-css utility classes.\n\nimport { builder } from \"./core.js\";\n\n// ── Push ─────────────────────────────────────────────────────────────────\n// Renders a <span class=\"klods-push\">.\n// Pushes siblings to the end of a flex/grid row by consuming all remaining\n// inline space (margin-inline-start: auto).\nexport const push = builder({ tag: \"span\", base: \"klods-push\" });\n\n// ── Fill ─────────────────────────────────────────────────────────────────\n// Renders a <div class=\"klods-fill\">.\n// Grows to fill available flex/grid space (flex: 1 1 auto).\n// Useful as a wrapper when you need one slot to absorb leftover room —\n// e.g. equal-width side groups in a header to centre a middle item.\nexport const fill = builder({ tag: \"div\", base: \"klods-fill\" });\n"],"mappings":"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","names":["stack","el","content"]}
+{"version":3,"sources":["../src/index.ts","../src/core.ts","../src/components.ts","../src/layout.ts","../src/utilities.ts"],"sourcesContent":["// Public API surface for the `klods` package.\n\nexport * from \"./components.js\";\nexport * from \"./core.js\";\nexport * from \"./layout.js\";\nexport * from \"./utilities.js\";\n","// Core — a tiny VDOM-ish node with two faces:\n//   - .render(target?) → HTMLElement (uses real DOM)\n//   - .toString()      → HTML string  (works in Node / Rails / SSR)\n//\n// Both are produced from the same KlodsNode tree, so the docs site can show the\n// TS source, the rendered HTML and the live preview from one source of truth.\n\nexport type KlodsChild = string | number | bigint | boolean | null | undefined | KlodsNode | Node | KlodsChild[];\n\nexport type KlodsAttrs = {\n  class?: string | string[] | Record<string, boolean | undefined> | undefined;\n  id?: string | undefined;\n  style?: string | Partial<CSSStyleDeclaration> | undefined;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n  [key: `aria-${string}`]: string | number | boolean | undefined;\n  // Allow any other HTML attribute or DOM event handler (onClick, onInput, …).\n  [key: string]: unknown;\n};\n\nconst VOID_TAGS = new Set([\n  \"area\",\n  \"base\",\n  \"br\",\n  \"col\",\n  \"embed\",\n  \"hr\",\n  \"img\",\n  \"input\",\n  \"link\",\n  \"meta\",\n  \"source\",\n  \"track\",\n  \"wbr\",\n]);\n\nconst RAW = Symbol(\"klods.raw\");\n\ntype RawHtml = { [RAW]: true; html: string };\n\n/** Mark a string as already-escaped HTML; pass it as a child to inject as-is. */\nexport function raw(html: string): RawHtml {\n  return { [RAW]: true, html };\n}\n\nfunction isRaw(value: unknown): value is RawHtml {\n  return typeof value === \"object\" && value !== null && (value as { [RAW]?: unknown })[RAW] === true;\n}\n\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\");\n}\n\nfunction escapeAttr(str: string): string {\n  return str.replace(/&/g, \"&amp;\").replace(/\"/g, \"&quot;\");\n}\n\n/** Normalise a `class` value (string | array | record) into a clean string. */\nexport function classNames(input: KlodsAttrs[\"class\"]): string {\n  if (!input) return \"\";\n  if (typeof input === \"string\") return input.trim();\n  if (Array.isArray(input)) return input.filter(Boolean).join(\" \").trim();\n  return Object.entries(input)\n    .filter(([, v]) => Boolean(v))\n    .map(([k]) => k)\n    .join(\" \")\n    .trim();\n}\n\n/** Merge two class values (used internally to combine builder defaults + user-supplied). */\nexport function mergeClasses(...inputs: Array<KlodsAttrs[\"class\"]>): string {\n  return inputs\n    .map((c) => classNames(c))\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction styleToString(style: string | Partial<CSSStyleDeclaration>): string {\n  if (typeof style === \"string\") return style;\n  return Object.entries(style)\n    .filter(([, v]) => v !== undefined && v !== null && v !== \"\")\n    .map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${String(v)}`)\n    .join(\";\");\n}\n\nfunction flattenChildren(children: KlodsChild | KlodsChild[]): Array<Exclude<KlodsChild, KlodsChild[]>> {\n  const out: Array<Exclude<KlodsChild, KlodsChild[]>> = [];\n  const stack: KlodsChild[] = Array.isArray(children) ? [...children] : [children];\n  while (stack.length) {\n    const next = stack.shift();\n    if (Array.isArray(next)) stack.unshift(...next);\n    else if (next !== null && next !== undefined && next !== false && next !== true) out.push(next);\n  }\n  return out;\n}\n\nexport class KlodsNode {\n  readonly tag: string;\n  readonly attrs: KlodsAttrs;\n  readonly children: KlodsChild[];\n\n  constructor(tag: string, attrs: KlodsAttrs = {}, children: KlodsChild | KlodsChild[] = []) {\n    this.tag = tag;\n    this.attrs = attrs;\n    this.children = Array.isArray(children) ? children : [children];\n  }\n\n  /** Render to a real DOM element. If `target` is given, append to it. */\n  render(target?: Element | null): HTMLElement {\n    const el = document.createElement(this.tag);\n    for (const [name, value] of Object.entries(this.attrs)) {\n      if (value === undefined || value === null || value === false) continue;\n      if (name === \"children\") continue;\n      if (name === \"class\") {\n        const cls = classNames(value as KlodsAttrs[\"class\"]);\n        if (cls) el.setAttribute(\"class\", cls);\n        continue;\n      }\n      if (name === \"style\") {\n        el.setAttribute(\"style\", styleToString(value as string | Partial<CSSStyleDeclaration>));\n        continue;\n      }\n      if (name.startsWith(\"on\") && typeof value === \"function\") {\n        el.addEventListener(name.slice(2).toLowerCase(), value as EventListener);\n        continue;\n      }\n      if (value === true) {\n        el.setAttribute(name, \"\");\n        continue;\n      }\n      el.setAttribute(name, String(value));\n    }\n    for (const child of flattenChildren(this.children)) {\n      if (child instanceof KlodsNode) el.appendChild(child.render());\n      else if (typeof child === \"object\" && child !== null && \"nodeType\" in child) {\n        el.appendChild(child as Node);\n      } else if (isRaw(child)) {\n        const tpl = document.createElement(\"template\");\n        tpl.innerHTML = child.html;\n        el.appendChild(tpl.content);\n      } else {\n        el.appendChild(document.createTextNode(String(child)));\n      }\n    }\n    if (target) target.appendChild(el);\n    return el;\n  }\n\n  /** Render to a string of HTML. */\n  toString(): string {\n    const parts: string[] = [`<${this.tag}`];\n    for (const [name, value] of Object.entries(this.attrs)) {\n      if (value === undefined || value === null || value === false) continue;\n      if (name === \"children\") continue;\n      if (name.startsWith(\"on\") && typeof value === \"function\") continue;\n      if (name === \"class\") {\n        const cls = classNames(value as KlodsAttrs[\"class\"]);\n        if (cls) parts.push(` class=\"${escapeAttr(cls)}\"`);\n        continue;\n      }\n      if (name === \"style\") {\n        parts.push(` style=\"${escapeAttr(styleToString(value as string | Partial<CSSStyleDeclaration>))}\"`);\n        continue;\n      }\n      if (value === true) {\n        parts.push(` ${name}`);\n        continue;\n      }\n      parts.push(` ${name}=\"${escapeAttr(String(value))}\"`);\n    }\n    if (VOID_TAGS.has(this.tag)) {\n      parts.push(\" />\");\n      return parts.join(\"\");\n    }\n    parts.push(\">\");\n    for (const child of flattenChildren(this.children)) {\n      if (child instanceof KlodsNode) parts.push(child.toString());\n      else if (isRaw(child)) parts.push(child.html);\n      else if (typeof child === \"object\" && child !== null && \"outerHTML\" in child) {\n        parts.push((child as Element).outerHTML);\n      } else {\n        parts.push(escapeHtml(String(child)));\n      }\n    }\n    parts.push(`</${this.tag}>`);\n    return parts.join(\"\");\n  }\n}\n\n/**\n * Generic element builder. Most consumers use the named builders (page, header, …)\n * rather than calling `el` directly, but it's exported as an escape hatch.\n */\nexport function el(tag: string, attrs: KlodsAttrs = {}, children: KlodsChild | KlodsChild[] = []): KlodsNode {\n  return new KlodsNode(tag, attrs, children);\n}\n\n/**\n * Factory that produces a typed builder for a tag with a base class. Modifier\n * props are converted into `--modifier` BEM classes and stripped from the output\n * attributes; everything else passes through untouched, so consumers can attach\n * arbitrary `id`, `data-*`, `aria-*`, event handlers, `style`, etc.\n */\nexport function builder<P extends Record<string, unknown> = Record<never, never>>(options: {\n  tag: string;\n  base: string;\n  /** Map of prop name → class (or function returning a class) when the prop is truthy. */\n  modifiers?: { [K in keyof P]?: string | ((value: P[K]) => string | undefined) };\n}): (props?: (P & KlodsAttrs) | null, children?: KlodsChild | KlodsChild[]) => KlodsNode {\n  const { tag, base, modifiers = {} } = options;\n  const modifierMap = modifiers as Record<string, string | ((value: unknown) => string | undefined) | undefined>;\n  return (props, children) => {\n    const userProps = (props ?? {}) as P & KlodsAttrs;\n    const modClasses: string[] = [];\n    const passthrough: KlodsAttrs = {};\n    for (const [key, value] of Object.entries(userProps)) {\n      const m = modifierMap[key];\n      if (m !== undefined) {\n        if (typeof m === \"function\") {\n          const c = m(value);\n          if (c) modClasses.push(c);\n        } else if (value) {\n          modClasses.push(m);\n        }\n      } else {\n        passthrough[key] = value;\n      }\n    }\n    const finalClass = mergeClasses(base, ...modClasses, userProps.class);\n    const resolvedChildren =\n      children !== undefined ? children : ((userProps.children as KlodsChild | KlodsChild[] | undefined) ?? []);\n    delete passthrough.children;\n    return new KlodsNode(tag, { ...passthrough, class: finalClass || undefined }, resolvedChildren);\n  };\n}\n","// First wave of components: nav, card, button, badge, alert, prose helpers.\n// All match the BEM classes shipped by klods-css.\n\nimport type { KlodsAttrs, KlodsChild } from \"./core.js\";\nimport { builder, classNames, el, KlodsNode } from \"./core.js\";\n\n// ── Nav ──────────────────────────────────────────────────────────────────\nexport const nav = builder({ tag: \"nav\", base: \"klods-nav\" });\nexport const navList = builder({ tag: \"ul\", base: \"klods-nav__list\" });\nexport const buttonGroup = builder({ tag: \"div\", base: \"klods-button-group\" });\nexport type TocProps = { sub?: boolean };\nexport const toc = builder<TocProps>({ tag: \"ul\", base: \"klods-toc\", modifiers: { sub: \"klods-toc--sub\" } });\nexport const tocItem = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"li\", attrs ?? {}, children);\nexport const tocLink = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"a\", attrs ?? {}, children);\n\nexport type NavLinkProps = {\n  href?: string;\n  active?: boolean;\n};\nconst navLinkBuilder = builder<NavLinkProps>({\n  tag: \"a\",\n  base: \"klods-nav__link\",\n  modifiers: { active: \"klods-nav__link--active\" },\n});\nexport function navLink(props?: (NavLinkProps & KlodsAttrs) | null, children?: KlodsChild | KlodsChild[]): KlodsNode {\n  // Wrap each link in <li> so it's idiomatic inside <ul class=\"klods-nav__list\">.\n  return el(\"li\", {}, [navLinkBuilder(props ?? null, children)]);\n}\n\n// ── Card ─────────────────────────────────────────────────────────────────\nexport type CardProps = {\n  elevated?: boolean;\n};\nexport const card = builder<CardProps>({\n  tag: \"div\",\n  base: \"klods-card\",\n  modifiers: { elevated: \"klods-card--elevated\" },\n});\nexport const cardTitle = builder({ tag: \"h3\", base: \"klods-card__title\" });\nexport const cardBody = builder({ tag: \"div\", base: \"klods-card__body\" });\nexport const cardFooter = builder({ tag: \"div\", base: \"klods-card__footer\" });\n\n// ── Button ───────────────────────────────────────────────────────────────\nexport type ButtonProps = {\n  variant?: \"default\" | \"primary\" | \"danger\" | \"ghost\";\n  type?: \"button\" | \"submit\" | \"reset\";\n};\nconst buttonBase = builder<ButtonProps>({\n  tag: \"button\",\n  base: \"klods-button\",\n  modifiers: {\n    variant: (v) => (v && v !== \"default\" ? `klods-button--${v}` : undefined),\n  },\n});\nexport function button(props?: (ButtonProps & KlodsAttrs) | null, children?: KlodsChild | KlodsChild[]): KlodsNode {\n  // Default `type=\"button\"` so it never accidentally submits a form.\n  const merged = { type: \"button\", ...(props ?? {}) } as ButtonProps & KlodsAttrs;\n  return buttonBase(merged, children);\n}\n\n// ── Badge ────────────────────────────────────────────────────────────────\nexport type BadgeProps = {\n  variant?: \"default\" | \"accent\" | \"success\" | \"danger\";\n};\nexport const badge = builder<BadgeProps>({\n  tag: \"span\",\n  base: \"klods-badge\",\n  modifiers: {\n    variant: (v) => (v && v !== \"default\" ? `klods-badge--${v}` : undefined),\n  },\n});\n\n// ── Alert ────────────────────────────────────────────────────────────────\nexport type AlertProps = {\n  variant?: \"default\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n};\nconst alertBase = builder<AlertProps>({\n  tag: \"div\",\n  base: \"klods-alert\",\n  modifiers: {\n    variant: (v) => (v && v !== \"default\" ? `klods-alert--${v}` : undefined),\n  },\n});\nexport function alert(props?: (AlertProps & KlodsAttrs) | null, children?: KlodsChild | KlodsChild[]): KlodsNode {\n  // role=alert by default for assistive tech, overridable.\n  const merged = { role: \"alert\", ...(props ?? {}) } as AlertProps & KlodsAttrs;\n  return alertBase(merged, children);\n}\n\n// ── Prose helpers ────────────────────────────────────────────────────────\nexport const prose = builder({ tag: \"div\", base: \"klods-prose\" });\nexport const muted = builder({ tag: \"span\", base: \"klods-muted\" });\nexport const lead = builder({ tag: \"p\", base: \"klods-lead\" });\nexport const textCenter = builder({ tag: \"div\", base: \"klods-text-center\" });\n\n// ── Table ────────────────────────────────────────────────────────────────\nexport type TableProps = {\n  striped?: boolean;\n  dense?: boolean;\n};\nexport const table = builder<TableProps>({\n  tag: \"table\",\n  base: \"klods-table\",\n  modifiers: {\n    striped: \"klods-table--striped\",\n    dense: \"klods-table--dense\",\n  },\n});\nexport const thead = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"thead\", attrs ?? {}, children);\nexport const tbody = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"tbody\", attrs ?? {}, children);\nexport const tr = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"tr\", attrs ?? {}, children);\nexport const th = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"th\", attrs ?? {}, children);\nexport const td = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"td\", attrs ?? {}, children);\n\n// ── Forms ────────────────────────────────────────────────────────────────\n\n// Converts a label string to a stable, URL-safe id segment.\n// \"Email address\" → \"email-address\", \"First name\" → \"first-name\"\n// Falls back to a djb2 hash when the label produces no alphanumeric slug\n// (e.g. empty string or all-symbol text), keeping IDs deterministic.\nfunction slugId(prefix: string, text: string): string {\n  const safe = text ?? \"\";\n  const slug = safe\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-|-$/g, \"\");\n  if (slug) return `${prefix}-${slug}`;\n  let h = 5381;\n  for (let i = 0; i < safe.length; i++) h = ((h << 5) + h + safe.charCodeAt(i)) | 0;\n  return `${prefix}-${(h >>> 0).toString(36)}`;\n}\n\nexport const form = builder({ tag: \"form\", base: \"klods-form\" });\n\nexport type FieldProps = {\n  /** Label text shown above the control. */\n  label: string;\n  /** Explicit id for the control. Auto-generated when omitted. */\n  id?: string;\n  /** Hint text shown below the control. Hidden when the field is invalid. */\n  help?: string;\n  /** Validation error. When present the field is rendered in its invalid state. */\n  error?: string;\n  /** Appends a * marker to the label. */\n  required?: boolean;\n  /** Force invalid state without providing error text. */\n  invalid?: boolean;\n};\n\n// Form controls that can directly carry aria-describedby / aria-invalid.\nconst FORM_CONTROLS = new Set([\"input\", \"select\", \"textarea\"]);\n\n// Injects aria attrs onto the node itself if it's a form control, or onto the\n// first form-control child if it's a wrapper (e.g. the range / color wrappers).\nfunction patchAriaAttrs(node: KlodsNode, attrs: KlodsAttrs): KlodsNode {\n  if (FORM_CONTROLS.has(node.tag)) {\n    return new KlodsNode(node.tag, { ...node.attrs, ...attrs }, node.children);\n  }\n  const patchedChildren = node.children.map((child) =>\n    child instanceof KlodsNode && FORM_CONTROLS.has(child.tag)\n      ? new KlodsNode(child.tag, { ...child.attrs, ...attrs }, child.children)\n      : child\n  );\n  return new KlodsNode(node.tag, node.attrs, patchedChildren);\n}\n\n/**\n * Opinionated field wrapper. Renders a label, the control, and optional\n * help / error text. Automatically wires `for`, `id`, `aria-describedby`,\n * and `aria-invalid` so you don't have to.\n *\n * Pass a render function that receives the generated (or explicit) `id`:\n * ```ts\n * field({ label: \"Email\", required: true }, (id) =>\n *   input({ id, type: \"email\" }),\n * )\n * ```\n */\nexport function field(props: FieldProps & KlodsAttrs, renderInput: (id: string) => KlodsNode): KlodsNode {\n  const { label: labelText, id: explicitId, help, error, required, invalid, class: extraClass, ...rest } = props;\n  const id = explicitId ?? slugId(\"klods-field\", labelText);\n  const helpId = help ? `${id}-help` : undefined;\n  const errorId = error ? `${id}-error` : undefined;\n  const isInvalid = invalid ?? !!error;\n\n  // When invalid, .klods-help is hidden by CSS — only reference the visible error.\n  // When valid, .klods-error is absent — only reference help text if present.\n  const describedBy = isInvalid ? errorId : helpId;\n\n  // Inject aria attrs onto the control (or its first form-control child for wrappers).\n  const inputNode = renderInput(id);\n  const patchedInput = patchAriaAttrs(inputNode, {\n    ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n    ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n  });\n\n  const fieldClass = classNames([\n    \"klods-field\",\n    isInvalid ? \"klods-field--invalid\" : \"\",\n    classNames(extraClass as KlodsAttrs[\"class\"]),\n  ]);\n\n  const children: KlodsNode[] = [\n    el(\"label\", { for: id, class: `klods-label${required ? \" klods-label--required\" : \"\"}` }, labelText),\n    patchedInput,\n  ];\n  if (help) children.push(el(\"p\", { id: helpId, class: \"klods-help\" }, help));\n  if (error) children.push(el(\"p\", { id: errorId, class: \"klods-error\", role: \"alert\" }, error));\n\n  return el(\"div\", { ...rest, class: fieldClass || undefined }, children);\n}\n\nexport type InputProps = {\n  type?:\n    | \"text\"\n    | \"email\"\n    | \"password\"\n    | \"number\"\n    | \"tel\"\n    | \"url\"\n    | \"search\"\n    | \"date\"\n    | \"time\"\n    | \"datetime-local\"\n    | \"range\"\n    | \"color\"\n    | \"file\"\n    | \"hidden\";\n};\nexport function input(props: InputProps & KlodsAttrs): KlodsNode {\n  const { type, class: extraClass, oninput: userOninput, ...rest } = props;\n  const cls = (extra: string) =>\n    classNames([\"klods-input\", extra, classNames(extraClass as KlodsAttrs[\"class\"])]) || undefined;\n\n  const id =\n    (rest.id as string | undefined) ??\n    slugId(\n      \"klods-input\",\n      (rest[\"aria-label\"] as string | undefined) ?? (rest.placeholder as string | undefined) ?? type ?? \"field\"\n    );\n\n  if (type === \"range\") {\n    const initial = (rest.value as string) ?? \"50\";\n    return el(\"span\", { class: cls(\"klods-input--range\") }, [\n      el(\"input\", {\n        type: \"range\",\n        ...rest,\n        id,\n        oninput: (e: Event) => {\n          const inp = e.target as HTMLInputElement;\n          inp.closest(\".klods-input--range\")?.querySelector(\"output\")?.textContent !== undefined &&\n            (inp.closest(\".klods-input--range\")!.querySelector(\"output\")!.textContent = inp.value);\n          (userOninput as ((e: Event) => void) | undefined)?.(e);\n        },\n      }),\n      el(\"output\", { for: id }, initial),\n    ]);\n  }\n\n  if (type === \"color\") {\n    const initial = (rest.value as string) ?? \"#000000\";\n    return el(\"span\", { class: cls(\"klods-input--color\") }, [\n      el(\"input\", {\n        type: \"color\",\n        ...rest,\n        id,\n        oninput: (e: Event) => {\n          const inp = e.target as HTMLInputElement;\n          inp.closest(\".klods-input--color\")?.querySelector(\"output\")?.textContent !== undefined &&\n            (inp.closest(\".klods-input--color\")!.querySelector(\"output\")!.textContent = inp.value);\n          (userOninput as ((e: Event) => void) | undefined)?.(e);\n        },\n      }),\n      el(\"output\", { for: id }, initial),\n    ]);\n  }\n\n  return new KlodsNode(\"input\", {\n    type,\n    ...rest,\n    id,\n    class: cls(\"\"),\n  });\n}\n\nconst selectEl = builder({ tag: \"select\", base: \"klods-select\" });\nexport function select(attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode {\n  // Wrap in a positioning parent so ::after can render the chevron arrow\n  // via mask-image + var(--klods-color-muted) without a baked-in color.\n  return el(\"div\", { class: \"klods-select-wrapper\" }, selectEl(attrs, children));\n}\n\nexport const option = (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode =>\n  el(\"option\", attrs ?? {}, children);\n\nexport const textarea = builder({ tag: \"textarea\", base: \"klods-textarea\" });\n\n// ── Checkbox ─────────────────────────────────────────────────────────────\n\nexport type CheckboxProps = {\n  label: string;\n  name?: string;\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n};\nexport function checkbox(props: CheckboxProps & KlodsAttrs): KlodsNode {\n  const {\n    label: labelText,\n    name,\n    value,\n    checked,\n    disabled,\n    required,\n    form,\n    autofocus,\n    class: extraClass,\n    ...rest\n  } = props as CheckboxProps & KlodsAttrs & { required?: boolean; form?: string; autofocus?: boolean };\n  const inputAttrs: KlodsAttrs = { type: \"checkbox\" };\n  if (name !== undefined) inputAttrs.name = name;\n  if (value !== undefined) inputAttrs.value = value;\n  if (checked) inputAttrs.checked = true;\n  if (disabled) inputAttrs.disabled = true;\n  if (required) inputAttrs.required = true;\n  if (form !== undefined) inputAttrs.form = form;\n  if (autofocus) inputAttrs.autofocus = true;\n\n  return el(\n    \"label\",\n    { ...rest, class: classNames([\"klods-checkbox\", classNames(extraClass as KlodsAttrs[\"class\"])]) || undefined },\n    [el(\"input\", inputAttrs), el(\"span\", {}, labelText)]\n  );\n}\n\n// ── Radio ─────────────────────────────────────────────────────────────────\n\nexport type RadioProps = {\n  label: string;\n  name?: string;\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n};\nexport function radio(props: RadioProps & KlodsAttrs): KlodsNode {\n  const {\n    label: labelText,\n    name,\n    value,\n    checked,\n    disabled,\n    required,\n    form,\n    autofocus,\n    class: extraClass,\n    ...rest\n  } = props as RadioProps & KlodsAttrs & { required?: boolean; form?: string; autofocus?: boolean };\n  const inputAttrs: KlodsAttrs = { type: \"radio\" };\n  if (name !== undefined) inputAttrs.name = name;\n  if (value !== undefined) inputAttrs.value = value;\n  if (checked) inputAttrs.checked = true;\n  if (disabled) inputAttrs.disabled = true;\n  if (required) inputAttrs.required = true;\n  if (form !== undefined) inputAttrs.form = form;\n  if (autofocus) inputAttrs.autofocus = true;\n\n  return el(\n    \"label\",\n    { ...rest, class: classNames([\"klods-radio\", classNames(extraClass as KlodsAttrs[\"class\"])]) || undefined },\n    [el(\"input\", inputAttrs), el(\"span\", {}, labelText)]\n  );\n}\n\n// ── Radio group ───────────────────────────────────────────────────────────\n\nexport type RadioGroupProps = {\n  /** Text shown as the group heading (maps to a styled `<p>` with aria-labelledby). */\n  legend?: string;\n};\nexport function radioGroup(props: RadioGroupProps & KlodsAttrs, children: KlodsNode[]): KlodsNode {\n  const { legend: legendText, class: extraClass, ...rest } = props;\n  const legendId = legendText ? slugId(\"klods-rg\", legendText) : undefined;\n  const cls = classNames([\"klods-field\", classNames(extraClass as KlodsAttrs[\"class\"])]) || undefined;\n  return el(\"div\", { ...rest, class: cls, role: \"group\", ...(legendId ? { \"aria-labelledby\": legendId } : {}) }, [\n    legendText ? el(\"p\", { id: legendId, class: \"klods-label\" }, legendText) : null,\n    ...children,\n  ]);\n}\n\n// ── Switch ────────────────────────────────────────────────────────────────\n\nexport type SwitchProps = {\n  label: string;\n  name?: string;\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  /** Flips the layout: label on the left, track on the right. Ideal for settings panels. */\n  reverse?: boolean;\n};\nexport function switchInput(props: SwitchProps & KlodsAttrs): KlodsNode {\n  const { label: labelText, name, value, checked, disabled, reverse, class: extraClass, ...rest } = props;\n  const inputAttrs: KlodsAttrs = {\n    type: \"checkbox\",\n    class: \"klods-switch__input\",\n    role: \"switch\",\n  };\n  if (name !== undefined) inputAttrs.name = name;\n  if (value !== undefined) inputAttrs.value = value;\n  if (checked) inputAttrs.checked = true;\n  if (disabled) inputAttrs.disabled = true;\n\n  return el(\n    \"label\",\n    {\n      ...rest,\n      class:\n        classNames([\n          \"klods-switch\",\n          reverse ? \"klods-switch--reverse\" : \"\",\n          classNames(extraClass as KlodsAttrs[\"class\"]),\n        ]) || undefined,\n    },\n    [\n      el(\"input\", inputAttrs),\n      el(\"span\", { class: \"klods-switch__track\" }),\n      el(\"span\", { class: \"klods-switch__label\" }, labelText),\n    ]\n  );\n}\n\n// ── Code ─────────────────────────────────────────────────────────────────\nexport function codeBlock(attrs?: KlodsAttrs | null, content?: KlodsChild | KlodsChild[]): KlodsNode {\n  return el(\"pre\", attrs ?? {}, el(\"code\", {}, content));\n}\nexport function inlineCode(attrs?: KlodsAttrs | null, content?: KlodsChild | KlodsChild[]): KlodsNode {\n  return el(\"code\", attrs ?? {}, content);\n}\n\n// ── Box ──────────────────────────────────────────────────────────────────\nexport const box = builder({ tag: \"div\", base: \"klods-box\" });\n","// Layout builders — the four corners and the \"I-always-forget\" utilities.\n// Each builder is a thin wrapper around `builder()` from core.ts.\n\nimport type { KlodsAttrs, KlodsChild } from \"./core.js\";\nimport { builder, KlodsNode } from \"./core.js\";\n\n// ── Page ─────────────────────────────────────────────────────────────────\nexport type PageProps = {\n  /** Render with a sidebar column. */\n  sidebar?: boolean;\n  /** Which side the sidebar appears on. Defaults to `\"leading\"` (inline-start). */\n  sidebarPosition?: \"leading\" | \"trailing\";\n  /** Keep the header pinned to the top of the viewport while the page scrolls. */\n  stickyHeader?: boolean;\n};\n\nexport const page = builder<PageProps>({\n  tag: \"div\",\n  base: \"klods-page\",\n  modifiers: {\n    sidebar: \"klods-page--with-sidebar\",\n    sidebarPosition: (v) => (v === \"trailing\" ? \"klods-page--sidebar-trailing\" : undefined),\n    stickyHeader: \"klods-page--sticky-header\",\n  },\n});\n\n// ── Page slots ───────────────────────────────────────────────────────────\nexport const header = builder({ tag: \"header\", base: \"klods-header\" });\nexport const sidebar = builder({ tag: \"aside\", base: \"klods-sidebar\" });\n\nexport type ContentProps = {\n  /** Cap content width to --klods-content-max and centre it. */\n  narrow?: boolean;\n};\nexport const content = builder<ContentProps>({\n  tag: \"main\",\n  base: \"klods-content\",\n  modifiers: { narrow: \"klods-content--narrow\" },\n});\n\nexport const footer = builder({ tag: \"footer\", base: \"klods-footer\" });\nexport const section = builder({ tag: \"section\", base: \"klods-section\" });\n\n// ── Layout utilities ─────────────────────────────────────────────────────\ntype GapProp = { gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 };\n\nconst gapModifier = (prefix: string) => (v: number | undefined) =>\n  v === undefined ? undefined : `${prefix}--gap-${v}`;\n\nexport const stack = builder<GapProp>({\n  tag: \"div\",\n  base: \"klods-stack\",\n  modifiers: { gap: gapModifier(\"klods-stack\") },\n});\n\nexport const cluster = builder<GapProp>({\n  tag: \"div\",\n  base: \"klods-cluster\",\n  modifiers: { gap: gapModifier(\"klods-cluster\") },\n});\n\ntype RowProps = GapProp & { inline?: boolean };\nexport const row = builder<RowProps>({\n  tag: \"div\",\n  base: \"klods-row\",\n  modifiers: { gap: gapModifier(\"klods-row\"), inline: \"klods-row--inline\" },\n});\n\nexport type GridProps = GapProp & {\n  cols?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Auto-fit responsive columns; pair with `--klods-grid-min` if you want a custom minimum. */\n  fit?: boolean;\n};\nexport const grid = builder<GridProps>({\n  tag: \"div\",\n  base: \"klods-grid\",\n  modifiers: {\n    gap: gapModifier(\"klods-grid\"),\n    cols: (v) => (v === undefined ? undefined : `klods-grid--cols-${v}`),\n    fit: \"klods-grid--fit\",\n  },\n});\n\nexport const center = builder({ tag: \"div\", base: \"klods-center\" });\nexport const spread = builder({ tag: \"div\", base: \"klods-spread\" });\n\n// ── Convenience: empty fragment-ish wrapper for quick text + nodes ──────\nexport function text(value: string | number): KlodsNode {\n  // Wrap loose text in a span so it composes anywhere a KlodsNode is expected.\n  return new KlodsNode(\"span\", {}, [String(value)]);\n}\n\n// Re-export attribute / child types so consumers can extend a builder neatly.\nexport type { KlodsAttrs, KlodsChild };\n","// Utility builders — thin wrappers over the most-reached-for klods-css utility classes.\n\nimport { builder } from \"./core.js\";\n\n// ── Push ─────────────────────────────────────────────────────────────────\n// Renders a <span class=\"klods-push\">.\n// Pushes siblings to the end of a flex/grid row by consuming all remaining\n// inline space (margin-inline-start: auto).\nexport const push = builder({ tag: \"span\", base: \"klods-push\" });\n\n// ── Fill ─────────────────────────────────────────────────────────────────\n// Renders a <div class=\"klods-fill\">.\n// Grows to fill available flex/grid space (flex: 1 1 auto).\n// Useful as a wrapper when you need one slot to absorb leftover room —\n// e.g. equal-width side groups in a header to centre a middle item.\nexport const fill = builder({ tag: \"div\", base: \"klods-fill\" });\n"],"mappings":"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","names":["input","stack","el","text","form","content"]}

package/dist/index.d.cts

@@ -85,6 +85,7 @@ declare function alert(props?: (AlertProps & KlodsAttrs) | null, children?: Klod
 declare const prose: (props?: (Record<never, never> & KlodsAttrs) | null | undefined, children?: KlodsChild | KlodsChild[]) => KlodsNode;
 declare const muted: (props?: (Record<never, never> & KlodsAttrs) | null | undefined, children?: KlodsChild | KlodsChild[]) => KlodsNode;
 declare const lead: (props?: (Record<never, never> & KlodsAttrs) | null | undefined, children?: KlodsChild | KlodsChild[]) => KlodsNode;
+declare const textCenter: (props?: (Record<never, never> & KlodsAttrs) | null | undefined, children?: KlodsChild | KlodsChild[]) => KlodsNode;
 type TableProps = {
     striped?: boolean;
     dense?: boolean;
@@ -95,6 +96,72 @@ declare const tbody: (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsCh
 declare const tr: (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]) => KlodsNode;
 declare const th: (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]) => KlodsNode;
 declare const td: (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]) => KlodsNode;
+declare const form: (props?: (Record<never, never> & KlodsAttrs) | null | undefined, children?: KlodsChild | KlodsChild[]) => KlodsNode;
+type FieldProps = {
+    /** Label text shown above the control. */
+    label: string;
+    /** Explicit id for the control. Auto-generated when omitted. */
+    id?: string;
+    /** Hint text shown below the control. Hidden when the field is invalid. */
+    help?: string;
+    /** Validation error. When present the field is rendered in its invalid state. */
+    error?: string;
+    /** Appends a * marker to the label. */
+    required?: boolean;
+    /** Force invalid state without providing error text. */
+    invalid?: boolean;
+};
+/**
+ * Opinionated field wrapper. Renders a label, the control, and optional
+ * help / error text. Automatically wires `for`, `id`, `aria-describedby`,
+ * and `aria-invalid` so you don't have to.
+ *
+ * Pass a render function that receives the generated (or explicit) `id`:
+ * ```ts
+ * field({ label: "Email", required: true }, (id) =>
+ *   input({ id, type: "email" }),
+ * )
+ * ```
+ */
+declare function field(props: FieldProps & KlodsAttrs, renderInput: (id: string) => KlodsNode): KlodsNode;
+type InputProps = {
+    type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local" | "range" | "color" | "file" | "hidden";
+};
+declare function input(props: InputProps & KlodsAttrs): KlodsNode;
+declare function select(attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]): KlodsNode;
+declare const option: (attrs?: KlodsAttrs | null, children?: KlodsChild | KlodsChild[]) => KlodsNode;
+declare const textarea: (props?: (Record<never, never> & KlodsAttrs) | null | undefined, children?: KlodsChild | KlodsChild[]) => KlodsNode;
+type CheckboxProps = {
+    label: string;
+    name?: string;
+    value?: string;
+    checked?: boolean;
+    disabled?: boolean;
+};
+declare function checkbox(props: CheckboxProps & KlodsAttrs): KlodsNode;
+type RadioProps = {
+    label: string;
+    name?: string;
+    value?: string;
+    checked?: boolean;
+    disabled?: boolean;
+};
+declare function radio(props: RadioProps & KlodsAttrs): KlodsNode;
+type RadioGroupProps = {
+    /** Text shown as the group heading (maps to a styled `<p>` with aria-labelledby). */
+    legend?: string;
+};
+declare function radioGroup(props: RadioGroupProps & KlodsAttrs, children: KlodsNode[]): KlodsNode;
+type SwitchProps = {
+    label: string;
+    name?: string;
+    value?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    /** Flips the layout: label on the left, track on the right. Ideal for settings panels. */
+    reverse?: boolean;
+};
+declare function switchInput(props: SwitchProps & KlodsAttrs): KlodsNode;
 declare function codeBlock(attrs?: KlodsAttrs | null, content?: KlodsChild | KlodsChild[]): KlodsNode;
 declare function inlineCode(attrs?: KlodsAttrs | null, content?: KlodsChild | KlodsChild[]): KlodsNode;
 declare const box: (props?: (Record<never, never> & KlodsAttrs) | null | undefined, children?: KlodsChild | KlodsChild[]) => KlodsNode;
@@ -142,4 +209,4 @@ declare function text(value: string | number): KlodsNode;
 declare const push: (props?: (Record<never, never> & KlodsAttrs) | null | undefined, children?: KlodsChild | KlodsChild[]) => KlodsNode;
 declare const fill: (props?: (Record<never, never> & KlodsAttrs) | null | undefined, children?: KlodsChild | KlodsChild[]) => KlodsNode;
 
-export { type AlertProps, type BadgeProps, type ButtonProps, type CardProps, type ContentProps, type GridProps, type KlodsAttrs, type KlodsChild, KlodsNode, type NavLinkProps, type PageProps, type TableProps, type TocProps, alert, badge, box, builder, button, buttonGroup, card, cardBody, cardFooter, cardTitle, center, classNames, cluster, codeBlock, content, el, fill, footer, grid, header, inlineCode, lead, mergeClasses, muted, nav, navLink, navList, page, prose, push, raw, row, section, sidebar, spread, stack, table, tbody, td, text, th, thead, toc, tocItem, tocLink, tr };
+export { type AlertProps, type BadgeProps, type ButtonProps, type CardProps, type CheckboxProps, type ContentProps, type FieldProps, type GridProps, type InputProps, type KlodsAttrs, type KlodsChild, KlodsNode, type NavLinkProps, type PageProps, type RadioGroupProps, type RadioProps, type SwitchProps, type TableProps, type TocProps, alert, badge, box, builder, button, buttonGroup, card, cardBody, cardFooter, cardTitle, center, checkbox, classNames, cluster, codeBlock, content, el, field, fill, footer, form, grid, header, inlineCode, input, lead, mergeClasses, muted, nav, navLink, navList, option, page, prose, push, radio, radioGroup, raw, row, section, select, sidebar, spread, stack, switchInput, table, tbody, td, text, textCenter, textarea, th, thead, toc, tocItem, tocLink, tr };