@machinemetrics/mm-react-components 0.2.3-3 → 0.2.3-31

package/dist/themes/carbide.css

@@ -1,13 +1,160 @@
+/* Note: Font imports are now handled in src/lib/styles.css to avoid @import ordering issues */
+
+:root {
+  --radius: 0.5rem;
+  --radius-sm: 4px;
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  /* Chart colors are defined below via design tokens (indigo/teal/green/orange/purple). */
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Overlay token (base) */
+  --overlay-bg: rgba(0, 0, 0, 0.8);
+
+  /* --- Typography tokens (shadcn/ui reference) --- */
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans Variable', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  --font-heading: var(--font-sans);
+  --font-body: var(--font-sans);
+
+  --text-base-size: 1rem; /* 16px */
+  --text-sm-size: 0.875rem; /* 14px */
+  --text-lg-size: 1.125rem; /* 18px */
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+
+  --tracking-tight: -0.015em;
+  --tracking-normal: 0;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  /* Removed redundant hard-coded chart swatches; values sourced via token mappings below */
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+/* Collapsible animations using Radix-provided height variable */
+@keyframes mm-collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes mm-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+/* Accordion animations (core theme) */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* JS-driven height animation now handles height. Keep only overflow hidden. */
+[data-slot='collapsible-content'] {
+  overflow: hidden;
+}
+/* Radix sets hidden on closed when forceMount is used; override to enable CSS animation */
+[data-slot='collapsible-content'][hidden] {
+  display: block !important;
+}
+/* JS controls height now; avoid conflicting state heights */
+
 .carbide {
   /* =============================
-   TYPOGRAPHY
-============================= */
+     TYPOGRAPHY
+  ============================= */
 
   /* Core Fonts */
   --font-sans:
-    'Noto Sans', Inter, ui-sans-serif, system-ui, -apple-system,
+    'Noto Sans Variable', Inter, ui-sans-serif, system-ui, -apple-system,
     BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Noto Sans Variable', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
   --font-mono:
     'Inconsolata', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -17,8 +164,8 @@
   --font-weight-bold: 600;
 
   /* =============================
-   COLORS
-============================= */
+     COLORS
+  ============================= */
 
   /* Brand */
   --brand-green: #15a500;
@@ -193,13 +340,13 @@
 
   /* =============================
      SURFACES (GENERIC)
-     ============================= */
+  ============================= */
   /* Neutral control rail/background surface used across components */
   --surface-neutral: var(--grey-300);
 
   /* =============================
      TABLIST
-     ============================= */
+  ============================= */
   --tablist-bg: var(--grey-200);
   --tablist-fg: var(--grey-700);
   --tablist-active-bg: var(--grey-00);
@@ -211,11 +358,11 @@
      ============================= */
   --tablehead-bg: var(--muted);
   --tablehead-fg: var(--foreground);
-  --tablehead-border: var(--border);
+  --tablehead-border: var(--grey-300);
 
   /* =============================
      BUTTONS
-     ============================= */
+  ============================= */
   --button-secondary-bg: transparent;
   --button-secondary-border: var(--grey-700);
   --button-secondary-hover-bg: var(--grey-150);
@@ -225,83 +372,117 @@
   --button-destructive-hover-bg: var(--red-700);
   --button-outline-bg: var(--bg-input);
 
+  /* Spinner tokens (Carbide scope) */
+  --spinner-foreground: var(--indigo-600);
+  --spinner-background: var(--grey-300);
+
   /* Table action trigger hover (distinct from row hover) */
   --table-action-hover-bg: var(--grey-300);
 
   /* Overlay */
-  --overlay-bg: rgba(0, 0, 0, 0.8);
-  --overlay-border: #353b48;
+  /* --overlay-bg is already defined in :root; keep only border here. */
+  --overlay-border: var(--grey-800);
 
   /* =============================
      INPUT/OUTLINE/OVERLAY SURFACES
+  ============================= */
+  --input-surface-bg: var(--grey-900);
+  --input-surface-border: var(--grey-800);
+  --input-surface-hover-bg: var(--grey-850);
+
+  /* =============================
+     CODE (TYPOGRAPHY TOKENS)
      ============================= */
-  --input-surface-bg: #202734;
-  --input-surface-border: #2d3748;
-  --input-surface-hover-bg: #242c3a;
+  --code-bg: color-mix(in srgb, var(--brand-green) 18%, transparent);
+  --code-fg: var(--brand-green);
+  --code-border: transparent;
 }
 
 /* =============================
-   BADGE: TYPOGRAPHY
-   ============================= */
+   BADGE: TYPOGRAPHY & VARIANTS
+  ============================= */
 .carbide [data-slot='badge'] {
   font-weight: 400;
 }
 
-/* =============================
-   KNOWLEDGE HUB STATUS BADGES
-   ============================= */
-.carbide .mmc-khub [data-slot='badge'] {
-  border-radius: 9999px;
-}
-
-.carbide .mmc-khub [data-slot='badge'][data-status='Waiting'] {
+/* Badge variants - moved from inline component styles */
+.carbide [data-slot='badge'][data-variant='default'] {
+  border-color: transparent;
   background-color: var(--indigo-200);
   color: var(--grey-700);
-  border-color: var(--indigo-200);
 }
-
-.carbide .mmc-khub [data-slot='badge'][data-status='Uploading'],
-.carbide .mmc-khub [data-slot='badge'][data-status='Processing'] {
-  background-color: transparent;
-  color: var(--grey-700);
-  border-color: transparent;
-  padding-inline: 0;
+.carbide.dark [data-slot='badge'][data-variant='default'] {
+  background-color: var(--indigo-700);
+  color: var(--grey-00);
+}
+.carbide [data-slot='badge'][data-variant='default'] a:hover {
+  background-color: var(--indigo-300);
+}
+.carbide.dark [data-slot='badge'][data-variant='default'] a:hover {
+  background-color: var(--indigo-600);
 }
 
-.carbide .mmc-khub [data-slot='badge'][data-status='Failed'],
-.carbide .mmc-khub [data-slot='badge'][data-status='Upload Failed'],
-.carbide .mmc-khub [data-slot='badge'][data-status='Processing Failed'] {
+.carbide [data-slot='badge'][data-variant='destructive'] {
+  border-color: transparent;
   background-color: var(--red-200);
   color: var(--grey-700);
-  border-color: var(--red-200);
 }
-
-.carbide .mmc-khub [data-slot='badge'][data-status='Processed'] {
-  background-color: var(--grey-200);
-  color: var(--grey-500);
-  border-color: var(--grey-200);
+.carbide.dark [data-slot='badge'][data-variant='destructive'] {
+  background-color: var(--red-700);
+  color: var(--grey-00);
+}
+.carbide [data-slot='badge'][data-variant='destructive'] a:hover {
+  background-color: var(--red-300);
+}
+.carbide.dark [data-slot='badge'][data-variant='destructive'] a:hover {
+  background-color: var(--red-600);
+}
+.carbide [data-slot='badge'][data-variant='destructive']:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
+}
+.carbide.dark [data-slot='badge'][data-variant='destructive']:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 40%, transparent);
 }
 
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Waiting'] {
-  background-color: var(--indigo-700);
-  color: var(--grey-00);
-  border-color: var(--indigo-700);
+/* =============================
+   ALERT VARIANTS
+  ============================= */
+.carbide [data-slot='alert'][data-variant='success'] {
+  color: var(--green-600);
+  background-color: var(--card);
+  border-color: var(--green-200);
+}
+.carbide [data-slot='alert'][data-variant='success'] svg {
+  color: currentColor;
+}
+.carbide
+  [data-slot='alert'][data-variant='success']
+  [data-slot='alert-description'] {
+  color: color-mix(in srgb, var(--green-600) 90%, transparent);
 }
 
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Uploading'],
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Processing'] {
-  background-color: transparent;
-  color: var(--grey-200);
-  border-color: transparent;
-  padding-inline: 0;
+.carbide [data-slot='alert'][data-variant='warning'] {
+  color: var(--yellow-600);
+  background-color: var(--card);
+  border-color: var(--yellow-200);
+}
+.carbide [data-slot='alert'][data-variant='warning'] svg {
+  color: currentColor;
+}
+.carbide
+  [data-slot='alert'][data-variant='warning']
+  [data-slot='alert-description'] {
+  color: color-mix(in srgb, var(--yellow-600) 90%, transparent);
 }
 
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Failed'],
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Upload Failed'],
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Processing Failed'] {
-  background-color: var(--red-700);
-  color: var(--grey-00);
-  border-color: var(--red-700);
+/* =============================
+   KNOWLEDGE HUB STATUS BADGES
+  ============================= */
+/* Keep intentional lighter tone for Processed in Knowledge Hub */
+.carbide .mmc-khub [data-slot='badge'][data-status='Processed'] {
+  background-color: var(--grey-200);
+  color: var(--grey-500);
+  border-color: var(--grey-200);
 }
 
 .carbide.dark .mmc-khub [data-slot='badge'][data-status='Processed'] {
@@ -312,7 +493,7 @@
 
 /* =============================
    BUTTON: ICON SIZE DEFAULT
-   ============================= */
+  ============================= */
 /* Default all button icons to 16px; :where() keeps specificity low so consumers can override */
 .carbide [data-slot='button'] svg {
   width: 16px;
@@ -321,7 +502,7 @@
 
 /* =============================
    BUTTON VARIANTS (LIGHT)
-   ============================= */
+  ============================= */
 .carbide [data-slot='button'][data-variant='default']:not([disabled]) {
   background-color: var(--primary);
   color: var(--primary-foreground);
@@ -330,11 +511,28 @@
   background-color: var(--button-primary-hover-bg);
 }
 
-.carbide [data-slot='button'][data-variant='outline']:not([disabled]) {
+.carbide [data-slot='button'][data-variant='outline']:not([disabled]),
+.carbide [data-slot='popover-trigger'][data-variant='outline']:not([disabled]),
+.carbide
+  [data-slot='dropdown-menu-trigger'][data-variant='outline']:not([disabled]),
+.carbide
+  [data-slot='date-picker-trigger'][data-variant='outline']:not([disabled]),
+.carbide [data-variant='outline']:not([disabled]) {
   background-color: var(--button-outline-bg);
   border-color: var(--button-outline-border);
 }
-.carbide [data-slot='button'][data-variant='outline']:not([disabled]):hover {
+.carbide [data-slot='button'][data-variant='outline']:not([disabled]):hover,
+.carbide
+  [data-slot='popover-trigger'][data-variant='outline']:not([disabled]):hover,
+.carbide
+  [data-slot='dropdown-menu-trigger'][data-variant='outline']:not(
+    [disabled]
+  ):hover,
+.carbide
+  [data-slot='date-picker-trigger'][data-variant='outline']:not(
+    [disabled]
+  ):hover,
+.carbide [data-variant='outline']:not([disabled]):hover {
   background-color: var(--button-outline-hover-bg);
 }
 
@@ -433,7 +631,14 @@
      ============================= */
   --tablehead-bg: var(--muted);
   --tablehead-fg: var(--foreground);
-  --tablehead-border: var(--border);
+  --tablehead-border: var(--grey-600);
+
+  /* =============================
+     CODE (TYPOGRAPHY TOKENS - DARK)
+     ============================= */
+  --code-bg: color-mix(in srgb, var(--brand-green) 20%, transparent);
+  --code-fg: var(--brand-green);
+  --code-border: transparent;
 
   /* =============================
      BUTTONS
@@ -451,13 +656,17 @@
   --button-destructive-hover-bg: var(--red-500);
   --button-outline-bg: color-mix(in srgb, var(--bg-input) 30%, transparent);
 
+  /* Spinner tokens (Carbide scope, dark) */
+  --spinner-foreground: var(--grey-00);
+  --spinner-background: color-mix(in srgb, var(--grey-00) 25%, transparent);
+
   /* Table action trigger hover (distinct from row hover) */
   --table-action-hover-bg: var(--grey-800);
 }
 
 /* =============================
    BUTTON VARIANTS (DARK)
-   ============================= */
+  ============================= */
 .carbide.dark [data-slot='button'][data-variant='default']:not([disabled]) {
   background-color: var(--primary);
   color: var(--primary-foreground);
@@ -467,12 +676,30 @@
   background-color: var(--button-primary-hover-bg);
 }
 
-.carbide.dark [data-slot='button'][data-variant='outline']:not([disabled]) {
+.carbide.dark [data-slot='button'][data-variant='outline']:not([disabled]),
+.carbide.dark
+  [data-slot='popover-trigger'][data-variant='outline']:not([disabled]),
+.carbide.dark
+  [data-slot='dropdown-menu-trigger'][data-variant='outline']:not([disabled]),
+.carbide.dark
+  [data-slot='date-picker-trigger'][data-variant='outline']:not([disabled]),
+.carbide.dark [data-variant='outline']:not([disabled]) {
   background-color: var(--button-outline-bg);
   border-color: var(--button-outline-border);
 }
 .carbide.dark
-  [data-slot='button'][data-variant='outline']:not([disabled]):hover {
+  [data-slot='button'][data-variant='outline']:not([disabled]):hover,
+.carbide.dark
+  [data-slot='popover-trigger'][data-variant='outline']:not([disabled]):hover,
+.carbide.dark
+  [data-slot='dropdown-menu-trigger'][data-variant='outline']:not(
+    [disabled]
+  ):hover,
+.carbide.dark
+  [data-slot='date-picker-trigger'][data-variant='outline']:not(
+    [disabled]
+  ):hover,
+.carbide.dark [data-variant='outline']:not([disabled]):hover {
   background-color: var(--button-outline-hover-bg);
 }
 
@@ -514,7 +741,7 @@
 
 /* =============================
    INPUT
-   ============================= */
+  ============================= */
 .carbide [data-slot='input'] {
   background-color: var(--bg-input);
   border-color: var(--border-input);
@@ -575,7 +802,7 @@
 
 /* =============================
    SELECT
-   ============================= */
+  ============================= */
 .carbide [data-slot='select-trigger'] {
   background-color: var(--bg-input);
   border-color: var(--border-input);
@@ -646,16 +873,30 @@
   color: var(--muted-foreground);
 }
 
+.carbide [data-slot='select-content'] {
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  border-color: var(--border);
+  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
+}
+.carbide.dark [data-slot='select-content'] {
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  border-color: var(--border);
+}
+
 /* =============================
    DROPDOWN MENU
-   ============================= */
-.carbide [data-slot='dropdown-menu-content'] {
+  ============================= */
+.carbide [data-slot='dropdown-menu-content'],
+.carbide [data-slot='dropdown-menu-sub-content'] {
   background-color: var(--popover);
   color: var(--popover-foreground);
   border-color: var(--border);
   box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
 }
-.carbide.dark [data-slot='dropdown-menu-content'] {
+.carbide.dark [data-slot='dropdown-menu-content'],
+.carbide.dark [data-slot='dropdown-menu-sub-content'] {
   background-color: var(--popover);
   color: var(--popover-foreground);
   border-color: var(--border);
@@ -736,7 +977,7 @@
 
 /* =============================
    TOOLTIP
-   ============================= */
+  ============================= */
 .carbide [data-slot='tooltip-content'] {
   background-color: var(--foreground);
   color: var(--background);
@@ -754,21 +995,24 @@
 }
 
 /* =============================
-   OVERLAYS & DIALOG/SHEET/DRAWER
-   ============================= */
+   OVERLAYS & DIALOG/SHEET/DRAWER/ALERT-DIALOG
+  ============================= */
 .carbide [data-slot='dialog-overlay'],
+.carbide [data-slot='alert-dialog-overlay'],
 .carbide [data-slot='sheet-overlay'],
 .carbide [data-slot='drawer-overlay'] {
   background-color: color-mix(in srgb, var(--overlay-bg) 60%, transparent);
   backdrop-filter: blur(2px);
 }
 .carbide.dark [data-slot='dialog-overlay'],
+.carbide.dark [data-slot='alert-dialog-overlay'],
 .carbide.dark [data-slot='sheet-overlay'],
 .carbide.dark [data-slot='drawer-overlay'] {
   background-color: color-mix(in srgb, var(--overlay-bg) 75%, transparent);
 }
 
 .carbide [data-slot='dialog-content'],
+.carbide [data-slot='alert-dialog-content'],
 .carbide [data-slot='sheet-content'],
 .carbide [data-slot='drawer-content'] {
   background-color: var(--card);
@@ -777,6 +1021,7 @@
   box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
 }
 .carbide.dark [data-slot='dialog-content'],
+.carbide.dark [data-slot='alert-dialog-content'],
 .carbide.dark [data-slot='sheet-content'],
 .carbide.dark [data-slot='drawer-content'] {
   box-shadow: 0 24px 48px rgba(15, 23, 42, 0.55);
@@ -810,12 +1055,14 @@
 }
 
 .carbide [data-slot='dialog-title'],
+.carbide [data-slot='alert-dialog-title'],
 .carbide [data-slot='sheet-title'],
 .carbide [data-slot='drawer-title'] {
   color: var(--card-foreground);
 }
 
 .carbide [data-slot='dialog-description'],
+.carbide [data-slot='alert-dialog-description'],
 .carbide [data-slot='sheet-description'],
 .carbide [data-slot='drawer-description'] {
   color: var(--muted-foreground);
@@ -838,21 +1085,85 @@
 
 /* =============================
    TABLE
-   ============================= */
+  ============================= */
 .carbide [data-slot='table-wrapper'] {
   background-color: var(--card);
   color: var(--card-foreground);
-  border-color: var(--border);
+  border-color: var(--grey-400);
 }
 .carbide.dark [data-slot='table-wrapper'] {
   background-color: var(--card);
   color: var(--card-foreground);
+  border-color: var(--grey-600);
+}
+
+/* Table header: border color */
+.carbide th[data-slot='table-head'],
+.carbide thead[data-slot='table-header'] {
+  border-bottom: 1px solid var(--tablehead-border);
+}
+.carbide.dark th[data-slot='table-head'],
+.carbide.dark thead[data-slot='table-header'] {
+  border-bottom: 1px solid var(--tablehead-border);
+}
+
+/* Table rows: border color */
+.carbide [data-slot='table-row'],
+.carbide tbody tr {
+  border-color: var(--border);
+}
+.carbide.dark [data-slot='table-row'],
+.carbide.dark tbody tr {
   border-color: var(--border);
 }
 
+/* Data Table: Row actions trigger visibility */
+tr td[data-col-id='actions'] .mmc-table-action-trigger,
+tr td[data-col-id='actions'] [data-slot='table-action-trigger'] {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease-in-out;
+}
+/* Visible when row is hovered, trigger is keyboard-focused, menu is open, or row flagged */
+tr:hover td[data-col-id='actions'] .mmc-table-action-trigger,
+tr:hover td[data-col-id='actions'] [data-slot='table-action-trigger'],
+tr td[data-col-id='actions'] .mmc-table-action-trigger:focus-visible,
+tr td[data-col-id='actions'] [data-slot='table-action-trigger']:focus-visible,
+tr td[data-col-id='actions'] .mmc-table-action-trigger[aria-expanded='true'],
+tr
+  td[data-col-id='actions']
+  [data-slot='table-action-trigger'][aria-expanded='true'],
+tr[data-action-visible='true']
+  td[data-col-id='actions']
+  .mmc-table-action-trigger,
+tr[data-action-visible='true']
+  td[data-col-id='actions']
+  [data-slot='table-action-trigger'] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Keep trigger visible and indicate active when menu is open */
+tr td[data-col-id='actions'] .mmc-table-action-trigger[data-state='open'],
+tr
+  td[data-col-id='actions']
+  [data-slot='table-action-trigger'][data-state='open'] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.carbide [data-slot='table-action-trigger'][data-state='open'],
+.carbide [data-slot='table-action-trigger'][aria-expanded='true'] {
+  background-color: var(--table-action-hover-bg);
+}
+.carbide.dark [data-slot='table-action-trigger'][data-state='open'],
+.carbide.dark [data-slot='table-action-trigger'][aria-expanded='true'] {
+  background-color: var(--table-action-hover-bg);
+}
+
 /* =============================
    TABS
-   ============================= */
+  ============================= */
 .carbide [data-slot='tabs-list'][data-variant='default'] {
   background-color: var(--tablist-bg);
   color: var(--tablist-fg);
@@ -905,7 +1216,7 @@
 }
 /* =============================
    UTILITY OVERRIDES
-============================= */
+  ============================= */
 
 /*
   Force correct text color for destructive badges and elements using text-destructive-foreground.
@@ -915,6 +1226,63 @@
   color: var(--destructive-foreground) !important;
 }
 
+/* =============================
+   SPINNER (SEMANTIC HOOK)
+  ============================= */
+.carbide [data-slot='spinner'] {
+  color: var(--spinner-foreground);
+}
+.carbide [data-slot='spinner'] circle:first-of-type {
+  /* track color */
+  stroke: var(--spinner-background);
+}
+.carbide [data-slot='spinner'] circle:last-of-type {
+  /* arc color sync with current color */
+  stroke: currentColor;
+}
+
+/* Contextual overrides when inside buttons */
+.carbide [data-slot='button'] [data-slot='spinner'] {
+  /* Default button uses primary bg → use on-dark pair for contrast */
+  --spinner-foreground: var(--primary-foreground);
+  --spinner-background: color-mix(
+    in srgb,
+    var(--primary-foreground) 25%,
+    transparent
+  );
+}
+.carbide [data-slot='button'][data-variant='outline'] [data-slot='spinner'],
+.carbide [data-slot='button'][data-variant='secondary'] [data-slot='spinner'],
+.carbide [data-slot='button'][data-variant='ghost'] [data-slot='spinner'],
+.carbide [data-slot='button'][data-variant='link'] [data-slot='spinner'] {
+  /* Light backgrounds → use on-light pair */
+  --spinner-foreground: var(--indigo-600);
+  --spinner-background: var(--grey-300);
+}
+
+/* In dark theme, outline/secondary/ghost/link often sit on dark surfaces → use on-dark pair */
+.carbide.dark
+  [data-slot='button'][data-variant='outline']
+  [data-slot='spinner'],
+.carbide.dark
+  [data-slot='button'][data-variant='secondary']
+  [data-slot='spinner'],
+.carbide.dark [data-slot='button'][data-variant='ghost'] [data-slot='spinner'],
+.carbide.dark [data-slot='button'][data-variant='link'] [data-slot='spinner'] {
+  --spinner-foreground: var(--grey-00);
+  --spinner-background: color-mix(in srgb, var(--grey-00) 25%, transparent);
+}
+
+/* Optional forcing utilities */
+.carbide .mmc-spinner--on-dark {
+  --spinner-foreground: var(--grey-00);
+  --spinner-background: color-mix(in srgb, var(--grey-00) 25%, transparent);
+}
+.carbide .mmc-spinner--on-light {
+  --spinner-foreground: var(--indigo-600);
+  --spinner-background: var(--grey-300);
+}
+
 /* Input Border Utility */
 .carbide .border-input,
 .carbide.dark .border-input {
@@ -932,9 +1300,12 @@
 
 /* =============================
    PROGRESS (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='progress'] {
-  background-color: var(--surface-neutral);
+  background-color: var(--grey-200, #edf2f7);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.05) inset;
 }
 
 .carbide [data-slot='progress'] [data-slot='progress-indicator'] {
@@ -943,7 +1314,7 @@
 
 /* =============================
    ACCORDION
-   ============================= */
+  ============================= */
 .carbide [data-slot='accordion'] [data-slot='accordion-item'] {
   border-bottom: 1px solid var(--border);
 }
@@ -953,7 +1324,7 @@
 
 /* =============================
    POPOVER
-   ============================= */
+  ============================= */
 .carbide [data-slot='popover-content'] {
   background-color: var(--popover);
   color: var(--popover-foreground);
@@ -969,10 +1340,10 @@
 
 /* =============================
    SLIDER (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 /* =============================
    CHECKBOX (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='checkbox'] {
   border-color: var(--border-input) !important;
   background-color: var(--bg-input);
@@ -998,7 +1369,7 @@
 
 /* =============================
    RADIO GROUP ITEM
-   ============================= */
+  ============================= */
 .carbide [data-slot='radio-group-item'] {
   border-color: var(--border-input);
   background-color: var(--bg-input);
@@ -1023,7 +1394,7 @@
 
 /* =============================
    FORM CONTROL FOCUS + INVALID STATES
-   ============================= */
+  ============================= */
 .carbide [data-slot='checkbox']:focus-visible,
 .carbide [data-slot='radio-group-item']:focus-visible,
 .carbide [data-slot='switch']:focus-visible {
@@ -1046,7 +1417,7 @@
 
 /* =============================
    SWITCH (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='switch'] {
   border-color: transparent;
 }
@@ -1074,7 +1445,7 @@
 
 /* =============================
    CALENDAR (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='calendar'] {
   background-color: var(--card);
   color: var(--card-foreground);
@@ -1116,7 +1487,10 @@
 }
 
 .carbide.dark [data-slot='progress'] {
-  background-color: var(--surface-neutral);
+  background-color: var(--grey-800, #2d3748);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3) inset;
 }
 
 .carbide.dark [data-slot='progress'] [data-slot='progress-indicator'] {
@@ -1125,7 +1499,7 @@
 
 /* =============================
    DATA TABLE: ALIGNMENT BASELINE FIX
-   ============================= */
+  ============================= */
 /* Unify left-aligned body cells to the sortable-header baseline (0.25rem) */
 .carbide
   td.text-left[data-col-id]:not([data-col-id='select']):not(