@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/components/__stories__/story-components/Spacing.cjs

@@ -0,0 +1,190 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Spacing.module.css');
+var Headline = require('@/components/headline/Headline');
+var CopyButton = require('@/components/copy-button/CopyButton');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const SIZES = ["xxs", "xs", "sm", "md", "lg", "xl", "2xl"];
+const AXES = ["all", "block", "inline", "top", "bottom", "start", "end"];
+const SIZE_PX = {
+  xxs: "4px",
+  xs: "8px",
+  sm: "12px",
+  md: "16px",
+  lg: "24px",
+  xl: "32px",
+  "2xl": "48px"
+};
+const CLASS_PARTS = {
+  padding: {
+    all: "p",
+    block: "py",
+    inline: "px",
+    top: "pt",
+    bottom: "pb",
+    start: "ps",
+    end: "pe"
+  },
+  margin: {
+    all: "m",
+    block: "my",
+    inline: "mx",
+    top: "mt",
+    bottom: "mb",
+    start: "ms",
+    end: "me"
+  }
+};
+const HAS_SINGLE_SIDE_FOR = (size) => size !== "2xl";
+function makeClass(kind, axis, size) {
+  if ((axis === "top" || axis === "bottom" || axis === "start" || axis === "end") && !HAS_SINGLE_SIDE_FOR(size)) {
+    return null;
+  }
+  const part = CLASS_PARTS[kind][axis];
+  return `dbc-${part}-${size}`;
+}
+function Code({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles__default.default.code, children });
+}
+const ContentBlock = ({ helperClass }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: `${styles__default.default.contentBlock} dbc-flex dbc-gap-xxs dbc-justify-center ${helperClass} dbc-items-center`,
+    children: [
+      helperClass,
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { text: helperClass, variant: "inline", size: "sm" })
+    ]
+  }
+);
+function PaddingPreview({ cls }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.paddingPreview} ${cls}`, children: /* @__PURE__ */ jsxRuntime.jsx(ContentBlock, { helperClass: cls }) });
+}
+function MarginPreview({ cls }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.marginCanvas, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.marginBlock} ${cls}`, children: /* @__PURE__ */ jsxRuntime.jsx(ContentBlock, { helperClass: cls }) }) });
+}
+function Cell({ kind, axis, size }) {
+  const cls = makeClass(kind, axis, size);
+  if (!cls) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.unavailable, children: "\u2014" });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellInner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellPreview, children: kind === "padding" ? /* @__PURE__ */ jsxRuntime.jsx(PaddingPreview, { cls }) : /* @__PURE__ */ jsxRuntime.jsx(MarginPreview, { cls }) }) });
+}
+function Grid({ kind, title, severity }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: styles__default.default.section, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { marker: true, severity, disableMargin: true, size: 2, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tableContainer, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: styles__default.default.table, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: styles__default.default.axisCol, children: "Axis" }),
+        SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsxs("th", { className: styles__default.default.sizeHead, children: [
+          size,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sizePx, children: [
+            "(",
+            SIZE_PX[size],
+            ")"
+          ] })
+        ] }, size))
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: AXES.map((axis) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: styles__default.default.axisHead, children: axis }),
+        SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: styles__default.default.cell, children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { kind, axis, size }) }, size))
+      ] }, axis)) })
+    ] }) })
+  ] });
+}
+function Spacing() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: styles__default.default.container,
+      style: {
+        ["--pad-indicator"]: "var(--color-bg-info)",
+        ["--pad-border"]: "var(--color-info)",
+        ["--margin-indicator"]: "var(--color-bg-warning)",
+        ["--margin-border"]: "var(--color-warning)",
+        ["--dot-pad"]: "var(--color-bg-selected)",
+        ["--dot-mar"]: "var(--opac-bg-default)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("header", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, children: "Spacing helpers" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("section", { className: styles__default.default.intro, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: styles__default.default.h2, children: "Naming Convention" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles__default.default.paragraph, children: [
+            "Spacing helpers follow a simple ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "prefix\u2013axis\u2013size" }),
+            " pattern:"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.example, children: /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "dbc-[prefix][axis?]-[size]" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles__default.default.list, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Prefix" }),
+              ": ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "p" }),
+              " for ",
+              /* @__PURE__ */ jsxRuntime.jsx("em", { children: "padding" }),
+              ", ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "m" }),
+              " for",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("em", { children: "margin" }),
+              "."
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Axis" }),
+              " (optional): ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "x" }),
+              " = inline (left + right), ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "y" }),
+              " ",
+              "= block (top + bottom), or single sides ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "t" }),
+              " / ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "b" }),
+              " / ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "s" }),
+              " ",
+              "/ ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "e" }),
+              "."
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Size" }),
+              ": one of ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "xxs" }),
+              ", ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "xs" }),
+              ", ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "sm" }),
+              ",",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "md" }),
+              ", ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "lg" }),
+              ", ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "xl" }),
+              ", ",
+              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "2xl" }),
+              "."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles__default.default.paragraph, children: [
+            "For example: ",
+            /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "dbc-px-md" }),
+            " adds medium horizontal padding, while",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "dbc-mt-lg" }),
+            " adds a large top margin."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid, { kind: "padding", title: "Padding", severity: "info" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid, { kind: "margin", title: "Margin", severity: "warning" })
+      ]
+    }
+  );
+}
+
+exports.Spacing = Spacing;

