@lablup/ui-common 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/components/Skeleton/SkeletonCard2.js

@@ -2,29 +2,33 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css             */
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonCard.tsx
-function i({ variant: i = "default", className: a = "", testId: o }) {
-	let s = [
+function i({ variant: i = "default", className: a = "", testId: o, loadingLabel: s }) {
+	let c = [
 		"skeleton-card",
 		`skeleton-card--${i}`,
 		a
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ n("div", {
-		className: s,
+		className: c,
 		"data-testid": o,
 		role: "status",
 		"aria-busy": "true",
+		"aria-label": s ?? "Loading",
 		children: i === "stat" ? /* @__PURE__ */ n(t, { children: /* @__PURE__ */ r("div", {
 			className: "skeleton-card__header",
 			children: [/* @__PURE__ */ n(e, {
+				decorative: !0,
 				width: "48px",
 				height: "48px",
 				variant: "circle"
 			}), /* @__PURE__ */ r("div", {
 				className: "skeleton-card__header-text",
 				children: [/* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "60%",
 					height: "16px"
 				}), /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "40%",
 					height: "24px"
 				})]
@@ -33,6 +37,7 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
 			/* @__PURE__ */ n("div", {
 				className: "skeleton-card__header",
 				children: /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "70%",
 					height: "20px"
 				})
@@ -41,14 +46,17 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
 				className: "skeleton-card__content",
 				children: [
 					/* @__PURE__ */ n(e, {
+						decorative: !0,
 						width: "100%",
 						height: "16px"
 					}),
 					/* @__PURE__ */ n(e, {
+						decorative: !0,
 						width: "90%",
 						height: "16px"
 					}),
 					/* @__PURE__ */ n(e, {
+						decorative: !0,
 						width: "80%",
 						height: "16px"
 					})
@@ -57,9 +65,11 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
 			i !== "compact" && /* @__PURE__ */ r("div", {
 				className: "skeleton-card__footer",
 				children: [/* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "80px",
 					height: "32px"
 				}), /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "80px",
 					height: "32px"
 				})]

package/dist/components/Skeleton/SkeletonCard2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonCard.tsx"],"sourcesContent":["/**\n * SkeletonCard Component\n *\n * Skeleton placeholder for card components (model cards, stat cards, etc.).\n * Mimics the structure of a typical card with header, content, and footer areas.\n *\n * @example\n * // Basic usage\n * <SkeletonCard />\n *\n * @example\n * // Compact variant\n * <SkeletonCard variant=\"compact\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonCard.css\";\n\nexport interface SkeletonCardProps {\n  /** Card size variant */\n  variant?: \"default\" | \"compact\" | \"stat\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonCard provides a loading placeholder for card components.\n *\n * Variants:\n * - default: Full card with header, content, and footer\n * - compact: Smaller card with reduced padding\n * - stat: Statistics card layout\n */\nexport function SkeletonCard({\n  variant = \"default\",\n  className = \"\",\n  testId,\n}: SkeletonCardProps) {\n  const classNames = [\"skeleton-card\", `skeleton-card--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {variant === \"stat\" ? (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton width=\"48px\" height=\"48px\" variant=\"circle\" />\n            <div className=\"skeleton-card__header-text\">\n              <Skeleton width=\"60%\" height=\"16px\" />\n              <Skeleton width=\"40%\" height=\"24px\" />\n            </div>\n          </div>\n        </>\n      ) : (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton width=\"70%\" height=\"20px\" />\n          </div>\n          <div className=\"skeleton-card__content\">\n            <Skeleton width=\"100%\" height=\"16px\" />\n            <Skeleton width=\"90%\" height=\"16px\" />\n            <Skeleton width=\"80%\" height=\"16px\" />\n          </div>\n          {variant !== \"compact\" && (\n            <div className=\"skeleton-card__footer\">\n              <Skeleton width=\"80px\" height=\"32px\" />\n              <Skeleton width=\"80px\" height=\"32px\" />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonCard;\n"],"mappings":";;;;AAmCA,SAAgB,EAAa,EAC3B,aAAU,WACV,eAAY,IACZ,aACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,MAAY,SACX,kBAAA,GAAA,EAAA,UACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAU,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GACvD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,GACrC,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,CAClC;GACF,CAAA,CAAA;EACL,CAAA,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA;GAClC,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;KAAQ,CAAA;KACtC,kBAAC,GAAD;MAAU,OAAM;MAAM,QAAO;KAAQ,CAAA;KACrC,kBAAC,GAAD;MAAU,OAAM;MAAM,QAAO;KAAQ,CAAA;IAClC;;GACJ,MAAY,aACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,GACtC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;EAEP,EAAA,CAAA;CAED,CAAA;AAET"}
+{"version":3,"file":"SkeletonCard2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonCard.tsx"],"sourcesContent":["/**\n * SkeletonCard Component\n *\n * Skeleton placeholder for card components (model cards, stat cards, etc.).\n * Mimics the structure of a typical card with header, content, and footer areas.\n *\n * @example\n * // Basic usage\n * <SkeletonCard />\n *\n * @example\n * // Compact variant\n * <SkeletonCard variant=\"compact\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonCard.css\";\n\nexport interface SkeletonCardProps {\n  /** Card size variant */\n  variant?: \"default\" | \"compact\" | \"stat\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name announced for the placeholder as a whole. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonCard provides a loading placeholder for card components.\n *\n * Variants:\n * - default: Full card with header, content, and footer\n * - compact: Smaller card with reduced padding\n * - stat: Statistics card layout\n */\nexport function SkeletonCard({\n  variant = \"default\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonCardProps) {\n  const classNames = [\"skeleton-card\", `skeleton-card--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel ?? \"Loading\"}\n    >\n      {variant === \"stat\" ? (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton decorative width=\"48px\" height=\"48px\" variant=\"circle\" />\n            <div className=\"skeleton-card__header-text\">\n              <Skeleton decorative width=\"60%\" height=\"16px\" />\n              <Skeleton decorative width=\"40%\" height=\"24px\" />\n            </div>\n          </div>\n        </>\n      ) : (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton decorative width=\"70%\" height=\"20px\" />\n          </div>\n          <div className=\"skeleton-card__content\">\n            <Skeleton decorative width=\"100%\" height=\"16px\" />\n            <Skeleton decorative width=\"90%\" height=\"16px\" />\n            <Skeleton decorative width=\"80%\" height=\"16px\" />\n          </div>\n          {variant !== \"compact\" && (\n            <div className=\"skeleton-card__footer\">\n              <Skeleton decorative width=\"80px\" height=\"32px\" />\n              <Skeleton decorative width=\"80px\" height=\"32px\" />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonCard;\n"],"mappings":";;;;AAqCA,SAAgB,EAAa,EAC3B,aAAU,WACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY,KAAgB;EAE3B,UAAA,MAAY,SACX,kBAAA,GAAA,EAAA,UACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAU,YAAA;IAAW,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GAClE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAM,QAAO;IAAQ,CAAA,GAChD,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAM,QAAO;IAAQ,CAAA,CAC7C;GACF,CAAA,CAAA;EACL,CAAA,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAM,QAAO;IAAQ,CAAA;GAC7C,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAU,YAAA;MAAW,OAAM;MAAO,QAAO;KAAQ,CAAA;KACjD,kBAAC,GAAD;MAAU,YAAA;MAAW,OAAM;MAAM,QAAO;KAAQ,CAAA;KAChD,kBAAC,GAAD;MAAU,YAAA;MAAW,OAAM;MAAM,QAAO;KAAQ,CAAA;IAC7C;;GACJ,MAAY,aACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;IAAQ,CAAA,GACjD,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC9C;;EAEP,EAAA,CAAA;CAED,CAAA;AAET"}

package/dist/components/Skeleton/SkeletonChart2.js

@@ -18,6 +18,7 @@ function r({ variant: r = "bar", height: i = "300px", className: a = "", testId:
 		children: r === "pie" ? /* @__PURE__ */ n("div", {
 			className: "skeleton-chart__pie",
 			children: [/* @__PURE__ */ t(e, {
+				decorative: !0,
 				width: "100%",
 				height: "100%",
 				variant: "circle"
@@ -26,10 +27,12 @@ function r({ variant: r = "bar", height: i = "300px", className: a = "", testId:
 				children: Array.from({ length: 4 }).map((r, i) => /* @__PURE__ */ n("div", {
 					className: "skeleton-chart__legend-item",
 					children: [/* @__PURE__ */ t(e, {
+						decorative: !0,
 						width: "16px",
 						height: "16px",
 						variant: "circle"
 					}), /* @__PURE__ */ t(e, {
+						decorative: !0,
 						width: "80px",
 						height: "14px"
 					})]
@@ -47,6 +50,7 @@ function r({ variant: r = "bar", height: i = "300px", className: a = "", testId:
 				85,
 				65
 			].map((n, r) => /* @__PURE__ */ t(e, {
+				decorative: !0,
 				width: "100%",
 				height: `${String(n)}%`,
 				className: "skeleton-chart__bar"
@@ -54,6 +58,7 @@ function r({ variant: r = "bar", height: i = "300px", className: a = "", testId:
 		}) : /* @__PURE__ */ t("div", {
 			className: "skeleton-chart__line",
 			children: /* @__PURE__ */ t(e, {
+				decorative: !0,
 				width: "100%",
 				height: "100%"
 			})

package/dist/components/Skeleton/SkeletonChart2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonChart2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonChart.tsx"],"sourcesContent":["/**\n * SkeletonChart Component\n *\n * Skeleton placeholder for chart components.\n * Shows a simplified chart-like shape with bars or circular elements.\n *\n * @example\n * // Bar chart skeleton\n * <SkeletonChart variant=\"bar\" />\n *\n * @example\n * // Pie chart skeleton\n * <SkeletonChart variant=\"pie\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonChart.css\";\n\nexport interface SkeletonChartProps {\n  /** Chart type variant */\n  variant?: \"bar\" | \"line\" | \"pie\" | \"area\";\n  /** Chart height */\n  height?: string;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible label announced while the chart is loading. Default: \"Loading chart\" */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonChart provides a loading placeholder for chart components.\n *\n * Variants:\n * - bar: Vertical bars of varying heights\n * - line: Line graph placeholder\n * - pie: Circular chart placeholder\n * - area: Area chart placeholder\n */\nexport function SkeletonChart({\n  variant = \"bar\",\n  height = \"300px\",\n  className = \"\",\n  testId,\n  loadingLabel = \"Loading chart\",\n}: SkeletonChartProps) {\n  const classNames = [\"skeleton-chart\", `skeleton-chart--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      style={{ height }}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel}\n    >\n      {variant === \"pie\" ? (\n        <div className=\"skeleton-chart__pie\">\n          <Skeleton width=\"100%\" height=\"100%\" variant=\"circle\" />\n          <div className=\"skeleton-chart__legend\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"skeleton-chart__legend-item\">\n                <Skeleton width=\"16px\" height=\"16px\" variant=\"circle\" />\n                <Skeleton width=\"80px\" height=\"14px\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      ) : variant === \"bar\" ? (\n        <div className=\"skeleton-chart__bars\">\n          {[60, 80, 45, 90, 70, 55, 85, 65].map((barHeight, i) => (\n            <Skeleton\n              key={i}\n              width=\"100%\"\n              height={`${String(barHeight)}%`}\n              className=\"skeleton-chart__bar\"\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"skeleton-chart__line\">\n          <Skeleton width=\"100%\" height=\"100%\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonChart;\n"],"mappings":";;;;AAwCA,SAAgB,EAAc,EAC5B,aAAU,OACV,YAAS,SACT,eAAY,IACZ,WACA,kBAAe,mBACM;CACrB,IAAM,IAAa;EAAC;EAAkB,mBAAmB;EAAW;CAAS,CAAC,CAC3E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO,EAAE,UAAO;EAChB,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY;EAEX,UAAA,MAAY,QACX,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAU,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GACvD,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,MACjC,kBAAC,OAAD;KAAa,WAAU;KAAvB,UAAA,CACE,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;MAAO,SAAQ;KAAU,CAAA,GACvD,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;KAAQ,CAAA,CACnC;IAHK,GAAA,CAGL,CACN;GACE,CAAA,CACF;EACH,CAAA,IAAA,MAAY,QACd,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;GAAE,CAAC,CAAC,KAAK,GAAW,MAChD,kBAAC,GAAD;IAEE,OAAM;IACN,QAAQ,GAAG,OAAO,CAAS,EAAE;IAC7B,WAAU;GACX,GAJM,CAIN,CACF;EACE,CAAA,IAEL,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IAAU,OAAM;IAAO,QAAO;GAAQ,CAAA;EACnC,CAAA;CAEJ,CAAA;AAET"}
+{"version":3,"file":"SkeletonChart2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonChart.tsx"],"sourcesContent":["/**\n * SkeletonChart Component\n *\n * Skeleton placeholder for chart components.\n * Shows a simplified chart-like shape with bars or circular elements.\n *\n * @example\n * // Bar chart skeleton\n * <SkeletonChart variant=\"bar\" />\n *\n * @example\n * // Pie chart skeleton\n * <SkeletonChart variant=\"pie\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonChart.css\";\n\nexport interface SkeletonChartProps {\n  /** Chart type variant */\n  variant?: \"bar\" | \"line\" | \"pie\" | \"area\";\n  /** Chart height */\n  height?: string;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible label announced while the chart is loading. Default: \"Loading chart\" */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonChart provides a loading placeholder for chart components.\n *\n * Variants:\n * - bar: Vertical bars of varying heights\n * - line: Line graph placeholder\n * - pie: Circular chart placeholder\n * - area: Area chart placeholder\n */\nexport function SkeletonChart({\n  variant = \"bar\",\n  height = \"300px\",\n  className = \"\",\n  testId,\n  loadingLabel = \"Loading chart\",\n}: SkeletonChartProps) {\n  const classNames = [\"skeleton-chart\", `skeleton-chart--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      style={{ height }}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel}\n    >\n      {variant === \"pie\" ? (\n        <div className=\"skeleton-chart__pie\">\n          <Skeleton decorative width=\"100%\" height=\"100%\" variant=\"circle\" />\n          <div className=\"skeleton-chart__legend\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"skeleton-chart__legend-item\">\n                <Skeleton decorative width=\"16px\" height=\"16px\" variant=\"circle\" />\n                <Skeleton decorative width=\"80px\" height=\"14px\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      ) : variant === \"bar\" ? (\n        <div className=\"skeleton-chart__bars\">\n          {[60, 80, 45, 90, 70, 55, 85, 65].map((barHeight, i) => (\n            <Skeleton\n              decorative\n              key={i}\n              width=\"100%\"\n              height={`${String(barHeight)}%`}\n              className=\"skeleton-chart__bar\"\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"skeleton-chart__line\">\n          <Skeleton decorative width=\"100%\" height=\"100%\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonChart;\n"],"mappings":";;;;AAwCA,SAAgB,EAAc,EAC5B,aAAU,OACV,YAAS,SACT,eAAY,IACZ,WACA,kBAAe,mBACM;CACrB,IAAM,IAAa;EAAC;EAAkB,mBAAmB;EAAW;CAAS,CAAC,CAC3E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO,EAAE,UAAO;EAChB,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY;EAEX,UAAA,MAAY,QACX,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAU,YAAA;IAAW,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GAClE,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,MACjC,kBAAC,OAAD;KAAa,WAAU;KAAvB,UAAA,CACE,kBAAC,GAAD;MAAU,YAAA;MAAW,OAAM;MAAO,QAAO;MAAO,SAAQ;KAAU,CAAA,GAClE,kBAAC,GAAD;MAAU,YAAA;MAAW,OAAM;MAAO,QAAO;KAAQ,CAAA,CAC9C;IAHK,GAAA,CAGL,CACN;GACE,CAAA,CACF;EACH,CAAA,IAAA,MAAY,QACd,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;GAAE,CAAC,CAAC,KAAK,GAAW,MAChD,kBAAC,GAAD;IACE,YAAA;IAEA,OAAM;IACN,QAAQ,GAAG,OAAO,CAAS,EAAE;IAC7B,WAAU;GACX,GAJM,CAIN,CACF;EACE,CAAA,IAEL,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IAAU,YAAA;IAAW,OAAM;IAAO,QAAO;GAAQ,CAAA;EAC9C,CAAA;CAEJ,CAAA;AAET"}

package/dist/components/Skeleton/SkeletonRow.d.ts

@@ -9,6 +9,8 @@ export interface SkeletonRowProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
+    /** Accessible name announced for the placeholder as a whole. Defaults to "Loading". */
+    loadingLabel?: string;
 }
 /**
  * SkeletonRow provides a loading placeholder for list/table rows.
@@ -18,5 +20,5 @@ export interface SkeletonRowProps {
  * - Optional action buttons
  * - Multiple rows for lists
  */
-export declare function SkeletonRow({ showAvatar, showActions, count, className, testId, }: SkeletonRowProps): import("react").JSX.Element;
+export declare function SkeletonRow({ showAvatar, showActions, count, className, testId, loadingLabel, }: SkeletonRowProps): import("react").JSX.Element;
 export default SkeletonRow;

package/dist/components/Skeleton/SkeletonRow2.js

@@ -2,17 +2,19 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css            */
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonRow.tsx
-function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s = "", testId: c }) {
-	let l = Array.from({ length: o });
-	return /* @__PURE__ */ n(t, { children: l.map((t, o) => /* @__PURE__ */ r("div", {
+function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s = "", testId: c, loadingLabel: l }) {
+	let u = Array.from({ length: o });
+	return /* @__PURE__ */ n(t, { children: u.map((t, o) => /* @__PURE__ */ r("div", {
 		className: `skeleton-row ${s}`,
 		"data-testid": c ? `${c}-${String(o)}` : void 0,
 		role: "status",
 		"aria-busy": "true",
+		"aria-label": l ?? "Loading",
 		children: [
 			i && /* @__PURE__ */ n("div", {
 				className: "skeleton-row__avatar",
 				children: /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "40px",
 					height: "40px",
 					variant: "circle"
@@ -21,9 +23,11 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
 			/* @__PURE__ */ r("div", {
 				className: "skeleton-row__content",
 				children: [/* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "25%",
 					height: "14px"
 				}), /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "100%",
 					height: "16px"
 				})]
@@ -31,9 +35,11 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
 			a && /* @__PURE__ */ r("div", {
 				className: "skeleton-row__actions",
 				children: [/* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "32px",
 					height: "32px"
 				}), /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "32px",
 					height: "32px"
 				})]

package/dist/components/Skeleton/SkeletonRow2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonRow2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonRow.tsx"],"sourcesContent":["/**\n * SkeletonRow Component\n *\n * Skeleton placeholder for list rows and table rows.\n * Mimics the structure of a log entry or table row.\n *\n * @example\n * // Basic usage\n * <SkeletonRow />\n *\n * @example\n * // With avatar\n * <SkeletonRow showAvatar />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonRow.css\";\n\nexport interface SkeletonRowProps {\n  /** Show avatar/icon on the left */\n  showAvatar?: boolean;\n  /** Show action buttons on the right */\n  showActions?: boolean;\n  /** Number of rows to display */\n  count?: number;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonRow provides a loading placeholder for list/table rows.\n *\n * Features:\n * - Optional avatar/icon\n * - Optional action buttons\n * - Multiple rows for lists\n */\nexport function SkeletonRow({\n  showAvatar = false,\n  showActions = false,\n  count = 1,\n  className = \"\",\n  testId,\n}: SkeletonRowProps) {\n  const rows = Array.from({ length: count });\n\n  return (\n    <>\n      {rows.map((_, index) => (\n        <div\n          key={index}\n          className={`skeleton-row ${className}`}\n          data-testid={testId ? `${testId}-${String(index)}` : undefined}\n          role=\"status\"\n          aria-busy=\"true\"\n        >\n          {showAvatar && (\n            <div className=\"skeleton-row__avatar\">\n              <Skeleton width=\"40px\" height=\"40px\" variant=\"circle\" />\n            </div>\n          )}\n          <div className=\"skeleton-row__content\">\n            <Skeleton width=\"25%\" height=\"14px\" />\n            <Skeleton width=\"100%\" height=\"16px\" />\n          </div>\n          {showActions && (\n            <div className=\"skeleton-row__actions\">\n              <Skeleton width=\"32px\" height=\"32px\" />\n              <Skeleton width=\"32px\" height=\"32px\" />\n            </div>\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;AAuCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,aACmB;CACnB,IAAM,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,CAAC;CAEzC,OACE,kBAAA,GAAA,EAAA,UACG,EAAK,KAAK,GAAG,MACZ,kBAAC,OAAD;EAEE,WAAW,gBAAgB;EAC3B,eAAa,IAAS,GAAG,EAAO,GAAG,OAAO,CAAK,MAAM,KAAA;EACrD,MAAK;EACL,aAAU;EALZ,UAAA;GAOG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;KAAO,SAAQ;IAAU,CAAA;GACpD,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,GACrC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,GACtC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;EAEJ;CArBE,GAAA,CAqBF,CACN,EACD,CAAA;AAEN"}
+{"version":3,"file":"SkeletonRow2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonRow.tsx"],"sourcesContent":["/**\n * SkeletonRow Component\n *\n * Skeleton placeholder for list rows and table rows.\n * Mimics the structure of a log entry or table row.\n *\n * @example\n * // Basic usage\n * <SkeletonRow />\n *\n * @example\n * // With avatar\n * <SkeletonRow showAvatar />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonRow.css\";\n\nexport interface SkeletonRowProps {\n  /** Show avatar/icon on the left */\n  showAvatar?: boolean;\n  /** Show action buttons on the right */\n  showActions?: boolean;\n  /** Number of rows to display */\n  count?: number;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name announced for the placeholder as a whole. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonRow provides a loading placeholder for list/table rows.\n *\n * Features:\n * - Optional avatar/icon\n * - Optional action buttons\n * - Multiple rows for lists\n */\nexport function SkeletonRow({\n  showAvatar = false,\n  showActions = false,\n  count = 1,\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonRowProps) {\n  const rows = Array.from({ length: count });\n\n  return (\n    <>\n      {rows.map((_, index) => (\n        <div\n          key={index}\n          className={`skeleton-row ${className}`}\n          data-testid={testId ? `${testId}-${String(index)}` : undefined}\n          role=\"status\"\n          aria-busy=\"true\"\n          aria-label={loadingLabel ?? \"Loading\"}\n        >\n          {showAvatar && (\n            <div className=\"skeleton-row__avatar\">\n              <Skeleton decorative width=\"40px\" height=\"40px\" variant=\"circle\" />\n            </div>\n          )}\n          <div className=\"skeleton-row__content\">\n            <Skeleton decorative width=\"25%\" height=\"14px\" />\n            <Skeleton decorative width=\"100%\" height=\"16px\" />\n          </div>\n          {showActions && (\n            <div className=\"skeleton-row__actions\">\n              <Skeleton decorative width=\"32px\" height=\"32px\" />\n              <Skeleton decorative width=\"32px\" height=\"32px\" />\n            </div>\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;AAyCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,WACA,mBACmB;CACnB,IAAM,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,CAAC;CAEzC,OACE,kBAAA,GAAA,EAAA,UACG,EAAK,KAAK,GAAG,MACZ,kBAAC,OAAD;EAEE,WAAW,gBAAgB;EAC3B,eAAa,IAAS,GAAG,EAAO,GAAG,OAAO,CAAK,MAAM,KAAA;EACrD,MAAK;EACL,aAAU;EACV,cAAY,KAAgB;EAN9B,UAAA;GAQG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;KAAO,SAAQ;IAAU,CAAA;GAC/D,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAM,QAAO;IAAQ,CAAA,GAChD,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC9C;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;IAAQ,CAAA,GACjD,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC9C;;EAEJ;CAtBE,GAAA,CAsBF,CACN,EACD,CAAA;AAEN"}

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -7,6 +7,8 @@ export interface SkeletonTextProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
+    /** Accessible name announced for the placeholder as a whole. Defaults to "Loading". */
+    loadingLabel?: string;
 }
 /**
  * SkeletonText provides a loading placeholder for text content.
@@ -16,5 +18,5 @@ export interface SkeletonTextProps {
  * - Configurable line spacing
  * - Accessible via aria-busy
  */
-export declare function SkeletonText({ lines, spacing, className, testId, }: SkeletonTextProps): import("react").JSX.Element;
+export declare function SkeletonText({ lines, spacing, className, testId, loadingLabel, }: SkeletonTextProps): import("react").JSX.Element;
 export default SkeletonText;

package/dist/components/Skeleton/SkeletonText2.js

@@ -2,18 +2,20 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css             */
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonText.tsx
-function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a }) {
-	let o = [
+function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a, loadingLabel: o }) {
+	let s = [
 		"skeleton-text",
 		`skeleton-text--${r}`,
 		i
-	].filter(Boolean).join(" "), s = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
+	].filter(Boolean).join(" "), c = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
 	return /* @__PURE__ */ t("div", {
-		className: o,
+		className: s,
 		"data-testid": a,
 		role: "status",
 		"aria-busy": "true",
-		children: s.map((n, r) => /* @__PURE__ */ t(e, {
+		"aria-label": o ?? "Loading",
+		children: c.map((n, r) => /* @__PURE__ */ t(e, {
+			decorative: !0,
 			width: n,
 			height: "1em",
 			variant: "text"

package/dist/components/Skeleton/SkeletonText2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText Component\n *\n * Skeleton placeholder for text content.\n * Provides multiple lines with varying widths for natural appearance.\n *\n * @example\n * // Basic usage (3 lines)\n * <SkeletonText />\n *\n * @example\n * // Custom number of lines\n * <SkeletonText lines={5} />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonText provides a loading placeholder for text content.\n *\n * Features:\n * - Multiple lines with varying widths\n * - Configurable line spacing\n * - Accessible via aria-busy\n */\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n}: SkeletonTextProps) {\n  const classNames = [\"skeleton-text\", `skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Generate varying widths for natural appearance\n  const widths = Array.from({ length: lines }, (_, i) => {\n    if (i === lines - 1) {\n      // Last line is shorter\n      return \"60%\";\n    }\n    // Alternate between full and slightly shorter widths\n    return i % 2 === 0 ? \"100%\" : \"95%\";\n  });\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {widths.map((width, index) => (\n        <Skeleton key={index} width={width} height=\"1em\" variant=\"text\" />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;AAqCA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,aACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAGL,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAC3C,MAAM,IAAQ,IAET,QAGF,IAAI,KAAM,IAAI,SAAS,KAC/B;CAED,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GAA6B;GAAO,QAAO;GAAM,SAAQ;EAAQ,GAAlD,CAAkD,CAClE;CACE,CAAA;AAET"}
+{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText Component\n *\n * Skeleton placeholder for text content.\n * Provides multiple lines with varying widths for natural appearance.\n *\n * @example\n * // Basic usage (3 lines)\n * <SkeletonText />\n *\n * @example\n * // Custom number of lines\n * <SkeletonText lines={5} />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name announced for the placeholder as a whole. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonText provides a loading placeholder for text content.\n *\n * Features:\n * - Multiple lines with varying widths\n * - Configurable line spacing\n * - Accessible via aria-busy\n */\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonTextProps) {\n  const classNames = [\"skeleton-text\", `skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Generate varying widths for natural appearance\n  const widths = Array.from({ length: lines }, (_, i) => {\n    if (i === lines - 1) {\n      // Last line is shorter\n      return \"60%\";\n    }\n    // Alternate between full and slightly shorter widths\n    return i % 2 === 0 ? \"100%\" : \"95%\";\n  });\n\n  return (\n    <div\n      className={classNames}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel ?? \"Loading\"}\n    >\n      {widths.map((width, index) => (\n        <Skeleton decorative key={index} width={width} height=\"1em\" variant=\"text\" />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;AAuCA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAGL,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAC3C,MAAM,IAAQ,IAET,QAGF,IAAI,KAAM,IAAI,SAAS,KAC/B;CAED,OACE,kBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY,KAAgB;EAE3B,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GAAU,YAAA;GAA8B;GAAO,QAAO;GAAM,SAAQ;EAAQ,GAAlD,CAAkD,CAC7E;CACE,CAAA;AAET"}

package/dist/components/StatCard/StatCard.d.ts

@@ -13,6 +13,15 @@ export interface StatCardTrend {
 export interface StatCardProps {
     /** Short label rendered above the value (UPPERCASE styled) */
     label: string;
+    /**
+     * Rendered in place of `label` when the label is not plain text: a glossary
+     * term carrying its definition, a unit badge, an info affordance.
+     *
+     * `label` stays required and stays the accessible name, so the name is a
+     * string the consumer wrote rather than whatever text happens to fall out of
+     * a node. Pass the same words in both.
+     */
+    labelNode?: ReactNode;
     /** Primary metric value (number is coerced to localised string) */
     value: string | number;
     /** Optional suffix appended to the value (e.g. "/ 4", "GB") */
@@ -54,6 +63,6 @@ export interface StatCardProps {
     /** Visual weight. Default: "default" */
     emphasis?: StatCardEmphasis;
 }
-declare function StatCardComponent({ label, value, valueSuffix, hint, icon, tone, trend, onClick, loading, ariaLabel, className, testId, format, animate, sparkline, emphasis, }: StatCardProps): JSX.Element;
+declare function StatCardComponent({ label, labelNode, value, valueSuffix, hint, icon, tone, trend, onClick, loading, ariaLabel, className, testId, format, animate, sparkline, emphasis, }: StatCardProps): JSX.Element;
 export declare const StatCard: import('react').MemoExoticComponent<typeof StatCardComponent>;
 export {};

package/dist/components/StatCard/StatCard2.js

@@ -30,76 +30,76 @@ var d = {
 function f(e, t) {
 	return typeof e == "number" ? t ? t(e) : e.toLocaleString() : e;
 }
-function p({ label: r, value: i, valueSuffix: a, hint: o, icon: l, tone: p = "default", trend: m, onClick: h, loading: g = !1, ariaLabel: _, className: v = "", testId: y, format: b, animate: x = !1, sparkline: S, emphasis: C = "default" }) {
-	let w = n(), T = typeof i == "number", E = x && T && !g && !w, D = u(T ? i : 0, E), O = f(T && E ? D : i, b), k = _ ?? (g ? r : `${r}: ${f(i, b)}${a ?? ""}`), A = [
+function p({ label: r, labelNode: i, value: a, valueSuffix: o, hint: l, icon: p, tone: m = "default", trend: h, onClick: g, loading: _ = !1, ariaLabel: v, className: y = "", testId: b, format: x, animate: S = !1, sparkline: C, emphasis: w = "default" }) {
+	let T = n(), E = typeof a == "number", D = S && E && !_ && !T, O = u(E ? a : 0, D), k = f(E && D ? O : a, x), A = v ?? (_ ? r : `${r}: ${f(a, x)}${o ?? ""}`), j = [
 		"stat-card",
 		"corner-accent",
-		`stat-card--tone-${p}`,
-		C === "default" ? "" : `stat-card--${C}`,
-		v
+		`stat-card--tone-${m}`,
+		w === "default" ? "" : `stat-card--${w}`,
+		y
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ c(e, {
-		className: A,
-		onClick: h,
-		role: h ? void 0 : "group",
-		ariaLabel: k,
-		testId: y,
+		className: j,
+		onClick: g,
+		role: g ? void 0 : "group",
+		ariaLabel: A,
+		testId: b,
 		children: [
 			/* @__PURE__ */ c("div", {
 				className: "stat-card__header",
 				children: [/* @__PURE__ */ s("span", {
 					className: "stat-card__label",
-					children: r
-				}), l && /* @__PURE__ */ s("span", {
+					children: i ?? r
+				}), p && /* @__PURE__ */ s("span", {
 					className: "stat-card__icon",
 					"aria-hidden": "true",
-					children: l
+					children: p
 				})]
 			}),
 			/* @__PURE__ */ c("div", {
 				className: "stat-card__body",
-				children: [g ? /* @__PURE__ */ s(t, {
+				children: [_ ? /* @__PURE__ */ s(t, {
 					width: "60%",
 					height: "2rem"
-				}) : S ? /* @__PURE__ */ c("span", {
+				}) : C ? /* @__PURE__ */ c("span", {
 					className: "stat-card__value-line",
 					children: [/* @__PURE__ */ c("span", {
 						className: "stat-card__value-row",
 						children: [/* @__PURE__ */ s("span", {
 							className: "stat-card__value",
-							children: O
-						}), a && /* @__PURE__ */ s("span", {
+							children: k
+						}), o && /* @__PURE__ */ s("span", {
 							className: "stat-card__value-suffix",
-							children: a
+							children: o
 						})]
 					}), /* @__PURE__ */ s("span", {
 						className: "stat-card__sparkline",
-						children: S
+						children: C
 					})]
 				}) : /* @__PURE__ */ c("span", {
 					className: "stat-card__value-row",
 					children: [/* @__PURE__ */ s("span", {
 						className: "stat-card__value",
-						children: O
-					}), a && /* @__PURE__ */ s("span", {
+						children: k
+					}), o && /* @__PURE__ */ s("span", {
 						className: "stat-card__value-suffix",
-						children: a
+						children: o
 					})]
-				}), m && !g && /* @__PURE__ */ c("span", {
-					className: `stat-card__trend stat-card__trend--${m.direction}`,
-					"aria-label": m.ariaLabel ?? m.label,
+				}), h && !_ && /* @__PURE__ */ c("span", {
+					className: `stat-card__trend stat-card__trend--${h.direction}`,
+					"aria-label": h.ariaLabel ?? h.label,
 					children: [/* @__PURE__ */ s("span", {
 						"aria-hidden": "true",
-						children: d[m.direction]
-					}), /* @__PURE__ */ s("span", { children: m.label })]
+						children: d[h.direction]
+					}), /* @__PURE__ */ s("span", { children: h.label })]
 				})]
 			}),
-			o != null && /* @__PURE__ */ s("div", {
+			l != null && /* @__PURE__ */ s("div", {
 				className: "stat-card__hint",
-				children: g ? /* @__PURE__ */ s(t, {
+				children: _ ? /* @__PURE__ */ s(t, {
 					width: "80%",
 					height: "0.85rem"
-				}) : o
+				}) : l
 			})
 		]
 	});

package/dist/components/StatCard/StatCard2.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard2.js","names":[],"sources":["../../../src/components/StatCard/StatCard.tsx"],"sourcesContent":["/**\n * StatCard Component\n *\n * Compact metric card for dashboards. Renders a label, a large numeric\n * value (with optional unit/suffix), and optional icon, hint, trend, or\n * accent tone. Wraps `BaseCard` so it inherits hover/focus/click affordances\n * and design tokens consistently with the rest of the common library.\n *\n * Designed for cross-page reuse: Squad dashboard, Statistics page, Cowork\n * dashboard, etc.\n */\n\nimport { memo, useEffect, useRef, useState, type ReactNode, type JSX } from \"react\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\nimport { BaseCard } from \"../BaseCard\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./StatCard.css\";\n\nexport type StatCardEmphasis = \"compact\" | \"default\" | \"prominent\";\n\nexport type StatCardTone = \"default\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type StatCardTrendDirection = \"up\" | \"down\" | \"flat\";\n\nexport interface StatCardTrend {\n  /** Direction indicator (up / down / flat) */\n  direction: StatCardTrendDirection;\n  /** Human-readable delta label (e.g. \"+12%\", \"-3\", \"0\") */\n  label: string;\n  /** Optional ARIA description for screen readers */\n  ariaLabel?: string;\n}\n\nexport interface StatCardProps {\n  /** Short label rendered above the value (UPPERCASE styled) */\n  label: string;\n  /** Primary metric value (number is coerced to localised string) */\n  value: string | number;\n  /** Optional suffix appended to the value (e.g. \"/ 4\", \"GB\") */\n  valueSuffix?: string;\n  /** Optional helper line under the value (e.g. context, secondary metric) */\n  hint?: ReactNode;\n  /** Optional leading icon node, rendered inside an accent badge */\n  icon?: ReactNode;\n  /** Visual tone, mirrors Badge variants. Default: \"default\" */\n  tone?: StatCardTone;\n  /** Optional trend indicator under the value */\n  trend?: StatCardTrend;\n  /** Click handler. Renders the card as keyboard-accessible button. */\n  onClick?: () => void;\n  /** Render skeletons instead of value/label content while loading */\n  loading?: boolean;\n  /** Optional aria label override (defaults to label + value) */\n  ariaLabel?: string;\n  /** Extra class name applied to the root */\n  className?: string;\n  /** Test id for unit tests */\n  testId?: string;\n  /**\n   * Formatter for numeric values (e.g. abbreviate to \"1.2K\", append \"%\").\n   * Defaults to `toLocaleString`. Ignored when `value` is a string.\n   */\n  format?: (value: number) => string;\n  /**\n   * Count up to a numeric value on mount and on change. Off by default so\n   * existing consumers render the final value immediately; opt in for\n   * dashboard hero metrics. Suppressed under `prefers-reduced-motion`.\n   */\n  animate?: boolean;\n  /**\n   * Optional trailing visual on the value line (e.g. a sparkline). Kept as a\n   * slot so the card does not depend on any particular chart component.\n   */\n  sparkline?: ReactNode;\n  /** Visual weight. Default: \"default\" */\n  emphasis?: StatCardEmphasis;\n}\n\nconst ANIMATION_DURATION_MS = 800;\n\n/**\n * Counts from the previous value to `target` with an ease-out-cubic curve.\n * When `enabled` is false the target is returned directly and no animation\n * frame is ever scheduled.\n */\nfunction useAnimatedValue(target: number, enabled: boolean): number {\n  const [displayValue, setDisplayValue] = useState(enabled ? 0 : target);\n  const previousValue = useRef(enabled ? 0 : target);\n  const frameRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      previousValue.current = target;\n      setDisplayValue(target);\n      return;\n    }\n\n    const startValue = previousValue.current;\n    const startTime = performance.now();\n\n    const step = (now: number): void => {\n      const progress = Math.min((now - startTime) / ANIMATION_DURATION_MS, 1);\n      const eased = 1 - Math.pow(1 - progress, 3);\n      setDisplayValue(Math.round(startValue + (target - startValue) * eased));\n\n      if (progress < 1) {\n        frameRef.current = requestAnimationFrame(step);\n      } else {\n        previousValue.current = target;\n      }\n    };\n\n    frameRef.current = requestAnimationFrame(step);\n\n    return () => {\n      if (frameRef.current !== null) {\n        cancelAnimationFrame(frameRef.current);\n      }\n    };\n  }, [target, enabled]);\n\n  return enabled ? displayValue : target;\n}\n\nconst TREND_GLYPH: Record<StatCardTrendDirection, string> = {\n  up: \"▲\",\n  down: \"▼\",\n  flat: \"•\",\n};\n\nfunction formatValue(\n  value: string | number,\n  format?: (value: number) => string,\n): string {\n  if (typeof value === \"number\") {\n    return format ? format(value) : value.toLocaleString();\n  }\n  return value;\n}\n\nfunction StatCardComponent({\n  label,\n  value,\n  valueSuffix,\n  hint,\n  icon,\n  tone = \"default\",\n  trend,\n  onClick,\n  loading = false,\n  ariaLabel,\n  className = \"\",\n  testId,\n  format,\n  animate = false,\n  sparkline,\n  emphasis = \"default\",\n}: StatCardProps): JSX.Element {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const isNumeric = typeof value === \"number\";\n  const shouldAnimate = animate && isNumeric && !loading && !prefersReducedMotion;\n  const animatedValue = useAnimatedValue(isNumeric ? value : 0, shouldAnimate);\n\n  const displayValue = formatValue(\n    isNumeric && shouldAnimate ? animatedValue : value,\n    format,\n  );\n\n  // The aria-label always describes the settled value, never an in-flight\n  // animation frame, so assistive tech is not read a counting-up number.\n  const composedAriaLabel =\n    ariaLabel ??\n    (loading ? label : `${label}: ${formatValue(value, format)}${valueSuffix ?? \"\"}`);\n\n  const rootClass = [\n    \"stat-card\",\n    \"corner-accent\",\n    `stat-card--tone-${tone}`,\n    emphasis !== \"default\" ? `stat-card--${emphasis}` : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <BaseCard\n      className={rootClass}\n      onClick={onClick}\n      role={onClick ? undefined : \"group\"}\n      ariaLabel={composedAriaLabel}\n      testId={testId}\n    >\n      <div className=\"stat-card__header\">\n        <span className=\"stat-card__label\">{label}</span>\n        {icon && (\n          <span className=\"stat-card__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      <div className=\"stat-card__body\">\n        {loading ? (\n          <Skeleton width=\"60%\" height=\"2rem\" />\n        ) : sparkline ? (\n          // Only wrap when a sparkline is present, so cards without one keep\n          // the exact DOM they had before the slot existed.\n          <span className=\"stat-card__value-line\">\n            <span className=\"stat-card__value-row\">\n              <span className=\"stat-card__value\">{displayValue}</span>\n              {valueSuffix && (\n                <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n              )}\n            </span>\n            <span className=\"stat-card__sparkline\">{sparkline}</span>\n          </span>\n        ) : (\n          <span className=\"stat-card__value-row\">\n            <span className=\"stat-card__value\">{displayValue}</span>\n            {valueSuffix && (\n              <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n            )}\n          </span>\n        )}\n\n        {trend && !loading && (\n          <span\n            className={`stat-card__trend stat-card__trend--${trend.direction}`}\n            aria-label={trend.ariaLabel ?? trend.label}\n          >\n            <span aria-hidden=\"true\">{TREND_GLYPH[trend.direction]}</span>\n            <span>{trend.label}</span>\n          </span>\n        )}\n      </div>\n\n      {hint !== undefined && hint !== null && (\n        <div className=\"stat-card__hint\">\n          {loading ? <Skeleton width=\"80%\" height=\"0.85rem\" /> : hint}\n        </div>\n      )}\n    </BaseCard>\n  );\n}\n\nexport const StatCard = memo(StatCardComponent);\n"],"mappings":"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"}
+{"version":3,"file":"StatCard2.js","names":[],"sources":["../../../src/components/StatCard/StatCard.tsx"],"sourcesContent":["/**\n * StatCard Component\n *\n * Compact metric card for dashboards. Renders a label, a large numeric\n * value (with optional unit/suffix), and optional icon, hint, trend, or\n * accent tone. The label can be a node (`labelNode`) while the accessible name\n * stays the plain `label` string. Wraps `BaseCard` so it inherits hover/focus/click affordances\n * and design tokens consistently with the rest of the common library.\n *\n * Designed for cross-page reuse: Squad dashboard, Statistics page, Cowork\n * dashboard, etc.\n */\n\nimport { memo, useEffect, useRef, useState, type ReactNode, type JSX } from \"react\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\nimport { BaseCard } from \"../BaseCard\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./StatCard.css\";\n\nexport type StatCardEmphasis = \"compact\" | \"default\" | \"prominent\";\n\nexport type StatCardTone = \"default\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type StatCardTrendDirection = \"up\" | \"down\" | \"flat\";\n\nexport interface StatCardTrend {\n  /** Direction indicator (up / down / flat) */\n  direction: StatCardTrendDirection;\n  /** Human-readable delta label (e.g. \"+12%\", \"-3\", \"0\") */\n  label: string;\n  /** Optional ARIA description for screen readers */\n  ariaLabel?: string;\n}\n\nexport interface StatCardProps {\n  /** Short label rendered above the value (UPPERCASE styled) */\n  label: string;\n  /**\n   * Rendered in place of `label` when the label is not plain text: a glossary\n   * term carrying its definition, a unit badge, an info affordance.\n   *\n   * `label` stays required and stays the accessible name, so the name is a\n   * string the consumer wrote rather than whatever text happens to fall out of\n   * a node. Pass the same words in both.\n   */\n  labelNode?: ReactNode;\n  /** Primary metric value (number is coerced to localised string) */\n  value: string | number;\n  /** Optional suffix appended to the value (e.g. \"/ 4\", \"GB\") */\n  valueSuffix?: string;\n  /** Optional helper line under the value (e.g. context, secondary metric) */\n  hint?: ReactNode;\n  /** Optional leading icon node, rendered inside an accent badge */\n  icon?: ReactNode;\n  /** Visual tone, mirrors Badge variants. Default: \"default\" */\n  tone?: StatCardTone;\n  /** Optional trend indicator under the value */\n  trend?: StatCardTrend;\n  /** Click handler. Renders the card as keyboard-accessible button. */\n  onClick?: () => void;\n  /** Render skeletons instead of value/label content while loading */\n  loading?: boolean;\n  /** Optional aria label override (defaults to label + value) */\n  ariaLabel?: string;\n  /** Extra class name applied to the root */\n  className?: string;\n  /** Test id for unit tests */\n  testId?: string;\n  /**\n   * Formatter for numeric values (e.g. abbreviate to \"1.2K\", append \"%\").\n   * Defaults to `toLocaleString`. Ignored when `value` is a string.\n   */\n  format?: (value: number) => string;\n  /**\n   * Count up to a numeric value on mount and on change. Off by default so\n   * existing consumers render the final value immediately; opt in for\n   * dashboard hero metrics. Suppressed under `prefers-reduced-motion`.\n   */\n  animate?: boolean;\n  /**\n   * Optional trailing visual on the value line (e.g. a sparkline). Kept as a\n   * slot so the card does not depend on any particular chart component.\n   */\n  sparkline?: ReactNode;\n  /** Visual weight. Default: \"default\" */\n  emphasis?: StatCardEmphasis;\n}\n\nconst ANIMATION_DURATION_MS = 800;\n\n/**\n * Counts from the previous value to `target` with an ease-out-cubic curve.\n * When `enabled` is false the target is returned directly and no animation\n * frame is ever scheduled.\n */\nfunction useAnimatedValue(target: number, enabled: boolean): number {\n  const [displayValue, setDisplayValue] = useState(enabled ? 0 : target);\n  const previousValue = useRef(enabled ? 0 : target);\n  const frameRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      previousValue.current = target;\n      setDisplayValue(target);\n      return;\n    }\n\n    const startValue = previousValue.current;\n    const startTime = performance.now();\n\n    const step = (now: number): void => {\n      const progress = Math.min((now - startTime) / ANIMATION_DURATION_MS, 1);\n      const eased = 1 - Math.pow(1 - progress, 3);\n      setDisplayValue(Math.round(startValue + (target - startValue) * eased));\n\n      if (progress < 1) {\n        frameRef.current = requestAnimationFrame(step);\n      } else {\n        previousValue.current = target;\n      }\n    };\n\n    frameRef.current = requestAnimationFrame(step);\n\n    return () => {\n      if (frameRef.current !== null) {\n        cancelAnimationFrame(frameRef.current);\n      }\n    };\n  }, [target, enabled]);\n\n  return enabled ? displayValue : target;\n}\n\nconst TREND_GLYPH: Record<StatCardTrendDirection, string> = {\n  up: \"▲\",\n  down: \"▼\",\n  flat: \"•\",\n};\n\nfunction formatValue(\n  value: string | number,\n  format?: (value: number) => string,\n): string {\n  if (typeof value === \"number\") {\n    return format ? format(value) : value.toLocaleString();\n  }\n  return value;\n}\n\nfunction StatCardComponent({\n  label,\n  labelNode,\n  value,\n  valueSuffix,\n  hint,\n  icon,\n  tone = \"default\",\n  trend,\n  onClick,\n  loading = false,\n  ariaLabel,\n  className = \"\",\n  testId,\n  format,\n  animate = false,\n  sparkline,\n  emphasis = \"default\",\n}: StatCardProps): JSX.Element {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const isNumeric = typeof value === \"number\";\n  const shouldAnimate = animate && isNumeric && !loading && !prefersReducedMotion;\n  const animatedValue = useAnimatedValue(isNumeric ? value : 0, shouldAnimate);\n\n  const displayValue = formatValue(\n    isNumeric && shouldAnimate ? animatedValue : value,\n    format,\n  );\n\n  // The aria-label always describes the settled value, never an in-flight\n  // animation frame, so assistive tech is not read a counting-up number.\n  const composedAriaLabel =\n    ariaLabel ??\n    (loading ? label : `${label}: ${formatValue(value, format)}${valueSuffix ?? \"\"}`);\n\n  const rootClass = [\n    \"stat-card\",\n    \"corner-accent\",\n    `stat-card--tone-${tone}`,\n    emphasis !== \"default\" ? `stat-card--${emphasis}` : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <BaseCard\n      className={rootClass}\n      onClick={onClick}\n      role={onClick ? undefined : \"group\"}\n      ariaLabel={composedAriaLabel}\n      testId={testId}\n    >\n      <div className=\"stat-card__header\">\n        <span className=\"stat-card__label\">{labelNode ?? label}</span>\n        {icon && (\n          <span className=\"stat-card__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      <div className=\"stat-card__body\">\n        {loading ? (\n          <Skeleton width=\"60%\" height=\"2rem\" />\n        ) : sparkline ? (\n          // Only wrap when a sparkline is present, so cards without one keep\n          // the exact DOM they had before the slot existed.\n          <span className=\"stat-card__value-line\">\n            <span className=\"stat-card__value-row\">\n              <span className=\"stat-card__value\">{displayValue}</span>\n              {valueSuffix && (\n                <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n              )}\n            </span>\n            <span className=\"stat-card__sparkline\">{sparkline}</span>\n          </span>\n        ) : (\n          <span className=\"stat-card__value-row\">\n            <span className=\"stat-card__value\">{displayValue}</span>\n            {valueSuffix && (\n              <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n            )}\n          </span>\n        )}\n\n        {trend && !loading && (\n          <span\n            className={`stat-card__trend stat-card__trend--${trend.direction}`}\n            aria-label={trend.ariaLabel ?? trend.label}\n          >\n            <span aria-hidden=\"true\">{TREND_GLYPH[trend.direction]}</span>\n            <span>{trend.label}</span>\n          </span>\n        )}\n      </div>\n\n      {hint !== undefined && hint !== null && (\n        <div className=\"stat-card__hint\">\n          {loading ? <Skeleton width=\"80%\" height=\"0.85rem\" /> : hint}\n        </div>\n      )}\n    </BaseCard>\n  );\n}\n\nexport const StatCard = memo(StatCardComponent);\n"],"mappings":"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"}

package/dist/components/Tabs/Tabs.d.ts

@@ -1,26 +1,18 @@
 import { ReactNode } from 'react';
-import { TabTagType, TabTagLabels } from './tabTags';
-export type { TabTagType, TabTagLabels } from './tabTags';
-export { TAG_CONFIG } from './tabTags';
 export interface TabItem {
     id: string;
     label: string;
     content: ReactNode;
     /**
-     * Show a "Required" badge next to the tab label.
-     * @deprecated Use `tag="required"` instead. Kept for backward compatibility.
-     */
-    required?: boolean;
-    /**
-     * Guide tag displayed after the tab label as a small badge.
-     * When set, takes precedence over the `required` boolean.
-     */
-    tag?: TabTagType;
-    /**
-     * Optional extra trailing node rendered next to the tab label (e.g. a
-     * count badge). Distinct from `tag` (which uses a fixed preset). Use this
-     * when migrating segmented controls that rendered their own inline count
-     * pill alongside the label.
+     * Trailing node rendered next to the tab label: a count pill, a status
+     * badge, whatever the consumer's vocabulary calls for.
+     *
+     * This used to sit beside a `tag` prop that took one of four fixed names,
+     * required / recommended / beta / experimental, and rendered a Badge for
+     * it. Those are one product's guide vocabulary, and the arrangement had
+     * already split across the boundary: the badge variant lived here while the
+     * label text had to be passed in from the consumer's locale bundle. A
+     * consumer that wants that badge renders it here, and owns both halves.
      */
     labelExtra?: ReactNode;
     /**
@@ -98,10 +90,5 @@ export interface TabsProps {
     scrollLeftLabel?: string;
     /** Accessible label for the right scroll-arrow button. Default: "Scroll right" */
     scrollRightLabel?: string;
-    /**
-     * English defaults for every guide-tag badge label (required / recommended
-     * / beta / experimental). Override individual entries to translate them.
-     */
-    tagLabels?: TabTagLabels;
 }
-export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, tagLabels, }: TabsProps): import("react").JSX.Element;
+export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, }: TabsProps): import("react").JSX.Element;