updated apps

custom_components/maintenance_supporter/frontend-src/styles.ts

@@ -7,30 +7,10 @@ import EN from "./locales/en.json";
 // derives the real symbol from const.BUDGET_CURRENCIES[DEFAULT_BUDGET_CURRENCY].
 export const DEFAULT_CURRENCY_SYMBOL = "€";
 
-export const STATUS_COLORS: Record<string, string> = {
-  ok: "var(--success-color, #4caf50)",
-  due_soon: "var(--warning-color, #ff9800)",
-  overdue: "var(--error-color, #f44336)",
-  // Theme-token first so it adapts to dark/custom themes (was a bare #ff5722).
-  triggered: "var(--deep-orange-color, #ff5722)",
-  // v2.10.0: archived is a neutral, greyed-out state (retired but retained).
-  archived: "var(--disabled-color, #9e9e9e)",
-  // v2.20 (N3): paused is frozen-but-present — info blue, clearly not urgent.
-  paused: "var(--info-color, #2196f3)",
-};
-
-export const STATUS_ICONS: Record<string, string> = {
-  ok: "mdi:check-circle",
-  due_soon: "mdi:alert-circle",
-  overdue: "mdi:alert-octagon",
-  triggered: "mdi:bell-alert",
-  archived: "mdi:archive-outline",
-  paused: "mdi:pause-circle-outline",
-  completed: "mdi:check-circle",
-  skipped: "mdi:skip-next",
-  missed: "mdi:calendar-remove",
-  reset: "mdi:refresh",
-};
+// Moved to the dependency-free status-constants.ts so the dashboard strategy
+// bundle can share them without pulling Lit in; re-exported here so every
+// existing `from "./styles"` import keeps working.
+export { STATUS_COLORS, STATUS_ICONS } from "./status-constants";
 
 /* ─── i18n ─── */
 
@@ -265,12 +245,31 @@ export function fireMoreInfo(ev: Event, entityId: string) {
   );
 }
 
+/** Native-input field scaffolding for dialogs rendered in the custom-panel
+ * context, where <ha-textfield> is not registered (the documented
+ * complete-dialog trap). Shared so the twin copies in confirm-dialog and
+ * complete-dialog can't drift — they already had (12px vs 8px margins). */
+export const nativeFieldStyles = css`
+  .field { display: flex; flex-direction: column; gap: 4px; }
+  .field-label { font-size: 12px; color: var(--secondary-text-color); }
+  .field-input {
+    padding: 8px 10px; font-size: 14px;
+    background: var(--secondary-background-color, rgba(0,0,0,0.06));
+    color: var(--primary-text-color);
+    border: 1px solid var(--divider-color); border-radius: 6px;
+    font-family: inherit; width: 100%; box-sizing: border-box;
+  }
+  .field-input:focus { outline: none; border-color: var(--primary-color); }
+`;
+
 export const sharedStyles = css`
   :host {
     --maint-ok-color: var(--success-color, #4caf50);
     --maint-due-soon-color: var(--warning-color, #ff9800);
     --maint-overdue-color: var(--error-color, #f44336);
-    --maint-triggered-color: #ff5722;
+    /* Theme-token first so it follows dark/custom themes (was a bare #ff5722,
+       inconsistent with STATUS_COLORS.triggered which already tokenised it). */
+    --maint-triggered-color: var(--deep-orange-color, #ff5722);
   }
 
   .status-badge {
@@ -292,14 +291,17 @@ export const sharedStyles = css`
   /* Shape icon so status is not conveyed by colour alone (accessibility). */
   .status-badge ha-icon { --mdc-icon-size: 14px; margin-left: -1px; }
 
-  .status-badge.ok { background-color: var(--maint-ok-color); }
-  .status-badge.due_soon { background-color: var(--maint-due-soon-color); }
+  /* Light-background statuses (green/orange/grey) carry DARK text: white on
+     them fails even the 3:1 WCAG UI-contrast floor (2.2–2.8:1), while the
+     saturated statuses below keep white (≥3.1:1). Matches the calendar pills. */
+  .status-badge.ok { background-color: var(--maint-ok-color); color: #000; }
+  .status-badge.due_soon { background-color: var(--maint-due-soon-color); color: #000; }
   .status-badge.overdue { background-color: var(--maint-overdue-color); }
   .status-badge.triggered { background-color: var(--maint-triggered-color); }
   /* Completed one-time task ("done") — muted blue-grey. */
   .status-badge.done { background-color: var(--maint-done-color, #78909c); }
   /* v2.10.0: archived (retire-but-retain) — neutral grey, clearly inert. */
-  .status-badge.archived { background-color: var(--disabled-color, #9e9e9e); }
+  .status-badge.archived { background-color: var(--disabled-color, #9e9e9e); color: #000; }
   /* v2.20 (N3): paused — frozen but present, info blue. */
   .status-badge.paused { background-color: var(--info-color, #2196f3); }