package/dist/components/__stories__/story-components/Spacing.d.ts

@@ -0,0 +1 @@
+export declare function Spacing(): JSX.Element;

package/dist/components/__stories__/story-components/Spacing.js

@@ -0,0 +1,184 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Spacing.module.css';
+import { Headline } from '@/components/headline/Headline';
+import { CopyButton } from '@/components/copy-button/CopyButton';
+
+const SIZES = ["xxs", "xs", "sm", "md", "lg", "xl", "2xl"];
+const AXES = ["all", "block", "inline", "top", "bottom", "start", "end"];
+const SIZE_PX = {
+  xxs: "4px",
+  xs: "8px",
+  sm: "12px",
+  md: "16px",
+  lg: "24px",
+  xl: "32px",
+  "2xl": "48px"
+};
+const CLASS_PARTS = {
+  padding: {
+    all: "p",
+    block: "py",
+    inline: "px",
+    top: "pt",
+    bottom: "pb",
+    start: "ps",
+    end: "pe"
+  },
+  margin: {
+    all: "m",
+    block: "my",
+    inline: "mx",
+    top: "mt",
+    bottom: "mb",
+    start: "ms",
+    end: "me"
+  }
+};
+const HAS_SINGLE_SIDE_FOR = (size) => size !== "2xl";
+function makeClass(kind, axis, size) {
+  if ((axis === "top" || axis === "bottom" || axis === "start" || axis === "end") && !HAS_SINGLE_SIDE_FOR(size)) {
+    return null;
+  }
+  const part = CLASS_PARTS[kind][axis];
+  return `dbc-${part}-${size}`;
+}
+function Code({ children }) {
+  return /* @__PURE__ */ jsx("code", { className: styles.code, children });
+}
+const ContentBlock = ({ helperClass }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `${styles.contentBlock} dbc-flex dbc-gap-xxs dbc-justify-center ${helperClass} dbc-items-center`,
+    children: [
+      helperClass,
+      " ",
+      /* @__PURE__ */ jsx(CopyButton, { text: helperClass, variant: "inline", size: "sm" })
+    ]
+  }
+);
+function PaddingPreview({ cls }) {
+  return /* @__PURE__ */ jsx("div", { className: `${styles.paddingPreview} ${cls}`, children: /* @__PURE__ */ jsx(ContentBlock, { helperClass: cls }) });
+}
+function MarginPreview({ cls }) {
+  return /* @__PURE__ */ jsx("div", { className: styles.marginCanvas, children: /* @__PURE__ */ jsx("div", { className: `${styles.marginBlock} ${cls}`, children: /* @__PURE__ */ jsx(ContentBlock, { helperClass: cls }) }) });
+}
+function Cell({ kind, axis, size }) {
+  const cls = makeClass(kind, axis, size);
+  if (!cls) return /* @__PURE__ */ jsx("div", { className: styles.unavailable, children: "\u2014" });
+  return /* @__PURE__ */ jsx("div", { className: styles.cellInner, children: /* @__PURE__ */ jsx("div", { className: styles.cellPreview, children: kind === "padding" ? /* @__PURE__ */ jsx(PaddingPreview, { cls }) : /* @__PURE__ */ jsx(MarginPreview, { cls }) }) });
+}
+function Grid({ kind, title, severity }) {
+  return /* @__PURE__ */ jsxs("section", { className: styles.section, children: [
+    /* @__PURE__ */ jsx(Headline, { marker: true, severity, disableMargin: true, size: 2, children: title }),
+    /* @__PURE__ */ jsx("div", { className: styles.tableContainer, children: /* @__PURE__ */ jsxs("table", { className: styles.table, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: styles.axisCol, children: "Axis" }),
+        SIZES.map((size) => /* @__PURE__ */ jsxs("th", { className: styles.sizeHead, children: [
+          size,
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: styles.sizePx, children: [
+            "(",
+            SIZE_PX[size],
+            ")"
+          ] })
+        ] }, size))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: AXES.map((axis) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: styles.axisHead, children: axis }),
+        SIZES.map((size) => /* @__PURE__ */ jsx("td", { className: styles.cell, children: /* @__PURE__ */ jsx(Cell, { kind, axis, size }) }, size))
+      ] }, axis)) })
+    ] }) })
+  ] });
+}
+function Spacing() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.container,
+      style: {
+        ["--pad-indicator"]: "var(--color-bg-info)",
+        ["--pad-border"]: "var(--color-info)",
+        ["--margin-indicator"]: "var(--color-bg-warning)",
+        ["--margin-border"]: "var(--color-warning)",
+        ["--dot-pad"]: "var(--color-bg-selected)",
+        ["--dot-mar"]: "var(--opac-bg-default)"
+      },
+      children: [
+        /* @__PURE__ */ jsx("header", { className: styles.header, children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, children: "Spacing helpers" }) }),
+        /* @__PURE__ */ jsxs("section", { className: styles.intro, children: [
+          /* @__PURE__ */ jsx("h2", { className: styles.h2, children: "Naming Convention" }),
+          /* @__PURE__ */ jsxs("p", { className: styles.paragraph, children: [
+            "Spacing helpers follow a simple ",
+            /* @__PURE__ */ jsx("strong", { children: "prefix\u2013axis\u2013size" }),
+            " pattern:"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.example, children: /* @__PURE__ */ jsx(Code, { children: "dbc-[prefix][axis?]-[size]" }) }),
+          /* @__PURE__ */ jsxs("ul", { className: styles.list, children: [
+            /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx("strong", { children: "Prefix" }),
+              ": ",
+              /* @__PURE__ */ jsx(Code, { children: "p" }),
+              " for ",
+              /* @__PURE__ */ jsx("em", { children: "padding" }),
+              ", ",
+              /* @__PURE__ */ jsx(Code, { children: "m" }),
+              " for",
+              " ",
+              /* @__PURE__ */ jsx("em", { children: "margin" }),
+              "."
+            ] }),
+            /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx("strong", { children: "Axis" }),
+              " (optional): ",
+              /* @__PURE__ */ jsx(Code, { children: "x" }),
+              " = inline (left + right), ",
+              /* @__PURE__ */ jsx(Code, { children: "y" }),
+              " ",
+              "= block (top + bottom), or single sides ",
+              /* @__PURE__ */ jsx(Code, { children: "t" }),
+              " / ",
+              /* @__PURE__ */ jsx(Code, { children: "b" }),
+              " / ",
+              /* @__PURE__ */ jsx(Code, { children: "s" }),
+              " ",
+              "/ ",
+              /* @__PURE__ */ jsx(Code, { children: "e" }),
+              "."
+            ] }),
+            /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx("strong", { children: "Size" }),
+              ": one of ",
+              /* @__PURE__ */ jsx(Code, { children: "xxs" }),
+              ", ",
+              /* @__PURE__ */ jsx(Code, { children: "xs" }),
+              ", ",
+              /* @__PURE__ */ jsx(Code, { children: "sm" }),
+              ",",
+              " ",
+              /* @__PURE__ */ jsx(Code, { children: "md" }),
+              ", ",
+              /* @__PURE__ */ jsx(Code, { children: "lg" }),
+              ", ",
+              /* @__PURE__ */ jsx(Code, { children: "xl" }),
+              ", ",
+              /* @__PURE__ */ jsx(Code, { children: "2xl" }),
+              "."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: styles.paragraph, children: [
+            "For example: ",
+            /* @__PURE__ */ jsx(Code, { children: "dbc-px-md" }),
+            " adds medium horizontal padding, while",
+            " ",
+            /* @__PURE__ */ jsx(Code, { children: "dbc-mt-lg" }),
+            " adds a large top margin."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Grid, { kind: "padding", title: "Padding", severity: "info" }),
+        /* @__PURE__ */ jsx(Grid, { kind: "margin", title: "Margin", severity: "warning" })
+      ]
+    }
+  );
+}
+
+export { Spacing };

