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-incident-update/upladmin-incident-update.ts

@@ -157,52 +157,6 @@ export class UpladminIncidentUpdate extends DeesElement {
         gap: ${unsafeCSS(sharedStyles.spacing.sm)};
       }
 
-      .status-option {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 10px;
-        padding: 18px 14px;
-        background: ${sharedStyles.colors.background.primary};
-        border: 2px solid ${sharedStyles.colors.border.default};
-        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
-        cursor: pointer;
-        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
-        text-align: center;
-      }
-
-      .status-option:hover {
-        border-color: ${sharedStyles.colors.border.strong};
-        background: ${sharedStyles.colors.background.muted};
-      }
-
-      .status-option.selected {
-        border-color: ${sharedStyles.colors.accent.primary};
-        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(96, 165, 250, 0.1)')};
-      }
-
-      .status-option input {
-        display: none;
-      }
-
-      .status-option.investigating dees-icon { --icon-color: ${sharedStyles.colors.status.partialOutage}; }
-      .status-option.identified dees-icon { --icon-color: ${sharedStyles.colors.status.degraded}; }
-      .status-option.monitoring dees-icon { --icon-color: ${sharedStyles.colors.status.maintenance}; }
-      .status-option.resolved dees-icon { --icon-color: ${sharedStyles.colors.status.operational}; }
-      .status-option.postmortem dees-icon { --icon-color: #a855f7; }
-
-      .status-label {
-        font-size: 13px;
-        font-weight: 600;
-        color: ${sharedStyles.colors.text.primary};
-      }
-
-      .status-desc {
-        font-size: 11px;
-        color: ${sharedStyles.colors.text.muted};
-        line-height: 1.3;
-      }
-
       .field-label {
         display: block;
         font-size: 13px;
@@ -358,20 +312,14 @@ export class UpladminIncidentUpdate extends DeesElement {
               <label class="field-label required">Status</label>
               <div class="status-grid">
                 ${statusOptions.map(opt => html`
-                  <label
-                    class="status-option ${opt.value} ${this.formData.status === opt.value ? 'selected' : ''}"
-                    @click="${() => this.handleStatusChange(opt.value)}"
-                  >
-                    <input
-                      type="radio"
-                      name="status"
-                      value="${opt.value}"
-                      ?checked="${this.formData.status === opt.value}"
-                    />
-                    <dees-icon .icon=${this.statusIcons[opt.value]} .iconSize=${24}></dees-icon>
-                    <span class="status-label">${opt.label}</span>
-                    <span class="status-desc">${opt.desc}</span>
-                  </label>
+                  <upladmin-option-card
+                    .variant=${opt.value}
+                    .icon=${this.statusIcons[opt.value]}
+                    .label=${opt.label}
+                    .description=${opt.desc}
+                    ?selected=${this.formData.status === opt.value}
+                    @click=${() => this.handleStatusChange(opt.value)}
+                  ></upladmin-option-card>
                 `)}
               </div>
             </div>