feat: expanded variant system — 30+ new CSS class mappings

variant_to_css expanded for all 14 components:
- Button: outline, toggle, toggle-on/off, tab-active/inactive, select
- Text: card-title/subtitle/footer, input-label/error/helper,
  dialog-title, stat-*, separator-label, avatar-*
- Column: stat-card, dialog-panel/overlay, avatar, separator-*,
  progress-fill-*, toast-*, alert-*
- Row: tabs, separator, select-group
- Input: input-default, input-error

variant_map_js expanded for dynamic variant resolution

New CSS:
- ds-btn-outline (transparent with indigo border)
- ds-tab / ds-tab-active (tab switcher styles)
- ds-tabs (flex container with subtle bg)
- ds-select-group (flex wrap)
- ds-separator-row / ds-separator-v
- ds-toast-success/error/warning/info colors
- ds-avatar-status

All 10 examples pass. Build sizes: gallery 93KB, dashboard 60KB.

compiler/ds-codegen/src/js_emitter.rs

@@ -2150,6 +2150,69 @@ button.ds-btn-destructive:hover { box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
   font-weight: 600;
   color: #f87171;
 }
+/* ── Outline Button ── */
+button.ds-btn-outline, .ds-button.ds-btn-outline {
+  background: transparent;
+  border: 1px solid rgba(99, 102, 241, 0.4);
+  color: #a5b4fc;
+  box-shadow: none;
+}
+button.ds-btn-outline:hover { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.6); }
+/* ── Tabs ── */
+.ds-tabs {
+  display: flex;
+  gap: 0.25rem;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 0.25rem;
+  border-radius: 12px;
+}
+.ds-tab {
+  background: transparent;
+  border: none;
+  color: #94a3b8;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: none;
+}
+.ds-tab:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.06); }
+.ds-tab-active {
+  background: rgba(99, 102, 241, 0.2) !important;
+  color: #a5b4fc !important;
+  font-weight: 600;
+}
+/* ── Select Group ── */
+.ds-select-group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+/* ── Separator Row ── */
+.ds-separator-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+}
+.ds-separator-v {
+  width: 1px;
+  height: 100%;
+  min-height: 1.5rem;
+}
+/* ── Toast Variants ── */
+.ds-toast-success { border-color: rgba(34, 197, 94, 0.3); }
+.ds-toast-error { border-color: rgba(239, 68, 68, 0.3); }
+.ds-toast-warning { border-color: rgba(234, 179, 8, 0.3); }
+.ds-toast-info { border-color: rgba(56, 189, 248, 0.3); }
+/* ── Avatar Status ── */
+.ds-avatar-status {
+  font-size: 0.625rem;
+  line-height: 1;
+  text-align: center;
+}
 "#;
 
 /// Map a DreamStack variant prop to CSS class(es) based on element tag.
