feat(elements): add upladmin-option-card component and migrate option/status UIs to use it; refactor monitor form multitoggle subscriptions and event handling; improve theme color handling and dark-mode styles; add demos, Playwright snapshots, and migration plan

ts_web/elements/upladmin-option-card/upladmin-option-card.demo.ts

@@ -0,0 +1,118 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { UpladminOptionCard } from './upladmin-option-card.js';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-container {
+      padding: 24px;
+      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+      min-height: 100vh;
+    }
+    .demo-section {
+      margin-bottom: 32px;
+    }
+    .demo-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      margin-bottom: 16px;
+    }
+    .demo-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+      gap: 12px;
+    }
+  </style>
+  <div class="demo-container">
+    <div class="demo-section">
+      <div class="demo-title">Severity Variants</div>
+      <div class="demo-grid">
+        <upladmin-option-card
+          variant="critical"
+          icon="lucide:AlertCircle"
+          label="Critical"
+          description="Severe impact"
+        ></upladmin-option-card>
+        <upladmin-option-card
+          variant="major"
+          icon="lucide:AlertTriangle"
+          label="Major"
+          description="Significant impact"
+        ></upladmin-option-card>
+        <upladmin-option-card
+          variant="minor"
+          icon="lucide:Info"
+          label="Minor"
+          description="Limited impact"
+        ></upladmin-option-card>
+        <upladmin-option-card
+          variant="maintenance"
+          icon="lucide:Wrench"
+          label="Maintenance"
+          description="Scheduled work"
+          selected
+        ></upladmin-option-card>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <div class="demo-title">Status Variants</div>
+      <div class="demo-grid">
+        <upladmin-option-card
+          variant="investigating"
+          icon="lucide:Search"
+          label="Investigating"
+          description="Looking into it"
+        ></upladmin-option-card>
+        <upladmin-option-card
+          variant="identified"
+          icon="lucide:Target"
+          label="Identified"
+          description="Root cause found"
+        ></upladmin-option-card>
+        <upladmin-option-card
+          variant="monitoring"
+          icon="lucide:Eye"
+          label="Monitoring"
+          description="Fix applied"
+          selected
+        ></upladmin-option-card>
+        <upladmin-option-card
+          variant="resolved"
+          icon="lucide:CheckCircle"
+          label="Resolved"
+          description="Issue fixed"
+        ></upladmin-option-card>
+        <upladmin-option-card
+          variant="postmortem"
+          icon="lucide:FileText"
+          label="Postmortem"
+          description="Analysis complete"
+        ></upladmin-option-card>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <div class="demo-title">States</div>
+      <div class="demo-grid">
+        <upladmin-option-card
+          variant="primary"
+          icon="lucide:Star"
+          label="Normal"
+        ></upladmin-option-card>
+        <upladmin-option-card
+          variant="primary"
+          icon="lucide:Star"
+          label="Selected"
+          selected
+        ></upladmin-option-card>
+        <upladmin-option-card
+          variant="primary"
+          icon="lucide:Star"
+          label="Disabled"
+          disabled
+        ></upladmin-option-card>
+      </div>
+    </div>
+  </div>
+`;