@judarn/ui 0.7.12 → 0.8.2

package/README.md

@@ -21,6 +21,10 @@ export function Status() {
 
 `react` 18 or later is the only peer dependency. The package ships compiled ESM and CommonJS. Other entry points: `@judarn/ui/colors` (CSS custom properties only), `@judarn/ui/theme` and `@judarn/ui/tailwind` (Tailwind v4), and `@judarn/ui/sdui` (server-driven UI).
 
+## Class names
+
+`@judarn/ui/styles` and `@judarn/ui/components.css` style only `jd-` classes (`jd-btn`, `jd-badge`, `jd-tag`, `jd-card`, `jd-field`, `jd-navbar`, `jd-footer`, `jd-table`, `jd-matrix`, `jd-lockup`, `jd-list`), so a project's own `.btn` or `.card` stays its own. Buttons, badges, and tags are set apart by fill, with a transparent border that high-contrast modes turn into an outline. Put `jd-list` on a `ul` or `ol` of text items for bullets or numbers in secondary ink with a hanging indent, and `jd-list jd-list--plain` with `role="list"` on rows of links or data.
+
 ## Accent colors
 
 A project that sets its own `--jd-accent` also sets `--jd-accent-ink` to `#000000` or `#ffffff`, whichever stays readable on that fill. Accent buttons and badges read the resolved `--accent-ink`. The `--jd-accent*` hooks have no default, so a value set on `:root` carries into nested scopes.

package/dist/Badge/Badge.d.ts

@@ -2,9 +2,9 @@ import * as React from "react";
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   children?: React.ReactNode;
-  /** @default "outline" */
-  variant?: "outline" | "solid" | "accent" | "accent-outline";
-  /** Optional custom accent color hex or rgb string. Automatically resolves accessible contrasting text ink. */
+  /** Neutral is a well fill, accent-tint a light tint of the accent (neutral in dark mode). @default "neutral" */
+  variant?: "neutral" | "solid" | "accent" | "accent-tint";
+  /** Optional custom accent color (#hex, rgb() or oklch()). The accent variant fills with it and resolves contrasting ink; accent-tint tints with it. */
   accentColor?: string;
 }
 

package/dist/Button/Button.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
   children?: React.ReactNode;
   /** Visual style. @default "primary" */
-  variant?: "primary" | "outline" | "secondary" | "ghost" | "accent";
+  variant?: "primary" | "secondary" | "ghost" | "accent";
   /** @default "md" */
   size?: "sm" | "md" | "lg";
   /** Stretch to full container width. @default false */
@@ -14,6 +14,6 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-/** Judarn button – flat fill, border, and hover inversion. A consumer `className` extends the base classes. */
+/** Judarn button – set apart by fill alone, with hover inversion. A consumer `className` extends the base classes. */
 export function Button(props: ButtonProps): React.JSX.Element;
 export default Button;

package/dist/index.cjs

@@ -115,29 +115,27 @@ function getContrastingInk(color) {
   const perceptualCrossover = 0.5;
   return lum > perceptualCrossover ? "#000000" : "#ffffff";
 }
-function Badge({ children, variant = "outline", accentColor, style, className, ...rest }) {
+function Badge({ children, variant = "neutral", accentColor, style, className, ...rest }) {
   const cls = cx(
-    "badge",
-    variant === "solid" && "badge--solid",
-    variant === "accent" && "badge--accent",
-    variant === "accent-outline" && "badge--accent-outline",
+    "jd-badge",
+    variant === "solid" && "jd-badge--solid",
+    variant === "accent" && "jd-badge--accent",
+    variant === "accent-tint" && "jd-badge--accent-tint",
     className
   );
   const inlineStyle = { ...style };
   if (accentColor) {
     if (variant === "accent") {
       inlineStyle.backgroundColor = accentColor;
-      inlineStyle.borderColor = accentColor;
       inlineStyle.color = getContrastingInk(accentColor);
-    } else if (variant === "accent-outline") {
-      inlineStyle.borderColor = accentColor;
-      inlineStyle.color = accentColor;
+    } else if (variant === "accent-tint") {
+      inlineStyle["--jd-badge-accent"] = accentColor;
     }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...rest, className: cls, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0, children });
 }
 function Tag({ children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...rest, className: cx("tag", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...rest, className: cx("jd-tag", className), children });
 }
 var Badge_default = Badge;
 
@@ -155,14 +153,13 @@ function Button({
   ...rest
 }) {
   const cls = cx(
-    "btn",
-    variant === "outline" && "btn--outline",
-    variant === "secondary" && "btn--secondary",
-    variant === "ghost" && "btn--ghost",
-    variant === "accent" && "btn--accent",
-    size === "sm" && "btn--sm",
-    size === "lg" && "btn--lg",
-    block && "btn--block",
+    "jd-btn",
+    variant === "secondary" && "jd-btn--secondary",
+    variant === "ghost" && "jd-btn--ghost",
+    variant === "accent" && "jd-btn--accent",
+    size === "sm" && "jd-btn--sm",
+    size === "lg" && "jd-btn--lg",
+    block && "jd-btn--block",
     className
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { ...rest, className: cls, type, disabled, onClick, children });
@@ -183,12 +180,12 @@ function Card({
   className,
   ...rest
 }) {
-  const cls = cx("card", flat && "card--flat", compact && "card--compact", className);
+  const cls = cx("jd-card", flat && "jd-card--flat", compact && "jd-card--compact", className);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...rest, className: cls, children: [
-    media ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "card__media", children: media }) : null,
-    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("card__eyebrow", "t-label", eyebrowCasing === "asWritten" && "t-as-written"), children: eyebrow }) : null,
-    title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "card__title", children: title }) : null,
-    children ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "card__body", children }) : null,
+    media ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "jd-card__media", children: media }) : null,
+    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("jd-card__eyebrow", "t-label", eyebrowCasing === "asWritten" && "t-as-written"), children: eyebrow }) : null,
+    title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "jd-card__title", children: title }) : null,
+    children ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "jd-card__body", children }) : null,
     actions ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: "var(--gap-tight)" }, children: actions }) : null
   ] });
 }
@@ -204,7 +201,7 @@ function DataMatrix({ columns: columns2 = [], rows: rows2 = [], label = "Data Ma
     "table",
     {
       ...rest,
-      className: cx("matrix", className),
+      className: cx("jd-matrix", className),
       role: "table",
       "aria-label": label,
       "aria-colcount": totalColumns,
@@ -275,7 +272,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var headerClass = (c) => [c.numeric && "num", c.casing === "asWritten" && "t-as-written"].filter(Boolean).join(" ") || void 0;
 function DataTable({ columns: columns2 = [], rows: rows2 = [], className, ...rest }) {
   const cols = columns2.map((c) => typeof c === "string" ? { key: c, label: c } : c);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { ...rest, className: cx("table", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { ...rest, className: cx("jd-table", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: cols.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: headerClass(c), children: c.label }, c.key)) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: rows2.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: cols.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: c.numeric ? "num" : void 0, children: row[c.key] }, c.key)) }, i)) })
   ] });
@@ -285,18 +282,18 @@ var DataTable_default = DataTable;
 // src/Footer/Footer.jsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Footer({ brand = "JUDARN", tagline, columns: columns2 = [], headCasing = "uppercase", className, ...rest }) {
-  const headClass = headCasing === "asWritten" ? "footer__head t-label t-as-written" : "footer__head t-label";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("footer", { ...rest, className: cx("footer", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "footer__col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "navbar__brand", children: brand }),
-      tagline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "footer__link", style: { marginTop: "8px" }, children: tagline }) : null
+  const headClass = headCasing === "asWritten" ? "jd-footer__head t-label t-as-written" : "jd-footer__head t-label";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("footer", { ...rest, className: cx("jd-footer", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "jd-footer__col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "jd-navbar__brand", children: brand }),
+      tagline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "jd-footer__link", style: { marginTop: "8px" }, children: tagline }) : null
     ] }),
