@birdycom/omniaui 0.11.0 → 0.11.2

package/dist/parts/app-greeting.css

@@ -1,47 +1,47 @@
-/* File: packages/ui/src/parts/app-greeting.css | Map: header row -> icon tile -> text (eyebrow, title, date) -> actions -> time-of-day modifiers -> size modifier */
-/* Greeting: dashboard header with a time-of-day greeting ("Good morning, Ada") and today's date.
-   CSS cannot read the clock, so the app (or a wrapper) picks the modifier:
-   --morning (5-12h), --afternoon (12-18h), --evening (18-5h). The modifier only tints the icon tile. */
-
-.oc-greeting {
-  --oc-greeting-color: var(--oc-primary);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.75rem 1rem;
-  padding-block: 0.5rem;
-}
-
-/* Icon tile (sun, sun-low, moon): tinted with the time-of-day color. */
-.oc-greeting-icon {
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  inline-size: 2.75rem;
-  block-size: 2.75rem;
-  color: var(--oc-greeting-color);
-  background: oklch(from var(--oc-greeting-color) l c h / 0.12);
-  border-radius: calc(var(--oc-radius) + 4px);
-}
-.oc-greeting-icon svg { inline-size: 1.375rem; block-size: 1.375rem; }
-
-/* Text column. */
-.oc-greeting-body { flex: 1 1 16rem; min-inline-size: 0; }
-.oc-greeting-eyebrow { margin: 0 0 0.125rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--oc-greeting-color); }
-.oc-greeting-title { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--oc-foreground); text-wrap: balance; }
-.oc-greeting-name { color: var(--oc-greeting-color); }
-/* Date: use <time datetime="2026-10-15">. First letter capitalised for locales that write weekdays in lower case. */
-.oc-greeting-date { display: block; margin-block-start: 0.25rem; font-size: 0.875rem; color: var(--oc-muted-foreground); }
-.oc-greeting-date::first-letter { text-transform: uppercase; }
-
-/* Actions at the end (buttons, search). */
-.oc-greeting-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
-
-/* Time-of-day tints. */
-.oc-greeting--morning { --oc-greeting-color: var(--oc-warning); }
-.oc-greeting--afternoon { --oc-greeting-color: var(--oc-primary); }
-.oc-greeting--evening { --oc-greeting-color: light-dark(var(--color-purple-40), var(--color-purple-10)); }
-
-/* Large: for a hero-like start page. */
-.oc-greeting--lg .oc-greeting-title { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
-.oc-greeting--lg .oc-greeting-icon { inline-size: 3.5rem; block-size: 3.5rem; }
+/* File: packages/ui/src/parts/app-greeting.css | Map: header row -> icon tile -> text (eyebrow, title, date) -> actions -> time-of-day modifiers -> size modifier */
+/* Greeting: dashboard header with a time-of-day greeting ("Good morning, Ada") and today's date.
+   CSS cannot read the clock, so the app (or a wrapper) picks the modifier:
+   --morning (5-12h), --afternoon (12-18h), --evening (18-5h). The modifier only tints the icon tile. */
+
+.oc-greeting {
+  --oc-greeting-color: var(--oc-primary);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1rem;
+  padding-block: 0.5rem;
+}
+
+/* Icon tile (sun, sun-low, moon): tinted with the time-of-day color. */
+.oc-greeting-icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+  color: var(--oc-greeting-color);
+  background: oklch(from var(--oc-greeting-color) l c h / 0.12);
+  border-radius: calc(var(--oc-radius) + 4px);
+}
+.oc-greeting-icon svg { inline-size: 1.375rem; block-size: 1.375rem; }
+
+/* Text column. */
+.oc-greeting-body { flex: 1 1 16rem; min-inline-size: 0; }
+.oc-greeting-eyebrow { margin: 0 0 0.125rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--oc-greeting-color); }
+.oc-greeting-title { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--oc-foreground); text-wrap: balance; }
+.oc-greeting-name { color: var(--oc-greeting-color); }
+/* Date: use <time datetime="2026-10-15">. First letter capitalised for locales that write weekdays in lower case. */
+.oc-greeting-date { display: block; margin-block-start: 0.25rem; font-size: 0.875rem; color: var(--oc-muted-foreground); }
+.oc-greeting-date::first-letter { text-transform: uppercase; }
+
+/* Actions at the end (buttons, search). */
+.oc-greeting-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+
+/* Time-of-day tints. */
+.oc-greeting--morning { --oc-greeting-color: var(--oc-warning); }
+.oc-greeting--afternoon { --oc-greeting-color: var(--oc-primary); }
+.oc-greeting--evening { --oc-greeting-color: light-dark(var(--color-purple-40), var(--color-purple-10)); }
+
+/* Large: for a hero-like start page. */
+.oc-greeting--lg .oc-greeting-title { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
+.oc-greeting--lg .oc-greeting-icon { inline-size: 3.5rem; block-size: 3.5rem; }

package/dist/parts/app-list-toolbar.css

@@ -1,81 +1,81 @@
-/* File: packages/ui/src/parts/app-list-toolbar.css | Map: toolbar row -> search -> count -> view toggle (radio icons) -> actions -> sticky modifier -> CSS-only view switch (scope) -> narrow screens */
-/* List toolbar: search field + result count + cards / table view toggle + actions, above a list.
-   The view toggle is a radio group. Inside .oc-list-toolbar-scope the checked radio shows the matching
-   panel (.oc-list-toolbar-panel[data-view="cards" | "table"]) with :has(); no JavaScript. */
-
-.oc-list-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem 0.75rem;
-  padding-block: 0.5rem;
-}
-
-/* Search: a .oc-input (or .oc-search) that takes the free space, up to 24rem. */
-.oc-list-toolbar-search { flex: 1 1 14rem; max-inline-size: 24rem; }
-.oc-list-toolbar-search .oc-input { inline-size: 100%; }
-
-/* Result count ("128 items"). */
-.oc-list-toolbar-count { font-size: 0.8125rem; color: var(--oc-muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
-
-/* Pushes everything after it to the end edge. */
-.oc-list-toolbar-spacer { flex: 1; }
-
-/* View toggle: radio inputs inside labels, shown as small icon buttons in one frame. */
-.oc-list-toolbar-views {
-  display: inline-flex;
-  padding: 2px;
-  background: var(--oc-muted);
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius);
-}
-.oc-list-toolbar-view {
-  position: relative;
-  display: inline-grid;
-  place-items: center;
-  inline-size: 2rem;
-  block-size: 1.75rem;
-  color: var(--oc-muted-foreground);
-  border-radius: calc(var(--oc-radius) - 2px);
-  cursor: pointer;
-  transition: color var(--oc-transition-fast), background var(--oc-transition-fast);
-}
-/* The radio stays in the accessibility tree but is invisible; the label is the click target. */
-.oc-list-toolbar-view input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
-.oc-list-toolbar-view svg { inline-size: 1rem; block-size: 1rem; }
-.oc-list-toolbar-view:hover { color: var(--oc-foreground); }
-.oc-list-toolbar-view:has(input:checked) {
-  color: var(--oc-foreground);
-  background: var(--oc-background);
-  box-shadow: 0 1px 3px oklch(from var(--color-black-60) l c h / 0.1);
-}
-.oc-list-toolbar-view:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-
-/* Buttons at the end (New, Export, filter dropdown ...). */
-.oc-list-toolbar-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
-
-/* Sticky: stays at the top of the scroll container while the list scrolls. */
-.oc-list-toolbar--sticky {
-  position: sticky;
-  inset-block-start: 0;
-  z-index: 5;
-  background: var(--oc-background);
-  border-block-end: 1px solid var(--oc-border);
-}
-
-/* Bordered: framed bar (for use above a card grid). */
-.oc-list-toolbar--bordered { padding: 0.5rem 0.75rem; background: var(--oc-card); border: 1px solid var(--oc-border); border-radius: var(--oc-radius); }
-
-/* ---- CSS-only view switch ---- */
-.oc-list-toolbar-scope:has(.oc-list-toolbar-view input[value="cards"]:checked) .oc-list-toolbar-panel:not([data-view="cards"]),
-.oc-list-toolbar-scope:has(.oc-list-toolbar-view input[value="table"]:checked) .oc-list-toolbar-panel:not([data-view="table"]),
-.oc-list-toolbar-scope:has(.oc-list-toolbar-view input[value="list"]:checked) .oc-list-toolbar-panel:not([data-view="list"]) { display: none; }
-
-/* Narrow screens: search takes the full first row. */
-@media (max-width: 36rem) {
-  .oc-list-toolbar-search { flex-basis: 100%; max-inline-size: none; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-list-toolbar-view { transition: none; }
-}
+/* File: packages/ui/src/parts/app-list-toolbar.css | Map: toolbar row -> search -> count -> view toggle (radio icons) -> actions -> sticky modifier -> CSS-only view switch (scope) -> narrow screens */
+/* List toolbar: search field + result count + cards / table view toggle + actions, above a list.
+   The view toggle is a radio group. Inside .oc-list-toolbar-scope the checked radio shows the matching
+   panel (.oc-list-toolbar-panel[data-view="cards" | "table"]) with :has(); no JavaScript. */
+
+.oc-list-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  padding-block: 0.5rem;
+}
+
+/* Search: a .oc-input (or .oc-search) that takes the free space, up to 24rem. */
+.oc-list-toolbar-search { flex: 1 1 14rem; max-inline-size: 24rem; }
+.oc-list-toolbar-search .oc-input { inline-size: 100%; }
+
+/* Result count ("128 items"). */
+.oc-list-toolbar-count { font-size: 0.8125rem; color: var(--oc-muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* Pushes everything after it to the end edge. */
+.oc-list-toolbar-spacer { flex: 1; }
+
+/* View toggle: radio inputs inside labels, shown as small icon buttons in one frame. */
+.oc-list-toolbar-views {
+  display: inline-flex;
+  padding: 2px;
+  background: var(--oc-muted);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+.oc-list-toolbar-view {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2rem;
+  block-size: 1.75rem;
+  color: var(--oc-muted-foreground);
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+  transition: color var(--oc-transition-fast), background var(--oc-transition-fast);
+}
+/* The radio stays in the accessibility tree but is invisible; the label is the click target. */
+.oc-list-toolbar-view input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
+.oc-list-toolbar-view svg { inline-size: 1rem; block-size: 1rem; }
+.oc-list-toolbar-view:hover { color: var(--oc-foreground); }
+.oc-list-toolbar-view:has(input:checked) {
+  color: var(--oc-foreground);
+  background: var(--oc-background);
+  box-shadow: 0 1px 3px oklch(from var(--color-black-60) l c h / 0.1);
+}
+.oc-list-toolbar-view:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* Buttons at the end (New, Export, filter dropdown ...). */
+.oc-list-toolbar-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+
+/* Sticky: stays at the top of the scroll container while the list scrolls. */
+.oc-list-toolbar--sticky {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 5;
+  background: var(--oc-background);
+  border-block-end: 1px solid var(--oc-border);
+}
+
+/* Bordered: framed bar (for use above a card grid). */
+.oc-list-toolbar--bordered { padding: 0.5rem 0.75rem; background: var(--oc-card); border: 1px solid var(--oc-border); border-radius: var(--oc-radius); }
+
+/* ---- CSS-only view switch ---- */
+.oc-list-toolbar-scope:has(.oc-list-toolbar-view input[value="cards"]:checked) .oc-list-toolbar-panel:not([data-view="cards"]),
+.oc-list-toolbar-scope:has(.oc-list-toolbar-view input[value="table"]:checked) .oc-list-toolbar-panel:not([data-view="table"]),
+.oc-list-toolbar-scope:has(.oc-list-toolbar-view input[value="list"]:checked) .oc-list-toolbar-panel:not([data-view="list"]) { display: none; }
+
+/* Narrow screens: search takes the full first row. */
+@media (max-width: 36rem) {
+  .oc-list-toolbar-search { flex-basis: 100%; max-inline-size: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-list-toolbar-view { transition: none; }
+}

package/dist/parts/app-page-header.css

@@ -1,54 +1,54 @@
-/* File: packages/ui/src/parts/app-page-header.css | Map: header (container) -> back link row -> main row (text + actions) -> title + subtitle + meta -> wide layout (@container) -> modifiers (bordered, sticky, sm) */
-/* Page header: back link + title + subtitle + actions at the top of an app page.
-   A lighter variant of the module-header block, as a component. The header is a size container:
-   below 36rem the actions wrap under the title, from 36rem they sit at the end of the title row. */
-
-.oc-page-header {
-  container-type: inline-size;
-  container-name: oc-page-header;
-  display: grid;
-  gap: 0.5rem;
-  padding-block: 0.75rem 1rem;
-}
-
-/* Optional back link row (use .oc-back-link inside, or any link). */
-.oc-page-header-back { display: flex; }
-.oc-page-header-back .oc-back-link { margin-inline-start: -0.75rem; }
-
-/* Main row: text block + actions. Stacks by default. */
-.oc-page-header-main { display: flex; flex-direction: column; gap: 0.75rem; }
-.oc-page-header-text { min-inline-size: 0; }
-.oc-page-header-title {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.25;
-  letter-spacing: -0.01em;
-  color: var(--oc-foreground);
-  text-wrap: balance;
-}
-.oc-page-header-subtitle { margin: 0.25rem 0 0; max-inline-size: 65ch; font-size: 0.875rem; line-height: 1.55; color: var(--oc-muted-foreground); }
-/* Meta row: badges, last-updated text. */
-.oc-page-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin-block-start: 0.5rem; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
-
-.oc-page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
-
-/* Wide enough: actions at the end of the title row. */
-@container oc-page-header (min-width: 36rem) {
-  .oc-page-header-main { flex-direction: row; align-items: flex-start; justify-content: space-between; }
-  .oc-page-header-actions { flex-shrink: 0; justify-content: flex-end; padding-block-start: 0.125rem; }
-}
-
-/* Bordered: line under the header. */
-.oc-page-header--bordered { margin-block-end: 1rem; border-block-end: 1px solid var(--oc-border); }
-
-/* Sticky: stays on top while the page scrolls (needs a background). */
-.oc-page-header--sticky { position: sticky; inset-block-start: 0; z-index: 10; background: var(--oc-background); }
-
-/* Small: for sub pages and dialogs. */
-.oc-page-header--sm { padding-block: 0.5rem 0.75rem; }
-.oc-page-header--sm .oc-page-header-title { font-size: 1.125rem; }
+/* File: packages/ui/src/parts/app-page-header.css | Map: header (container) -> back link row -> main row (text + actions) -> title + subtitle + meta -> wide layout (@container) -> modifiers (bordered, sticky, sm) */
+/* Page header: back link + title + subtitle + actions at the top of an app page.
+   A lighter variant of the module-header block, as a component. The header is a size container:
+   below 36rem the actions wrap under the title, from 36rem they sit at the end of the title row. */
+
+.oc-page-header {
+  container-type: inline-size;
+  container-name: oc-page-header;
+  display: grid;
+  gap: 0.5rem;
+  padding-block: 0.75rem 1rem;
+}
+
+/* Optional back link row (use .oc-back-link inside, or any link). */
+.oc-page-header-back { display: flex; }
+.oc-page-header-back .oc-back-link { margin-inline-start: -0.75rem; }
+
+/* Main row: text block + actions. Stacks by default. */
+.oc-page-header-main { display: flex; flex-direction: column; gap: 0.75rem; }
+.oc-page-header-text { min-inline-size: 0; }
+.oc-page-header-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  color: var(--oc-foreground);
+  text-wrap: balance;
+}
+.oc-page-header-subtitle { margin: 0.25rem 0 0; max-inline-size: 65ch; font-size: 0.875rem; line-height: 1.55; color: var(--oc-muted-foreground); }
+/* Meta row: badges, last-updated text. */
+.oc-page-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin-block-start: 0.5rem; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+
+.oc-page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+
+/* Wide enough: actions at the end of the title row. */
+@container oc-page-header (min-width: 36rem) {
+  .oc-page-header-main { flex-direction: row; align-items: flex-start; justify-content: space-between; }
+  .oc-page-header-actions { flex-shrink: 0; justify-content: flex-end; padding-block-start: 0.125rem; }
+}
+
+/* Bordered: line under the header. */
+.oc-page-header--bordered { margin-block-end: 1rem; border-block-end: 1px solid var(--oc-border); }
+
+/* Sticky: stays on top while the page scrolls (needs a background). */
+.oc-page-header--sticky { position: sticky; inset-block-start: 0; z-index: 10; background: var(--oc-background); }
+
+/* Small: for sub pages and dialogs. */
+.oc-page-header--sm { padding-block: 0.5rem 0.75rem; }
+.oc-page-header--sm .oc-page-header-title { font-size: 1.125rem; }

package/dist/parts/app-severity-card.css

@@ -1,91 +1,91 @@
-/* File: packages/ui/src/parts/app-severity-card.css | Map: card (details) -> head (summary) -> icon + title + tags -> level badge + chevron -> body + actions -> severity modifiers -> resolved state -> reduced motion */
-/* Severity card: risk-colored expandable card (security finding, incident, audit item).
-   Built on <details> / <summary>, so it opens without JavaScript; same name="..." makes a group exclusive.
-   Levels: --low, --medium, --high, --critical. Resolved: .is-resolved (muted, no color). */
-
-.oc-severity-card {
-  --oc-severity-color: var(--oc-muted-foreground);
-  overflow: hidden;
-  color: var(--oc-foreground);
-  background: color-mix(in oklch, var(--oc-severity-color) 6%, var(--oc-card));
-  border: 1px solid oklch(from var(--oc-severity-color) l c h / 0.3);
-  border-inline-start-width: 3px;
-  border-inline-start-color: var(--oc-severity-color);
-  border-radius: calc(var(--oc-radius) + 4px);
-  interpolate-size: allow-keywords;
-}
-.oc-severity-card + .oc-severity-card { margin-block-start: 0.5rem; }
-
-/* Head row (summary): icon, title + tags, level badge, chevron. */
-.oc-severity-card-head {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.875rem 1rem;
-  cursor: pointer;
-  list-style: none;
-  user-select: none;
-}
-.oc-severity-card-head::-webkit-details-marker { display: none; }
-.oc-severity-card-head:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-.oc-severity-card-head:hover { background: oklch(from var(--oc-severity-color) l c h / 0.06); }
-
-.oc-severity-card-icon { display: inline-flex; flex-shrink: 0; color: var(--oc-severity-color); }
-.oc-severity-card-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
-.oc-severity-card-main { flex: 1; min-inline-size: 0; }
-.oc-severity-card-title { display: block; overflow: hidden; font-size: 0.875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--oc-severity-color); }
-/* Tags under the title (data types, categories). */
-.oc-severity-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-block-start: 0.375rem; }
-.oc-severity-card-tag { padding: 0.125rem 0.375rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.6875rem; color: var(--oc-muted-foreground); background: var(--oc-muted); border-radius: 4px; }
-
-/* Level badge ("High") in the severity color. */
-.oc-severity-card-level {
-  flex-shrink: 0;
-  padding: 0.2rem 0.5rem;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--oc-severity-color);
-  background: oklch(from var(--oc-severity-color) l c h / 0.14);
-  border: 1px solid oklch(from var(--oc-severity-color) l c h / 0.35);
-  border-radius: 999px;
-}
-
-/* Chevron (CSS borders), rotates when open. */
-.oc-severity-card-head::after {
-  content: "";
-  flex-shrink: 0;
-  inline-size: 0.45rem;
-  block-size: 0.45rem;
-  margin-inline: 0.25rem;
-  border-inline-end: 1.5px solid var(--oc-muted-foreground);
-  border-block-end: 1.5px solid var(--oc-muted-foreground);
-  rotate: 45deg;
-  translate: 0 -0.15rem;
-  transition: rotate var(--oc-transition-fast);
-}
-.oc-severity-card[open] > .oc-severity-card-head::after { rotate: 225deg; translate: 0 0.1rem; }
-
-/* Body: details text and an action row. Height animates where ::details-content is supported. */
-.oc-severity-card::details-content { block-size: 0; overflow: clip; transition: block-size var(--oc-transition-normal), content-visibility var(--oc-transition-normal) allow-discrete; }
-.oc-severity-card[open]::details-content { block-size: auto; }
-.oc-severity-card-body { padding: 0 1rem 1rem 3rem; font-size: 0.875rem; line-height: 1.6; color: var(--oc-muted-foreground); }
-.oc-severity-card-body > :first-child { margin-block-start: 0; }
-.oc-severity-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.75rem; }
-
-/* Levels (theme tokens; critical is a deeper red). */
-.oc-severity-card--low { --oc-severity-color: var(--oc-success); }
-.oc-severity-card--medium { --oc-severity-color: var(--oc-warning); }
-.oc-severity-card--high { --oc-severity-color: var(--oc-destructive); }
-.oc-severity-card--critical { --oc-severity-color: light-dark(var(--color-red-95), var(--color-red-30)); }
-.oc-severity-card--critical .oc-severity-card-level { color: var(--oc-destructive-foreground); background: var(--oc-severity-color); }
-
-/* Resolved: back to neutral colors, title struck through. */
-.oc-severity-card.is-resolved { --oc-severity-color: var(--oc-muted-foreground); background: var(--oc-surface); }
-.oc-severity-card.is-resolved .oc-severity-card-title { text-decoration: line-through; }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-severity-card::details-content,
-  .oc-severity-card-head::after { transition: none; }
-}
+/* File: packages/ui/src/parts/app-severity-card.css | Map: card (details) -> head (summary) -> icon + title + tags -> level badge + chevron -> body + actions -> severity modifiers -> resolved state -> reduced motion */
+/* Severity card: risk-colored expandable card (security finding, incident, audit item).
+   Built on <details> / <summary>, so it opens without JavaScript; same name="..." makes a group exclusive.
+   Levels: --low, --medium, --high, --critical. Resolved: .is-resolved (muted, no color). */
+
+.oc-severity-card {
+  --oc-severity-color: var(--oc-muted-foreground);
+  overflow: hidden;
+  color: var(--oc-foreground);
+  background: color-mix(in oklch, var(--oc-severity-color) 6%, var(--oc-card));
+  border: 1px solid oklch(from var(--oc-severity-color) l c h / 0.3);
+  border-inline-start-width: 3px;
+  border-inline-start-color: var(--oc-severity-color);
+  border-radius: calc(var(--oc-radius) + 4px);
+  interpolate-size: allow-keywords;
+}
+.oc-severity-card + .oc-severity-card { margin-block-start: 0.5rem; }
+
+/* Head row (summary): icon, title + tags, level badge, chevron. */
+.oc-severity-card-head {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.oc-severity-card-head::-webkit-details-marker { display: none; }
+.oc-severity-card-head:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-severity-card-head:hover { background: oklch(from var(--oc-severity-color) l c h / 0.06); }
+
+.oc-severity-card-icon { display: inline-flex; flex-shrink: 0; color: var(--oc-severity-color); }
+.oc-severity-card-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
+.oc-severity-card-main { flex: 1; min-inline-size: 0; }
+.oc-severity-card-title { display: block; overflow: hidden; font-size: 0.875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--oc-severity-color); }
+/* Tags under the title (data types, categories). */
+.oc-severity-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-block-start: 0.375rem; }
+.oc-severity-card-tag { padding: 0.125rem 0.375rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.6875rem; color: var(--oc-muted-foreground); background: var(--oc-muted); border-radius: 4px; }
+
+/* Level badge ("High") in the severity color. */
+.oc-severity-card-level {
+  flex-shrink: 0;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--oc-severity-color);
+  background: oklch(from var(--oc-severity-color) l c h / 0.14);
+  border: 1px solid oklch(from var(--oc-severity-color) l c h / 0.35);
+  border-radius: 999px;
+}
+
+/* Chevron (CSS borders), rotates when open. */
+.oc-severity-card-head::after {
+  content: "";
+  flex-shrink: 0;
+  inline-size: 0.45rem;
+  block-size: 0.45rem;
+  margin-inline: 0.25rem;
+  border-inline-end: 1.5px solid var(--oc-muted-foreground);
+  border-block-end: 1.5px solid var(--oc-muted-foreground);
+  rotate: 45deg;
+  translate: 0 -0.15rem;
+  transition: rotate var(--oc-transition-fast);
+}
+.oc-severity-card[open] > .oc-severity-card-head::after { rotate: 225deg; translate: 0 0.1rem; }
+
+/* Body: details text and an action row. Height animates where ::details-content is supported. */
+.oc-severity-card::details-content { block-size: 0; overflow: clip; transition: block-size var(--oc-transition-normal), content-visibility var(--oc-transition-normal) allow-discrete; }
+.oc-severity-card[open]::details-content { block-size: auto; }
+.oc-severity-card-body { padding: 0 1rem 1rem 3rem; font-size: 0.875rem; line-height: 1.6; color: var(--oc-muted-foreground); }
+.oc-severity-card-body > :first-child { margin-block-start: 0; }
+.oc-severity-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.75rem; }
+
+/* Levels (theme tokens; critical is a deeper red). */
+.oc-severity-card--low { --oc-severity-color: var(--oc-success); }
+.oc-severity-card--medium { --oc-severity-color: var(--oc-warning); }
+.oc-severity-card--high { --oc-severity-color: var(--oc-destructive); }
+.oc-severity-card--critical { --oc-severity-color: light-dark(var(--color-red-95), var(--color-red-30)); }
+.oc-severity-card--critical .oc-severity-card-level { color: var(--oc-destructive-foreground); background: var(--oc-severity-color); }
+
+/* Resolved: back to neutral colors, title struck through. */
+.oc-severity-card.is-resolved { --oc-severity-color: var(--oc-muted-foreground); background: var(--oc-surface); }
+.oc-severity-card.is-resolved .oc-severity-card-title { text-decoration: line-through; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-severity-card::details-content,
+  .oc-severity-card-head::after { transition: none; }
+}

