@adia-ai/web-modules 0.8.36 → 0.8.37

package/settings/notification-preferences/notification-preferences.css

@@ -0,0 +1,204 @@
+/* ═══════════════════════════════════════════════════════════════
+   <notification-preferences-ui> — Notification types × channels matrix.
+
+   Composite over <check-ui> (cell) + <switch-ui> (column master) +
+   <icon-ui> + <text-ui> + <empty-state-ui>. Renders as an ARIA grid
+   (role="table"/row/cell/columnheader/rowheader) using CSS grid for
+   layout — NOT native <table> (HTML parser strips table-content tags
+   inside custom-element subtrees per FEEDBACK rule).
+
+   SPEC: docs/specs/implementation-ready/SPEC-064-notification-preferences.md
+   Two-block @scope pattern per docs/specs/component-token-contract.md.
+   Zero raw color values (repo hard rule); zero raw px ≥ 3 (rem only).
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Block 1: TOKEN DECLARATIONS ───────────────────────────────── */
+
+notification-preferences-ui {
+  --notification-preferences-bg:               var(--md-sys-color-neutral-background);
+  --notification-preferences-row-bg:           var(--a-bg-muted);
+  --notification-preferences-px:               var(--a-space-5);
+  --notification-preferences-py:               var(--a-space-5);
+  --notification-preferences-row-py:           var(--a-space-3);
+  --notification-preferences-row-px:           var(--a-space-3);
+  --notification-preferences-channel-width:    var(--a-space-9);
+  --notification-preferences-row-label-min:    12rem;
+  --notification-preferences-border:           var(--md-sys-color-neutral-outline-variant);
+  --notification-preferences-radius:           var(--a-radius-md);
+  --notification-preferences-group-fg:         var(--a-fg-muted);
+
+  --notification-preferences-disabled-opacity: var(--a-opacity-disabled, 0.5);
+}
+
+/* ── Block 2: SCOPED LAYOUT ────────────────────────────────────── */
+
+@scope (notification-preferences-ui) {
+
+  :scope {
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-space-4);
+    padding: var(--notification-preferences-py)
+             var(--notification-preferences-px);
+    background: var(--notification-preferences-bg);
+    border: 1px solid var(--notification-preferences-border);
+    border-radius: var(--notification-preferences-radius);
+  }
+
+  /* ── Slotted header + footer ── */
+  :scope > [data-part="header"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-space-2);
+  }
+  :scope > [data-part="header"]:empty {
+    display: none;
+  }
+  :scope > [data-part="footer"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-space-2);
+  }
+  :scope > [data-part="footer"]:empty {
+    display: none;
+  }
+
+  /* ── Matrix host ── */
+  :scope [data-part="matrix"] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* ── Row template ── row-label column + N channel columns.
+        The custom property --np-columns is set by the JS at render
+        time once `channels` is known: e.g. `repeat(3, minmax(...))`. ── */
+  :scope [role="row"],
+  :scope [data-part="header-row"] {
+    display: grid;
+    grid-template-columns:
+      minmax(var(--notification-preferences-row-label-min), 1fr)
+      var(--np-columns, repeat(3, minmax(var(--notification-preferences-channel-width),
+                                          auto)));
+    align-items: center;
+    gap: var(--a-space-2);
+    padding: var(--notification-preferences-row-py)
+             var(--notification-preferences-row-px);
+    border-bottom: 1px solid var(--notification-preferences-border);
+  }
+
+  /* Header row carries the column titles; no zebra applied. */
+  :scope [data-part="header-row"] {
+    background: transparent;
+  }
+
+  /* Body rows alternate via :nth-child for zebra. */
+  :scope [data-part="body"] [role="row"]:nth-child(even) {
+    background: var(--notification-preferences-row-bg);
+  }
+  :scope [data-part="body"] [role="row"]:last-child {
+    border-bottom: 0;
+  }
+
+  /* ── Header cells (column headers) ── */
+  :scope [role="columnheader"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--a-space-1);
+    flex-direction: column;
+    min-width: var(--notification-preferences-channel-width);
+    color: var(--a-fg-muted);
+    font-size: var(--a-text-xs, 0.75rem);
+    font-weight: var(--a-weight-medium, 500);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  :scope [role="columnheader"][data-row-label] {
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: start;
+    flex-direction: row;
+  }
+  :scope [role="columnheader"] > icon-ui {
+    --a-icon-size: 1rem;
+    color: var(--a-fg-muted);
+  }
+  :scope [role="columnheader"] > [data-channel-label] {
+    display: block;
+  }
+  :scope [role="columnheader"] > switch-ui {
+    margin-block-start: var(--a-space-1);
+  }
+
+  /* ── Row header (notification-type label cell) ── */
+  :scope [role="rowheader"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-space-1);
+    align-items: flex-start;
+    min-width: 0;
+  }
+  :scope [role="rowheader"] > [data-row-label-text] {
+    color: var(--md-sys-color-neutral-on-surface);
+    font-weight: var(--a-weight-medium, 500);
+    font-size: var(--a-text-sm, 0.875rem);
+  }
+  :scope [role="rowheader"] > [data-row-description] {
+    color: var(--a-fg-muted);
+    font-size: var(--a-text-xs, 0.75rem);
+    line-height: 1.4;
+  }
+
+  /* ── Cells (per-(row,channel) check-ui) ── */
+  :scope [role="cell"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--notification-preferences-channel-width);
+  }
+
+  /* ── Group heading row (when group-by="group") ── */
+  :scope [data-part="group-heading"] {
+    padding: var(--a-space-3)
+             var(--notification-preferences-row-px)
+             var(--a-space-2);
+    color: var(--notification-preferences-group-fg);
+    font-size: var(--a-text-xs, 0.75rem);
+    font-weight: var(--a-weight-medium, 500);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  :scope [data-part="group-heading"]:first-child {
+    padding-block-start: 0;
+  }
+
+  /* ── Empty state ── */
+  :scope > [data-part="empty"] {
+    display: none;
+  }
+  :scope[empty] > [data-part="empty"] {
+    display: block;
+  }
+  :scope[empty] > [data-part="matrix"] {
+    display: none;
+  }
+
+  /* ── Loading state — dim + freeze cells ── */
+  :scope[loading] [role="cell"] {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+  :scope[loading] [role="columnheader"] > switch-ui {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  /* ── Disabled state ── */
+  :scope[disabled] {
+    opacity: var(--notification-preferences-disabled-opacity);
+  }
+  :scope[disabled] check-ui,
+  :scope[disabled] switch-ui {
+    pointer-events: none;
+  }
+}