@octavius2929-personal/design-system 0.13.0 → 0.15.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,280 @@ 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_react9 = require("react");
 
 // src/components/typography/use-styles.ts
-var import_react5 = require("react");
+var import_react8 = require("react");
+
+// ../core/dist/index.js
+var import_react6 = require("react");
+var tokens = {
+  font: {
+    display: "'DM Serif Display', 'Times New Roman', serif",
+    text: "'Newsreader', Georgia, serif",
+    mono: "'IBM Plex Mono', 'SFMono-Regular', monospace",
+    black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif"
+  },
+  // Roles tipográficos: tamaño/interlineado/peso/tracking listos para typography.css.ts.
+  text: {
+    eyebrow: { size: "0.694rem", lineHeight: "1.2", weight: "500", letterSpacing: "0.14em" },
+    display: { size: "5.6rem", lineHeight: "1.05", weight: "600", letterSpacing: "-0.01em" },
+    h1: { size: "2.9rem", lineHeight: "1.05", weight: "600", letterSpacing: "-0.01em" },
+    h2: { size: "2.1rem", lineHeight: "1.2", weight: "600", letterSpacing: "0" },
+    h3: { size: "1.563rem", lineHeight: "1.2", weight: "500", letterSpacing: "0" },
+    h4: { size: "1.25rem", lineHeight: "1.2", weight: "600", letterSpacing: "0" },
+    body: { size: "1rem", lineHeight: "1.7", weight: "400", letterSpacing: "0" },
+    lead: { size: "1.25rem", lineHeight: "1.7", weight: "400", letterSpacing: "0" },
+    small: { size: "0.95rem", lineHeight: "1.5", weight: "400", letterSpacing: "0" },
+    caption: { size: "0.833rem", lineHeight: "1.5", weight: "400", letterSpacing: "0.04em" }
+  },
+  space: {
+    s0: "0",
+    s1: "0.25rem",
+    // 4
+    s2: "0.5rem",
+    // 8
+    s3: "0.75rem",
+    // 12
+    s4: "1rem",
+    // 16
+    s5: "1.5rem",
+    // 24
+    s6: "2rem",
+    // 32
+    s7: "3rem",
+    // 48
+    s8: "4rem",
+    // 64
+    s9: "6rem"
+    // 96
+  },
+  radius: { none: "0px", sm: "3px", md: "5px", lg: "8px", base: "4px", full: "999px" },
+  border: { hair: "1px", rule: "1.5px", heavy: "2px" },
+  // Tracking de mayúsculas: escala coherente alineada al uso real (eyebrow = widest).
+  tracking: { tight: "-0.01em", normal: "0", wide: "0.04em", wider: "0.1em", widest: "0.14em" },
+  weight: { light: "300", regular: "400", medium: "500", semibold: "600", bold: "700" },
+  dur: { fast: "120ms", base: "200ms", slow: "360ms" },
+  ease: { ink: "cubic-bezier(0.2, 0, 0, 1)" },
+  shadow: {
+    sm: "0 1px 0 rgba(20,17,14,0.06)",
+    md: "0 2px 10px -4px rgba(20,17,14,0.22)",
+    lg: "0 12px 32px -10px rgba(20,17,14,0.34)"
+  }
+};
+var tintaSchema = {
+  light: {
+    ...tokens,
+    color: {
+      bg1: "#F8F7F4",
+      bg2: "#FFFFFF",
+      bg3: "#EDEBE6",
+      bgInset: "#E4E1DA",
+      fg1: "#15130F",
+      fg2: "#494640",
+      fg3: "#737069",
+      fgOnAccent: "#F8F7F4",
+      border1: "rgba(21, 19, 15, 0.12)",
+      border2: "rgba(21, 19, 15, 0.26)",
+      borderStrong: "rgba(21, 19, 15, 0.85)",
+      accent: "#7B1E1E",
+      accentHover: "#631616",
+      accentSoft: "rgba(123, 30, 30, 0.10)",
+      ok: "#3E5C3A",
+      warn: "#8A6A1E",
+      danger: "#7B1E1E",
+      dangerHover: "#631616",
+      dangerSoft: "rgba(123, 30, 30, 0.10)",
+      info: "#2E4257",
+      focus: "#7B1E1E",
+      scrim: "rgba(20, 17, 14, 0.55)"
+    }
+  },
+  dark: {
+    ...tokens,
+    color: {
+      bg1: "#100E0B",
+      bg2: "#1A1611",
+      bg3: "#070605",
+      bgInset: "#221D16",
+      fg1: "#F2EDE2",
+      fg2: "#B7AF9F",
+      fg3: "#878070",
+      fgOnAccent: "#F2EDE2",
+      border1: "rgba(242, 237, 226, 0.13)",
+      border2: "rgba(242, 237, 226, 0.26)",
+      borderStrong: "rgba(242, 237, 226, 0.80)",
+      accent: "#B23A3A",
+      accentHover: "#CC4A4A",
+      accentSoft: "rgba(178, 58, 58, 0.16)",
+      ok: "#7FA178",
+      warn: "#C7A04E",
+      danger: "#C24A4A",
+      dangerHover: "#D45C5C",
+      dangerSoft: "rgba(194, 74, 74, 0.16)",
+      info: "#6E92B4",
+      focus: "#CC4A4A",
+      scrim: "rgba(7, 6, 5, 0.65)"
+    }
+  },
+  sepia: {
+    ...tokens,
+    color: {
+      bg1: "#E9DDC4",
+      bg2: "#F2E9D5",
+      bg3: "#DCCDAC",
+      bgInset: "#D2C09B",
+      fg1: "#2A2013",
+      fg2: "#5A4A33",
+      fg3: "#6E6046",
+      fgOnAccent: "#F2E9D5",
+      border1: "rgba(42, 32, 19, 0.16)",
+      border2: "rgba(42, 32, 19, 0.32)",
+      borderStrong: "rgba(42, 32, 19, 0.82)",
+      accent: "#7A2E12",
+      accentHover: "#5F2109",
+      accentSoft: "rgba(122, 46, 18, 0.12)",
+      ok: "#4A5A2E",
+      warn: "#8A6A1E",
+      danger: "#7A2E12",
+      dangerHover: "#5F2109",
+      dangerSoft: "rgba(122, 46, 18, 0.12)",
+      info: "#3C4E57",
+      focus: "#7A2E12",
+      scrim: "rgba(42, 32, 19, 0.55)"
+    }
+  },
+  contrast: {
+    ...tokens,
+    color: {
+      bg1: "#FFFFFF",
+      bg2: "#FFFFFF",
+      bg3: "#F2F2F2",
+      bgInset: "#EAEAEA",
+      fg1: "#000000",
+      fg2: "#000000",
+      fg3: "#2B2B2B",
+      fgOnAccent: "#FFFFFF",
+      border1: "#000000",
+      border2: "#000000",
+      borderStrong: "#000000",
+      accent: "#000000",
+      accentHover: "#2B2B2B",
+      accentSoft: "rgba(0, 0, 0, 0.08)",
+      ok: "#000000",
+      warn: "#000000",
+      danger: "#8B0000",
+      dangerHover: "#6B0000",
+      dangerSoft: "rgba(139, 0, 0, 0.10)",
+      info: "#000000",
+      focus: "#000000",
+      scrim: "rgba(0, 0, 0, 0.7)"
+    }
+  }
+};
+var schemas = { tinta: tintaSchema };
+var modeNames2 = ["light", "dark", "sepia", "contrast"];
+function resolveMode(preference, systemMode) {
+  return preference === "system" ? systemMode : preference;
+}
+function useThemeStore(options, storage, system) {
+  const { defaultSchema = "tinta", defaultMode = "light" } = options;
+  const [persisted] = (0, import_react6.useState)(() => storage.read());
+  const [schema, setSchema] = (0, import_react6.useState)(persisted?.schema ?? defaultSchema);
+  const [preference, setPreference] = (0, import_react6.useState)(
+    persisted?.preference ?? defaultMode
+  );
+  const [systemMode, setSystemMode] = (0, import_react6.useState)(() => system.get());
+  (0, import_react6.useEffect)(() => {
+    if (preference !== "system") return;
+    const update = () => setSystemMode(system.get());
+    update();
+    return system.subscribe(update);
+  }, [preference, system]);
+  const mode = resolveMode(preference, systemMode);
+  (0, import_react6.useEffect)(() => {
+    storage.write({ schema, preference });
+  }, [schema, preference, storage]);
+  return (0, import_react6.useMemo)(
+    () => ({
+      schema,
+      mode,
+      preference,
+      colorTokens: schemas[schema][mode].color,
+      setSchema,
+      setMode: setPreference,
+      toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),
+      cycleMode: () => {
+        const next = modeNames2[(modeNames2.indexOf(mode) + 1) % modeNames2.length];
+        if (next) setPreference(next);
+      }
+    }),
+    [schema, mode, preference]
+  );
+}
 
 // src/theme/context/theme-context.tsx
