@octavius2929-personal/design-system 0.13.0 → 0.14.0

package/dist/index.cjs

@@ -108,7 +108,47 @@ function useToggle(initial = false) {
 }
 
 // src/components/container/index.tsx
+var import_react5 = require("react");
+
+// src/testing/use-test-id.ts
+var import_react4 = require("react");
+
+// src/testing/compose.ts
+function normalizeSegment(seg) {
+  return seg.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+}
+function composeTestId(parts) {
+  return parts.filter((p) => typeof p === "string" && p.trim() !== "").map(normalizeSegment).join("__");
+}
+
+// src/testing/context/test-id-context.tsx
 var import_react3 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TestIdContext = (0, import_react3.createContext)([]);
+function TestIdProvider({ context, children }) {
+  const parent = (0, import_react3.useContext)(TestIdContext);
+  const value = (0, import_react3.useMemo)(
+    () => [...parent, normalizeSegment(context)].filter((seg) => seg !== ""),
+    [parent, context]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TestIdContext.Provider, { value, children });
+}
+function useTestIdContext() {
+  return (0, import_react3.useContext)(TestIdContext);
+}
+
+// src/testing/use-test-id.ts
+function useTestId(type, ownTestId) {
+  const ctx = useTestIdContext();
+  const testId = composeTestId([type, ...ctx, ownTestId]);
+  return (0, import_react4.useMemo)(
+    () => ({
+      testId,
+      slot: (name) => `${testId}__${normalizeSegment(name)}`
+    }),
+    [testId]
+  );
+}
 
 // src/theme/styles/sprinkles/index.css.ts
 var import_createRuntimeSprinkles = require("@vanilla-extract/sprinkles/createRuntimeSprinkles");
@@ -130,25 +170,26 @@ function useStyles(props) {
 }
 
 // src/components/container/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function ContainerImpl({ as, ...props }, ref) {
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ContainerImpl({ as, testId, ...props }, ref) {
   const Component = as ?? "div";
   const { className, rest } = useStyles(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref, ...rest, className });
+  const { testId: dataTestId } = useTestId("layout", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref, "data-testid": dataTestId, ...rest, className });
 }