@@ -2160,6 +2223,14 @@ fn variant_to_css(tag: &str, variant: &str) -> String {
             "secondary" => "ds-btn-secondary".to_string(),
             "ghost" => "ds-btn-ghost".to_string(),
             "destructive" => "ds-btn-destructive".to_string(),
+            "outline" => "ds-btn-outline".to_string(),
+            "toggle" => "ds-toggle".to_string(),
+            "toggle-on" => "ds-toggle ds-toggle-on".to_string(),
+            "toggle-off" => "ds-toggle".to_string(),
+            "tab-active" => "ds-tab ds-tab-active".to_string(),
+            "tab-inactive" => "ds-tab".to_string(),
+            "select-active" => "ds-btn-primary".to_string(),
+            "select-option" => "ds-btn-secondary".to_string(),
             _ => format!("ds-btn-{}", variant),
         },
         "text" => match variant {
@@ -2168,20 +2239,55 @@ fn variant_to_css(tag: &str, variant: &str) -> String {
             "title" => "ds-card-title".to_string(),
             "subtitle" | "muted" => "ds-card-subtitle".to_string(),
             "label" => "ds-input-label".to_string(),
+            "card-title" => "ds-card-title".to_string(),
+            "card-subtitle" => "ds-card-subtitle".to_string(),
+            "card-footer" => "ds-card-subtitle".to_string(),
+            "input-label" => "ds-input-label".to_string(),
+            "input-error-text" => "ds-input-error".to_string(),
+            "input-helper" => "ds-card-subtitle".to_string(),
+            "dialog-title" => "ds-dialog-title".to_string(),
+            "stat-label" => "ds-card-subtitle".to_string(),
+            "stat-value" => "ds-stat-value".to_string(),
+            "stat-trend-up" => "ds-stat-delta-up".to_string(),
+            "stat-trend-down" => "ds-stat-delta-down".to_string(),
+            "stat-trend-neutral" => "ds-card-subtitle".to_string(),
+            "separator-label" => "ds-card-subtitle".to_string(),
+            "avatar" => "ds-avatar".to_string(),
+            "avatar-sm" => "ds-avatar ds-avatar-sm".to_string(),
+            "avatar-md" => "ds-avatar".to_string(),
+            "avatar-lg" => "ds-avatar ds-avatar-lg".to_string(),
+            "avatar-status" => "ds-avatar-status".to_string(),
             _ => format!("ds-text-{}", variant),
         },
         "column" => match variant {
             "card" => "ds-card".to_string(),
-            "dialog" => "ds-dialog-content".to_string(),
-            "overlay" => "ds-dialog-overlay".to_string(),
+            "stat-card" => "ds-card".to_string(),
+            "dialog" | "dialog-panel" => "ds-dialog-content".to_string(),
+            "dialog-overlay" | "overlay" => "ds-dialog-overlay".to_string(),
+            "avatar" => "ds-avatar".to_string(),
+            "separator" => "ds-separator".to_string(),
+            "separator-line" => "ds-separator".to_string(),
+            "separator-horizontal" => "ds-separator".to_string(),
+            "separator-vertical" => "ds-separator ds-separator-v".to_string(),
+            "progress-track" => "ds-progress-track".to_string(),
+            "progress-fill" | "progress-fill-success" | "progress-fill-warning" | "progress-fill-error" => {
+                let cls = format!("ds-progress-fill ds-progress-fill-{}", variant.strip_prefix("progress-fill-").unwrap_or("default"));
+                if variant == "progress-fill" { "ds-progress-fill".to_string() } else { cls }
+            }
+            "toast-success" | "toast-error" | "toast-warning" | "toast-info" => format!("ds-toast ds-toast-{}", variant.strip_prefix("toast-").unwrap_or("info")),
+            "alert-info" | "alert-warning" | "alert-error" | "alert-success" => format!("ds-alert ds-alert-{}", variant.strip_prefix("alert-").unwrap_or("info")),
             _ => format!("ds-column-{}", variant),
         },
         "row" => match variant {
             "card" => "ds-card".to_string(),
+            "tabs" => "ds-tabs".to_string(),
+            "separator" => "ds-separator-row".to_string(),
+            "select-group" => "ds-select-group".to_string(),
             _ => format!("ds-row-{}", variant),
         },
         "input" => match variant {
-            "error" => "ds-input-has-error".to_string(),
+            "error" | "input-error" => "ds-input-has-error".to_string(),
+            "input-default" => "".to_string(),
             _ => format!("ds-input-{}", variant),
         },
         _ => format!("ds-{}-{}", tag, variant),
@@ -2191,10 +2297,11 @@ fn variant_to_css(tag: &str, variant: &str) -> String {
 /// Generate a JS object literal mapping variant names to CSS classes for dynamic variant.
 fn variant_map_js(tag: &str) -> String {
     match tag {
-        "button" => "{'primary':'ds-btn-primary','secondary':'ds-btn-secondary','ghost':'ds-btn-ghost','destructive':'ds-btn-destructive'}".to_string(),
-        "text" => "{'success':'ds-badge ds-badge-success','warning':'ds-badge ds-badge-warning','error':'ds-badge ds-badge-error','info':'ds-badge ds-badge-info','default':'ds-badge ds-badge-default','title':'ds-card-title','subtitle':'ds-card-subtitle','label':'ds-input-label'}".to_string(),
-        "column" => "{'card':'ds-card','dialog':'ds-dialog-content','overlay':'ds-dialog-overlay'}".to_string(),
-        "input" => "{'error':'ds-input-has-error'}".to_string(),
+        "button" => "{'primary':'ds-btn-primary','secondary':'ds-btn-secondary','ghost':'ds-btn-ghost','destructive':'ds-btn-destructive','outline':'ds-btn-outline','toggle':'ds-toggle','toggle-on':'ds-toggle ds-toggle-on','toggle-off':'ds-toggle','tab-active':'ds-tab ds-tab-active','tab-inactive':'ds-tab','select-active':'ds-btn-primary','select-option':'ds-btn-secondary'}".to_string(),
+        "text" => "{'success':'ds-badge ds-badge-success','warning':'ds-badge ds-badge-warning','error':'ds-badge ds-badge-error','info':'ds-badge ds-badge-info','default':'ds-badge ds-badge-default','title':'ds-card-title','subtitle':'ds-card-subtitle','label':'ds-input-label','card-title':'ds-card-title','card-subtitle':'ds-card-subtitle','card-footer':'ds-card-subtitle','input-label':'ds-input-label','input-error-text':'ds-input-error','input-helper':'ds-card-subtitle','dialog-title':'ds-dialog-title','stat-label':'ds-card-subtitle','stat-value':'ds-stat-value','stat-trend-up':'ds-stat-delta-up','stat-trend-down':'ds-stat-delta-down','stat-trend-neutral':'ds-card-subtitle','separator-label':'ds-card-subtitle','avatar':'ds-avatar','avatar-sm':'ds-avatar ds-avatar-sm','avatar-md':'ds-avatar','avatar-lg':'ds-avatar ds-avatar-lg'}".to_string(),
+        "column" => "{'card':'ds-card','stat-card':'ds-card','dialog':'ds-dialog-content','dialog-panel':'ds-dialog-content','dialog-overlay':'ds-dialog-overlay','overlay':'ds-dialog-overlay','avatar':'ds-avatar','separator':'ds-separator','separator-line':'ds-separator','progress-track':'ds-progress-track','progress-fill':'ds-progress-fill'}".to_string(),
+        "row" => "{'card':'ds-card','tabs':'ds-tabs','separator':'ds-separator-row','select-group':'ds-select-group'}".to_string(),
+        "input" => "{'error':'ds-input-has-error','input-error':'ds-input-has-error','input-default':''}".to_string(),
         _ => "{}".to_string(),
     }
 }