package/dist/parts/app-sidebar-dark.css

@@ -1,15 +1,15 @@
-/* File: packages/ui/src/parts/app-sidebar-dark.css | Map: dark sidebar -> active item accent
-   .oc-sidebar--dark: a sidebar that stays dark in the light theme too (classic CMS admin look).
-   All --oc-* tokens are light-dark() pairs, so color-scheme: dark on the sidebar switches every token inside it.
-   Based on the Verdavita admin sidebar. */
-
-.oc-sidebar--dark {
-  color-scheme: dark;
-  background: var(--oc-card);
-  color: var(--oc-foreground);
-  border-color: var(--oc-border);
-}
-.oc-sidebar--dark .oc-sidebar-menu-button[aria-current="page"],
-.oc-sidebar--dark .oc-sidebar-menu-button.is-active {
-  box-shadow: inset 3px 0 0 var(--oc-primary);
-}
+/* File: packages/ui/src/parts/app-sidebar-dark.css | Map: dark sidebar -> active item accent
+   .oc-sidebar--dark: a sidebar that stays dark in the light theme too (classic CMS admin look).
+   All --oc-* tokens are light-dark() pairs, so color-scheme: dark on the sidebar switches every token inside it.
+   Based on the Verdavita admin sidebar. */
+
+.oc-sidebar--dark {
+  color-scheme: dark;
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  border-color: var(--oc-border);
+}
+.oc-sidebar--dark .oc-sidebar-menu-button[aria-current="page"],
+.oc-sidebar--dark .oc-sidebar-menu-button.is-active {
+  box-shadow: inset 3px 0 0 var(--oc-primary);
+}