-var ContainerForwarded = (0, import_react3.forwardRef)(ContainerImpl);
+var ContainerForwarded = (0, import_react5.forwardRef)(ContainerImpl);
 ContainerForwarded.displayName = "Container";
 var Container = ContainerForwarded;
 
 // src/components/typography/index.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/components/typography/use-styles.ts
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // src/theme/context/theme-context.tsx
-var import_react4 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var noop = () => {
 };
 var DEFAULT_VALUE = {
@@ -161,7 +202,7 @@ var DEFAULT_VALUE = {
   toggleMode: noop,
   cycleMode: noop
 };
-var ThemeContext = (0, import_react4.createContext)(null);
+var ThemeContext = (0, import_react6.createContext)(null);
 function resolveSystemMode() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
   if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
@@ -191,14 +232,14 @@ function ThemeProvider({
   storageKey = "ds-theme",
   persist = true
 }) {
-  const [schema, setSchema] = (0, import_react4.useState)(
+  const [schema, setSchema] = (0, import_react6.useState)(
     () => persist && readStored(storageKey)?.schema || defaultSchema
   );
-  const [preference, setPreference] = (0, import_react4.useState)(
+  const [preference, setPreference] = (0, import_react6.useState)(
     () => (persist ? readStored(storageKey)?.preference : null) ?? defaultMode
   );
-  const [systemMode, setSystemMode] = (0, import_react4.useState)(resolveSystemMode);
-  (0, import_react4.useEffect)(() => {
+  const [systemMode, setSystemMode] = (0, import_react6.useState)(resolveSystemMode);
+  (0, import_react6.useEffect)(() => {
     if (preference !== "system") return;
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mqls = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"].map(
@@ -212,10 +253,10 @@ function ThemeProvider({
     };
   }, [preference]);
   const mode = preference === "system" ? systemMode : preference;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (persist) writeStored(storageKey, { schema, preference });
   }, [schema, preference, persist, storageKey]);
-  const value = (0, import_react4.useMemo)(
+  const value = (0, import_react6.useMemo)(
     () => ({
       schema,
       mode,
@@ -231,10 +272,10 @@ function ThemeProvider({
     }),
     [schema, mode, preference]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  return (0, import_react4.useContext)(ThemeContext) ?? DEFAULT_VALUE;
+  return (0, import_react6.useContext)(ThemeContext) ?? DEFAULT_VALUE;
 }
 
 // src/theme/typography.css.ts
@@ -252,7 +293,7 @@ function useStyles2({
   align: align2
 }) {
   const { themeClass } = useTheme();
-  const className = (0, import_react5.useMemo)(
+  const className = (0, import_react7.useMemo)(
     () => [
       themeClass,
       base,
@@ -266,7 +307,7 @@ function useStyles2({
 }
 
 // src/components/typography/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -281,12 +322,13 @@ var defaultElement = {
   code: "code",
   blackletter: "span"
 };
-function TypographyInner({ variant: variant2, as, color: color2, align: align2, ...rest }, ref) {
+function TypographyInner({ variant: variant2, as, color: color2, align: align2, testId, ...rest }, ref) {
   const Component = as ?? defaultElement[variant2];
   const { text: text2 } = useStyles2({ variant: variant2, color: color2, align: align2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ref, ...rest, className: text2 });
+  const { testId: dataTestId } = useTestId("text", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, "data-testid": dataTestId, ...rest, className: text2 });
 }
-var TypographyForwarded = (0, import_react6.forwardRef)(
+var TypographyForwarded = (0, import_react8.forwardRef)(
   TypographyInner
 );
 TypographyForwarded.displayName = "Typography";
@@ -301,46 +343,6 @@ function states(map) {
   return active2.length > 0 ? active2.join(" ") : void 0;
 }
 
-// src/testing/use-test-id.ts
-var import_react8 = require("react");
-
-// src/testing/compose.ts
-function normalizeSegment(seg) {
-  return seg.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
-}
-function composeTestId(parts) {
-  return parts.filter((p) => typeof p === "string" && p.trim() !== "").map(normalizeSegment).join("__");
-}
-
-// src/testing/context/test-id-context.tsx
-var import_react7 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var TestIdContext = (0, import_react7.createContext)([]);
-function TestIdProvider({ context, children }) {
-  const parent = (0, import_react7.useContext)(TestIdContext);
-  const value = (0, import_react7.useMemo)(
-    () => [...parent, normalizeSegment(context)].filter((seg) => seg !== ""),
-    [parent, context]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TestIdContext.Provider, { value, children });
-}
-function useTestIdContext() {
-  return (0, import_react7.useContext)(TestIdContext);
-}
-
-// src/testing/use-test-id.ts
-function useTestId(type, ownTestId) {
-  const ctx = useTestIdContext();
-  const testId = composeTestId([type, ...ctx, ownTestId]);
-  return (0, import_react8.useMemo)(
-    () => ({
-      testId,
-      slot: (name) => `${testId}__${normalizeSegment(name)}`
-    }),
-    [testId]
-  );
-}
-
 // src/components/button/use-styles.ts
 var import_react9 = require("react");
 
@@ -444,17 +446,18 @@ function useStyles4({ vertical: vertical2, hasLabel }) {
 
 // src/components/divider/index.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Divider = (0, import_react12.forwardRef)(function Divider2({ vertical: vertical2, label: label7, ...rest }, ref) {
+var Divider = (0, import_react12.forwardRef)(function Divider2({ vertical: vertical2, label: label7, testId, ...rest }, ref) {
   const hasLabel = label7 != null;
   const { root: root24, line: line2, label: labelClass } = useStyles4({ vertical: vertical2, hasLabel });
+  const { testId: dataTestId, slot } = useTestId("layout", testId);
   if (hasLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, role: "separator", className: root24, ...rest, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, role: "separator", className: root24, "data-testid": dataTestId, ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: line2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: labelClass, children: label7 }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: labelClass, "data-testid": slot("label"), children: label7 }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: line2 })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, role: "separator", className: root24, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, role: "separator", className: root24, "data-testid": dataTestId, ...rest });
 });
 
 // src/components/avatar/index.tsx
@@ -490,9 +493,10 @@ function useStyles5({
 
 // src/components/avatar/index.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Avatar = (0, import_react14.forwardRef)(function Avatar2({ size: size3, filled, className, children, ...rest }, ref) {
+var Avatar = (0, import_react14.forwardRef)(function Avatar2({ size: size3, filled, className, children, testId, ...rest }, ref) {
   const { root: root24 } = useStyles5({ size: size3, filled, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ref, className: root24, ...rest, children });
+  const { testId: dataTestId } = useTestId("media", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ref, className: root24, "data-testid": dataTestId, ...rest, children });
 });
 
 // src/components/badge/index.tsx
@@ -522,11 +526,12 @@ function useStyles6({
 
 // src/components/badge/index.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Badge = (0, import_react16.forwardRef)(function Badge2({ count, tone: tone4, className, children, ...rest }, ref) {
+var Badge = (0, import_react16.forwardRef)(function Badge2({ count, tone: tone4, className, children, testId, ...rest }, ref) {
   const { root: root24, dot: dot3 } = useStyles6({ tone: tone4, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, className: root24, ...rest, children: [
+  const { testId: dataTestId, slot } = useTestId("media", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, className: root24, "data-testid": dataTestId, ...rest, children: [
     children,
-    count != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: dot3, children: count })
+    count != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: dot3, "data-testid": slot("dot"), children: count })
   ] });
 });
 
@@ -565,9 +570,10 @@ function useStyles7({
 
 // src/components/progress/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Progress = (0, import_react18.forwardRef)(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, ...rest }, ref) {
+var Progress = (0, import_react18.forwardRef)(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, testId, ...rest }, ref) {
   const { track: track4, bar: bar2, spinner: spinner2 } = useStyles7({ variant: variant2, value, className });
   const indeterminate2 = value === void 0;
+  const { testId: dataTestId, slot } = useTestId("media", testId);
   if (variant2 === "circular") {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
@@ -579,6 +585,8 @@ var Progress = (0, import_react18.forwardRef)(function Progress2({ variant: vari
         "aria-valuemin": indeterminate2 ? void 0 : 0,
         "aria-valuemax": indeterminate2 ? void 0 : 100,
         style: { width: size3, height: size3 },
+        "data-testid": dataTestId,
+        "data-state": states({ indeterminate: indeterminate2 }),
         ...rest
       }
     );
@@ -592,8 +600,17 @@ var Progress = (0, import_react18.forwardRef)(function Progress2({ variant: vari
       "aria-valuenow": indeterminate2 ? void 0 : value,
       "aria-valuemin": indeterminate2 ? void 0 : 0,
       "aria-valuemax": indeterminate2 ? void 0 : 100,
+      "data-testid": dataTestId,
+      "data-state": states({ indeterminate: indeterminate2 }),
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          className: bar2,
+          style: indeterminate2 ? void 0 : { width: `${value}%` },
+          "data-testid": slot("bar")
+        }
+      )
     }
   );
 });
@@ -657,17 +674,39 @@ function useStyles8({
 
 // src/components/chip/index.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Chip = (0, import_react20.forwardRef)(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, ...rest }, ref) {
+var Chip = (0, import_react20.forwardRef)(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, testId, ...rest }, ref) {
   const clickable2 = Boolean(onClick);
   const { root: root24, deleteBtn: deleteBtn2 } = useStyles8({ selected: selected3, tone: tone4, clickable: clickable2 });
+  const { testId: dataTestId, slot } = useTestId("media", testId);
   const handleDelete = (event) => {
     event.stopPropagation();
     onDelete?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { ref, className: root24, onClick, ...rest, children: [
-    children,
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(XIcon, { size: 13 }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "span",
+    {
+      ref,
+      className: root24,
+      onClick,
+      "data-testid": dataTestId,
+      "data-state": states({ selected: selected3 }),
+      ...rest,
+      children: [
+        children,
+        onDelete && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            className: deleteBtn2,
+            "aria-label": "Remove",
+            onClick: handleDelete,
+            "data-testid": slot("delete"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(XIcon, { size: 13 })
+          }
+        )
+      ]
+    }
+  );
 });
 
 // src/components/checkbox/index.tsx
@@ -722,13 +761,14 @@ function useStyles9({ checked, disabled: disabled3 }) {
 
 // src/components/checkbox/index.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Checkbox = (0, import_react22.forwardRef)(function Checkbox2({ checked = false, onChange, label: label7, disabled: disabled3 = false, id, ...rest }, ref) {
+var Checkbox = (0, import_react22.forwardRef)(function Checkbox2({ checked = false, onChange, label: label7, disabled: disabled3 = false, id, testId, ...rest }, ref) {
   const { root: root24, input: input6, box: box2, check: check2 } = useStyles9({ checked, disabled: disabled3 });
+  const { testId: dataTestId } = useTestId("toggle", testId);
   const handleChange = (e) => {
     if (disabled3) return;
     onChange?.(e.target.checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: root24, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "input",
       {
@@ -782,9 +822,10 @@ function useStyles10({
 
 // src/components/radio/index.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Radio = (0, import_react24.forwardRef)(function Radio2({ checked, onChange, label: label7, name, value, disabled: disabled3, ...rest }, ref) {
+var Radio = (0, import_react24.forwardRef)(function Radio2({ checked, onChange, label: label7, name, value, disabled: disabled3, testId, ...rest }, ref) {
   const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles10({ disabled: disabled3 });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: root24, children: [
+  const { testId: dataTestId } = useTestId("toggle", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "input",
       {
@@ -836,9 +877,10 @@ function useStyles11({ checked }) {
 
 // src/components/switch/index.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Switch = (0, import_react26.forwardRef)(function Switch2({ checked = false, onChange, label: label7, disabled: disabled3, ...rest }, ref) {
+var Switch = (0, import_react26.forwardRef)(function Switch2({ checked = false, onChange, label: label7, disabled: disabled3, testId, ...rest }, ref) {
   const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles11({ checked });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: root24, children: [
+  const { testId: dataTestId } = useTestId("toggle", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "input",
       {
@@ -1267,9 +1309,10 @@ function useStyles15() {
 
 // src/components/card/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var CardRoot = (0, import_react36.forwardRef)(function Card({ children, ...rest }, ref) {
+var CardRoot = (0, import_react36.forwardRef)(function Card({ children, testId, ...rest }, ref) {
   const { root: root24 } = useStyles15();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: root24, ...rest, children });
+  const { testId: dataTestId } = useTestId("layout", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: root24, "data-testid": dataTestId, ...rest, children });
 });
 function CardHeader({ children, ...rest }) {
   const { header: header3 } = useStyles15();
@@ -1433,12 +1476,13 @@ var defaultIcons = {
   warn: TriangleAlertIcon,
   danger: CircleXIcon
 };
-var Alert = (0, import_react38.forwardRef)(function Alert2({ severity: severity2 = "info", title, icon, className, children, ...rest }, ref) {
+var Alert = (0, import_react38.forwardRef)(function Alert2({ severity: severity2 = "info", title, icon, className, testId, children, ...rest }, ref) {
   const styles = useStyles16({ severity: severity2, className });
+  const { testId: dataTestId, slot } = useTestId("feedback", testId);
   const IconComponent = icon ?? defaultIcons[severity2];
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, role: "alert", className: styles.root, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconComponent, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.content, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, role: "alert", className: styles.root, "data-testid": dataTestId, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.iconSlot, "data-testid": slot("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconComponent, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.content, "data-testid": slot("content"), children: [
       title != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Typography, { variant: "h4", children: title }),
       children != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Typography, { variant: "body", color: "fg2", children })
     ] })
@@ -1475,10 +1519,11 @@ function useStyles17({
 // src/components/tooltip/index.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var HIDE_DELAY = 120;
-var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7, children, placement: placement2 }, ref) {
+var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7, children, placement: placement2, testId }, ref) {
   const [open, setOpen] = (0, import_react40.useState)(false);
   const tooltipId = (0, import_react40.useId)();
   const { wrapper: wrapper4, bubble: bubble2 } = useStyles17({ placement: placement2 });
+  const { testId: dataTestId, slot } = useTestId("feedback", testId);
   const hideTimer = (0, import_react40.useRef)(null);
   const clearHide = () => {
     if (hideTimer.current) {
@@ -1517,6 +1562,7 @@ var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7,
     {
       ref,
       className: wrapper4,
+      "data-testid": dataTestId,
       onMouseEnter: show,
       onMouseLeave: scheduleHide,
       onFocus: show,
@@ -1530,6 +1576,7 @@ var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7,
             id: tooltipId,
             role: "tooltip",
             className: bubble2,
+            "data-testid": slot("bubble"),
             onMouseEnter: show,
             onMouseLeave: scheduleHide,
             children: label7
@@ -1830,9 +1877,10 @@ function useStyles20({ className }) {
 
 // src/components/accordion/index.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var Accordion = (0, import_react46.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className }, ref) {
+var Accordion = (0, import_react46.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className, testId }, ref) {
   const [open, setOpen] = (0, import_react46.useState)(defaultOpen);
   const { root: root24, item: item3, header: header3, chevronFor, panel: panel3 } = useStyles20({ className });
+  const { testId: dataTestId, slot } = useTestId("layout", testId);
   const toggle = (id) => {
     setOpen((current2) => {
       const isOpen = current2.includes(id);
@@ -1840,28 +1888,49 @@ var Accordion = (0, import_react46.forwardRef)(function Accordion2({ items, mult
       return multiple ? [...current2, id] : [id];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: root24, children: items.map((it) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: root24, "data-testid": dataTestId, children: items.map((it) => {
     const isOpen = open.includes(it.id);
     const panelId = `accordion-panel-${it.id}`;
     const headerId = `accordion-header-${it.id}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: item3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        "button",
-        {
-          type: "button",
-          id: headerId,
-          className: header3,
-          "aria-expanded": isOpen,
-          "aria-controls": panelId,
-          onClick: () => toggle(it.id),
-          children: [
-            it.title,
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronDownIcon, { className: chevronFor(isOpen) })
-          ]
-        }
-      ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: panelId, className: panel3, role: "region", "aria-labelledby": headerId, children: it.content })
-    ] }, it.id);
+    const itemSlot = slot(`item-${it.id}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "div",
+      {
+        className: item3,
+        "data-testid": itemSlot,
+        "data-state": states({ expanded: isOpen }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            "button",
+            {
+              type: "button",
+              id: headerId,
+              className: header3,
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              "data-testid": `${itemSlot}__trigger`,
+              onClick: () => toggle(it.id),
+              children: [
+                it.title,
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronDownIcon, { className: chevronFor(isOpen) })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "div",
+            {
+              id: panelId,
+              className: panel3,
+              role: "region",
+              "aria-labelledby": headerId,
+              "data-testid": `${itemSlot}__panel`,
+              children: it.content
+            }
+          )
+        ]
+      },
+      it.id
+    );
   }) });
 });
 
@@ -1911,13 +1980,14 @@ function useStyles21({ className }) {
 
 // src/components/breadcrumbs/index.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var Breadcrumbs = (0, import_react48.forwardRef)(function Breadcrumbs2({ items, className, ...rest }, ref) {
+var Breadcrumbs = (0, import_react48.forwardRef)(function Breadcrumbs2({ items, className, testId, ...rest }, ref) {
   const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles21({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: root24, "data-testid": dataTestId, ...rest, children: items.map((item3, index) => {
     const isLast = index === items.length - 1;
     const key = index;
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react48.Fragment, { children: [
-      isLast ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: crumb2, children: item3.label }),
+      isLast ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: current2, "aria-current": "page", "data-testid": slot(`crumb-${index}`), children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { className: crumb2, href: item3.href, "data-testid": slot(`crumb-${index}`), children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: crumb2, "data-testid": slot(`crumb-${index}`), children: item3.label }),
       !isLast && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronRightIcon, { size: 14 }) })
     ] }, key);
   }) });
@@ -1987,13 +2057,14 @@ function buildItems(count, page, siblingCount) {
   if (last > first) items.push(last);
   return items;
 }
-var Pagination = (0, import_react50.forwardRef)(function Pagination2({ count, page = 1, onChange, siblingCount = 1, ...rest }, ref) {
+var Pagination = (0, import_react50.forwardRef)(function Pagination2({ count, page = 1, onChange, siblingCount = 1, testId, ...rest }, ref) {
   const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles22();
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
   const total = Math.max(1, count);
   const current2 = Math.min(Math.max(1, page), total);
   const items = buildItems(total, current2, siblingCount);
   const go = (n) => onChange?.(Math.min(Math.max(1, n), total));
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("nav", { ref, className: root24, "aria-label": "Pagination", ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("nav", { ref, className: root24, "aria-label": "Pagination", "data-testid": dataTestId, ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "button",
       {
@@ -2001,20 +2072,27 @@ var Pagination = (0, import_react50.forwardRef)(function Pagination2({ count, pa
         className: nav2,
         "aria-label": "Previous page",
         disabled: current2 <= 1,
+        "data-testid": slot("prev"),
         onClick: () => go(current2 - 1),
         children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronLeftIcon, { size: 18 })
       }
     ),
     items.map(
-      (item3, index) => item3 === "ellipsis" ? (
-        // biome-ignore lint/suspicious/noArrayIndexKey: ellipsis position is stable per render
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
+      (item3, index) => item3 === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "span",
+        {
+          className: ellipsis2,
+          "data-testid": slot(`ellipsis-${index}`),
+          children: "\u2026"
+        },
+        `ellipsis-${index}`
       ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           type: "button",
           className: pageBtnFor(item3 === current2),
           "aria-current": item3 === current2 ? "page" : void 0,
+          "data-testid": slot(`page-${item3}`),
           onClick: () => go(item3),
           children: item3
         },
@@ -2028,6 +2106,7 @@ var Pagination = (0, import_react50.forwardRef)(function Pagination2({ count, pa
         className: nav2,
         "aria-label": "Next page",
         disabled: current2 >= total,
+        "data-testid": slot("next"),
         onClick: () => go(current2 + 1),
         children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronRightIcon, { size: 18 })
       }
@@ -2068,18 +2147,28 @@ function useStyles23({ className }) {
 
 // src/components/stepper/index.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var Stepper = (0, import_react52.forwardRef)(function Stepper2({ steps, active: active2 = 0, className, ...rest }, ref) {
+var Stepper = (0, import_react52.forwardRef)(function Stepper2({ steps, active: active2 = 0, className, testId, ...rest }, ref) {
   const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles23({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref, className: root24, ...rest, children: steps.map((s, index) => {
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref, className: root24, "data-testid": dataTestId, ...rest, children: steps.map((s, index) => {
     const state = index < active2 ? "done" : index === active2 ? "active" : "upcoming";
     const isActive = state === "active";
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
       /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react52.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: labelFor(isActive), children: s.label })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+          "div",
+          {
+            className: step2,
+            "aria-current": isActive ? "step" : void 0,
+            "data-testid": slot(`step-${index}`),
+            "data-state": states({ done: state === "done", active: isActive }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: labelFor(isActive), children: s.label })
+            ]
+          }
+        ),
         index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "data-part": "connector", className: connector2 })
       ] }, index)
     );
@@ -2110,8 +2199,9 @@ function useStyles24() {
 
 // src/components/tabs/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var Tabs = (0, import_react54.forwardRef)(function Tabs2({ items, value, onChange, ...rest }, ref) {
+var Tabs = (0, import_react54.forwardRef)(function Tabs2({ items, value, onChange, testId, ...rest }, ref) {
   const { root: root24, tabClass, panel: panel3 } = useStyles24();
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
   const baseId = (0, import_react54.useId)();
   const tabRefs = (0, import_react54.useRef)([]);
   const hasPanels = items.some((item3) => item3.content !== void 0);
@@ -2146,7 +2236,7 @@ var Tabs = (0, import_react54.forwardRef)(function Tabs2({ items, value, onChang
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref, role: "tablist", className: root24, ...rest, children: items.map((item3, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref, role: "tablist", className: root24, "data-testid": dataTestId, ...rest, children: items.map((item3, index) => {
       const active2 = item3.value === value;
       const tabbable = active2 || activeIndex === -1 && index === 0;
       return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -2162,6 +2252,8 @@ var Tabs = (0, import_react54.forwardRef)(function Tabs2({ items, value, onChang
           "aria-controls": hasPanels ? panelId(item3.value) : void 0,
           tabIndex: tabbable ? 0 : -1,
           className: tabClass(active2),
+          "data-testid": slot(`tab-${index}`),
+          "data-state": states({ selected: active2 }),
           onClick: () => onChange?.(item3.value),
           onKeyDown: (event) => onKeyDown(event, index),
           children: item3.label
@@ -2178,6 +2270,7 @@ var Tabs = (0, import_react54.forwardRef)(function Tabs2({ items, value, onChang
         hidden: item3.value !== value,
         tabIndex: 0,
         className: panel3,
+        "data-testid": slot(`panel-${item3.value}`),
         children: item3.content
       },
       item3.value
@@ -2505,14 +2598,25 @@ function useStyles27() {
 
 // src/components/snackbar/index.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var Snackbar = (0, import_react60.forwardRef)(function Snackbar2({ open, message: message2, action, onClose }, ref) {
+var Snackbar = (0, import_react60.forwardRef)(function Snackbar2({ open, message: message2, action, onClose, testId }, ref) {
   const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles27();
+  const { testId: dataTestId, slot } = useTestId("feedback", testId);
   if (!open || typeof document === "undefined") return null;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref, role: "status", className: root24, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: messageClass, children: message2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref, role: "status", className: root24, "data-testid": dataTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: messageClass, "data-testid": slot("message"), children: message2 }),
       action,
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(XIcon, { size: 18 }) })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Close",
+          className: closeBtn2,
+          "data-testid": slot("close"),
+          onClick: onClose,
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(XIcon, { size: 18 })
+        }
+      )
     ] }),
     document.body
   );
@@ -2549,14 +2653,15 @@ function useStyles28({ className }) {
 
 // src/components/table/index.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-function TableInner({ columns, rows, getRowKey, className, caption: caption2, ...rest }, ref) {
+function TableInner({ columns, rows, getRowKey, className, caption: caption2, testId, ...rest }, ref) {
   const { root: root24, th: th2, td: td2, alignRight: alignRight2, caption: captionClass } = useStyles28({ className });
+  const { testId: dataTestId, slot } = useTestId("list", testId);
   const headClass = (column) => column.align === "right" ? `${th2} ${alignRight2}` : th2;
   const cellClass = (column) => column.align === "right" ? `${td2} ${alignRight2}` : td2;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("table", { ref, className: root24, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("table", { ref, className: root24, "data-testid": dataTestId, ...rest, children: [
     caption2 != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("caption", { className: captionClass, children: caption2 }),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { scope: "col", className: headClass(column), children: column.header }, column.key)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { "data-testid": slot(`row-${index}`), children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
   ] });
 }
 var TableForwarded = (0, import_react62.forwardRef)(TableInner);
@@ -2586,12 +2691,13 @@ function useStyles29({ className }) {
 
 // src/components/app-bar/index.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var AppBar = (0, import_react64.forwardRef)(function AppBar2({ brand: brand2, actions: actions3, className, children, ...rest }, ref) {
+var AppBar = (0, import_react64.forwardRef)(function AppBar2({ brand: brand2, actions: actions3, className, children, testId, ...rest }, ref) {
   const styles = useStyles29({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("header", { ref, className: styles.root, ...rest, children: [
-    brand2 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: styles.brand, children: brand2 }) : null,
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("header", { ref, className: styles.root, "data-testid": dataTestId, ...rest, children: [
+    brand2 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: styles.brand, "data-testid": slot("brand"), children: brand2 }) : null,
     children,
-    actions3 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: styles.actions, children: actions3 }) : null
+    actions3 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: styles.actions, "data-testid": slot("actions"), children: actions3 }) : null
   ] });
 });
 
@@ -2623,13 +2729,24 @@ function useStyles30({
 
 // src/components/list-item/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var ListItem = (0, import_react66.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, children, ...rest }, ref) {
+var ListItem = (0, import_react66.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, testId, children, ...rest }, ref) {
   const styles = useStyles30({ selected: selected3, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ref, className: styles.root, ...rest, children: [
-    leading2 != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.leading, children: leading2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.content, children }),
-    trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.trailing, children: trailing2 })
-  ] });
+  const { testId: dataTestId, slot } = useTestId("list", testId);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      ref,
+      className: styles.root,
+      "data-testid": dataTestId,
+      "data-state": states({ selected: selected3 }),
+      ...rest,
+      children: [
+        leading2 != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.leading, "data-testid": slot("leading"), children: leading2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.content, "data-testid": slot("content"), children }),
+        trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.trailing, "data-testid": slot("trailing"), children: trailing2 })
+      ]
+    }
+  );
 });
 
 // src/components/icons/chevron-up/index.tsx