-var import_react4 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react7 = require("react");
+
+// src/theme/adapters.ts
+var SYSTEM_QUERIES = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"];
+function createWebStorageAdapter(storageKey, persist) {
+  return {
+    read() {
+      if (!persist || typeof window === "undefined") return null;
+      try {
+        const raw = window.localStorage.getItem(storageKey);
+        return raw ? JSON.parse(raw) : null;
+      } catch {
+        return null;
+      }
+    },
+    write(value) {
+      if (!persist || typeof window === "undefined") return;
+      try {
+        window.localStorage.setItem(storageKey, JSON.stringify(value));
+      } catch {
+      }
+    }
+  };
+}
+function createWebSystemModeAdapter() {
+  function get() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+    if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+    return "light";
+  }
+  return {
+    get,
+    subscribe(onChange) {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return () => {
+        };
+      }
+      const mqls = SYSTEM_QUERIES.map((q) => window.matchMedia(q));
+      for (const mql of mqls) mql.addEventListener?.("change", onChange);
+      return () => {
+        for (const mql of mqls) mql.removeEventListener?.("change", onChange);
+      };
+    }
+  };
+}
+
+// src/theme/context/theme-context.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var noop = () => {
 };
 var DEFAULT_VALUE = {
@@ -161,29 +456,7 @@ var DEFAULT_VALUE = {
   toggleMode: noop,
   cycleMode: noop
 };
-var ThemeContext = (0, import_react4.createContext)(null);
-function resolveSystemMode() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
-  if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
-  if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
-  return "light";
-}
-function readStored(key) {
-  if (typeof window === "undefined") return null;
-  try {
-    const raw = window.localStorage.getItem(key);
-    return raw ? JSON.parse(raw) : null;
-  } catch {
-    return null;
-  }
-}
-function writeStored(key, value) {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.setItem(key, JSON.stringify(value));
-  } catch {
-  }
-}
+var ThemeContext = (0, import_react7.createContext)(null);
 function ThemeProvider({
   children,
   defaultSchema = "tinta",
@@ -191,50 +464,29 @@ function ThemeProvider({
   storageKey = "ds-theme",
   persist = true
 }) {
-  const [schema, setSchema] = (0, import_react4.useState)(
-    () => persist && readStored(storageKey)?.schema || defaultSchema
-  );
-  const [preference, setPreference] = (0, import_react4.useState)(
-    () => (persist ? readStored(storageKey)?.preference : null) ?? defaultMode
+  const storage = (0, import_react7.useMemo)(
+    () => createWebStorageAdapter(storageKey, persist),
+    [storageKey, persist]
   );
-  const [systemMode, setSystemMode] = (0, import_react4.useState)(resolveSystemMode);
-  (0, import_react4.useEffect)(() => {
-    if (preference !== "system") return;
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    const mqls = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"].map(
-      (q) => window.matchMedia(q)
-    );
-    const onChange = () => setSystemMode(resolveSystemMode());
-    onChange();
-    for (const mql of mqls) mql.addEventListener?.("change", onChange);
-    return () => {
-      for (const mql of mqls) mql.removeEventListener?.("change", onChange);
-    };
-  }, [preference]);
-  const mode = preference === "system" ? systemMode : preference;
-  (0, import_react4.useEffect)(() => {
-    if (persist) writeStored(storageKey, { schema, preference });
-  }, [schema, preference, persist, storageKey]);
-  const value = (0, import_react4.useMemo)(
+  const system = (0, import_react7.useMemo)(() => createWebSystemModeAdapter(), []);
+  const store = useThemeStore({ defaultSchema, defaultMode }, storage, system);
+  const value = (0, import_react7.useMemo)(
     () => ({
-      schema,
-      mode,
-      preference,
-      themeClass: themes[schema][mode],
-      setSchema,
-      setMode: setPreference,
-      toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),
-      cycleMode: () => {
-        const next = modeNames[(modeNames.indexOf(mode) + 1) % modeNames.length];
-        if (next) setPreference(next);
-      }
+      schema: store.schema,
+      mode: store.mode,
+      preference: store.preference,
+      themeClass: themes[store.schema][store.mode],
+      setSchema: store.setSchema,
+      setMode: store.setMode,
+      toggleMode: store.toggleMode,
+      cycleMode: store.cycleMode
     }),
-    [schema, mode, preference]
+    [store]
   );
-  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_react7.useContext)(ThemeContext) ?? DEFAULT_VALUE;
 }
 
 // src/theme/typography.css.ts
@@ -252,7 +504,7 @@ function useStyles2({
   align: align2
 }) {
   const { themeClass } = useTheme();
-  const className = (0, import_react5.useMemo)(
+  const className = (0, import_react8.useMemo)(
     () => [
       themeClass,
       base,
@@ -266,7 +518,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,19 +533,20 @@ 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_react9.forwardRef)(
   TypographyInner
 );
 TypographyForwarded.displayName = "Typography";
 var Typography = TypographyForwarded;
 
 // src/components/button/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/testing/states.ts
 function states(map) {
@@ -301,48 +554,8 @@ 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");
+var import_react10 = require("react");
 
 // src/components/button/use-styles.css.ts
 var full = "use-styles_full__1pbtill4";
@@ -363,7 +576,7 @@ function useStyles3({
   className
 }) {
   const { themeClass } = useTheme();
-  const container = (0, import_react9.useMemo)(
+  const container = (0, import_react10.useMemo)(
     () => [
       themeClass,
       root,
@@ -380,7 +593,7 @@ function useStyles3({
 // src/components/button/index.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ICON_SIZE = { sm: 14, md: 16, lg: 18 };
-var Button = (0, import_react10.forwardRef)(function Button2({
+var Button = (0, import_react11.forwardRef)(function Button2({
   variant: variant2,
   tone: tone4,
   size: size3 = "md",
@@ -415,10 +628,10 @@ var Button = (0, import_react10.forwardRef)(function Button2({
 });
 
 // src/components/divider/index.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/divider/use-styles.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/divider/use-styles.css.ts
 var horizontal = "use-styles_horizontal__1n7v7yj1";
@@ -431,7 +644,7 @@ var vertical = "use-styles_vertical__1n7v7yj2";
 // src/components/divider/use-styles.ts
 function useStyles4({ vertical: vertical2, hasLabel }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react11.useMemo)(
+  const root24 = (0, import_react12.useMemo)(
     () => [
       themeClass,
       root2,
@@ -444,24 +657,25 @@ 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_react13.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
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/avatar/use-styles.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/avatar/use-styles.css.ts
 var root3 = "use-styles_root__1mn1rmu0";
@@ -475,7 +689,7 @@ function useStyles5({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react13.useMemo)(
+  const root24 = (0, import_react14.useMemo)(
     () => [
       themeClass,
       root3,
@@ -490,16 +704,17 @@ 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_react15.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
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/badge/use-styles.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/badge/use-styles.css.ts
 var dot = "use-styles_dot__1wpei6p1";
@@ -512,29 +727,30 @@ function useStyles6({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react15.useMemo)(
+  const root24 = (0, import_react16.useMemo)(
     () => [themeClass, root4, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  const dot3 = (0, import_react15.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
+  const dot3 = (0, import_react16.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
   return { root: root24, dot: dot3 };
 }
 
 // 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_react17.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 })
   ] });
 });
 
 // src/components/progress/index.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/progress/use-styles.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/progress/use-styles.css.ts
 var bar = "use-styles_bar__kbop7v3";
@@ -550,7 +766,7 @@ function useStyles7({
 }) {
   const { themeClass } = useTheme();
   const indeterminate2 = value === void 0;
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react18.useMemo)(() => {
     const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
     if (variant2 === "circular") {
       return { track: "", bar: "", spinner: root24(spinner) };
@@ -565,9 +781,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_react19.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 +796,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,14 +811,23 @@ 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")
+        }
+      )
     }
   );
 });
 
 // src/components/chip/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/icons/x/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -627,7 +855,7 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/chip/use-styles.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/chip/use-styles.css.ts
 var clickable = "use-styles_clickable__1axilf44";
@@ -643,7 +871,7 @@ function useStyles8({
   clickable: clickable2
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react19.useMemo)(
+  const root24 = (0, import_react20.useMemo)(
     () => [
       themeClass,
       root5,
@@ -657,21 +885,43 @@ 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_react21.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
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/icons/check/index.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -696,7 +946,7 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/checkbox/use-styles.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/checkbox/use-styles.css.ts
 var box = "use-styles_box__9zoga91";
@@ -709,11 +959,11 @@ var root6 = "use-styles_root__9zoga90";
 // src/components/checkbox/use-styles.ts
 function useStyles9({ checked, disabled: disabled3 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react21.useMemo)(
+  const root24 = (0, import_react22.useMemo)(
     () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
     [themeClass, disabled3]
   );
-  const box2 = (0, import_react21.useMemo)(
+  const box2 = (0, import_react22.useMemo)(
     () => [box, checked && boxChecked].filter(Boolean).join(" "),
     [checked]
   );
@@ -722,13 +972,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_react23.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",
       {
@@ -748,10 +999,10 @@ var Checkbox = (0, import_react22.forwardRef)(function Checkbox2({ checked = fal
 });
 
 // src/components/radio/index.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/radio/use-styles.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/radio/use-styles.css.ts
 var circle = "use-styles_circle__vy61b42";
@@ -767,7 +1018,7 @@ function useStyles10({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react23.useMemo)(
+  const root24 = (0, import_react24.useMemo)(
     () => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
     [themeClass, disabled3, className]
   );
@@ -782,9 +1033,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_react25.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",
       {
@@ -805,10 +1057,10 @@ var Radio = (0, import_react24.forwardRef)(function Radio2({ checked, onChange,
 });
 
 // src/components/switch/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/switch/use-styles.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/components/switch/use-styles.css.ts
 var input3 = "surfaces_srOnly__1qa7atn0";
@@ -822,7 +1074,7 @@ var trackChecked = "use-styles_trackChecked__1r6kem72";
 // src/components/switch/use-styles.ts
 function useStyles11({ checked }) {
   const { themeClass } = useTheme();
-  return (0, import_react25.useMemo)(
+  return (0, import_react26.useMemo)(
     () => ({
       root: [themeClass, root8].filter(Boolean).join(" "),
       input: input3,
@@ -836,9 +1088,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_react27.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",
       {
@@ -862,13 +1115,13 @@ var Switch = (0, import_react26.forwardRef)(function Switch2({ checked = false,
 });
 
 // src/components/text-field/index.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/base-field/index.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/base-field/use-styles.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/base-field/use-styles.css.ts
 var field = "use-styles_field__1c3cgd3";
@@ -887,7 +1140,7 @@ var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
 // src/components/base-field/use-styles.ts
 function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
   const { themeClass } = useTheme();
-  return (0, import_react27.useMemo)(() => {
+  return (0, import_react28.useMemo)(() => {
     const root24 = [themeClass, root9].filter(Boolean).join(" ");
     const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
     const input6 = [
@@ -912,8 +1165,8 @@ function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
 
 // src/components/base-field/index.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var BaseField = (0, import_react28.forwardRef)(function BaseField2({ label: label7, help, error, startIcon: StartIcon, trailing: trailing2, id, className, testId, children }, ref) {
-  const autoId = (0, import_react28.useId)();
+var BaseField = (0, import_react29.forwardRef)(function BaseField2({ label: label7, help, error, startIcon: StartIcon, trailing: trailing2, id, className, testId, children }, ref) {
+  const autoId = (0, import_react29.useId)();
   const controlId = id ?? autoId;
   const errorMessage = error != null && error !== false && error !== true && error !== "" ? error : null;
   const hasError = error === true || errorMessage != null;
@@ -961,7 +1214,7 @@ var import_jsx_runtime17 = (
   // tipo público de la ref es HTMLInputElement (la ref aplica solo a la rama <input>).
   require("react/jsx-runtime")
 );
-var TextField = (0, import_react29.forwardRef)(function TextField2({
+var TextField = (0, import_react30.forwardRef)(function TextField2({
   label: label7,
   help,
   error,
@@ -1012,7 +1265,7 @@ var TextField = (0, import_react29.forwardRef)(function TextField2({
 });
 
 // src/components/password-field/index.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/components/icons/eye/index.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -1067,21 +1320,21 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/password-field/use-styles.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/password-field/use-styles.css.ts
 var revealButton = "use-styles_revealButton__rsu9d50";
 
 // src/components/password-field/use-styles.ts
 function useStyles13() {
-  return (0, import_react30.useMemo)(() => ({ revealButton }), []);
+  return (0, import_react31.useMemo)(() => ({ revealButton }), []);
 }
 
 // src/components/password-field/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var PasswordField = (0, import_react31.forwardRef)(
+var PasswordField = (0, import_react32.forwardRef)(
   function PasswordField2({ label: label7, help, error, startIcon, onChange, id, className, ...rest }, ref) {
-    const [reveal, setReveal] = (0, import_react31.useState)(false);
+    const [reveal, setReveal] = (0, import_react32.useState)(false);
     const classes = useStyles13();
     const handleChange = (e) => {
       onChange?.(e.target.value);
@@ -1127,7 +1380,7 @@ var PasswordField = (0, import_react31.forwardRef)(
 );
 
 // src/components/money-field/index.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function parseAmount(raw) {
   const cleaned = raw.replace(/[^0-9.-]/g, "");
@@ -1135,7 +1388,7 @@ function parseAmount(raw) {
   const n = Number.parseFloat(cleaned);
   return Number.isNaN(n) ? null : n;
 }
-var MoneyField = (0, import_react32.forwardRef)(function MoneyField2({
+var MoneyField = (0, import_react33.forwardRef)(function MoneyField2({
   value,
   onChange,
   currency = "USD",
@@ -1150,9 +1403,9 @@ var MoneyField = (0, import_react32.forwardRef)(function MoneyField2({
   onBlur,
   ...rest
 }, ref) {
-  const [focused, setFocused] = (0, import_react32.useState)(false);
-  const [draft, setDraft] = (0, import_react32.useState)("");
-  const formatter = (0, import_react32.useMemo)(
+  const [focused, setFocused] = (0, import_react33.useState)(false);
+  const [draft, setDraft] = (0, import_react33.useState)("");
+  const formatter = (0, import_react33.useMemo)(
     () => new Intl.NumberFormat(locale, { style: "currency", currency }),
     [locale, currency]
   );
@@ -1195,10 +1448,10 @@ var MoneyField = (0, import_react32.forwardRef)(function MoneyField2({
 });
 
 // src/components/icon-button/index.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/icon-button/use-styles.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/icon-button/use-styles.css.ts
 var accent = "use-styles_accent__18np0q02";
@@ -1211,7 +1464,7 @@ function useStyles14({
   tone: tone4 = "ink"
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react33.useMemo)(
+  const root24 = (0, import_react34.useMemo)(
     () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
     [themeClass, active2, tone4]
   );
@@ -1220,7 +1473,7 @@ function useStyles14({
 
 // src/components/icon-button/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var IconButton = (0, import_react34.forwardRef)(function IconButton2({ icon: Icon, active: active2, tone: tone4, title, type = "button", testId, ...rest }, ref) {
+var IconButton = (0, import_react35.forwardRef)(function IconButton2({ icon: Icon, active: active2, tone: tone4, title, type = "button", testId, ...rest }, ref) {
   if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
     const restProps = rest;
     const hasName = title.trim() !== "" || restProps["aria-label"] != null || restProps["aria-labelledby"] != null;
@@ -1247,10 +1500,10 @@ var IconButton = (0, import_react34.forwardRef)(function IconButton2({ icon: Ico
 });
 
 // src/components/card/index.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/card/use-styles.ts
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/card/use-styles.css.ts
 var body = "use-styles_body__1fuvd022";
@@ -1261,15 +1514,16 @@ var root11 = "use-styles_root__1fuvd020";
 // src/components/card/use-styles.ts
 function useStyles15() {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react35.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
+  const root24 = (0, import_react36.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
 // 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_react37.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();
@@ -1294,7 +1548,7 @@ var Card2 = Object.assign(CardRoot, {
 });
 
 // src/components/alert/index.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/icons/circle-check/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
@@ -1400,7 +1654,7 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/alert/use-styles.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/components/alert/use-styles.css.ts
 var content = "use-styles_content__ivsh6u6";
@@ -1414,7 +1668,7 @@ function useStyles16({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react37.useMemo)(
+  const root24 = (0, import_react38.useMemo)(
     () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
     [themeClass, severity2, className]
   );
@@ -1433,12 +1687,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_react39.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 })
     ] })
@@ -1446,10 +1701,10 @@ var Alert = (0, import_react38.forwardRef)(function Alert2({ severity: severity2
 });
 
 // src/components/tooltip/index.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 
 // src/components/tooltip/use-styles.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
@@ -1461,11 +1716,11 @@ function useStyles17({
   placement: placement2 = "top"
 }) {
   const { themeClass } = useTheme();
-  const wrapper4 = (0, import_react39.useMemo)(
+  const wrapper4 = (0, import_react40.useMemo)(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = (0, import_react39.useMemo)(
+  const bubble2 = (0, import_react40.useMemo)(
     () => [bubble, placement[placement2]].filter(Boolean).join(" "),
     [placement2]
   );
@@ -1475,11 +1730,12 @@ 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) {
-  const [open, setOpen] = (0, import_react40.useState)(false);
-  const tooltipId = (0, import_react40.useId)();
+var Tooltip = (0, import_react41.forwardRef)(function Tooltip2({ label: label7, children, placement: placement2, testId }, ref) {
+  const [open, setOpen] = (0, import_react41.useState)(false);
+  const tooltipId = (0, import_react41.useId)();
   const { wrapper: wrapper4, bubble: bubble2 } = useStyles17({ placement: placement2 });
-  const hideTimer = (0, import_react40.useRef)(null);
+  const { testId: dataTestId, slot } = useTestId("feedback", testId);
+  const hideTimer = (0, import_react41.useRef)(null);
   const clearHide = () => {
     if (hideTimer.current) {
       clearTimeout(hideTimer.current);
@@ -1498,7 +1754,7 @@ var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7,
     clearHide();
     setOpen(false);
   };
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     return () => {
       if (hideTimer.current) clearTimeout(hideTimer.current);
     };
@@ -1511,12 +1767,13 @@ var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7,
   };
   const previousDescribedBy = children.props["aria-describedby"];
   const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
-  const trigger2 = (0, import_react40.cloneElement)(children, { "aria-describedby": describedBy });
+  const trigger2 = (0, import_react41.cloneElement)(children, { "aria-describedby": describedBy });
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "span",
     {
       ref,
       className: wrapper4,
+      "data-testid": dataTestId,
       onMouseEnter: show,
       onMouseLeave: scheduleHide,
       onFocus: show,
@@ -1530,6 +1787,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
@@ -1541,7 +1799,7 @@ var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7,
 });
 
 // src/components/select/index.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/icons/chevron-down/index.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
@@ -1566,7 +1824,7 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/select/use-styles.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -1585,7 +1843,7 @@ function useStyles18({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return (0, import_react41.useMemo)(() => {
+  return (0, import_react42.useMemo)(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root13].filter(Boolean).join(" "),
@@ -1601,16 +1859,16 @@ function useStyles18({
 
 // src/components/select/index.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Select = (0, import_react42.forwardRef)(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
-  const [open, setOpen] = (0, import_react42.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react42.useState)(0);
-  const rootRef = (0, import_react42.useRef)(null);
+var Select = (0, import_react43.forwardRef)(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
+  const [open, setOpen] = (0, import_react43.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react43.useState)(0);
+  const rootRef = (0, import_react43.useRef)(null);
   const setRootRef = (node) => {
     rootRef.current = node;
     if (typeof ref === "function") ref(node);
     else if (ref) ref.current = node;
   };
-  const baseId = (0, import_react42.useId)();
+  const baseId = (0, import_react43.useId)();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const {
@@ -1622,7 +1880,7 @@ var Select = (0, import_react42.forwardRef)(function Select2({ options, value, o
     menu: menu2,
     optionClass
   } = useStyles18({ open });
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) {
@@ -1733,10 +1991,10 @@ var Select = (0, import_react42.forwardRef)(function Select2({ options, value, o
 });
 
 // src/components/slider/index.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/components/slider/use-styles.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -1750,7 +2008,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
 // src/components/slider/use-styles.ts
 function useStyles19() {
   const { themeClass } = useTheme();
-  return (0, import_react43.useMemo)(() => {
+  return (0, import_react44.useMemo)(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -1766,7 +2024,7 @@ function useStyles19() {
 
 // src/components/slider/index.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var Slider = (0, import_react44.forwardRef)(function Slider2({ value = 0, onChange, min = 0, max = 100, step: step2 = 1, disabled: disabled3, label: label7, ...rest }, ref) {
+var Slider = (0, import_react45.forwardRef)(function Slider2({ value = 0, onChange, min = 0, max = 100, step: step2 = 1, disabled: disabled3, label: label7, ...rest }, ref) {
   const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles19();
   const span = max - min;
   const percent = span > 0 ? (value - min) / span * 100 : 0;
@@ -1800,10 +2058,10 @@ var Slider = (0, import_react44.forwardRef)(function Slider2({ value = 0, onChan
 });
 
 // src/components/accordion/index.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 
 // src/components/accordion/use-styles.ts
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -1816,7 +2074,7 @@ var root15 = "use-styles_root__1cjrdh90";
 // src/components/accordion/use-styles.ts
 function useStyles20({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react45.useMemo)(
+  return (0, import_react46.useMemo)(
     () => ({
       root: [themeClass, root15, className].filter(Boolean).join(" "),
       item,
@@ -1830,9 +2088,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) {
-  const [open, setOpen] = (0, import_react46.useState)(defaultOpen);
+var Accordion = (0, import_react47.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className, testId }, ref) {
+  const [open, setOpen] = (0, import_react47.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,33 +2099,54 @@ 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
+    );
   }) });
 });
 
 // src/components/breadcrumbs/index.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/components/icons/chevron-right/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -1891,7 +2171,7 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/breadcrumbs/use-styles.ts
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -1902,7 +2182,7 @@ var separator = "use-styles_separator__7u0du63";
 // src/components/breadcrumbs/use-styles.ts
 function useStyles21({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react47.useMemo)(
+  const root24 = (0, import_react48.useMemo)(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1911,20 +2191,21 @@ 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_react49.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 }),
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react49.Fragment, { children: [
+      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);
   }) });
 });
 
 // src/components/pagination/index.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/components/icons/chevron-left/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -1949,7 +2230,7 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/pagination/use-styles.ts
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -1961,7 +2242,7 @@ var root17 = "use-styles_root__1azgzoh0";
 // src/components/pagination/use-styles.ts
 function useStyles22() {
   const { themeClass } = useTheme();
-  return (0, import_react49.useMemo)(
+  return (0, import_react50.useMemo)(
     () => ({
       root: [themeClass, root17].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -1987,13 +2268,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_react51.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 +2283,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 +2317,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 })
       }
@@ -2036,10 +2326,10 @@ var Pagination = (0, import_react50.forwardRef)(function Pagination2({ count, pa
 });
 
 // src/components/stepper/index.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 
 // src/components/stepper/use-styles.ts
-var import_react51 = require("react");
+var import_react52 = require("react");
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -2054,7 +2344,7 @@ var step = "use-styles_step__79pt4e1";
 // src/components/stepper/use-styles.ts
 function useStyles23({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react51.useMemo)(() => {
+  return (0, import_react52.useMemo)(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -2068,18 +2358,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_react53.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)(import_react53.Fragment, { children: [
+        /* @__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)
     );
@@ -2087,10 +2387,10 @@ var Stepper = (0, import_react52.forwardRef)(function Stepper2({ steps, active:
 });
 
 // src/components/tabs/index.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 
 // src/components/tabs/use-styles.ts
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/components/tabs/use-styles.css.ts
 var panel2 = "use-styles_panel__1l4m7t43";
@@ -2101,7 +2401,7 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
 // src/components/tabs/use-styles.ts
 function useStyles24() {
   const { themeClass } = useTheme();
-  return (0, import_react53.useMemo)(() => {
+  return (0, import_react54.useMemo)(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
     return { root: root24, tab, tabClass, panel: panel2 };
@@ -2110,10 +2410,11 @@ 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_react55.forwardRef)(function Tabs2({ items, value, onChange, testId, ...rest }, ref) {
   const { root: root24, tabClass, panel: panel3 } = useStyles24();
-  const baseId = (0, import_react54.useId)();
-  const tabRefs = (0, import_react54.useRef)([]);
+  const { testId: dataTestId, slot } = useTestId("nav", testId);
+  const baseId = (0, import_react55.useId)();
+  const tabRefs = (0, import_react55.useRef)([]);
   const hasPanels = items.some((item3) => item3.content !== void 0);
   const activeIndex = items.findIndex((item3) => item3.value === value);
   const tabId = (v) => `${baseId}-tab-${v}`;
@@ -2146,7 +2447,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 +2463,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 +2481,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
@@ -2186,10 +2490,10 @@ var Tabs = (0, import_react54.forwardRef)(function Tabs2({ items, value, onChang
 });
 
 // src/components/menu/index.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // src/components/menu/use-styles.ts
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -2200,7 +2504,7 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
 // src/components/menu/use-styles.ts
 function useStyles25() {
   const { themeClass } = useTheme();
-  return (0, import_react55.useMemo)(
+  return (0, import_react56.useMemo)(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
       list,
@@ -2217,18 +2521,18 @@ function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, items, testId }, ref) {
+var Menu = (0, import_react57.forwardRef)(function Menu2({ trigger: trigger2, items, testId }, ref) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles25();
   const { testId: rootTestId, slot } = useTestId("menu", testId);
-  const [open, setOpen] = (0, import_react56.useState)(false);
-  const [alignEnd, setAlignEnd] = (0, import_react56.useState)(false);
-  const rootRef = (0, import_react56.useRef)(null);
+  const [open, setOpen] = (0, import_react57.useState)(false);
+  const [alignEnd, setAlignEnd] = (0, import_react57.useState)(false);
+  const rootRef = (0, import_react57.useRef)(null);
   const setRootRef = (node) => {
     rootRef.current = node;
     assignRef(ref, node);
   };
-  const listRef = (0, import_react56.useRef)(null);
-  const triggerRef = (0, import_react56.useRef)(null);
+  const listRef = (0, import_react57.useRef)(null);
+  const triggerRef = (0, import_react57.useRef)(null);
   const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
@@ -2240,7 +2544,7 @@ var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, it
     setOpen(false);
     triggerRef.current?.focus();
   };
-  (0, import_react56.useLayoutEffect)(() => {
+  (0, import_react57.useLayoutEffect)(() => {
     if (!open) {
       setAlignEnd(false);
       return;
@@ -2252,7 +2556,7 @@ var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, it
     const viewport = document.documentElement.clientWidth;
     setAlignEnd(rootLeft + listEl.offsetWidth > viewport);
   }, [open]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
     const onDocMouseDown = (event) => {
@@ -2308,7 +2612,7 @@ var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, it
     triggerRef.current = node;
     assignRef(consumerRef, node);
   };
-  const clonedTrigger = (0, import_react56.cloneElement)(trigger2, {
+  const clonedTrigger = (0, import_react57.cloneElement)(trigger2, {
     ref: mergedTriggerRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
@@ -2359,11 +2663,11 @@ var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, it
 });
 
 // src/components/dialog/index.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/dialog/use-styles.ts
-var import_react57 = require("react");
+var import_react58 = require("react");
 
 // src/components/dialog/use-styles.css.ts
 var actions = "use-styles_actions__5tstu83";
@@ -2374,7 +2678,7 @@ var surface = "use-styles_surface__5tstu81";
 // src/components/dialog/use-styles.ts
 function useStyles26() {
   const { themeClass } = useTheme();
-  return (0, import_react57.useMemo)(
+  return (0, import_react58.useMemo)(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface,
@@ -2392,18 +2696,18 @@ function assignRef2(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Dialog = (0, import_react58.forwardRef)(function Dialog2({ open, onClose, title, actions: actions3, children, testId }, ref) {
+var Dialog = (0, import_react59.forwardRef)(function Dialog2({ open, onClose, title, actions: actions3, children, testId }, ref) {
   const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles26();
   const { testId: rootTestId, slot } = useTestId("dialog", testId);
-  const surfaceRef = (0, import_react58.useRef)(null);
+  const surfaceRef = (0, import_react59.useRef)(null);
   const setSurfaceRef = (node) => {
     surfaceRef.current = node;
     assignRef2(ref, node);
   };
-  const previouslyFocused = (0, import_react58.useRef)(null);
-  const generatedId = (0, import_react58.useId)();
+  const previouslyFocused = (0, import_react59.useRef)(null);
+  const generatedId = (0, import_react59.useId)();
   const titleId = title != null ? generatedId : void 0;
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -2411,13 +2715,13 @@ var Dialog = (0, import_react58.forwardRef)(function Dialog2({ open, onClose, ti
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     surfaceRef.current?.focus();
     return () => previouslyFocused.current?.focus?.();
   }, [open]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!open) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -2479,11 +2783,11 @@ var Dialog = (0, import_react58.forwardRef)(function Dialog2({ open, onClose, ti
 });
 
 // src/components/snackbar/index.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/snackbar/use-styles.ts
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -2493,7 +2797,7 @@ var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
 // src/components/snackbar/use-styles.ts
 function useStyles27() {
   const { themeClass } = useTheme();
-  return (0, import_react59.useMemo)(
+  return (0, import_react60.useMemo)(
     () => ({
       root: [themeClass, root20].filter(Boolean).join(" "),
       message,
@@ -2505,24 +2809,35 @@ 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_react61.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
   );
 });
 
 // src/components/table/index.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 
 // src/components/table/use-styles.ts
-var import_react61 = require("react");
+var import_react62 = require("react");
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
@@ -2534,7 +2849,7 @@ var th = "use-styles_th__1n2cz6i1";
 // src/components/table/use-styles.ts
 function useStyles28({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react61.useMemo)(
+  const root24 = (0, import_react62.useMemo)(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2549,25 +2864,26 @@ 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);
+var TableForwarded = (0, import_react63.forwardRef)(TableInner);
 TableForwarded.displayName = "Table";
 var Table = TableForwarded;
 
 // src/components/app-bar/index.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 
 // src/components/app-bar/use-styles.ts
-var import_react63 = require("react");
+var import_react64 = require("react");
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -2577,7 +2893,7 @@ var root22 = "use-styles_root__1h133nh0";
 // src/components/app-bar/use-styles.ts
 function useStyles29({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react63.useMemo)(
+  const root24 = (0, import_react64.useMemo)(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2586,20 +2902,21 @@ 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_react65.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
   ] });
 });
 
 // src/components/list-item/index.tsx
-var import_react66 = require("react");
+var import_react67 = require("react");
 
 // src/components/list-item/use-styles.ts
-var import_react65 = require("react");
+var import_react66 = require("react");
 
 // src/components/list-item/use-styles.css.ts
 var content2 = "use-styles_content__kbreq13";
@@ -2614,7 +2931,7 @@ function useStyles30({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react65.useMemo)(
+  const root24 = (0, import_react66.useMemo)(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
     [themeClass, selected3, className]
   );
@@ -2623,13 +2940,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_react67.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