-    columns2.map((col) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "footer__col", children: [
+    columns2.map((col) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "jd-footer__col", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: headClass, children: col.head }),
       (col.links || []).map((l) => {
         const label = typeof l === "string" ? l : l.label;
         const href = typeof l === "string" ? "#" : l.href || "#";
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { className: "footer__link", href, children: label }, label);
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { className: "jd-footer__link", href, children: label }, label);
       })
     ] }, col.head))
   ] });
@@ -322,19 +319,19 @@ function LogoLockup({
 }) {
   const isIcon = variant === "icon";
   const cls = [
-    "lockup",
-    variant === "vertical" && "lockup--vertical",
-    variant === "reversed" && "lockup--reversed"
+    "jd-lockup",
+    variant === "vertical" && "jd-lockup--vertical",
+    variant === "reversed" && "jd-lockup--reversed"
   ].filter(Boolean).join(" ");
   const theMark = mark || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlaceholderMark, { size: markSize || (variant === "vertical" ? 64 : 48) });
   if (isIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lockup__mark", role: "img", "aria-label": name, children: mark || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlaceholderMark, { size: markSize || 64 }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "jd-lockup__mark", role: "img", "aria-label": name, children: mark || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlaceholderMark, { size: markSize || 64 }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cls, role: "img", "aria-label": tagline ? `${name} \u2013 ${tagline}` : name, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lockup__mark", children: theMark }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lockup__words", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lockup__name", children: name }),
-      tagline ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: taglineCasing === "asWritten" ? "lockup__tag t-label t-as-written" : "lockup__tag t-label", children: tagline }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "jd-lockup__mark", children: theMark }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "jd-lockup__words", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "jd-lockup__name", children: name }),
+      tagline ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: taglineCasing === "asWritten" ? "jd-lockup__tag t-label t-as-written" : "jd-lockup__tag t-label", children: tagline }) : null
     ] })
   ] });
 }
@@ -343,16 +340,16 @@ var LogoLockup_default = LogoLockup;
 // src/Navbar/Navbar.jsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function Navbar({ brand = "JUDARN", links = [], current, actions, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("nav", { ...rest, className: cx("navbar", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "navbar__brand", children: brand }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("ul", { className: "navbar__links", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("nav", { ...rest, className: cx("jd-navbar", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "jd-navbar__brand", children: brand }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("ul", { className: "jd-navbar__links", children: [
       links.map((l) => {
         const label = typeof l === "string" ? l : l.label;
         const href = typeof l === "string" ? "#" : l.href || "#";
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "a",
           {
-            className: "navbar__link",
+            className: "jd-navbar__link",
             href,
             "aria-current": label === current ? "page" : void 0,
             children: label
@@ -390,7 +387,7 @@ function TextField({
   const common = {
     ...rest,
     id: fid,
-    className: cx("field__input", className),
+    className: cx("jd-field__input", className),
     "aria-invalid": invalid || error ? true : void 0,
     "aria-describedby": describedBy,
     disabled
@@ -399,11 +396,11 @@ function TextField({
   if (as === "textarea") control = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("textarea", { ...common });
   else if (as === "select") control = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("select", { ...common, children });
   else control = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ...common });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "field", children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: cx("field__label", labelCasing === "asWritten" && "t-as-written"), htmlFor: fid, children: label }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "jd-field", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: cx("jd-field__label", labelCasing === "asWritten" && "t-as-written"), htmlFor: fid, children: label }) : null,
     control,
-    hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "field__hint", id: hintId, children: hint }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "field__hint is-error", id: errorId, children: error }) : null
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "jd-field__hint", id: hintId, children: hint }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "jd-field__hint is-error", id: errorId, children: error }) : null
   ] });
 }
 var TextField_default = TextField;
@@ -433,8 +430,8 @@ var VALID_NODE_TYPES = /* @__PURE__ */ new Set([
   "container",
   "text"
 ]);
