@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/work-orders/assets/SHELL-2-account-navigation.html

@@ -1,1159 +0,0 @@
-<title>SHELL-2 — AccountPage section navigation</title>
-<style>
-  /* ============================================================
-     TOKENS
-     Two independent token layers, intentionally kept apart:
-     - --chrome-*   this document's own chrome (headings, coverage
-                     block, captions). Neutral, low-saturation —
-                     never confused with the mockup's colours.
-     - --mui-*      MUI's stock light/dark palette defaults, used
-                     only inside the phone/desktop mockup frames.
-                     A consuming app's real theme overrides these;
-                     see the note under the lede.
-     ============================================================ */
-  :root {
-    color-scheme: light dark;
-
-    --chrome-bg: #f6f7f9;
-    --chrome-surface: #ffffff;
-    --chrome-border: #e2e5eb;
-    --chrome-ink: #1a2130;
-    --chrome-ink-soft: #5c6472;
-    --chrome-ink-faint: #88909c;
-    --chrome-code-bg: #eef0f4;
-
-    --cov-covers: #1e7d34;
-    --cov-covers-bg: #eaf6ee;
-    --cov-covers-border: #bfe4c9;
-    --cov-excludes: #4b5563;
-    --cov-excludes-bg: #f1f2f5;
-    --cov-excludes-border: #dadde3;
-    --cov-explicit: #92600a;
-    --cov-explicit-bg: #fdf3e2;
-    --cov-explicit-border: #f1dcab;
-
-    --mui-bg-default: #f4f6f8;
-    --mui-bg-paper: #ffffff;
-    --mui-divider: rgba(0, 0, 0, 0.12);
-    --mui-text-primary: rgba(0, 0, 0, 0.87);
-    --mui-text-secondary: rgba(0, 0, 0, 0.6);
-    --mui-text-disabled: rgba(0, 0, 0, 0.38);
-    --mui-primary: #1976d2;
-    --mui-primary-contrast: #ffffff;
-    --mui-action-hover: rgba(0, 0, 0, 0.04);
-    --mui-action-selected: rgba(0, 0, 0, 0.08);
-    --mui-success: #2e7d32;
-    --mui-error: #d32f2f;
-    --mui-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.08);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --chrome-bg: #14171c;
-      --chrome-surface: #1b1f26;
-      --chrome-border: #2a2f38;
-      --chrome-ink: #eef0f3;
-      --chrome-ink-soft: #a6adba;
-      --chrome-ink-faint: #767e8c;
-      --chrome-code-bg: #22262e;
-
-      --cov-covers: #7fd196;
-      --cov-covers-bg: #16261c;
-      --cov-covers-border: #234a30;
-      --cov-excludes: #b6bcc7;
-      --cov-excludes-bg: #21242b;
-      --cov-excludes-border: #323744;
-      --cov-explicit: #f0c274;
-      --cov-explicit-bg: #2b230f;
-      --cov-explicit-border: #4a3a17;
-
-      --mui-bg-default: #121212;
-      --mui-bg-paper: #1e1e1e;
-      --mui-divider: rgba(255, 255, 255, 0.12);
-      --mui-text-primary: rgba(255, 255, 255, 0.87);
-      --mui-text-secondary: rgba(255, 255, 255, 0.7);
-      --mui-text-disabled: rgba(255, 255, 255, 0.5);
-      --mui-primary: #90caf9;
-      --mui-primary-contrast: #0a1929;
-      --mui-action-hover: rgba(255, 255, 255, 0.08);
-      --mui-action-selected: rgba(255, 255, 255, 0.16);
-      --mui-success: #66bb6a;
-      --mui-error: #f2726a;
-      --mui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
-    }
-  }
-
-  :root[data-theme="dark"] {
-    --chrome-bg: #14171c;
-    --chrome-surface: #1b1f26;
-    --chrome-border: #2a2f38;
-    --chrome-ink: #eef0f3;
-    --chrome-ink-soft: #a6adba;
-    --chrome-ink-faint: #767e8c;
-    --chrome-code-bg: #22262e;
-
-    --cov-covers: #7fd196;
-    --cov-covers-bg: #16261c;
-    --cov-covers-border: #234a30;
-    --cov-excludes: #b6bcc7;
-    --cov-excludes-bg: #21242b;
-    --cov-excludes-border: #323744;
-    --cov-explicit: #f0c274;
-    --cov-explicit-bg: #2b230f;
-    --cov-explicit-border: #4a3a17;
-
-    --mui-bg-default: #121212;
-    --mui-bg-paper: #1e1e1e;
-    --mui-divider: rgba(255, 255, 255, 0.12);
-    --mui-text-primary: rgba(255, 255, 255, 0.87);
-    --mui-text-secondary: rgba(255, 255, 255, 0.7);
-    --mui-text-disabled: rgba(255, 255, 255, 0.5);
-    --mui-primary: #90caf9;
-    --mui-primary-contrast: #0a1929;
-    --mui-action-hover: rgba(255, 255, 255, 0.08);
-    --mui-action-selected: rgba(255, 255, 255, 0.16);
-    --mui-success: #66bb6a;
-    --mui-error: #f2726a;
-    --mui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
-  }
-
-  :root[data-theme="light"] {
-    --chrome-bg: #f6f7f9;
-    --chrome-surface: #ffffff;
-    --chrome-border: #e2e5eb;
-    --chrome-ink: #1a2130;
-    --chrome-ink-soft: #5c6472;
-    --chrome-ink-faint: #88909c;
-    --chrome-code-bg: #eef0f4;
-
-    --cov-covers: #1e7d34;
-    --cov-covers-bg: #eaf6ee;
-    --cov-covers-border: #bfe4c9;
-    --cov-excludes: #4b5563;
-    --cov-excludes-bg: #f1f2f5;
-    --cov-excludes-border: #dadde3;
-    --cov-explicit: #92600a;
-    --cov-explicit-bg: #fdf3e2;
-    --cov-explicit-border: #f1dcab;
-
-    --mui-bg-default: #f4f6f8;
-    --mui-bg-paper: #ffffff;
-    --mui-divider: rgba(0, 0, 0, 0.12);
-    --mui-text-primary: rgba(0, 0, 0, 0.87);
-    --mui-text-secondary: rgba(0, 0, 0, 0.6);
-    --mui-text-disabled: rgba(0, 0, 0, 0.38);
-    --mui-primary: #1976d2;
-    --mui-primary-contrast: #ffffff;
-    --mui-action-hover: rgba(0, 0, 0, 0.04);
-    --mui-action-selected: rgba(0, 0, 0, 0.08);
-    --mui-success: #2e7d32;
-    --mui-error: #d32f2f;
-    --mui-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.08);
-  }
-
-  * { box-sizing: border-box; }
-
-  body, .doc {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  }
-
-  .doc {
-    max-width: 1240px;
-    margin: 0 auto;
-    padding: 40px 28px 96px;
-    color: var(--chrome-ink);
-  }
-
-  code, .mono {
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-    font-size: 0.86em;
-    background: var(--chrome-code-bg);
-    padding: 0.1em 0.4em;
-    border-radius: 4px;
-  }
-
-  .tabular { font-variant-numeric: tabular-nums; }
-
-  /* ---------- header ---------- */
-  .doc-head { margin-bottom: 32px; }
-  .doc-head .wo-id {
-    font-size: 13px;
-    color: var(--chrome-ink-faint);
-    margin: 0 0 6px;
-  }
-  h1 {
-    font-size: 28px;
-    line-height: 1.25;
-    font-weight: 700;
-    margin: 0 0 10px;
-    text-wrap: balance;
-    letter-spacing: -0.01em;
-  }
-  .lede {
-    font-size: 15.5px;
-    line-height: 1.6;
-    color: var(--chrome-ink-soft);
-    max-width: 760px;
-    margin: 0 0 14px;
-  }
-  .token-note {
-    font-size: 13px;
-    line-height: 1.6;
-    color: var(--chrome-ink-faint);
-    max-width: 760px;
-    margin: 0;
-    padding: 10px 14px;
-    border-left: 2px solid var(--chrome-border);
-  }
-
-  h2.section-title {
-    font-size: 12.5px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--chrome-ink-faint);
-    margin: 0 0 14px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--chrome-border);
-  }
-
-  section.block { margin: 40px 0; }
-
-  /* ---------- coverage ---------- */
-  .coverage-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-    gap: 14px;
-  }
-  .cov {
-    border-radius: 8px;
-    border: 1px solid;
-    padding: 14px 16px;
-  }
-  .cov h3 {
-    margin: 0 0 6px;
-    font-size: 13px;
-    font-weight: 700;
-  }
-  .cov p, .cov ul {
-    margin: 0;
-    font-size: 13.5px;
-    line-height: 1.55;
-  }
-  .cov ul { padding-left: 18px; }
-  .cov li { margin-bottom: 4px; }
-  .cov-covers { background: var(--cov-covers-bg); border-color: var(--cov-covers-border); }
-  .cov-covers h3 { color: var(--cov-covers); }
-  .cov-excludes { background: var(--cov-excludes-bg); border-color: var(--cov-excludes-border); }
-  .cov-excludes h3 { color: var(--cov-excludes); }
-  .cov-explicit { background: var(--cov-explicit-bg); border-color: var(--cov-explicit-border); }
-  .cov-explicit h3 { color: var(--cov-explicit); }
-  .cov p code, .cov li code { background: rgba(127,127,127,0.16); }
-
-  /* ---------- trigger-problem note ---------- */
-  .problem-note {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: 10px;
-    max-width: 780px;
-  }
-  .problem-note p {
-    margin: 0;
-    font-size: 14.5px;
-    line-height: 1.65;
-    color: var(--chrome-ink);
-  }
-  .problem-note p.soft { color: var(--chrome-ink-soft); }
-  .problem-note .resolved {
-    margin-top: 4px;
-    font-size: 13px;
-    color: var(--chrome-ink-faint);
-    border-left: 2px solid var(--chrome-border);
-    padding: 8px 14px;
-  }
-
-  /* ---------- panel scaffolding ---------- */
-  .panels-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 28px;
-    overflow-x: auto;
-    padding: 4px 4px 16px;
-    margin: 0 -4px;
-  }
-  .panels-row.wrap { flex-wrap: wrap; }
-
-  .panel { flex: 0 0 auto; }
-  .panel-label {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-    margin-bottom: 10px;
-  }
-  .panel-num {
-    font-size: 11px;
-    font-weight: 700;
-    color: var(--chrome-surface);
-    background: var(--chrome-ink-faint);
-    border-radius: 999px;
-    width: 18px;
-    height: 18px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: none;
-  }
-  .panel-title { font-size: 14px; font-weight: 700; }
-  .panel-sub { font-size: 12px; color: var(--chrome-ink-faint); margin: 2px 0 0 26px; }
-
-  .frame {
-    background: var(--mui-bg-default);
-    border: 1px solid var(--chrome-border);
-    border-radius: 10px;
-    box-shadow: var(--mui-shadow-1);
-    overflow: hidden;
-  }
-  .frame-inner { padding: 20px; }
-
-  /* ============================================================
-     MUI-ish primitives used inside the frames
-     ============================================================ */
-  .m-paper {
-    background: var(--mui-bg-paper);
-    border: 1px solid var(--mui-divider);
-    border-radius: 4px;
-  }
-  .m-text-primary { color: var(--mui-text-primary); }
-  .m-text-secondary { color: var(--mui-text-secondary); font-size: 13px; }
-
-  .m-group-head {
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--mui-divider);
-    font-size: 13px;
-    font-weight: 700;
-    color: var(--mui-text-primary);
-  }
-  .m-list { list-style: none; margin: 0; padding: 4px 0; }
-  .m-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 1px;
-    width: 100%;
-    text-align: left;
-    background: none;
-    border: none;
-    border-left: 3px solid transparent;
-    padding: 10px 16px 10px 13px;
-    min-height: 48px;
-    font-size: 14.5px;
-    color: var(--mui-text-primary);
-    cursor: pointer;
-    font-family: inherit;
-  }
-  .m-item:hover { background: var(--mui-action-hover); }
-  .m-item .item-hint { font-size: 11.5px; color: var(--mui-text-secondary); }
-  .m-item.is-selected {
-    background: var(--mui-action-selected);
-    border-left-color: var(--mui-primary);
-    color: var(--mui-primary);
-    font-weight: 600;
-  }
-
-  /* desktop grid */
-  .desktop-grid {
-    display: grid;
-    grid-template-columns: 280px minmax(0, 1fr);
-    gap: 32px;
-    align-items: start;
-  }
-  .desktop-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
-  .desktop-content { min-width: 0; }
-
-  .content-heading {
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--mui-text-primary);
-    margin: 0 0 4px;
-  }
-  .content-caption {
-    font-size: 13px;
-    color: var(--mui-text-secondary);
-    margin: 0 0 16px;
-  }
-
-  /* search field */
-  .m-search {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    height: 40px;
-    padding: 0 12px;
-    border: 1px solid var(--mui-divider);
-    border-radius: 4px;
-    color: var(--mui-text-secondary);
-    font-size: 13.5px;
-    max-width: 280px;
-    margin-bottom: 16px;
-    background: var(--mui-bg-paper);
-  }
-
-  /* table */
-  .table-scroll { overflow-x: auto; border: 1px solid var(--mui-divider); border-radius: 4px; }
-  table.m-table { border-collapse: collapse; width: 100%; min-width: 1020px; }
-  table.m-table th {
-    text-align: left;
-    font-size: 12.5px;
-    font-weight: 700;
-    color: var(--mui-text-primary);
-    background: var(--mui-action-hover);
-    padding: 10px 16px;
-    white-space: nowrap;
-    border-bottom: 1px solid var(--mui-divider);
-  }
-  table.m-table td {
-    padding: 10px 16px;
-    font-size: 13.5px;
-    color: var(--mui-text-primary);
-    border-bottom: 1px solid var(--mui-divider);
-    vertical-align: top;
-  }
-  table.m-table tr:last-child td { border-bottom: none; }
-  table.m-table tr:hover td { background: var(--mui-action-hover); }
-  .col-email { min-width: 220px; }
-  .col-name { min-width: 180px; }
-  .col-new { min-width: 90px; text-align: center; }
-  .col-login { min-width: 120px; text-align: center; }
-  .col-role { min-width: 180px; }
-  .col-actions { min-width: 220px; }
-
-  .status-icon { display: inline-flex; }
-  .status-icon.yes { color: var(--mui-success); }
-  .status-icon.no { color: var(--mui-text-disabled); }
-
-  .m-select {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    height: 32px;
-    padding: 0 10px;
-    border: 1px solid var(--mui-divider);
-    border-radius: 4px;
-    font-size: 13px;
-    color: var(--mui-text-primary);
-    min-width: 140px;
-    background: var(--mui-bg-paper);
-  }
-  .m-select svg { color: var(--mui-text-secondary); }
-
-  .m-icon-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 4px;
-    border: 1px solid var(--mui-divider);
-    background: var(--mui-bg-paper);
-    color: var(--mui-text-secondary);
-    cursor: pointer;
-  }
-  .m-icon-btn.danger { color: var(--mui-error); }
-  .m-icon-btn:hover { background: var(--mui-action-hover); }
-  .row-actions { display: flex; gap: 8px; }
-
-  /* card list (mobile users) */
-  .card-list { display: flex; flex-direction: column; gap: 12px; }
-  .user-card {
-    padding: 14px 14px 12px;
-    position: relative;
-  }
-  .user-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
-  .user-card-name { font-size: 15px; font-weight: 600; color: var(--mui-text-primary); margin: 0; }
-  .user-card-email { font-size: 12.5px; color: var(--mui-text-secondary); margin: 2px 0 0; word-break: break-all; }
-  .chip-new {
-    flex: none;
-    font-size: 11px;
-    font-weight: 700;
-    color: var(--mui-primary-contrast);
-    background: var(--mui-primary);
-    border-radius: 999px;
-    padding: 3px 9px;
-    line-height: 1.4;
-  }
-  .user-card-meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px 18px;
-    margin-top: 10px;
-    padding-top: 10px;
-    border-top: 1px solid var(--mui-divider);
-  }
-  .meta-item { display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
-  .meta-item .meta-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mui-text-secondary); }
-  .meta-item .meta-value { font-size: 13px; color: var(--mui-text-primary); }
-  .user-card-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    margin-top: 10px;
-  }
-  .m-icon-btn.touch { width: 44px; height: 44px; border-radius: 8px; }
-  .list-caption { font-size: 12.5px; color: var(--mui-text-secondary); margin: 0 0 10px; }
-
-  /* ---------- mobile phone frame ---------- */
-  .phone {
-    width: 375px;
-  }
-  .phone .frame {
-    height: 620px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-  .phone .frame-scroll {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-    padding: 16px;
-  }
-
-  /* mobile trigger */
-  .section-trigger {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    min-height: 56px;
-    padding: 8px 14px;
-    background: var(--mui-bg-paper);
-    border: 1px solid var(--mui-divider);
-    border-radius: 8px;
-    cursor: pointer;
-    font-family: inherit;
-    margin-bottom: 16px;
-    box-shadow: var(--mui-shadow-1);
-  }
-  .section-trigger:hover { background: var(--mui-action-hover); }
-  .section-trigger:focus-visible {
-    outline: 2px solid var(--mui-primary);
-    outline-offset: 2px;
-  }
-  .trigger-text { display: flex; flex-direction: column; gap: 1px; text-align: left; }
-  .trigger-eyebrow { font-size: 11.5px; color: var(--mui-text-secondary); }
-  .trigger-value { font-size: 16.5px; font-weight: 600; color: var(--mui-text-primary); }
-  .trigger-chevron { color: var(--mui-text-secondary); transition: transform 0.18s ease; flex: none; }
-  .section-trigger[aria-expanded="true"] .trigger-chevron { transform: rotate(180deg); }
-
-  .demo-flag {
-    font-size: 11px;
-    color: var(--chrome-ink-faint);
-    text-align: center;
-    margin-top: 8px;
-  }
-
-  /* drawer overlay confined to the phone frame */
-  .scrim {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-  }
-  .scrim.open { opacity: 1; pointer-events: auto; }
-
-  .sheet {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    max-height: 78%;
-    background: var(--mui-bg-paper);
-    border-top-left-radius: 18px;
-    border-top-right-radius: 18px;
-    box-shadow: 0 -4px 24px rgba(16, 24, 40, 0.24);
-    padding: 18px 16px calc(16px + 0px);
-    transform: translateY(102%);
-    transition: transform 0.22s ease;
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-  .sheet.open { transform: translateY(0); }
-  .sheet-head { display: flex; align-items: center; justify-content: space-between; flex: none; }
-  .sheet-head h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--mui-text-primary); }
-  .sheet-close {
-    width: 44px; height: 44px;
-    display: inline-flex; align-items: center; justify-content: center;
-    border-radius: 8px; border: none; background: transparent; color: var(--mui-text-secondary); cursor: pointer;
-  }
-  .sheet-close:hover { background: var(--mui-action-hover); }
-  .sheet-scroll { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
-  .sheet .m-item { min-height: 48px; }
-
-  /* always-open reference sheet (panel 3) */
-  .sheet-static {
-    position: absolute; left: 0; right: 0; bottom: 0;
-    max-height: 78%;
-    background: var(--mui-bg-paper);
-    border-top-left-radius: 18px;
-    border-top-right-radius: 18px;
-    box-shadow: 0 -4px 24px rgba(16, 24, 40, 0.24);
-    padding: 18px 16px 16px;
-    display: flex; flex-direction: column; gap: 14px;
-  }
-
-  .content-behind {
-    filter: blur(1.5px);
-    opacity: 0.55;
-  }
-
-  /* ---------- compact inset (panel 4) ---------- */
-  .inset {
-    width: 300px;
-  }
-  .inset .frame-inner { padding: 16px; }
-  .inset .m-list { padding: 4px 0; }
-
-  footer.doc-foot {
-    margin-top: 56px;
-    padding-top: 20px;
-    border-top: 1px solid var(--chrome-border);
-    font-size: 12.5px;
-    color: var(--chrome-ink-faint);
-    line-height: 1.7;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .sheet, .scrim, .trigger-chevron { transition: none !important; }
-  }
-</style>
-
-<div class="doc">
-
-  <header class="doc-head">
-    <p class="wo-id">SHELL-2 prototype &middot; ui-core-micha &middot; visual/UX spec, no behaviour change</p>
-    <h1>AccountPage: from a horizontal tab strip to a grouped sidebar + mobile drawer</h1>
-    <p class="lede">
-      <code>AccountPage</code> currently renders its sections (Profil, Sicherheit, Benutzer, Einladen, Support,
-      plus whatever a consuming app injects via <code>extraTabs</code>) behind a horizontally scrollable MUI
-      <code>Tabs</code> strip. This prototype replaces it with the grouped-list navigation pattern already
-      shipping in jg-ferien&rsquo;s <code>EventInfoPage</code>: a sticky sidebar on desktop, a bottom-sheet
-      drawer on mobile &mdash; and, because <code>AccountPage</code> has no header of its own to hang a trigger
-      button on, a new full-width trigger bar built for this component specifically.
-    </p>
-    <p class="token-note">
-      Colour and spacing tokens below are MUI&rsquo;s stock light/dark defaults (primary <code>#1976d2</code>&nbsp;/
-      <code>#90caf9</code>, default divider and text-alpha values), used only as placeholders inside the mockup
-      frames. <code>ui-core-micha</code> ships to 14 apps with 14 different themes &mdash; the host app&rsquo;s
-      <code>ThemeProvider</code> supplies the real values at runtime, exactly as it does for every other shared
-      component today.
-    </p>
-  </header>
-
-  <section class="block" aria-label="Coverage">
-    <h2 class="section-title">Coverage</h2>
-    <div class="coverage-grid">
-      <div class="cov cov-covers">
-        <h3>Covers</h3>
-        <ul>
-          <li><code>AccountPage</code>&rsquo;s section navigation: desktop sidebar, mobile drawer, and the new
-            mobile trigger bar.</li>
-          <li>The <code>users</code> section&rsquo;s table&nbsp;&rarr;&nbsp;card switch below <code>md</code>.</li>
-        </ul>
-      </div>
-      <div class="cov cov-excludes">
-        <h3>Does not cover &mdash; left untouched</h3>
-        <ul>
-          <li>The internal content of Profil, Sicherheit, Einladen, Support and Benachrichtigungen.</li>
-          <li>The invite / access-code / QR management components.</li>
-          <li>Anything outside <code>AccountPage</code>.</li>
-        </ul>
-      </div>
-      <div class="cov cov-explicit">
-        <h3>Explicit</h3>
-        <p>
-          The horizontal MUI <code>Tab</code> strip is <strong>replaced</strong> on both desktop and mobile.
-          It is meant to disappear entirely &mdash; that is not an omission in this prototype, it is the point
-          of the redesign.
-        </p>
-        <p>
-          On mobile, the current section name is carried by the trigger bar alone. The section-title heading
-          that would otherwise repeat it just below is <strong>removed</strong>, not merely undrawn &mdash;
-          do not add it back as a &ldquo;missing&rdquo; heading. Desktop keeps its section heading unchanged,
-          since desktop has no trigger bar to carry that name instead.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="block">
-    <h2 class="section-title">The mobile trigger problem</h2>
-    <div class="problem-note">
-      <p>
-        jg-ferien&rsquo;s drawer is opened from a button that lives in <em>that app&rsquo;s</em> own page header
-        (<code>MobileSectionHeaderBar</code>). <code>AccountPage</code> is a bare content component &mdash; every
-        consuming app mounts it under its own header, and it cannot assume that header exists, has room for a
-        button, or is even visible when scrolled. The trigger has to live inside <code>AccountPage</code>&rsquo;s
-        own content, at the very top, before anything else.
-      </p>
-      <p>
-        Panel&nbsp;2 below shows the answer: a full-width bar, the first thing rendered on mobile, stating the
-        current section name at 16.5px semibold with a small &ldquo;Bereich&rdquo; label above it for context, and
-        a trailing chevron that is the conventional &ldquo;tap to open a sheet&rdquo; affordance. The whole 56px-tall
-        bar is the tap target (well over the 44px minimum), bordered and shadowed like a raised control so it reads
-        as tappable at a glance, not as a static heading.
-      </p>
-      <p class="resolved">
-        Try it: the trigger in panel&nbsp;2 actually opens/closes its drawer. Panel&nbsp;3 is a separate, permanently-open
-        frame kept alongside it purely for side-by-side comparison.
-      </p>
-    </div>
-  </section>
-
-  <section class="block">
-    <h2 class="section-title">States</h2>
-
-    <div class="panels-row wrap">
-
-      <!-- ================= PANEL 1: DESKTOP ================= -->
-      <div class="panel" style="width: 1000px;">
-        <div class="panel-label">
-          <span class="panel-num">1</span>
-          <span class="panel-title">Desktop &ge; 900px &mdash; Benutzer active</span>
-        </div>
-        <p class="panel-sub">280px sidebar, sticky &middot; content grid <code>minmax(0,1fr)</code></p>
-        <div class="frame">
-          <div class="frame-inner">
-            <p class="content-caption" style="margin-bottom:16px; font-style:italic;">
-              jg-ferien&rsquo;s pattern has a standalone &ldquo;&Uuml;bersicht&rdquo; entry above the groups.
-              AccountPage has no equivalent landing/overview page, so this prototype starts directly at the
-              first group &mdash; nothing was dropped, there was nothing there to keep.
-            </p>
-            <div class="desktop-grid">
-              <nav class="desktop-nav" aria-label="Account sections">
-                <div class="m-paper">
-                  <div class="m-group-head">Mein Konto</div>
-                  <ul class="m-list">
-                    <li><button class="m-item">Profil</button></li>
-                    <li><button class="m-item">Sicherheit</button></li>
-                  </ul>
-                </div>
-                <div class="m-paper">
-                  <div class="m-group-head">Verwaltung</div>
-                  <ul class="m-list">
-                    <li><button class="m-item is-selected" aria-current="true">Benutzer</button></li>
-                    <li><button class="m-item">Einladen</button></li>
-                  </ul>
-                </div>
-                <div class="m-paper">
-                  <div class="m-group-head">Hilfe</div>
-                  <ul class="m-list">
-                    <li><button class="m-item">Support</button></li>
-                  </ul>
-                </div>
-                <div class="m-paper">
-                  <div class="m-group-head">Weitere</div>
-                  <ul class="m-list">
-                    <li><button class="m-item">Benachrichtigungen</button></li>
-                  </ul>
-                </div>
-              </nav>
-
-              <div class="desktop-content">
-                <h3 class="content-heading">Benutzer</h3>
-                <p class="content-caption">5 Ergebnisse</p>
-                <div class="m-search">Suchen&hellip;</div>
-                <div class="table-scroll">
-                  <table class="m-table">
-                    <thead>
-                      <tr>
-                        <th class="col-email">E-Mail-Adresse</th>
-                        <th class="col-name">Name</th>
-                        <th class="col-new">Neu</th>
-                        <th class="col-login">Letzte Anmeldung</th>
-                        <th class="col-role">Rolle</th>
-                        <th class="col-actions">Aktionen</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td class="col-email">selina.amrein@swisstph.ch</td>
-                        <td class="col-name">Selina Amrein</td>
-                        <td class="col-new">
-                          <span class="status-icon yes" title="Neu">&#9679;</span>
-                        </td>
-                        <td class="col-login tabular">07.08.2026, 14:22</td>
-                        <td class="col-role">
-                          <span class="m-select">admin <svg width="14" height="14" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
-                        </td>
-                        <td class="col-actions">
-                          <div class="row-actions">
-                            <span class="m-icon-btn" title="Bearbeiten" aria-label="Benutzer bearbeiten">&#9998;</span>
-                            <span class="m-icon-btn danger" title="L&ouml;schen" aria-label="Benutzer l&ouml;schen">&#128465;</span>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td class="col-email">thabo.ndlovu@swisstph.ch</td>
-                        <td class="col-name">Thabo Ndlovu</td>
-                        <td class="col-new">
-                          <span class="status-icon no" title="Nicht neu">&#9675;</span>
-                        </td>
-                        <td class="col-login tabular">05.08.2026, 09:10</td>
-                        <td class="col-role">
-                          <span class="m-select">teacher <svg width="14" height="14" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
-                        </td>
-                        <td class="col-actions">
-                          <div class="row-actions">
-                            <span class="m-icon-btn" title="Bearbeiten" aria-label="Benutzer bearbeiten">&#9998;</span>
-                            <span class="m-icon-btn danger" title="L&ouml;schen" aria-label="Benutzer l&ouml;schen">&#128465;</span>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td class="col-email">fatima.elidrissi@swisstph.ch</td>
-                        <td class="col-name">Fatima El Idrissi</td>
-                        <td class="col-new">
-                          <span class="status-icon no" title="Nicht neu">&#9675;</span>
-                        </td>
-                        <td class="col-login tabular">28.07.2026, 16:45</td>
-                        <td class="col-role">
-                          <span class="m-select">student <svg width="14" height="14" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
-                        </td>
-                        <td class="col-actions">
-                          <div class="row-actions">
-                            <span class="m-icon-btn" title="Bearbeiten" aria-label="Benutzer bearbeiten">&#9998;</span>
-                            <span class="m-icon-btn danger" title="L&ouml;schen" aria-label="Benutzer l&ouml;schen">&#128465;</span>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td class="col-email">jonas.berger@swisstph.ch</td>
-                        <td class="col-name">Jonas Berger</td>
-                        <td class="col-new">
-                          <span class="status-icon no" title="Nicht neu">&#9675;</span>
-                        </td>
-                        <td class="col-login tabular">01.08.2026, 11:03</td>
-                        <td class="col-role">
-                          <span class="m-select">supervisor <svg width="14" height="14" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
-                        </td>
-                        <td class="col-actions">
-                          <div class="row-actions">
-                            <span class="m-icon-btn" title="Bearbeiten" aria-label="Benutzer bearbeiten">&#9998;</span>
-                            <span class="m-icon-btn danger" title="L&ouml;schen" aria-label="Benutzer l&ouml;schen">&#128465;</span>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td class="col-email">priya.nair@swisstph.ch</td>
-                        <td class="col-name">Priya Nair</td>
-                        <td class="col-new">
-                          <span class="status-icon no" title="Nicht neu">&#9675;</span>
-                        </td>
-                        <td class="col-login tabular">&ndash;</td>
-                        <td class="col-role">
-                          <span class="m-select">none <svg width="14" height="14" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
-                        </td>
-                        <td class="col-actions">
-                          <div class="row-actions">
-                            <span class="m-icon-btn" title="Bearbeiten" aria-label="Benutzer bearbeiten">&#9998;</span>
-                            <span class="m-icon-btn danger" title="L&ouml;schen" aria-label="Benutzer l&ouml;schen">&#128465;</span>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </div>
-
-    <div class="panels-row wrap" style="margin-top: 32px; align-items: flex-start;">
-
-      <!-- ================= PANEL 2: MOBILE, TRIGGER CLOSED (interactive) ================= -->
-      <div class="panel phone">
-        <div class="panel-label">
-          <span class="panel-num">2</span>
-          <span class="panel-title">Mobile &lt;900px &mdash; trigger closed</span>
-        </div>
-        <p class="panel-sub">Benutzer active, card list &middot; tap the bar to open</p>
-        <div class="frame">
-          <div class="frame-scroll" id="p2-scroll">
-            <button class="section-trigger" id="p2-trigger" aria-expanded="false" aria-controls="p2-sheet">
-              <span class="trigger-text">
-                <span class="trigger-eyebrow">Bereich</span>
-                <span class="trigger-value">Benutzer</span>
-              </span>
-              <svg class="trigger-chevron" width="20" height="20" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            </button>
-
-            <p class="list-caption">5 Ergebnisse</p>
-            <div class="m-search" style="max-width:none; width:100%;">Suchen&hellip;</div>
-
-            <div class="card-list">
-              <div class="m-paper user-card">
-                <div class="user-card-top">
-                  <div>
-                    <p class="user-card-name">Selina Amrein</p>
-                    <p class="user-card-email">selina.amrein@swisstph.ch</p>
-                  </div>
-                  <span class="chip-new">Neu</span>
-                </div>
-                <div class="user-card-meta">
-                  <div class="meta-item">
-                    <span class="meta-label">Letzte Anmeldung</span>
-                    <span class="meta-value tabular">07.08.2026, 14:22</span>
-                  </div>
-                  <div class="meta-item">
-                    <span class="meta-label">Rolle</span>
-                    <span class="meta-value">admin</span>
-                  </div>
-                </div>
-                <div class="user-card-actions">
-                  <span class="m-icon-btn touch" title="Bearbeiten" aria-label="Benutzer bearbeiten">&#9998;</span>
-                  <span class="m-icon-btn touch danger" title="L&ouml;schen" aria-label="Benutzer l&ouml;schen">&#128465;</span>
-                </div>
-              </div>
-
-              <div class="m-paper user-card">
-                <div class="user-card-top">
-                  <div>
-                    <p class="user-card-name">Thabo Ndlovu</p>
-                    <p class="user-card-email">thabo.ndlovu@swisstph.ch</p>
-                  </div>
-                </div>
-                <div class="user-card-meta">
-                  <div class="meta-item">
-                    <span class="meta-label">Letzte Anmeldung</span>
-                    <span class="meta-value tabular">05.08.2026, 09:10</span>
-                  </div>
-                  <div class="meta-item">
-                    <span class="meta-label">Rolle</span>
-                    <span class="meta-value">teacher</span>
-                  </div>
-                </div>
-                <div class="user-card-actions">
-                  <span class="m-icon-btn touch" title="Bearbeiten" aria-label="Benutzer bearbeiten">&#9998;</span>
-                  <span class="m-icon-btn touch danger" title="L&ouml;schen" aria-label="Benutzer l&ouml;schen">&#128465;</span>
-                </div>
-              </div>
-
-              <div class="m-paper user-card">
-                <div class="user-card-top">
-                  <div>
-                    <p class="user-card-name">Priya Nair</p>
-                    <p class="user-card-email">priya.nair@swisstph.ch</p>
-                  </div>
-                </div>
-                <div class="user-card-meta">
-                  <div class="meta-item">
-                    <span class="meta-label">Letzte Anmeldung</span>
-                    <span class="meta-value tabular">&ndash;</span>
-                  </div>
-                  <div class="meta-item">
-                    <span class="meta-label">Rolle</span>
-                    <span class="meta-value">none</span>
-                  </div>
-                </div>
-                <div class="user-card-actions">
-                  <span class="m-icon-btn touch" title="Bearbeiten" aria-label="Benutzer bearbeiten">&#9998;</span>
-                  <span class="m-icon-btn touch danger" title="L&ouml;schen" aria-label="Benutzer l&ouml;schen">&#128465;</span>
-                </div>
-              </div>
-            </div>
-
-            <div class="demo-flag">tap the trigger above &mdash; this panel is interactive</div>
-          </div>
-
-          <div class="scrim" id="p2-scrim"></div>
-          <div class="sheet" id="p2-sheet" role="dialog" aria-modal="true" aria-labelledby="p2-sheet-title">
-            <div class="sheet-head">
-              <h3 id="p2-sheet-title">Bereich wechseln</h3>
-              <button class="sheet-close" id="p2-close" aria-label="Schliessen">
-                <svg width="20" height="20" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-              </button>
-            </div>
-            <div class="sheet-scroll" id="p2-list">
-              <div class="m-paper">
-                <div class="m-group-head">Mein Konto</div>
-                <ul class="m-list">
-                  <li><button class="m-item" data-pick>Profil</button></li>
-                  <li><button class="m-item" data-pick>Sicherheit</button></li>
-                </ul>
-              </div>
-              <div class="m-paper">
-                <div class="m-group-head">Verwaltung</div>
-                <ul class="m-list">
-                  <li><button class="m-item is-selected" aria-current="true" data-pick>Benutzer</button></li>
-                  <li><button class="m-item" data-pick>Einladen</button></li>
-                </ul>
-              </div>
-              <div class="m-paper">
-                <div class="m-group-head">Hilfe</div>
-                <ul class="m-list">
-                  <li><button class="m-item" data-pick>Support</button></li>
-                </ul>
-              </div>
-              <div class="m-paper">
-                <div class="m-group-head">Weitere</div>
-                <ul class="m-list">
-                  <li><button class="m-item" data-pick>Benachrichtigungen</button></li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- ================= PANEL 3: MOBILE, DRAWER OPEN (static reference) ================= -->
-      <div class="panel phone">
-        <div class="panel-label">
-          <span class="panel-num">3</span>
-          <span class="panel-title">Mobile &mdash; drawer open</span>
-        </div>
-        <p class="panel-sub">static reference &middot; rounded top 18px &middot; max-height 78dvh</p>
-        <div class="frame">
-          <div class="frame-scroll content-behind" aria-hidden="true">
-            <button class="section-trigger" aria-expanded="true" tabindex="-1">
-              <span class="trigger-text">
-                <span class="trigger-eyebrow">Bereich</span>
-                <span class="trigger-value">Benutzer</span>
-              </span>
-              <svg class="trigger-chevron" width="20" height="20" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            </button>
-            <p class="list-caption">5 Ergebnisse</p>
-          </div>
-          <div class="scrim open"></div>
-          <div class="sheet-static">
-            <div class="sheet-head">
-              <h3>Bereich wechseln</h3>
-              <span class="sheet-close" aria-hidden="true">
-                <svg width="20" height="20" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-              </span>
-            </div>
-            <div class="sheet-scroll">
-              <div class="m-paper">
-                <div class="m-group-head">Mein Konto</div>
-                <ul class="m-list">
-                  <li><button class="m-item" tabindex="-1">Profil</button></li>
-                  <li><button class="m-item" tabindex="-1">Sicherheit</button></li>
-                </ul>
-              </div>
-              <div class="m-paper">
-                <div class="m-group-head">Verwaltung</div>
-                <ul class="m-list">
-                  <li><button class="m-item is-selected" aria-current="true" tabindex="-1">Benutzer</button></li>
-                  <li><button class="m-item" tabindex="-1">Einladen</button></li>
-                </ul>
-              </div>
-              <div class="m-paper">
-                <div class="m-group-head">Hilfe</div>
-                <ul class="m-list">
-                  <li><button class="m-item" tabindex="-1">Support</button></li>
-                </ul>
-              </div>
-              <div class="m-paper">
-                <div class="m-group-head">Weitere</div>
-                <ul class="m-list">
-                  <li><button class="m-item" tabindex="-1">Benachrichtigungen</button></li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- ================= PANEL 4: PERMISSION VARIANT (small inset) ================= -->
-      <div class="panel inset">
-        <div class="panel-label">
-          <span class="panel-num">4</span>
-          <span class="panel-title" style="font-size:13px;">Permission variant</span>
-        </div>
-        <p class="panel-sub" style="margin-left:0;">
-          plain user &middot; no <code>can_view_users</code> / <code>can_invite</code> / support access &mdash;
-          the list is genuinely short, not padded out
-        </p>
-        <div class="frame" style="margin-top:10px;">
-          <div class="frame-inner">
-            <div class="m-paper">
-              <div class="m-group-head">Mein Konto</div>
-              <ul class="m-list">
-                <li><button class="m-item is-selected" aria-current="true">Profil</button></li>
-                <li><button class="m-item">Sicherheit</button></li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </section>
-
-  <footer class="doc-foot">
-    <p>
-      Groups are a fixed proposal, not derived from data: &ldquo;Mein Konto&rdquo; (Profil, Sicherheit),
-      &ldquo;Verwaltung&rdquo; (Benutzer, Einladen), &ldquo;Hilfe&rdquo; (Support). Consumer-injected
-      <code>extraTabs</code> without an explicit group &mdash; like cockpit&rsquo;s &ldquo;Benachrichtigungen&rdquo;
-      &mdash; fall into a trailing catch-all group, shown here as &ldquo;Weitere&rdquo;.
-      The <code>?tab=</code> URL contract and the <code>extraTabs</code> API are unchanged by this redesign.
-    </p>
-    <p>
-      Built for both colour schemes via <code>prefers-color-scheme</code> and a <code>data-theme</code> override;
-      typography uses the system font stack rather than an embedded face, since the mockup&rsquo;s job is to
-      pin structure and interaction, not to preview any one app&rsquo;s actual type &mdash; every consumer already
-      overrides MUI&rsquo;s typography in its own theme.
-    </p>
-  </footer>
-
-</div>
-
-<script>
-  (function () {
-    var trigger = document.getElementById('p2-trigger');
-    var sheet = document.getElementById('p2-sheet');
-    var scrim = document.getElementById('p2-scrim');
-    var closeBtn = document.getElementById('p2-close');
-    var list = document.getElementById('p2-list');
-
-    function openSheet() {
-      sheet.classList.add('open');
-      scrim.classList.add('open');
-      trigger.setAttribute('aria-expanded', 'true');
-      var title = document.getElementById('p2-sheet-title');
-      if (title) title.setAttribute('tabindex', '-1');
-    }
-    function closeSheet() {
-      sheet.classList.remove('open');
-      scrim.classList.remove('open');
-      trigger.setAttribute('aria-expanded', 'false');
-      trigger.focus();
-    }
-    trigger.addEventListener('click', function () {
-      if (sheet.classList.contains('open')) { closeSheet(); } else { openSheet(); }
-    });
-    closeBtn.addEventListener('click', closeSheet);
-    scrim.addEventListener('click', closeSheet);
-    document.addEventListener('keydown', function (e) {
-      if (e.key === 'Escape' && sheet.classList.contains('open')) { closeSheet(); }
-    });
-    list.addEventListener('click', function (e) {
-      var item = e.target.closest('[data-pick]');
-      if (!item) return;
-      var current = list.querySelector('.is-selected');
-      if (current) { current.classList.remove('is-selected'); current.removeAttribute('aria-current'); }
-      item.classList.add('is-selected');
-      item.setAttribute('aria-current', 'true');
-      var valueEl = trigger.querySelector('.trigger-value');
-      if (valueEl) valueEl.textContent = item.textContent;
-      closeSheet();
-    });
-  })();
-</script>