@stigmer/react 3.9.0 → 3.11.0

package/src/skill/SkillUploader.tsx

@@ -98,7 +98,7 @@ export function SkillUploader({
   }, [upload, dupCheck]);
 
   return (
-    <div className={cn("flex flex-col gap-0 rounded-lg border border-border bg-card", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-0 stg:rounded-lg stg:border stg:border-border stg:bg-card", className)}>
       {upload.preview ? (
         <PreviewPhase
           preview={upload.preview}
@@ -178,7 +178,7 @@ function DropZonePhase({
   );
 
   return (
-    <div className="flex flex-col">
+    <div className="stg:flex stg:flex-col">
       <div
         role="button"
         tabIndex={0}
@@ -189,30 +189,30 @@ function DropZonePhase({
         onClick={handleClick}
         onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handleClick(); }}
         className={cn(
-          "flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-12 transition-colors cursor-pointer",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "stg:flex stg:flex-col stg:items-center stg:justify-center stg:gap-3 stg:rounded-lg stg:border-2 stg:border-dashed stg:p-12 stg:transition-colors stg:cursor-pointer",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           isDragOver
-            ? "border-primary bg-muted-subtle"
-            : "border-border hover:border-muted-foreground hover:bg-muted-subtle",
-          isProcessing && "pointer-events-none opacity-60",
+            ? "stg:border-primary stg:bg-muted-subtle"
+            : "stg:border-border stg:hover:border-muted-foreground stg:hover:bg-muted-subtle",
+          isProcessing && "stg:pointer-events-none stg:opacity-60",
         )}
       >
-        <UploadIcon className={cn("size-10 text-muted-foreground", isDragOver && "text-primary")} />
+        <UploadIcon className={cn("stg:size-10 stg:text-muted-foreground", isDragOver && "stg:text-primary")} />
 
         {isProcessing ? (
-          <p className="text-sm font-medium text-foreground">Processing...</p>
+          <p className="stg:text-sm stg:font-medium stg:text-foreground">Processing...</p>
         ) : (
           <>
-            <p className="text-sm font-medium text-foreground">
+            <p className="stg:text-sm stg:font-medium stg:text-foreground">
               Drop your skill package here
             </p>
-            <p className="text-xs text-muted-foreground">
+            <p className="stg:text-xs stg:text-muted-foreground">
               or click to browse
             </p>
           </>
         )}
 
-        <p className="mt-2 text-[10px] text-muted-foreground-subtle">
+        <p className="stg:mt-2 stg:text-[10px] stg:text-muted-foreground-subtle">
           Accepts .zip files following the Anthropic Agent Skills format
         </p>
 
@@ -221,29 +221,29 @@ function DropZonePhase({
           type="file"
           accept=".zip"
           onChange={handleFileChange}
-          className="hidden"
+          className="stg:hidden"
           aria-hidden="true"
         />
       </div>
 
       {validationError && (
-        <div className="px-4 py-3">
-          <p className="text-sm text-destructive" role="alert">
+        <div className="stg:px-4 stg:py-3">
+          <p className="stg:text-sm stg:text-destructive" role="alert">
             {validationError}
           </p>
         </div>
       )}
 
       {onCancel && (
-        <div className="flex justify-end border-t border-border px-4 py-3">
+        <div className="stg:flex stg:justify-end stg:border-t stg:border-border stg:px-4 stg:py-3">
           <button
             type="button"
             onClick={onCancel}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground",
-              "hover:text-foreground hover:bg-muted",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "transition-colors",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:text-muted-foreground",
+              "stg:hover:text-foreground stg:hover:bg-muted",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:transition-colors",
             )}
           >
             Cancel
@@ -280,47 +280,47 @@ function PreviewPhase({
   const strippedContent = stripFrontmatter(preview.skillMdContent);
 
   return (
-    <div className="flex flex-col">
+    <div className="stg:flex stg:flex-col">
       {/* Header */}
-      <div className="border-b border-border px-4 py-3">
-        <h3 className="text-sm font-medium text-foreground">
+      <div className="stg:border-b stg:border-border stg:px-4 stg:py-3">
+        <h3 className="stg:text-sm stg:font-medium stg:text-foreground">
           Skill Package Preview
         </h3>
       </div>
 
       {/* Metadata */}
-      <div className="flex flex-col gap-2 border-b border-border px-4 py-3">
-        <div className="flex items-baseline gap-2">
-          <span className="text-xs font-medium text-muted-foreground w-20 shrink-0">Name</span>
-          <span className="text-sm font-medium text-foreground font-mono">{preview.name}</span>
+      <div className="stg:flex stg:flex-col stg:gap-2 stg:border-b stg:border-border stg:px-4 stg:py-3">
+        <div className="stg:flex stg:items-baseline stg:gap-2">
+          <span className="stg:text-xs stg:font-medium stg:text-muted-foreground stg:w-20 stg:shrink-0">Name</span>
+          <span className="stg:text-sm stg:font-medium stg:text-foreground stg:font-mono">{preview.name}</span>
         </div>
         {preview.description && (
-          <div className="flex items-baseline gap-2">
-            <span className="text-xs font-medium text-muted-foreground w-20 shrink-0">Description</span>
-            <span className="text-sm text-foreground">{preview.description}</span>
+          <div className="stg:flex stg:items-baseline stg:gap-2">
+            <span className="stg:text-xs stg:font-medium stg:text-muted-foreground stg:w-20 stg:shrink-0">Description</span>
+            <span className="stg:text-sm stg:text-foreground">{preview.description}</span>
           </div>
         )}
       </div>
 
       {/* File list */}
-      <div className="border-b border-border px-4 py-3">
-        <div className="mb-2 flex items-baseline justify-between">
-          <span className="text-xs font-medium text-muted-foreground">
+      <div className="stg:border-b stg:border-border stg:px-4 stg:py-3">
+        <div className="stg:mb-2 stg:flex stg:items-baseline stg:justify-between">
+          <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">
             Files ({preview.files.filter((f) => !f.isDirectory).length})
           </span>
-          <span className="text-[10px] text-muted-foreground-subtle">
+          <span className="stg:text-[10px] stg:text-muted-foreground-subtle">
             {formatBytes(preview.totalSize)} total
           </span>
         </div>
-        <div className="rounded-md border border-border overflow-hidden">
-          <table className="w-full text-xs">
+        <div className="stg:rounded-md stg:border stg:border-border stg:overflow-hidden">
+          <table className="stg:w-full stg:text-xs">
             <tbody>
               {preview.files
                 .filter((f) => !f.isDirectory)
                 .map((file) => (
-                  <tr key={file.path} className="border-b border-border last:border-b-0">
-                    <td className="px-3 py-1.5 font-mono text-foreground">{file.path}</td>
-                    <td className="px-3 py-1.5 text-right text-muted-foreground tabular-nums">
+                  <tr key={file.path} className="stg:border-b stg:border-border stg:last:border-b-0">
+                    <td className="stg:px-3 stg:py-1.5 stg:font-mono stg:text-foreground">{file.path}</td>
+                    <td className="stg:px-3 stg:py-1.5 stg:text-right stg:text-muted-foreground stg:tabular-nums">
                       {formatBytes(file.size)}
                     </td>
                   </tr>
@@ -332,11 +332,11 @@ function PreviewPhase({
 
       {/* SKILL.md preview */}
       {strippedContent && (
-        <div className="border-b border-border px-4 py-3">
-          <span className="mb-2 block text-xs font-medium text-muted-foreground">
+        <div className="stg:border-b stg:border-border stg:px-4 stg:py-3">
+          <span className="stg:mb-2 stg:block stg:text-xs stg:font-medium stg:text-muted-foreground">
             SKILL.md Preview
           </span>
-          <div className="max-h-[240px] overflow-y-auto rounded-md border border-border p-3">
+          <div className="stg:max-h-[240px] stg:overflow-y-auto stg:rounded-md stg:border stg:border-border stg:p-3">
             <Markdown remarkPlugins={REMARK_PLUGINS} components={MARKDOWN_COMPONENTS}>
               {strippedContent}
             </Markdown>
@@ -346,13 +346,13 @@ function PreviewPhase({
 
       {/* Duplicate warning */}
       {isDuplicate && (
-        <div className="flex items-start gap-2.5 border-b border-amber-500/20 bg-amber-500/5 px-4 py-3" role="alert">
-          <WarningIcon className="mt-0.5 size-4 shrink-0 text-amber-600 dark:text-amber-400" />
-          <div className="min-w-0 flex-1">
-            <p className="text-sm font-medium text-amber-700 dark:text-amber-300">
+        <div className="stg:flex stg:items-start stg:gap-2.5 stg:border-b stg:border-amber-500/20 stg:bg-amber-500/5 stg:px-4 stg:py-3" role="alert">
+          <WarningIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0 stg:text-amber-600 stg:dark:text-amber-400" />
+          <div className="stg:min-w-0 stg:flex-1">
+            <p className="stg:text-sm stg:font-medium stg:text-amber-700 stg:dark:text-amber-300">
               No changes detected
             </p>
-            <p className="mt-0.5 text-xs text-amber-600 dark:text-amber-400">
+            <p className="stg:mt-0.5 stg:text-xs stg:text-amber-600 stg:dark:text-amber-400">
               This skill&apos;s content is identical to the current version. Pushing will create a new version record with the same content.
             </p>
           </div>
@@ -360,46 +360,46 @@ function PreviewPhase({
       )}
 
       {isCheckingDuplicate && (
-        <div className="flex items-center gap-2 border-b border-border px-4 py-2">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:border-b stg:border-border stg:px-4 stg:py-2">
           <Spinner />
-          <span className="text-xs text-muted-foreground">Checking for changes...</span>
+          <span className="stg:text-xs stg:text-muted-foreground">Checking for changes...</span>
         </div>
       )}
 
       {/* Error */}
       {pushError && (
-        <div className="px-4 py-2">
-          <p className="text-sm text-destructive" role="alert">
+        <div className="stg:px-4 stg:py-2">
+          <p className="stg:text-sm stg:text-destructive" role="alert">
             {pushError.message}
           </p>
         </div>
       )}
 
       {/* Footer actions */}
-      <div className="flex items-center justify-between px-4 py-3">
+      <div className="stg:flex stg:items-center stg:justify-between stg:px-4 stg:py-3">
         <button
           type="button"
           onClick={onReset}
           className={cn(
-            "rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground",
-            "hover:text-foreground hover:bg-muted",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "transition-colors",
+            "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:text-muted-foreground",
+            "stg:hover:text-foreground stg:hover:bg-muted",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:transition-colors",
           )}
         >
           Choose Different File
         </button>
 
-        <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           {onCancel && (
             <button
               type="button"
               onClick={onCancel}
               className={cn(
-                "rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground",
-                "hover:text-foreground hover:bg-muted",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "transition-colors",
+                "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:text-muted-foreground",
+                "stg:hover:text-foreground stg:hover:bg-muted",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                "stg:transition-colors",
               )}
             >
               Cancel
@@ -410,11 +410,11 @@ function PreviewPhase({
             onClick={onPush}
             disabled={isPushing}
             className={cn(
-              "rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground",
-              "hover:bg-primary-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              "transition-colors",
+              "stg:rounded-md stg:bg-primary stg:px-4 stg:py-1.5 stg:text-sm stg:font-medium stg:text-primary-foreground",
+              "stg:hover:bg-primary-hover",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:disabled:opacity-50 stg:disabled:cursor-not-allowed",
+              "stg:transition-colors",
             )}
           >
             {isPushing ? "Pushing..." : isDuplicate ? "Push Anyway" : "Push Skill"}
@@ -455,7 +455,7 @@ function WarningIcon({ className }: { readonly className?: string }) {
 
 function Spinner() {
   return (
-    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="animate-spin" aria-hidden="true">
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="stg:animate-spin" aria-hidden="true">
       <path d="M8 2a6 6 0 1 0 6 6" />
     </svg>
   );

package/src/styles.css

@@ -2,23 +2,49 @@
 @source "../node_modules/streamdown/dist/*.js";
 
 /* Declare the standard Tailwind layer order plus our `stgm` utilities layer
-   LAST. In a host app the host's `@import "tailwindcss"` already declares
-   `theme, base, components, utilities` first, so re-stating them here is a
-   harmless no-op that simply pins `stgm` after them; in the standalone SDK build
-   it establishes the full order explicitly.
-
-   Why this matters: the preflight-style reset below (which zeroes `border-width`)
-   MUST live in `base`, not in a layer above `utilities`. When this stylesheet is
-   recompiled by a host's Tailwind v4, the SDK's `border-*` utilities are emitted
-   into the host's `utilities` layer (Tailwind v4 emits each utility once) — NOT
-   into `stgm`. A reset placed in any layer after `utilities` therefore wins and
-   silently zeroes every `border` inside `.stgm`. Keeping the reset in `base`
-   (exactly where stock Tailwind keeps preflight) guarantees the utilities win in
-   the host build, the standalone build, and a third-party embed alike. */
+   LAST. When a host page also runs Tailwind, its `@import "tailwindcss"`
+   declares `theme, base, components, utilities` too; re-stating them here is a
+   harmless no-op that pins `stgm` after them, so SDK styles win over host
+   utilities on SDK-rendered DOM. In the standalone SDK build it establishes
+   the full order explicitly.
+
+   Why this matters: the preflight-style reset below (which zeroes
+   `border-width`) MUST live in `base`, not in a layer above the SDK's own
+   utilities. A reset placed after the layer that carries `border-*` utilities
+   wins the cascade and silently zeroes every border inside `.stgm`. Keeping
+   the reset in `base` (exactly where stock Tailwind keeps preflight)
+   guarantees the utilities win. */
 @layer theme, base, components, utilities, stgm;
 
-@import "tailwindcss/theme.css" layer(stgm);
-@import "tailwindcss/utilities.css" layer(stgm);
+/* Every Tailwind utility the SDK authors carries the `stg:` prefix
+   (`stg:flex`, emitted as `.stg\:flex`), and the theme variables emit as
+   `--stg-*`. This is the #454 isolation contract: the published stylesheet
+   shares NO class names and NO Tailwind variable names with a host
+   application's own Tailwind build, so neither side can clobber the other's
+   cascade — regardless of load order, layer merging, or where the host mounts
+   `StigmerProvider`. The prefix is deliberately NOT `stgm`: Tailwind prefixes
+   theme variables too, and `--stgm-font-sans`/`--stgm-shadow-sm` would
+   collide with the identically-named `@stigmer/theme` tokens (including a
+   self-referential `--stgm-font-sans: var(--stgm-font-sans)` cycle through
+   the `@theme inline` block below).
+
+   The `stg:` prefix contract is enforced by `scripts/check-prefixed-classnames`
+   (unprefixed utilities in source fail the suite) and by the dist isolation
+   invariant test (unscoped selectors in the built stylesheet fail the suite).
+   The one-shot migration lives in `scripts/prefix-classnames.ts`. */
+@import "tailwindcss/theme.css" layer(stgm) prefix(stg);
+@import "tailwindcss/utilities.css" layer(stgm) prefix(stg);
+/* Enter/exit animation utilities (`stg:animate-in`, `stg:fade-in`,
+   `stg:data-[state=open]:zoom-in-95`, ...) used by SDK dialogs, menus, and
+   tooltips. Build-time dependency only (MIT, pure Tailwind v4 CSS) — the
+   compiled rules ship in dist/styles.css. Before #454 these utilities were
+   never part of the SDK's own build: they only rendered in the web console
+   because ITS Tailwind compile added tw-animate-css, i.e. the standalone
+   stylesheet silently shipped without any dialog/menu animations.
+   Imported WITHOUT layer(...): it contains `@utility` definitions, which
+   cannot be nested inside `@layer` — the generated utilities still emit
+   into `stgm` alongside the standard ones. */
+@import "tw-animate-css";
 @import "@stigmer/theme/tokens.css" layer(stgm);
 
 /* React Flow base styles for workflow graphs. Imported centrally (rather than
@@ -52,6 +78,7 @@
   --color-destructive-foreground: var(--stgm-destructive-foreground);
   --color-success: var(--stgm-success);
   --color-success-foreground: var(--stgm-success-foreground);
+  --color-success-subtle: var(--stgm-success-subtle);
   --color-warning: var(--stgm-warning);
   --color-warning-foreground: var(--stgm-warning-foreground);
   --color-info: var(--stgm-info);
@@ -147,6 +174,100 @@
     border-style: solid;
     border-color: var(--stgm-border, currentColor);
   }
+
+  /* Scoped form-control preflight (#374). Every SDK component is authored
+     against Tailwind's preflight baseline — our own consoles run it globally,
+     so ghost/outline buttons, icon buttons, and chip actions carry no `bg-*`,
+     `p-*`, or font utilities and silently depend on the host having zeroed
+     the UA's `buttonface` box. A host WITHOUT a global preflight (third-party
+     embeds, the packed demo tours) rendered every such control as a grey UA
+     default box. These rules reproduce, under `.stgm`, the form-control
+     subset of `tailwindcss/preflight.css` — copied VERBATIM, value for
+     value. That byte-parity is load-bearing twice over:
+
+     - In a preflight host the same values already apply globally in this
+       same `base` layer, so the scoped copy is a no-op by construction
+       (the `.stgm`-prefixed selector has higher specificity within `base`,
+       which only matters if the values ever diverge — do not let them).
+     - In a preflight-less host, SDK surfaces render exactly what the
+       components were designed against in the consoles.
+
+     Like the border reset above, these MUST stay in `base`: one layer
+     higher and they silently override every `bg-*`/`p-*` utility on every
+     button in the SDK (the utilities are emitted into `utilities`/`stgm`).
+
+     Deliberately NOT ported from preflight: the universal margin/padding
+     zero and the typography resets. In the documented quickstart the host
+     wraps its whole app in `StigmerProvider`, i.e. inside `.stgm` — those
+     rules would strip a non-Tailwind host's own content styling (paragraph
+     margins, heading sizes). Form controls carry the same bounded,
+     already-accepted trade-off as the border reset above. The margin/
+     padding zero below is preflight's universal rule narrowed to the
+     controls it exists to fix. Normalization rules for input types the SDK
+     never renders (date/time/search chrome, -moz-ui-invalid) are also
+     omitted — add them verbatim if such an input ever ships. */
+  .stgm button,
+  .stgm input,
+  .stgm select,
+  .stgm optgroup,
+  .stgm textarea,
+  .stgm ::file-selector-button {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+
+  /* Correct the inability to style the border radius in iOS Safari. */
+  .stgm button,
+  .stgm input:where([type="button"], [type="reset"], [type="submit"]),
+  .stgm ::file-selector-button {
+    appearance: button;
+  }
+
+  /* Restore default font weight (the block above inherits it away). */
+  .stgm :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  /* Restore space after button. */
+  .stgm ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  /* Reset the default placeholder opacity in Firefox.
+     (https://github.com/tailwindlabs/tailwindcss/issues/3300) */
+  .stgm ::placeholder {
+    opacity: 1;
+  }
+
+  /* Set the default placeholder color to a semi-transparent version of the
+     current text color in browsers that do not crash when using
+     `color-mix(…)` with `currentcolor`.
+     (https://github.com/tailwindlabs/tailwindcss/issues/17194) */
+  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+    .stgm ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  /* Prevent resizing textareas horizontally by default. */
+  .stgm textarea {
+    resize: vertical;
+  }
+
+  /* Correct the cursor style of increment and decrement buttons in Safari. */
+  .stgm ::-webkit-inner-spin-button,
+  .stgm ::-webkit-outer-spin-button {
+    height: auto;
+  }
 }
 
 @layer stgm {

package/src/switch/Switch.tsx

@@ -74,22 +74,22 @@ export function Switch({
         // made the track invisible inside dialogs. Both track fills are
         // registered as surface pairs in the theme contrast contract
         // (@stigmer/theme contract/pairs.ts), so every preset is audited.
-        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors",
-        "motion-reduce:transition-none",
-        checked ? "bg-primary" : "bg-input",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        "disabled:pointer-events-none disabled:opacity-50",
+        "stg:relative stg:inline-flex stg:h-5 stg:w-9 stg:shrink-0 stg:items-center stg:rounded-full stg:transition-colors",
+        "stg:motion-reduce:transition-none",
+        checked ? "stg:bg-primary" : "stg:bg-input",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:ring-offset-2",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         // Expanded invisible hit area (~44px tall) for touch targets.
-        "after:absolute after:-inset-3 after:content-['']",
+        "stg:after:absolute stg:after:-inset-3 stg:after:content-['']",
         className,
       )}
     >
       <span
         aria-hidden="true"
         className={cn(
-          "pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-transform",
-          "motion-reduce:transition-none",
-          checked ? "translate-x-[18px]" : "translate-x-0.5",
+          "stg:pointer-events-none stg:block stg:size-4 stg:rounded-full stg:bg-background stg:shadow-sm stg:transition-transform",
+          "stg:motion-reduce:transition-none",
+          checked ? "stg:translate-x-[18px]" : "stg:translate-x-0.5",
         )}
       />
     </button>

package/src/switch/__tests__/Switch.test.tsx

@@ -79,13 +79,13 @@ describe("Switch", () => {
     );
 
     const el = screen.getByRole("switch");
-    expect(el.className).toContain("bg-input");
-    expect(el.className).not.toContain("bg-muted");
+    expect(el.className).toContain("stg:bg-input");
+    expect(el.className).not.toContain("stg:bg-muted");
 
     rerender(
       <Switch checked onCheckedChange={() => {}} aria-label="Enable sharing" />,
     );
-    expect(el.className).toContain("bg-primary");
+    expect(el.className).toContain("stg:bg-primary");
   });
 
   it("supports aria-labelledby for external labels", () => {

package/src/tabs/Tabs.tsx

@@ -113,12 +113,12 @@ export function Tabs({
   );
 
   return (
-    <div className={cn("flex flex-col", className)}>
+    <div className={cn("stg:flex stg:flex-col", className)}>
       <div
         role="tablist"
         aria-label={ariaLabel}
         onKeyDown={handleKeyDown}
-        className="flex border-b border-border"
+        className="stg:flex stg:border-b stg:border-border"
       >
         {tabs.map((tab) => {
           const isActive = tab.id === activeTab;
@@ -138,11 +138,11 @@ export function Tabs({
               onClick={() => onTabChange(tab.id)}
               data-cursor-target={`tab-${tab.id}`}
               className={cn(
-                "relative inline-flex items-center gap-1.5 px-3 py-2 text-xs font-medium transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                "stg:relative stg:inline-flex stg:items-center stg:gap-1.5 stg:px-3 stg:py-2 stg:text-xs stg:font-medium stg:transition-colors",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:ring-offset-1",
                 isActive
-                  ? "text-foreground"
-                  : "text-muted-foreground hover:text-foreground",
+                  ? "stg:text-foreground"
+                  : "stg:text-muted-foreground stg:hover:text-foreground",
               )}
             >
               {tab.icon}
@@ -151,10 +151,10 @@ export function Tabs({
                 <span
                   aria-hidden="true"
                   className={cn(
-                    "inline-flex min-w-[1.25rem] items-center justify-center rounded-full px-1 py-px text-[10px] font-medium leading-none",
+                    "stg:inline-flex stg:min-w-[1.25rem] stg:items-center stg:justify-center stg:rounded-full stg:px-1 stg:py-px stg:text-[10px] stg:font-medium stg:leading-none",
                     isActive
-                      ? "bg-primary-subtle text-primary"
-                      : "bg-muted text-muted-foreground",
+                      ? "stg:bg-primary-subtle stg:text-primary"
+                      : "stg:bg-muted stg:text-muted-foreground",
                   )}
                 >
                   {tab.badge}
@@ -162,7 +162,7 @@ export function Tabs({
               )}
               {isActive && (
                 <span
-                  className="absolute inset-x-0 -bottom-px h-0.5 bg-primary"
+                  className="stg:absolute stg:inset-x-0 stg:-bottom-px stg:h-0.5 stg:bg-primary"
                   aria-hidden="true"
                 />
               )}
@@ -176,7 +176,7 @@ export function Tabs({
         role="tabpanel"
         aria-labelledby={tabId(activeTab)}
         tabIndex={0}
-        className="min-h-0 flex-1 pt-4 focus-visible:outline-none"
+        className="stg:min-h-0 stg:flex-1 stg:pt-4 stg:focus-visible:outline-none"
       >
         {children}
       </div>