-var BUTTON_VARIANTS = ["primary", "outline", "secondary", "ghost", "accent"];
-var BADGE_VARIANTS = ["outline", "solid", "accent", "accent-outline"];
+var BUTTON_VARIANTS = ["primary", "secondary", "ghost", "accent"];
+var BADGE_VARIANTS = ["neutral", "solid", "accent", "accent-tint"];
 var SIZES = ["sm", "md", "lg"];
 var CASINGS = ["uppercase", "asWritten"];
 var VALID_TOKEN_NAMES = /* @__PURE__ */ new Set([

package/dist/index.mjs

@@ -75,29 +75,27 @@ function getContrastingInk(color) {
   const perceptualCrossover = 0.5;
   return lum > perceptualCrossover ? "#000000" : "#ffffff";
 }
-function Badge({ children, variant = "outline", accentColor, style, className, ...rest }) {
+function Badge({ children, variant = "neutral", accentColor, style, className, ...rest }) {
   const cls = cx(
-    "badge",
-    variant === "solid" && "badge--solid",
-    variant === "accent" && "badge--accent",
-    variant === "accent-outline" && "badge--accent-outline",
+    "jd-badge",
+    variant === "solid" && "jd-badge--solid",
+    variant === "accent" && "jd-badge--accent",
+    variant === "accent-tint" && "jd-badge--accent-tint",
     className
   );
   const inlineStyle = { ...style };
   if (accentColor) {
     if (variant === "accent") {
       inlineStyle.backgroundColor = accentColor;
-      inlineStyle.borderColor = accentColor;
       inlineStyle.color = getContrastingInk(accentColor);
-    } else if (variant === "accent-outline") {
-      inlineStyle.borderColor = accentColor;
-      inlineStyle.color = accentColor;
+    } else if (variant === "accent-tint") {
+      inlineStyle["--jd-badge-accent"] = accentColor;
     }
   }
   return /* @__PURE__ */ jsx("span", { ...rest, className: cls, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0, children });
 }
 function Tag({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx("span", { ...rest, className: cx("tag", className), children });
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cx("jd-tag", className), children });
 }
 var Badge_default = Badge;
 
@@ -115,14 +113,13 @@ function Button({
   ...rest
 }) {
   const cls = cx(
-    "btn",
-    variant === "outline" && "btn--outline",
-    variant === "secondary" && "btn--secondary",
-    variant === "ghost" && "btn--ghost",
-    variant === "accent" && "btn--accent",
-    size === "sm" && "btn--sm",
-    size === "lg" && "btn--lg",
-    block && "btn--block",
+    "jd-btn",
+    variant === "secondary" && "jd-btn--secondary",
+    variant === "ghost" && "jd-btn--ghost",
+    variant === "accent" && "jd-btn--accent",
+    size === "sm" && "jd-btn--sm",
+    size === "lg" && "jd-btn--lg",
+    block && "jd-btn--block",
     className
   );
   return /* @__PURE__ */ jsx2("button", { ...rest, className: cls, type, disabled, onClick, children });
@@ -143,12 +140,12 @@ function Card({
   className,
   ...rest
 }) {
-  const cls = cx("card", flat && "card--flat", compact && "card--compact", className);
+  const cls = cx("jd-card", flat && "jd-card--flat", compact && "jd-card--compact", className);
   return /* @__PURE__ */ jsxs("div", { ...rest, className: cls, children: [
-    media ? /* @__PURE__ */ jsx3("div", { className: "card__media", children: media }) : null,
-    eyebrow ? /* @__PURE__ */ jsx3("span", { className: cx("card__eyebrow", "t-label", eyebrowCasing === "asWritten" && "t-as-written"), children: eyebrow }) : null,
-    title ? /* @__PURE__ */ jsx3("div", { className: "card__title", children: title }) : null,
-    children ? /* @__PURE__ */ jsx3("div", { className: "card__body", children }) : null,
+    media ? /* @__PURE__ */ jsx3("div", { className: "jd-card__media", children: media }) : null,
+    eyebrow ? /* @__PURE__ */ jsx3("span", { className: cx("jd-card__eyebrow", "t-label", eyebrowCasing === "asWritten" && "t-as-written"), children: eyebrow }) : null,
+    title ? /* @__PURE__ */ jsx3("div", { className: "jd-card__title", children: title }) : null,
+    children ? /* @__PURE__ */ jsx3("div", { className: "jd-card__body", children }) : null,
     actions ? /* @__PURE__ */ jsx3("div", { style: { display: "flex", gap: "var(--gap-tight)" }, children: actions }) : null
   ] });
 }
@@ -164,7 +161,7 @@ function DataMatrix({ columns: columns2 = [], rows: rows2 = [], label = "Data Ma
     "table",
     {
       ...rest,
-      className: cx("matrix", className),
+      className: cx("jd-matrix", className),
       role: "table",
       "aria-label": label,
       "aria-colcount": totalColumns,
@@ -235,7 +232,7 @@ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var headerClass = (c) => [c.numeric && "num", c.casing === "asWritten" && "t-as-written"].filter(Boolean).join(" ") || void 0;
 function DataTable({ columns: columns2 = [], rows: rows2 = [], className, ...rest }) {
   const cols = columns2.map((c) => typeof c === "string" ? { key: c, label: c } : c);
-  return /* @__PURE__ */ jsxs3("table", { ...rest, className: cx("table", className), children: [
+  return /* @__PURE__ */ jsxs3("table", { ...rest, className: cx("jd-table", className), children: [
     /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsx5("tr", { children: cols.map((c) => /* @__PURE__ */ jsx5("th", { className: headerClass(c), children: c.label }, c.key)) }) }),
     /* @__PURE__ */ jsx5("tbody", { children: rows2.map((row, i) => /* @__PURE__ */ jsx5("tr", { children: cols.map((c) => /* @__PURE__ */ jsx5("td", { className: c.numeric ? "num" : void 0, children: row[c.key] }, c.key)) }, i)) })
   ] });
@@ -245,18 +242,18 @@ var DataTable_default = DataTable;
 // src/Footer/Footer.jsx
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Footer({ brand = "JUDARN", tagline, columns: columns2 = [], headCasing = "uppercase", className, ...rest }) {
-  const headClass = headCasing === "asWritten" ? "footer__head t-label t-as-written" : "footer__head t-label";
-  return /* @__PURE__ */ jsxs4("footer", { ...rest, className: cx("footer", className), children: [
-    /* @__PURE__ */ jsxs4("div", { className: "footer__col", children: [
-      /* @__PURE__ */ jsx6("div", { className: "navbar__brand", children: brand }),
-      tagline ? /* @__PURE__ */ jsx6("p", { className: "footer__link", style: { marginTop: "8px" }, children: tagline }) : null
+  const headClass = headCasing === "asWritten" ? "jd-footer__head t-label t-as-written" : "jd-footer__head t-label";
+  return /* @__PURE__ */ jsxs4("footer", { ...rest, className: cx("jd-footer", className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "jd-footer__col", children: [
+      /* @__PURE__ */ jsx6("div", { className: "jd-navbar__brand", children: brand }),
+      tagline ? /* @__PURE__ */ jsx6("p", { className: "jd-footer__link", style: { marginTop: "8px" }, children: tagline }) : null
     ] }),
-    columns2.map((col) => /* @__PURE__ */ jsxs4("div", { className: "footer__col", children: [
+    columns2.map((col) => /* @__PURE__ */ jsxs4("div", { className: "jd-footer__col", children: [
       /* @__PURE__ */ jsx6("h2", { className: headClass, children: col.head }),
       (col.links || []).map((l) => {
         const label = typeof l === "string" ? l : l.label;
         const href = typeof l === "string" ? "#" : l.href || "#";
-        return /* @__PURE__ */ jsx6("a", { className: "footer__link", href, children: label }, label);
+        return /* @__PURE__ */ jsx6("a", { className: "jd-footer__link", href, children: label }, label);
       })
     ] }, col.head))
   ] });
@@ -282,19 +279,19 @@ function LogoLockup({
 }) {
   const isIcon = variant === "icon";
   const cls = [
-    "lockup",
-    variant === "vertical" && "lockup--vertical",
-    variant === "reversed" && "lockup--reversed"
+    "jd-lockup",
+    variant === "vertical" && "jd-lockup--vertical",
+    variant === "reversed" && "jd-lockup--reversed"
   ].filter(Boolean).join(" ");
   const theMark = mark || /* @__PURE__ */ jsx7(PlaceholderMark, { size: markSize || (variant === "vertical" ? 64 : 48) });
   if (isIcon) {
-    return /* @__PURE__ */ jsx7("span", { className: "lockup__mark", role: "img", "aria-label": name, children: mark || /* @__PURE__ */ jsx7(PlaceholderMark, { size: markSize || 64 }) });
+    return /* @__PURE__ */ jsx7("span", { className: "jd-lockup__mark", role: "img", "aria-label": name, children: mark || /* @__PURE__ */ jsx7(PlaceholderMark, { size: markSize || 64 }) });
   }
   return /* @__PURE__ */ jsxs5("div", { className: cls, role: "img", "aria-label": tagline ? `${name} \u2013 ${tagline}` : name, children: [
-    /* @__PURE__ */ jsx7("span", { className: "lockup__mark", children: theMark }),
-    /* @__PURE__ */ jsxs5("span", { className: "lockup__words", children: [
-      /* @__PURE__ */ jsx7("span", { className: "lockup__name", children: name }),
-      tagline ? /* @__PURE__ */ jsx7("span", { className: taglineCasing === "asWritten" ? "lockup__tag t-label t-as-written" : "lockup__tag t-label", children: tagline }) : null
+    /* @__PURE__ */ jsx7("span", { className: "jd-lockup__mark", children: theMark }),
+    /* @__PURE__ */ jsxs5("span", { className: "jd-lockup__words", children: [
+      /* @__PURE__ */ jsx7("span", { className: "jd-lockup__name", children: name }),
+      tagline ? /* @__PURE__ */ jsx7("span", { className: taglineCasing === "asWritten" ? "jd-lockup__tag t-label t-as-written" : "jd-lockup__tag t-label", children: tagline }) : null
     ] })
   ] });
 }
@@ -303,16 +300,16 @@ var LogoLockup_default = LogoLockup;
 // src/Navbar/Navbar.jsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Navbar({ brand = "JUDARN", links = [], current, actions, className, ...rest }) {
-  return /* @__PURE__ */ jsxs6("nav", { ...rest, className: cx("navbar", className), children: [
-    /* @__PURE__ */ jsx8("div", { className: "navbar__brand", children: brand }),
-    /* @__PURE__ */ jsxs6("ul", { className: "navbar__links", children: [
+  return /* @__PURE__ */ jsxs6("nav", { ...rest, className: cx("jd-navbar", className), children: [
+    /* @__PURE__ */ jsx8("div", { className: "jd-navbar__brand", children: brand }),
+    /* @__PURE__ */ jsxs6("ul", { className: "jd-navbar__links", children: [
       links.map((l) => {
         const label = typeof l === "string" ? l : l.label;
         const href = typeof l === "string" ? "#" : l.href || "#";
         return /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(
           "a",
           {
-            className: "navbar__link",
+            className: "jd-navbar__link",
             href,
             "aria-current": label === current ? "page" : void 0,
             children: label
@@ -350,7 +347,7 @@ function TextField({
   const common = {
     ...rest,
     id: fid,
-    className: cx("field__input", className),
+    className: cx("jd-field__input", className),
     "aria-invalid": invalid || error ? true : void 0,
     "aria-describedby": describedBy,
     disabled
@@ -359,11 +356,11 @@ function TextField({
   if (as === "textarea") control = /* @__PURE__ */ jsx9("textarea", { ...common });
   else if (as === "select") control = /* @__PURE__ */ jsx9("select", { ...common, children });
   else control = /* @__PURE__ */ jsx9("input", { ...common });
-  return /* @__PURE__ */ jsxs7("div", { className: "field", children: [
-    label ? /* @__PURE__ */ jsx9("label", { className: cx("field__label", labelCasing === "asWritten" && "t-as-written"), htmlFor: fid, children: label }) : null,
+  return /* @__PURE__ */ jsxs7("div", { className: "jd-field", children: [
+    label ? /* @__PURE__ */ jsx9("label", { className: cx("jd-field__label", labelCasing === "asWritten" && "t-as-written"), htmlFor: fid, children: label }) : null,
     control,
-    hint ? /* @__PURE__ */ jsx9("span", { className: "field__hint", id: hintId, children: hint }) : null,
-    error ? /* @__PURE__ */ jsx9("span", { className: "field__hint is-error", id: errorId, children: error }) : null
+    hint ? /* @__PURE__ */ jsx9("span", { className: "jd-field__hint", id: hintId, children: hint }) : null,
+    error ? /* @__PURE__ */ jsx9("span", { className: "jd-field__hint is-error", id: errorId, children: error }) : null
   ] });
 }
 var TextField_default = TextField;
@@ -393,8 +390,8 @@ var VALID_NODE_TYPES = /* @__PURE__ */ new Set([
   "container",
   "text"
 ]);
-var BUTTON_VARIANTS = ["primary", "outline", "secondary", "ghost", "accent"];
-var BADGE_VARIANTS = ["outline", "solid", "accent", "accent-outline"];
+var BUTTON_VARIANTS = ["primary", "secondary", "ghost", "accent"];
+var BADGE_VARIANTS = ["neutral", "solid", "accent", "accent-tint"];
 var SIZES = ["sm", "md", "lg"];
 var CASINGS = ["uppercase", "asWritten"];
 var VALID_TOKEN_NAMES = /* @__PURE__ */ new Set([

package/dist/sdui/index.cjs

@@ -61,14 +61,13 @@ function Button({
   ...rest
 }) {
   const cls = cx(
-    "btn",
-    variant === "outline" && "btn--outline",
-    variant === "secondary" && "btn--secondary",
-    variant === "ghost" && "btn--ghost",
-    variant === "accent" && "btn--accent",
-    size === "sm" && "btn--sm",
-    size === "lg" && "btn--lg",
-    block && "btn--block",
+    "jd-btn",
+    variant === "secondary" && "jd-btn--secondary",
+    variant === "ghost" && "jd-btn--ghost",
+    variant === "accent" && "jd-btn--accent",
+    size === "sm" && "jd-btn--sm",
+    size === "lg" && "jd-btn--lg",
+    block && "jd-btn--block",
     className
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ...rest, className: cls, type, disabled, onClick, children });
@@ -140,29 +139,27 @@ function getContrastingInk(color) {
   const perceptualCrossover = 0.5;
   return lum > perceptualCrossover ? "#000000" : "#ffffff";
 }
-function Badge({ children, variant = "outline", accentColor, style, className, ...rest }) {
+function Badge({ children, variant = "neutral", accentColor, style, className, ...rest }) {
   const cls = cx(
-    "badge",
-    variant === "solid" && "badge--solid",
-    variant === "accent" && "badge--accent",
-    variant === "accent-outline" && "badge--accent-outline",
+    "jd-badge",
+    variant === "solid" && "jd-badge--solid",
+    variant === "accent" && "jd-badge--accent",
+    variant === "accent-tint" && "jd-badge--accent-tint",
     className
   );
   const inlineStyle = { ...style };
   if (accentColor) {
     if (variant === "accent") {
       inlineStyle.backgroundColor = accentColor;
-      inlineStyle.borderColor = accentColor;
       inlineStyle.color = getContrastingInk(accentColor);
-    } else if (variant === "accent-outline") {
-      inlineStyle.borderColor = accentColor;
-      inlineStyle.color = accentColor;
+    } else if (variant === "accent-tint") {
+      inlineStyle["--jd-badge-accent"] = accentColor;
     }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { ...rest, className: cls, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0, children });
 }
 function Tag({ children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { ...rest, className: cx("tag", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { ...rest, className: cx("jd-tag", className), children });
 }
 
 // src/Card/Card.jsx
@@ -179,12 +176,12 @@ function Card({
   className,
   ...rest
 }) {
-  const cls = cx("card", flat && "card--flat", compact && "card--compact", className);
+  const cls = cx("jd-card", flat && "jd-card--flat", compact && "jd-card--compact", className);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...rest, className: cls, children: [
-    media ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "card__media", children: media }) : null,
-    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("card__eyebrow", "t-label", eyebrowCasing === "asWritten" && "t-as-written"), children: eyebrow }) : null,
-    title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "card__title", children: title }) : null,
-    children ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "card__body", children }) : null,
+    media ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "jd-card__media", children: media }) : null,
+    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("jd-card__eyebrow", "t-label", eyebrowCasing === "asWritten" && "t-as-written"), children: eyebrow }) : null,
+    title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "jd-card__title", children: title }) : null,
+    children ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "jd-card__body", children }) : null,
     actions ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: "var(--gap-tight)" }, children: actions }) : null
   ] });
 }
@@ -199,7 +196,7 @@ function DataMatrix({ columns: columns2 = [], rows: rows2 = [], label = "Data Ma
     "table",
     {
       ...rest,
-      className: cx("matrix", className),
+      className: cx("jd-matrix", className),
       role: "table",
       "aria-label": label,
       "aria-colcount": totalColumns,
@@ -269,7 +266,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var headerClass = (c) => [c.numeric && "num", c.casing === "asWritten" && "t-as-written"].filter(Boolean).join(" ") || void 0;
 function DataTable({ columns: columns2 = [], rows: rows2 = [], className, ...rest }) {
   const cols = columns2.map((c) => typeof c === "string" ? { key: c, label: c } : c);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { ...rest, className: cx("table", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { ...rest, className: cx("jd-table", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: cols.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: headerClass(c), children: c.label }, c.key)) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: rows2.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: cols.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: c.numeric ? "num" : void 0, children: row[c.key] }, c.key)) }, i)) })
   ] });
@@ -300,7 +297,7 @@ function TextField({
   const common = {
     ...rest,
     id: fid,
-    className: cx("field__input", className),
+    className: cx("jd-field__input", className),
     "aria-invalid": invalid || error ? true : void 0,
     "aria-describedby": describedBy,
     disabled
@@ -309,11 +306,11 @@ function TextField({
   if (as === "textarea") control = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("textarea", { ...common });
   else if (as === "select") control = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { ...common, children });
   else control = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { ...common });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "field", children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: cx("field__label", labelCasing === "asWritten" && "t-as-written"), htmlFor: fid, children: label }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "jd-field", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: cx("jd-field__label", labelCasing === "asWritten" && "t-as-written"), htmlFor: fid, children: label }) : null,
     control,
-    hint ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "field__hint", id: hintId, children: hint }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "field__hint is-error", id: errorId, children: error }) : null
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "jd-field__hint", id: hintId, children: hint }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "jd-field__hint is-error", id: errorId, children: error }) : null
   ] });
 }
 
@@ -329,8 +326,8 @@ var VALID_NODE_TYPES = /* @__PURE__ */ new Set([
   "container",
   "text"
 ]);
-var BUTTON_VARIANTS = ["primary", "outline", "secondary", "ghost", "accent"];
-var BADGE_VARIANTS = ["outline", "solid", "accent", "accent-outline"];
+var BUTTON_VARIANTS = ["primary", "secondary", "ghost", "accent"];
+var BADGE_VARIANTS = ["neutral", "solid", "accent", "accent-tint"];
 var SIZES = ["sm", "md", "lg"];
 var CASINGS = ["uppercase", "asWritten"];
 var VALID_TOKEN_NAMES = /* @__PURE__ */ new Set([

package/dist/sdui/index.mjs

@@ -20,14 +20,13 @@ function Button({
   ...rest
 }) {
   const cls = cx(
-    "btn",
-    variant === "outline" && "btn--outline",
-    variant === "secondary" && "btn--secondary",
-    variant === "ghost" && "btn--ghost",
-    variant === "accent" && "btn--accent",
-    size === "sm" && "btn--sm",
-    size === "lg" && "btn--lg",
-    block && "btn--block",
+    "jd-btn",
+    variant === "secondary" && "jd-btn--secondary",
+    variant === "ghost" && "jd-btn--ghost",
+    variant === "accent" && "jd-btn--accent",
+    size === "sm" && "jd-btn--sm",
+    size === "lg" && "jd-btn--lg",
+    block && "jd-btn--block",
     className
   );
   return /* @__PURE__ */ jsx("button", { ...rest, className: cls, type, disabled, onClick, children });
@@ -99,29 +98,27 @@ function getContrastingInk(color) {
   const perceptualCrossover = 0.5;
   return lum > perceptualCrossover ? "#000000" : "#ffffff";
 }
-function Badge({ children, variant = "outline", accentColor, style, className, ...rest }) {
+function Badge({ children, variant = "neutral", accentColor, style, className, ...rest }) {
   const cls = cx(
-    "badge",
-    variant === "solid" && "badge--solid",
-    variant === "accent" && "badge--accent",
-    variant === "accent-outline" && "badge--accent-outline",
+    "jd-badge",
+    variant === "solid" && "jd-badge--solid",
+    variant === "accent" && "jd-badge--accent",
+    variant === "accent-tint" && "jd-badge--accent-tint",
     className
   );
   const inlineStyle = { ...style };
   if (accentColor) {
     if (variant === "accent") {
       inlineStyle.backgroundColor = accentColor;
-      inlineStyle.borderColor = accentColor;
       inlineStyle.color = getContrastingInk(accentColor);
-    } else if (variant === "accent-outline") {
-      inlineStyle.borderColor = accentColor;
-      inlineStyle.color = accentColor;
+    } else if (variant === "accent-tint") {
+      inlineStyle["--jd-badge-accent"] = accentColor;
     }
   }
   return /* @__PURE__ */ jsx2("span", { ...rest, className: cls, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0, children });
 }
 function Tag({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx2("span", { ...rest, className: cx("tag", className), children });
+  return /* @__PURE__ */ jsx2("span", { ...rest, className: cx("jd-tag", className), children });
 }
 
 // src/Card/Card.jsx
@@ -138,12 +135,12 @@ function Card({
   className,
   ...rest
 }) {
-  const cls = cx("card", flat && "card--flat", compact && "card--compact", className);
+  const cls = cx("jd-card", flat && "jd-card--flat", compact && "jd-card--compact", className);
   return /* @__PURE__ */ jsxs("div", { ...rest, className: cls, children: [
-    media ? /* @__PURE__ */ jsx3("div", { className: "card__media", children: media }) : null,
-    eyebrow ? /* @__PURE__ */ jsx3("span", { className: cx("card__eyebrow", "t-label", eyebrowCasing === "asWritten" && "t-as-written"), children: eyebrow }) : null,
-    title ? /* @__PURE__ */ jsx3("div", { className: "card__title", children: title }) : null,
-    children ? /* @__PURE__ */ jsx3("div", { className: "card__body", children }) : null,
+    media ? /* @__PURE__ */ jsx3("div", { className: "jd-card__media", children: media }) : null,
+    eyebrow ? /* @__PURE__ */ jsx3("span", { className: cx("jd-card__eyebrow", "t-label", eyebrowCasing === "asWritten" && "t-as-written"), children: eyebrow }) : null,
+    title ? /* @__PURE__ */ jsx3("div", { className: "jd-card__title", children: title }) : null,
+    children ? /* @__PURE__ */ jsx3("div", { className: "jd-card__body", children }) : null,
     actions ? /* @__PURE__ */ jsx3("div", { style: { display: "flex", gap: "var(--gap-tight)" }, children: actions }) : null
   ] });
 }
@@ -158,7 +155,7 @@ function DataMatrix({ columns: columns2 = [], rows: rows2 = [], label = "Data Ma
     "table",
     {
       ...rest,
-      className: cx("matrix", className),
+      className: cx("jd-matrix", className),
       role: "table",
       "aria-label": label,
       "aria-colcount": totalColumns,
@@ -228,7 +225,7 @@ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var headerClass = (c) => [c.numeric && "num", c.casing === "asWritten" && "t-as-written"].filter(Boolean).join(" ") || void 0;
 function DataTable({ columns: columns2 = [], rows: rows2 = [], className, ...rest }) {
   const cols = columns2.map((c) => typeof c === "string" ? { key: c, label: c } : c);
-  return /* @__PURE__ */ jsxs3("table", { ...rest, className: cx("table", className), children: [
+  return /* @__PURE__ */ jsxs3("table", { ...rest, className: cx("jd-table", className), children: [
     /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsx5("tr", { children: cols.map((c) => /* @__PURE__ */ jsx5("th", { className: headerClass(c), children: c.label }, c.key)) }) }),
     /* @__PURE__ */ jsx5("tbody", { children: rows2.map((row, i) => /* @__PURE__ */ jsx5("tr", { children: cols.map((c) => /* @__PURE__ */ jsx5("td", { className: c.numeric ? "num" : void 0, children: row[c.key] }, c.key)) }, i)) })
   ] });
@@ -259,7 +256,7 @@ function TextField({
   const common = {
     ...rest,
     id: fid,
-    className: cx("field__input", className),
+    className: cx("jd-field__input", className),
     "aria-invalid": invalid || error ? true : void 0,
     "aria-describedby": describedBy,
     disabled
@@ -268,11 +265,11 @@ function TextField({
   if (as === "textarea") control = /* @__PURE__ */ jsx6("textarea", { ...common });
   else if (as === "select") control = /* @__PURE__ */ jsx6("select", { ...common, children });
   else control = /* @__PURE__ */ jsx6("input", { ...common });
-  return /* @__PURE__ */ jsxs4("div", { className: "field", children: [
-    label ? /* @__PURE__ */ jsx6("label", { className: cx("field__label", labelCasing === "asWritten" && "t-as-written"), htmlFor: fid, children: label }) : null,
+  return /* @__PURE__ */ jsxs4("div", { className: "jd-field", children: [
+    label ? /* @__PURE__ */ jsx6("label", { className: cx("jd-field__label", labelCasing === "asWritten" && "t-as-written"), htmlFor: fid, children: label }) : null,
     control,
-    hint ? /* @__PURE__ */ jsx6("span", { className: "field__hint", id: hintId, children: hint }) : null,
-    error ? /* @__PURE__ */ jsx6("span", { className: "field__hint is-error", id: errorId, children: error }) : null
+    hint ? /* @__PURE__ */ jsx6("span", { className: "jd-field__hint", id: hintId, children: hint }) : null,
+    error ? /* @__PURE__ */ jsx6("span", { className: "jd-field__hint is-error", id: errorId, children: error }) : null
   ] });
 }
 
@@ -288,8 +285,8 @@ var VALID_NODE_TYPES = /* @__PURE__ */ new Set([
   "container",
   "text"
 ]);
-var BUTTON_VARIANTS = ["primary", "outline", "secondary", "ghost", "accent"];
-var BADGE_VARIANTS = ["outline", "solid", "accent", "accent-outline"];
+var BUTTON_VARIANTS = ["primary", "secondary", "ghost", "accent"];
+var BADGE_VARIANTS = ["neutral", "solid", "accent", "accent-tint"];
 var SIZES = ["sm", "md", "lg"];
 var CASINGS = ["uppercase", "asWritten"];
 var VALID_TOKEN_NAMES = /* @__PURE__ */ new Set([

package/dist/sdui/schema.json

@@ -57,7 +57,6 @@
                 "type": "string",
                 "enum": [
                   "primary",
-                  "outline",
                   "secondary",
                   "ghost",
                   "accent"
@@ -139,10 +138,10 @@
               "variant": {
                 "type": "string",
                 "enum": [
-                  "outline",
+                  "neutral",
                   "solid",
                   "accent",
-                  "accent-outline"
+                  "accent-tint"
                 ]
               },
               "accentColor": {

package/dist/sdui/serializer.d.ts

@@ -13,8 +13,8 @@ export type SDUINodeType =
 
 /** Props accepted per node type. Any other prop is rejected by `validateSDUINode`. */
 export interface SDUIPropsByType {
-  button: { variant?: "primary" | "outline" | "secondary" | "ghost" | "accent"; size?: "sm" | "md" | "lg"; block?: boolean; disabled?: boolean; type?: "button" | "submit" | "reset"; token?: string };
-  badge: { variant?: "outline" | "solid" | "accent" | "accent-outline"; accentColor?: string; token?: string };
+  button: { variant?: "primary" | "secondary" | "ghost" | "accent"; size?: "sm" | "md" | "lg"; block?: boolean; disabled?: boolean; type?: "button" | "submit" | "reset"; token?: string };
+  badge: { variant?: "neutral" | "solid" | "accent" | "accent-tint"; accentColor?: string; token?: string };
   tag: { token?: string };
   card: { eyebrow?: string; eyebrowCasing?: "uppercase" | "asWritten"; title?: string; flat?: boolean; compact?: boolean; token?: string };
   "data-matrix": { columns?: SDUIColumn[]; rows?: SDUIRow[]; label?: string; token?: string };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@judarn/ui",
-  "version": "0.7.12",
+  "version": "0.8.2",
   "description": "Judarn design foundation tokens and React components for the web",
   "author": "Ruben Luthman",
   "license": "MIT",

package/styles/components.css

@@ -1,12 +1,15 @@
 /* =========================================================================
    JUDARN DESIGN SYSTEM
    components.css – component styles (flat, geometric, no decoration)
-   Interaction model: COLOR INVERSION on hover, flat grey on active.
-   No shadows, no gradients, no radius (unless structurally motivated).
+   Every class carries the jd- prefix, so a project's own .btn or .card never picks these up.
+   Controls are set apart by fill alone (DESIGN.md, Surface Hierarchy). Hover inverts the fill,
+   press is flat grey. No shadows, no gradients, no radius (unless structurally motivated).
    ========================================================================= */
 
 /* ---- BUTTON ------------------------------------------------------------ */
-.btn {
+/* The resting border is transparent: it keeps the control's size, and Windows high-contrast mode
+   still draws it. High-contrast modes turn it into an ink-100 outline (end of file). */
+.jd-btn {
   font-family: var(--font-sans);
   font-weight: var(--weight-medium);
   letter-spacing: var(--track-body);
@@ -16,7 +19,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--gap-tight);
-  border: var(--rule) solid var(--black);
+  border: var(--rule) solid transparent;
   background: var(--black);
   color: var(--paper);
   cursor: pointer;
@@ -28,38 +31,35 @@
   text-align: center;
   white-space: nowrap;
 }
-.btn:hover { background: var(--white); color: var(--black); border-color: var(--black); }     /* invert */
-.btn:active { background: var(--ink-60); border-color: var(--ink-60); color: var(--paper); }
-.btn:focus-visible { outline: var(--rule-bold) solid var(--accent); outline-offset: 2px; }
-
-.btn--outline { background: transparent; color: var(--black); border: var(--rule) solid var(--black); }
-.btn--outline:hover { background: var(--black); color: var(--paper); }
-.btn--outline:active { background: var(--ink-60); border-color: var(--ink-60); color: var(--paper); }
+.jd-btn:hover { background: var(--jd-surface-recessed); color: var(--black); }     /* invert by fill */
+.jd-btn:active { background: var(--ink-60); color: var(--paper); }
+.jd-btn:focus-visible { outline: var(--rule-bold) solid var(--accent); outline-offset: 2px; }
 
-.btn--secondary { background: var(--jd-surface-recessed); color: var(--black); border: var(--rule) solid var(--ink-30); }
-.btn--secondary:hover { background: var(--white); color: var(--black); border-color: var(--ink-60); }
-.btn--secondary:active { background: var(--ink-60); border-color: var(--ink-60); color: var(--paper); }
+/* A secondary button is a well like a text field: surfaceRecessed on the page, substrate inside a card. */
+.jd-btn--secondary { background: var(--jd-well, var(--jd-surface-recessed)); color: var(--black); }
+.jd-btn--secondary:hover { background: var(--black); color: var(--paper); }
+.jd-btn--secondary:active { background: var(--ink-60); color: var(--paper); }
 
-.btn--ghost { background: transparent; color: var(--black); border-color: transparent; padding-left: 0; padding-right: 0; }
-.btn--ghost:hover { background: transparent; color: var(--black); border-bottom-color: var(--black); }
-.btn--ghost:active { background: transparent; color: var(--ink-60); border-bottom-color: var(--ink-60); }
+.jd-btn--ghost { background: transparent; color: var(--black); padding-left: 0; padding-right: 0; }
+.jd-btn--ghost:hover { background: transparent; color: var(--black); border-bottom-color: var(--black); }
+.jd-btn--ghost:active { background: transparent; color: var(--ink-60); border-bottom-color: var(--ink-60); }
 
-.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
-.btn--accent:hover { background: var(--white); color: var(--accent-fg); border-color: var(--accent-fg); }
-.btn--accent:active { filter: none; background: var(--accent); color: var(--accent-ink); }
+.jd-btn--accent { background: var(--accent); color: var(--accent-ink); }
+.jd-btn--accent:hover { background: var(--jd-surface-recessed); color: var(--accent-fg); }
+.jd-btn--accent:active { filter: none; background: var(--accent); color: var(--accent-ink); }
 
-.btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--size-small); min-height: var(--space-touch); }
-.btn--lg { padding: var(--space-3) var(--space-4); font-size: var(--size-body-lg); }
-.btn--block { display: flex; width: 100%; }
+.jd-btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--size-small); min-height: var(--space-touch); }
+.jd-btn--lg { padding: var(--space-3) var(--space-4); font-size: var(--size-body-lg); }
+.jd-btn--block { display: flex; width: 100%; }
 
-.btn:disabled, .btn[aria-disabled="true"] {
-  background: var(--jd-surface-recessed); color: var(--ink-30); border-color: var(--ink-30);
+.jd-btn:disabled, .jd-btn[aria-disabled="true"] {
+  background: var(--jd-well, var(--jd-surface-recessed)); color: var(--ink-30);
   cursor: not-allowed; pointer-events: none;
 }
 
 /* ---- FIELD (text input / textarea / select) --------------------------- */
-.field { display: flex; flex-direction: column; gap: var(--gap-tight); }
-.field__label {
+.jd-field { display: flex; flex-direction: column; gap: var(--gap-tight); }
+.jd-field__label {
   font-family: var(--font-sans);
   font-weight: var(--weight-bold);
   font-size: var(--size-label);
@@ -70,7 +70,7 @@
 /* A field is a well set apart by fill alone (DESIGN.md, Surface Hierarchy): surfaceRecessed on the
    page, substrate inside a card. The resting border is transparent: it keeps the field's size, and
    Windows high-contrast mode still draws it. High-contrast modes turn it into an ink-100 outline. */
-.field__input {
+.jd-field__input {
   font-family: var(--font-sans);
   font-size: var(--size-body);
   color: var(--black);
@@ -81,23 +81,28 @@
   width: 100%;
   transition: border-color 120ms linear, box-shadow 120ms linear;
 }
-.card .field__input { background: var(--paper); }
+.jd-card .jd-field__input { background: var(--paper); }
 @media (prefers-contrast: more) {
-  :where(:root:not([data-contrast="normal"])) .field__input { border-color: var(--ink-100); }
-}
-:where([data-contrast="high"]) .field__input { border-color: var(--ink-100); }
-.field__input::placeholder { color: var(--ink-60); }
-.field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
-.field__input:focus-visible { outline: var(--rule-bold) solid var(--accent); outline-offset: 2px; }
-.field__input:disabled { color: var(--ink-30); cursor: not-allowed; }
-.field__input[aria-invalid="true"], .field__input.is-invalid { border-color: var(--signal-error); box-shadow: 0 0 0 1px var(--signal-error); }
-.field__hint { font-size: var(--size-small); color: var(--ink-60); }
-.field__hint.is-error, .field__hint--error { color: var(--signal-error); font-weight: var(--weight-medium); }
-textarea.field__input { resize: vertical; min-height: var(--space-12); line-height: var(--lh-body); }
-select.field__input { cursor: pointer; } /* native appearance keeps the platform chevron */
+  :where(:root:not([data-contrast="normal"])) .jd-field__input { border-color: var(--ink-100); }
+}
+:where([data-contrast="high"]) .jd-field__input { border-color: var(--ink-100); }
+@media (prefers-contrast: more) {
+  :where(:root:not([data-contrast="normal"])) :is(.jd-btn:not(.jd-btn--ghost), .jd-badge, .jd-tag) { border-color: var(--ink-100); }
+}
+:where([data-contrast="high"]) :is(.jd-btn:not(.jd-btn--ghost), .jd-badge, .jd-tag) { border-color: var(--ink-100); }
+.jd-field__input::placeholder { color: var(--ink-60); }
+.jd-field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.jd-field__input:focus-visible { outline: var(--rule-bold) solid var(--accent); outline-offset: 2px; }
+.jd-field__input:disabled { color: var(--ink-30); cursor: not-allowed; }
+.jd-field__input[aria-invalid="true"], .jd-field__input.is-invalid { border-color: var(--signal-error); box-shadow: 0 0 0 1px var(--signal-error); }
+.jd-field__hint { font-size: var(--size-small); color: var(--ink-60); }
+.jd-field__hint.is-error, .jd-field__hint--error { color: var(--signal-error); font-weight: var(--weight-medium); }
+textarea.jd-field__input { resize: vertical; min-height: var(--space-12); line-height: var(--lh-body); }
+select.jd-field__input { cursor: pointer; } /* native appearance keeps the platform chevron */
 
 /* ---- CARD -------------------------------------------------------------- */
-.card {
+.jd-card {
+  --jd-well: var(--paper); /* wells inside a card (secondary buttons, neutral badges, tags) fill with substrate */
   background: var(--white);
   border: none;
   border-radius: var(--radius-card);
@@ -106,97 +111,111 @@ select.field__input { cursor: pointer; } /* native appearance keeps the platform
   flex-direction: column;
   gap: var(--gap-normal);
 }
-.card--flat { border: none; padding: 0; border-radius: 0; }
-.card--compact { padding: var(--space-2); }
-.card--field { background: var(--bg2); border: none; }
-.card__eyebrow { color: var(--accent); } /* type comes from t-label */
-.card__title { font-size: var(--size-h4); font-weight: var(--weight-bold); letter-spacing: var(--track-head); }
-.card__body { font-size: var(--size-body); line-height: var(--lh-body); }
-.card__media { aspect-ratio: 3 / 2; background: var(--jd-surface-recessed); border-radius: var(--radius-control); overflow: hidden; }
+.jd-card--flat { border: none; padding: 0; border-radius: 0; }
+.jd-card--compact { padding: var(--space-2); }
+.jd-card--field { background: var(--bg2); border: none; }
+.jd-card__eyebrow { color: var(--accent); } /* type comes from t-label */
+.jd-card__title { font-size: var(--size-h4); font-weight: var(--weight-bold); letter-spacing: var(--track-head); }
+.jd-card__body { font-size: var(--size-body); line-height: var(--lh-body); }
+.jd-card__media { aspect-ratio: 3 / 2; background: var(--jd-surface-recessed); border-radius: var(--radius-control); overflow: hidden; }
 
 /* ---- BADGE / TAG ------------------------------------------------------- */
-.badge {
+/* Fill only, like buttons: a transparent resting border, an ink-100 outline in high-contrast modes.
+   The neutral badge and the tag are wells: surfaceRecessed on the page, substrate inside a card. */
+.jd-badge {
   display: inline-flex; align-items: center; gap: var(--gap-tight);
   font-family: var(--font-sans); font-weight: var(--weight-bold);
   font-size: var(--size-label); letter-spacing: var(--track-body);
-  padding: 4px var(--space-1); border: var(--rule) solid var(--line);
-  background: var(--white); color: var(--black); border-radius: var(--radius-badge); line-height: 1;
+  padding: 4px var(--space-1); border: var(--rule) solid transparent;
+  background: var(--jd-well, var(--jd-surface-recessed)); color: var(--black);
+  border-radius: var(--radius-badge); line-height: 1;
 }
-.badge--solid { background: var(--black); color: var(--paper); }
-.badge--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
-.badge--accent-outline { color: var(--accent-fg); border-color: var(--accent-fg); }
+.jd-badge--solid { background: var(--black); color: var(--paper); }
+.jd-badge--accent { background: var(--accent); color: var(--accent-ink); }
+/* A light tint of the accent (or of --jd-badge-accent) with ink-100 text. Tints belong to light mode,
+   so dark mode falls back to the neutral well. */
+.jd-badge--accent-tint {
+  background: color-mix(in oklch, var(--jd-badge-accent, var(--accent)) 14%, white);
+  color: var(--ink-100);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .jd-badge--accent-tint { background: var(--jd-well, var(--jd-surface-recessed)); }
+}
+[data-theme="dark"] .jd-badge--accent-tint,
+.palette-dark .jd-badge--accent-tint { background: var(--jd-well, var(--jd-surface-recessed)); }
 
-.tag {
+.jd-tag {
   display: inline-flex; align-items: center;
   font-size: var(--size-small); font-weight: var(--weight-medium);
-  padding: 4px var(--space-1); border: var(--rule) solid var(--line);
-  background: var(--white); border-radius: var(--radius-badge); line-height: 1.2;
+  padding: 4px var(--space-1); border: var(--rule) solid transparent;
+  background: var(--jd-well, var(--jd-surface-recessed)); color: var(--black);
+  border-radius: var(--radius-badge); line-height: 1.2;
 }
 
 /* ---- NAVBAR ------------------------------------------------------------ */
-.navbar {
+.jd-navbar {
   display: flex; align-items: center; justify-content: space-between;
   padding: var(--space-2) var(--space-3);
   border-bottom: var(--rule-bold) solid var(--line);
   background: var(--white);
 }
-.navbar__brand { font-weight: var(--weight-bold); font-size: var(--size-h4); letter-spacing: var(--track-head); }
-.navbar__links { display: flex; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
-.navbar__link {
+.jd-navbar__brand { font-weight: var(--weight-bold); font-size: var(--size-h4); letter-spacing: var(--track-head); }
+.jd-navbar__links { display: flex; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
+.jd-navbar__link {
   font-size: var(--size-small); font-weight: var(--weight-medium);
   border-bottom: var(--rule-bold) solid transparent;
   padding-bottom: 2px;
   transition: border-color 120ms linear;
 }
-.navbar__link:hover { border-bottom-color: var(--black); }
-.navbar__link[aria-current="page"] { border-bottom-color: var(--accent); }
+.jd-navbar__link:hover { border-bottom-color: var(--black); }
+.jd-navbar__link[aria-current="page"] { border-bottom-color: var(--accent); }
 
 /* ---- FOOTER ------------------------------------------------------------ */
-.footer {
+.jd-footer {
   border-top: var(--rule-bold) solid var(--line);
   padding: var(--space-6) var(--space-3) var(--space-3);
   background: var(--white);
   display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4);
 }
-.footer__col { display: flex; flex-direction: column; gap: var(--gap-tight); }
-.footer__head { margin: 0 0 var(--space-1); color: var(--black); } /* type comes from t-label */
-.footer__link { font-size: var(--size-small); color: var(--fg2); }
-.footer__link:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
+.jd-footer__col { display: flex; flex-direction: column; gap: var(--gap-tight); }
+.jd-footer__head { margin: 0 0 var(--space-1); color: var(--black); } /* type comes from t-label */
+.jd-footer__link { font-size: var(--size-small); color: var(--fg2); }
+.jd-footer__link:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
 
 /* ---- DATA TABLE -------------------------------------------------------- */
-.table { width: 100%; border-collapse: collapse; font-size: var(--size-small); }
-.table th {
+.jd-table { width: 100%; border-collapse: collapse; font-size: var(--size-small); }
+.jd-table th {
   text-align: left; font-weight: var(--weight-bold); font-size: var(--size-label);
   letter-spacing: var(--track-label); text-transform: uppercase;
   padding: var(--space-1) var(--space-2); border-bottom: var(--rule-bold) solid var(--line); color: var(--black);
 }
-.table td { padding: var(--space-2); border-bottom: var(--rule) solid var(--ink-30); color: var(--fg1); }
-.table tbody tr:hover { background: var(--jd-surface-recessed); }
-.table .num { text-align: right; font-variant-numeric: tabular-nums; }
+.jd-table td { padding: var(--space-2); border-bottom: var(--rule) solid var(--ink-30); color: var(--fg1); }
+.jd-table tbody tr:hover { background: var(--jd-surface-recessed); }
+.jd-table .num { text-align: right; font-variant-numeric: tabular-nums; }
 
 /* As-written casing for a field label or column header that holds a unit, a mixed-case term,
    or more than two words. */
-.field__label.t-as-written,
-.table th.t-as-written,
-.matrix th.t-as-written { text-transform: none; letter-spacing: var(--track-body); }
+.jd-field__label.t-as-written,
+.jd-table th.t-as-written,
+.jd-matrix th.t-as-written { text-transform: none; letter-spacing: var(--track-body); }
 
 /* ---- LOGO LOCKUP FRAME ------------------------------------------------- */
-.lockup { display: inline-flex; align-items: center; gap: var(--space-2); }
-.lockup--vertical { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
-.lockup--reversed { background: var(--black); color: var(--paper); padding: var(--space-3); }
-.lockup__mark { display: block; flex: none; }
-.lockup__words { display: flex; flex-direction: column; }
-.lockup__name { font-weight: var(--weight-bold); font-size: var(--size-h4); line-height: 1; letter-spacing: var(--track-head); }
-.lockup__tag { color: var(--fg2); margin-top: 4px; } /* type comes from t-label */
-.lockup--reversed .lockup__tag { color: var(--ink-30); }
+.jd-lockup { display: inline-flex; align-items: center; gap: var(--space-2); }
+.jd-lockup--vertical { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
+.jd-lockup--reversed { background: var(--black); color: var(--paper); padding: var(--space-3); }
+.jd-lockup__mark { display: block; flex: none; }
+.jd-lockup__words { display: flex; flex-direction: column; }
+.jd-lockup__name { font-weight: var(--weight-bold); font-size: var(--size-h4); line-height: 1; letter-spacing: var(--track-head); }
+.jd-lockup__tag { color: var(--fg2); margin-top: 4px; } /* type comes from t-label */
+.jd-lockup--reversed .jd-lockup__tag { color: var(--ink-30); }
 
 /* ---- DATA MATRIX ------------------------------------------------------- */
-.matrix {
+.jd-matrix {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--size-small);
 }
-.matrix th {
+.jd-matrix th {
   text-align: left;
   font-weight: var(--weight-bold);
   font-size: var(--size-label);
@@ -208,44 +227,66 @@ select.field__input { cursor: pointer; } /* native appearance keeps the platform
   background: var(--white);
   color: var(--black);
 }
-.matrix th:last-child { border-right: none; }
-.matrix td {
+.jd-matrix th:last-child { border-right: none; }
+.jd-matrix td {
   padding: var(--space-1) var(--space-2);
   border-right: var(--rule) solid var(--ink-30);
   border-bottom: var(--rule) solid var(--ink-30);
   color: var(--fg1);
 }
-.matrix td:last-child { border-right: none; }
-.matrix tbody tr:last-child td { border-bottom: none; }
-.matrix tbody tr:hover td { background: var(--jd-surface-recessed); }
-.matrix .num { text-align: right; font-variant-numeric: tabular-nums; }
+.jd-matrix td:last-child { border-right: none; }
+.jd-matrix tbody tr:last-child td { border-bottom: none; }
+.jd-matrix tbody tr:hover td { background: var(--jd-surface-recessed); }
+.jd-matrix .num { text-align: right; font-variant-numeric: tabular-nums; }
+
+/* ---- LIST -------------------------------------------------------------- */
+/* Items of text get markers (DESIGN.md, Lists): bullets on ul, numbers on ol, in secondary ink,
+   hanging so wrapped lines align with the text. Items are spaced with margins, not gap,
+   so the list sits inside .flow as one block. The indent fits two-digit numbers on ol.
+   The margin reset has zero specificity, so .flow's space before and after the list still applies. */
+:where(.jd-list) { margin: 0; }
+.jd-list {
+  padding-inline-start: var(--jd-space-3);
+  max-width: var(--jd-measure-body);
+  list-style-type: disc;
+}
+ol.jd-list { list-style-type: decimal; padding-inline-start: var(--jd-space-4); }
+.jd-list > li + li { margin-block-start: var(--jd-space-1); }
+.jd-list > li::marker { color: var(--jd-ink-60); font-variant-numeric: tabular-nums; }
+.jd-card .jd-list { max-width: var(--jd-measure-compact); }
+/* One nested level: hollow bullets, same ink, spacing and indent. */
+.jd-list .jd-list { margin-block-start: var(--jd-space-1); max-width: none; }
+ul.jd-list ul.jd-list { list-style-type: circle; }
+/* Rows of links, data or controls: no markers, no indent, set apart by spacing.
+   Give the element role="list": Safari and VoiceOver drop list semantics without markers. */
+.jd-list.jd-list--plain { list-style: none; padding-inline-start: 0; }
 
 /* ---- HIGH CONTRAST RULE SCALING ---------------------------------------- */
 @media (prefers-contrast: more) {
-  .matrix th,
-  .matrix td {
+  .jd-matrix th,
+  .jd-matrix td {
     border-right-width: var(--jd-rule-bold);
     border-bottom-width: var(--jd-rule-bold);
   }
-  .table th,
-  .table td {
+  .jd-table th,
+  .jd-table td {
     border-bottom-width: var(--jd-rule-bold);
   }
-  .field__input {
+  .jd-field__input {
     border-width: var(--jd-rule-bold);
   }
 }
 
-[data-contrast="high"] .matrix th,
-[data-contrast="high"] .matrix td {
+[data-contrast="high"] .jd-matrix th,
+[data-contrast="high"] .jd-matrix td {
   border-right-width: var(--jd-rule-bold);
   border-bottom-width: var(--jd-rule-bold);
 }
-[data-contrast="high"] .table th,
-[data-contrast="high"] .table td {
+[data-contrast="high"] .jd-table th,
+[data-contrast="high"] .jd-table td {
   border-bottom-width: var(--jd-rule-bold);
 }
-[data-contrast="high"] .field__input {
+[data-contrast="high"] .jd-field__input {
   border-width: var(--jd-rule-bold);
 }