package/dist/components/__stories__/story-components/Spacing.module.css

@@ -0,0 +1,154 @@
+/* Layout */
+.container {
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  color: var(--color-text);
+}
+
+/* Intro copy */
+.intro {
+  display: grid;
+  gap: 0.5rem;
+}
+.paragraph {
+  color: var(--color-text-secondary, #374151);
+}
+.example {
+  margin-top: 0.25rem;
+}
+.list {
+  margin: 0.5rem 0 0 1rem;
+  display: grid;
+  gap: 0.25rem;
+}
+
+.section {
+  display: grid;
+  gap: 1rem;
+}
+.h2 {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #27272a;
+}
+
+.tableContainer {
+  overflow: auto;
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  overflow: auto;
+  font-size: var(--font-size-sm);
+}
+
+.axisCol {
+  width: 90px;
+  text-align: left;
+  padding: 0.625rem 0.75rem;
+  color: var(--color-text-muted);
+  font-weight: 500;
+  background: var(--color-background);
+}
+
+.axisHead {
+  text-align: left;
+  padding: 0.625rem 0.75rem;
+  color: var(--color-text-secondary, #374151);
+  font-weight: 500;
+  background: var(--opac-bg-light, rgba(0, 0, 0, 0.025));
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+.sizeHead {
+  text-align: center;
+  padding: 0.5rem 0.5rem;
+  font-weight: 600;
+  color: var(--color-text, #1a1a1a);
+  white-space: nowrap;
+  background: var(--color-surface, #fff);
+  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
+}
+.sizePx {
+  font-weight: 400;
+  color: var(--color-text-muted, #5f6368);
+  margin-left: 0.25rem;
+}
+
+.table tbody tr:nth-child(odd) {
+  background: var(--bg-color);
+}
+.table tbody tr:nth-child(even) {
+  background: var(--opac-bg-default);
+}
+
+.cell {
+  vertical-align: middle;
+  padding: var(--spacing-xs);
+}
+
+.cellInner {
+  display: grid;
+  gap: var(--spacing-xxs);
+  align-items: center;
+  justify-items: center;
+}
+
+.cellPreview {
+  width: min(200px, 100%);
+}
+
+.code {
+  border-radius: var(--border-radius-default);
+  background: var(--color-bg-default);
+  padding: 0 var(--spacing-xs);
+  line-height: 1.5;
+  font-size: 12px;
+  font-family: var(--font-family-mono, monospace);
+  color: var(--color-text-secondary);
+  box-shadow: var(--shadow-xs);
+}
+
+.contentBlock {
+  border-radius: var(--border-radius-md, 0.375rem);
+  background: var(--color-background);
+  text-align: center;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  box-shadow: var(--shadow-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.paddingPreview {
+  width: 100%;
+  border-radius: var(--border-radius-md, 0.375rem);
+  background: var(--pad-indicator, var(--color-bg-selected));
+  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
+  outline: 1px solid var(--pad-border, var(--color-border-selected));
+}
+
+.marginCanvas {
+  width: 100%;
+  position: relative;
+  display: inline-block;
+  border-radius: var(--border-radius-md, 0.375rem);
+  background: var(--margin-indicator, var(--opac-bg-default));
+  outline: 1px solid var(--margin-border, var(--color-border));
+}
+
+.marginBlock {
+  border-radius: var(--border-radius-md, 0.375rem);
+  background: var(--color-background, #fff);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+}

package/dist/components/app-header/AppHeader.module.css

@@ -1,7 +1,3 @@
-/* =========================
-   AppHeader (owns the chrome)
-   ========================= */
-
 .container {
   /* layout */
   display: flex;
@@ -11,21 +7,20 @@
 
   /* sizing */
   inline-size: 100%;
-  min-block-size: 60px; /* preserve your previous height */
+  min-block-size: 60px;
   box-sizing: border-box;
 
   /* chrome */
-  background-color: var(--color-surface);
-  color: var(--color-text);
-  border-block-end: var(--border-width-thin) solid var(--color-border);
+  background-color: var(--color-bg-surface);
+  color: var(--color-fg-default);
+  border-block-end: var(--border-width-thin) solid var(--color-border-default);
 
   /* density-aware vertical rhythm */
   padding-block: calc(var(--control-padding-y) + var(--density));
-  padding-inline: var(--spacing-lg);
+  padding-inline: var(--spacing-md);
 }
 
-/* Optional content wrapper if you want to constrain width
-   (use in JSX: <AppHeader><div className={styles.inner}>…</div></AppHeader>) */
+/* Optional content wrapper */
 .inner {
   inline-size: min(100%, var(--container-xl));
   margin-inline: auto;
@@ -36,7 +31,7 @@
   gap: var(--spacing-lg);
 }
 
-/* Slots (optional utility classes) */
+/* Slots */
 .start,
 .center,
 .end {
@@ -55,19 +50,19 @@
   box-shadow: var(--focus-ring);
 }
 
-/* Elevated header (e.g., when page scrolls) */
+/* Elevated header */
 .elevated {
   border-block-end: 0;
   box-shadow: var(--shadow-sm);
 }
 
-/* Transparent header (e.g., over hero image) */
+/* Transparent header */
 .transparent {
   background-color: transparent;
   border-block-end: 0;
 }
 
-/* Condensed density option (keeps chrome in one place) */
+/* Condensed density option */
 :root[data-density='compact'] .container {
   padding-inline: var(--spacing-md);
 }

package/dist/components/attribute-chip/AttributeChip.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./AttributeChip.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function AttributeChip({
+  label,
+  value,
+  size = "md",
+  loading
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${styles__default.default[size]}`, "aria-busy": loading, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+  ] });
+}
+
+exports.AttributeChip = AttributeChip;

package/dist/components/attribute-chip/AttributeChip.d.ts

@@ -0,0 +1,8 @@
+interface AttributeChipProps {
+    label: string;
+    value: string | number | boolean;
+    loading?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function AttributeChip({ label, value, size, loading, }: AttributeChipProps): JSX.Element;
+export {};

package/dist/components/attribute-chip/AttributeChip.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './AttributeChip.module.css';
+
+function AttributeChip({
+  label,
+  value,
+  size = "md",
+  loading
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles[size]}`, "aria-busy": loading, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+    /* @__PURE__ */ jsx("span", { className: styles.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+  ] });
+}
+
+export { AttributeChip };