@birdycom/omniaui 0.0.0-stage → 0.11.1

package/dist/parts/app-cookie-consent.css

@@ -0,0 +1,63 @@
+/* File: packages/ui/src/parts/app-cookie-consent.css | Map: popover box (corner / bar) -> text -> preferences (details)
+   -> category rows -> actions -> entry animation -> small screens
+   Cookie consent: a non-modal popover="manual" in the top layer, so it never blocks the page. Categories are rows with
+   the switch component; "necessary" is locked on. Based on the cookie banner of the Verdavita site. */
+
+.oc-cookie-consent {
+  position: fixed;
+  inset: auto 1rem 1rem auto;
+  inline-size: min(100vw - 2rem, 28rem);
+  max-block-size: calc(100dvh - 2rem);
+  margin: 0;
+  padding: 1.25rem;
+  overflow: auto;
+  border: 1px solid var(--oc-border);
+  border-radius: 12px;
+  background: var(--oc-popover, var(--oc-card));
+  color: var(--oc-foreground);
+  box-shadow: 0 1rem 2.5rem oklch(from var(--color-black-50) l c h / 0.2);
+}
+.oc-cookie-consent:popover-open { display: grid; gap: 0.9rem; }
+/* Full-width bar at the bottom */
+.oc-cookie-consent--bar { inset: auto 0 0 0; inline-size: 100%; max-inline-size: none; border-radius: 0; border-inline: 0; border-block-end: 0; }
+.oc-cookie-consent--bar:popover-open { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
+.oc-cookie-consent--bar .oc-cookie-consent__prefs { grid-column: 1 / -1; }
+
+.oc-cookie-consent__title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 700; }
+.oc-cookie-consent__text { margin: 0; color: var(--oc-muted-foreground); font-size: 0.875rem; line-height: 1.55; }
+.oc-cookie-consent__text a { color: var(--oc-link-color, var(--oc-primary)); }
+
+/* Preferences: a native <details>, so "Customize" needs no script */
+.oc-cookie-consent__prefs { border-block: 1px solid var(--oc-border); }
+.oc-cookie-consent__prefs > summary {
+  padding-block: 0.6rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.oc-cookie-consent__prefs > summary:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; border-radius: 4px; }
+.oc-cookie-consent__category {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.15rem 1rem;
+  padding-block: 0.6rem;
+  border-block-start: 1px solid var(--oc-border);
+}
+.oc-cookie-consent__category-name { font-size: 0.875rem; font-weight: 600; }
+.oc-cookie-consent__category-text { grid-column: 1; color: var(--oc-muted-foreground); font-size: 0.8rem; }
+.oc-cookie-consent__category > .oc-switch { grid-row: 1 / span 2; grid-column: 2; }
+
+.oc-cookie-consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
+.oc-cookie-consent__actions > .oc-btn { flex: 1 1 auto; }
+
+/* Entry: slide up from the corner */
+.oc-cookie-consent { transition: opacity 0.3s, translate 0.3s, overlay 0.3s allow-discrete, display 0.3s allow-discrete; }
+@starting-style { .oc-cookie-consent:popover-open { opacity: 0; translate: 0 1rem; } }
+.oc-cookie-consent:not(:popover-open) { opacity: 0; translate: 0 1rem; }
+
+@media (width < 36rem) {
+  .oc-cookie-consent { inset: auto 0.5rem 0.5rem; inline-size: auto; }
+  .oc-cookie-consent--bar:popover-open { grid-template-columns: 1fr; }
+}
+@media (prefers-reduced-motion: reduce) { .oc-cookie-consent { transition: none; } }

package/dist/parts/app-data-table.css

@@ -0,0 +1,174 @@
+/* File: packages/ui/src/parts/app-data-table.css | Map: shell -> toolbar -> frame and scroll -> header resize -> select and actions columns -> deleted row -> bulk bar -> card view -> footer and pager -> compact density */
+/* List table from Korrekt and OmniaDesk. The frame, toolbar and footer are styling.
+   Behaviour (search, sort, pages, resize, drag, trash, bulk) lives in src/data-table.js.
+   Set --oc-data-table-max on the shell when the body should scroll and the header should stick. */
+
+.oc-data-table {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  color: var(--oc-card-foreground);
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+
+/* Toolbar: title + gear, search, trash pills, table/cards toggle, page actions. */
+.oc-data-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.oc-data-table-heading { display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }
+.oc-data-table-title { font-size: 0.875rem; font-weight: 600; }
+.oc-data-table-search { flex: 1 1 12rem; min-inline-size: 10rem; max-inline-size: 22rem; }
+.oc-data-table-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-inline-start: auto; }
+.oc-data-table-view { display: inline-flex; gap: 0.25rem; }
+.oc-data-table-view [aria-pressed="true"] {
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.1);
+  border-color: oklch(from var(--oc-primary) l c h / 0.35);
+}
+.oc-data-table-sort-summary { flex-basis: 100%; margin: 0; font-size: 0.75rem; color: var(--oc-muted-foreground); }
+.oc-data-table-sort-summary:empty { display: none; }
+.oc-data-table-file { display: none; }
+
+/* The table sits in its own rounded frame. The scroll box keeps the header sticky. */
+.oc-data-table-frame {
+  overflow: hidden;
+  background: var(--oc-background);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+.oc-data-table-scroll { overflow: auto; max-block-size: var(--oc-data-table-max, none); }
+.oc-data-table .oc-table :is(th, td) { border-inline: 0; border-block-start: 0; }
+.oc-data-table .oc-table thead th {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+  block-size: 2.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: var(--oc-card);
+}
+.oc-data-table .oc-table tbody tr:nth-child(even) { background: var(--oc-surface); }
+.oc-data-table .oc-table tbody tr:last-child > td { border-block-end: 0; }
+
+/* Header label and the drag handle that sets the column width. */
+.oc-data-table-th { display: flex; align-items: center; gap: 0.25rem; position: relative; min-inline-size: 0; }
+.oc-data-table-resize {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: -0.45rem;
+  inline-size: 0.55rem;
+  padding: 0;
+  background: none;
+  border: 0;
+  cursor: col-resize;
+  touch-action: none;
+}
+.oc-data-table-resize::after {
+  content: "";
+  position: absolute;
+  inset-block: 0.4rem;
+  inset-inline-start: 0.25rem;
+  inline-size: 1px;
+  background: var(--oc-border);
+}
+.oc-data-table.is-resizing { cursor: col-resize; user-select: none; }
+/* After a resize the table grows with its columns and the frame scrolls sideways. */
+.oc-data-table-table--sized { inline-size: max-content; min-inline-size: 100%; }
+
+/* Narrow control columns. The actions column stays on the right while the rest scrolls. */
+.oc-data-table .oc-table :is(th, td)[data-oc-col="select"],
+.oc-data-table .oc-table :is(th, td)[data-oc-col="order"] {
+  inline-size: 2.25rem;
+  padding-inline: 0.25rem;
+  text-align: center;
+}
+.oc-data-table .oc-table :is(th, td)[data-oc-col="actions"] {
+  position: sticky;
+  inset-inline-end: 0;
+  z-index: 2;
+  background: var(--oc-card);
+  box-shadow: -1px 0 0 var(--oc-border);
+}
+.oc-data-table .oc-table thead th[data-oc-col="actions"] { z-index: 3; }
+.oc-data-table .oc-table tbody tr:nth-child(even) > td[data-oc-col="actions"] { background: var(--oc-surface); }
+
+/* Trash and archive rows stay readable but quieter than active rows. */
+.oc-data-table tr[data-oc-status="deleted"],
+.oc-data-table tr[data-oc-status="archived"] { color: var(--oc-muted-foreground); }
+
+/* Bar above the table once at least one row is checked. */
+.oc-data-table-bulk {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--oc-surface);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+.oc-data-table-bulk[hidden] { display: none; }
+
+/* Card view: one card per row on this page. The script fills it. */
+.oc-data-table-grid { display: none; }
+.oc-data-table--grid .oc-data-table-scroll { display: none; }
+.oc-data-table--grid .oc-data-table-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+.oc-data-table-card {
+  padding: 0.75rem;
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+.oc-data-table-card-title { margin: 0; font-size: 0.875rem; font-weight: 600; }
+
+.oc-data-table-empty { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--oc-muted-foreground); }
+.oc-data-table-empty[hidden] { display: none; }
+
+/* Footer: count on the left, rows-per-page in the middle, pager on the right. */
+.oc-data-table-footer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 0.75rem;
+}
+.oc-data-table-summary { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-data-table-per-page { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
+.oc-data-table-per-page .oc-select { inline-size: auto; }
+.oc-data-table-pager { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
+.oc-data-table-page {
+  min-inline-size: 2rem;
+  padding: 0.25rem 0.45rem;
+  font: inherit;
+  font-size: 0.8125rem;
+  color: var(--oc-foreground);
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+}
+.oc-data-table-page[aria-current="page"] {
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.1);
+  border-color: oklch(from var(--oc-primary) l c h / 0.35);
+}
+.oc-data-table-page:disabled { opacity: 0.4; cursor: default; }
+.oc-data-table-page:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-data-table-ellipsis { padding-inline: 0.25rem; color: var(--oc-muted-foreground); }
+
+/* Design choice from the gear menu: tighter rows, like the compact article lists. */
+.oc-data-table--compact .oc-table :is(th, td) { padding: 0.25rem 0.5rem; font-size: 0.8125rem; }
+.oc-data-table--compact .oc-table thead th { block-size: 2rem; }
+
+@media (max-width: 40rem) {
+  .oc-data-table-footer { grid-template-columns: 1fr; }
+  .oc-data-table-pager { justify-content: flex-start; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-data-table .oc-table tbody tr { transition: none; }
+}

package/dist/parts/app-greeting.css

@@ -0,0 +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; }

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

@@ -0,0 +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; }
+}

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

@@ -0,0 +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; }

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

@@ -0,0 +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; }
+}

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

@@ -0,0 +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);
+}

package/dist/parts/app-sortable-row.css

@@ -0,0 +1,52 @@
+/* File: packages/ui/src/parts/app-sortable-row.css | Map: grip cell -> grip button (dots) -> row states (dragging, drop before / after) -> reduced motion */
+/* Sortable row: a table row with a drag grip. This file is styling only.
+   Use native HTML drag and drop (draggable="true" on the row) and set the state classes from your own code:
+   .is-dragging on the row being moved, .is-drop-before / .is-drop-after on the row under the pointer. */
+
+/* Narrow first column that holds the grip. */
+.oc-sortable-row-grip-cell { inline-size: 2.25rem; padding-inline: 0.25rem; text-align: center; }
+
+/* The grip itself: a button so it can take keyboard focus (move with your own key handler). */
+.oc-sortable-row-grip {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.5rem;
+  block-size: 1.75rem;
+  padding: 0;
+  color: var(--oc-muted-foreground);
+  background: none;
+  border: 0;
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: grab;
+  touch-action: none;
+}
+/* Six dots (2 columns x 3 rows) drawn with a repeating radial gradient in currentColor. */
+.oc-sortable-row-grip::before {
+  content: "";
+  inline-size: 0.5rem;
+  block-size: 0.875rem;
+  background: radial-gradient(circle, currentColor 1.1px, transparent 1.4px) 0 0 / 0.25rem 0.29rem;
+}
+.oc-sortable-row-grip:hover { color: var(--oc-foreground); background: var(--oc-accent); }
+.oc-sortable-row-grip:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-sortable-row-grip:active { cursor: grabbing; }
+
+/* Row being dragged: dimmed and dashed so the original place stays visible. */
+.oc-sortable-row { transition: opacity var(--oc-transition-fast), background var(--oc-transition-fast); }
+.oc-sortable-row.is-dragging { opacity: 0.45; background: var(--oc-surface); }
+.oc-sortable-row.is-dragging > td { border-style: dashed; }
+
+/* Drop indicator: a primary line on the top or bottom edge of the target row. */
+.oc-sortable-row.is-drop-before > td { box-shadow: inset 0 2px 0 var(--oc-primary); }
+.oc-sortable-row.is-drop-after > td { box-shadow: inset 0 -2px 0 var(--oc-primary); }
+
+/* Picked up with the keyboard (aria-pressed on the grip): highlight the whole row. */
+.oc-sortable-row:has(.oc-sortable-row-grip[aria-pressed="true"]) { background: oklch(from var(--oc-primary) l c h / 0.08); }
+.oc-sortable-row-grip[aria-pressed="true"] { color: var(--oc-primary); cursor: grabbing; }
+
+/* Locked row (cannot move): no grab cursor, faded grip. */
+.oc-sortable-row-grip:disabled { opacity: 0.35; cursor: not-allowed; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-sortable-row { transition: none; }
+}

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

@@ -0,0 +1,68 @@
+/* File: packages/ui/src/parts/app-stat-card.css | Map: grid -> card -> icon tile -> value + label -> trend -> tone modifiers -> clickable card -> reduced motion */
+/* Stat card: compact KPI tile with an icon tile, a big number and a small label.
+   Tone modifiers recolor the icon tile: --accent (needs attention, red), --success, --warning.
+   Use an <a> or <button> as the card to make it clickable (hover lift). */
+
+/* Responsive grid for a row of stat cards. */
+.oc-stat-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; }
+
+.oc-stat-card {
+  --oc-stat-card-color: var(--oc-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-inline-size: 0;
+  padding: 1rem;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  color: var(--oc-card-foreground);
+  background: var(--oc-card-background);
+  border: 1px solid var(--oc-card-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  transition: translate var(--oc-transition-fast), box-shadow var(--oc-transition-fast), border-color var(--oc-transition-fast);
+}
+
+/* Icon tile, tinted with the tone color. */
+.oc-stat-card-icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  color: var(--oc-stat-card-color);
+  background: oklch(from var(--oc-stat-card-color) l c h / 0.12);
+  border-radius: var(--oc-radius);
+}
+.oc-stat-card-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
+
+/* Text column: number on top, label below (ellipsis when too long). */
+.oc-stat-card-body { min-inline-size: 0; }
+.oc-stat-card-value { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--oc-foreground); }
+.oc-stat-card-label { display: block; margin-block-start: 0.25rem; overflow: hidden; font-size: 0.75rem; color: var(--oc-muted-foreground); text-overflow: ellipsis; white-space: nowrap; }
+
+/* Optional trend chip next to the value ("+12%"). */
+.oc-stat-card-trend { display: inline-block; margin-inline-start: 0.375rem; padding: 0.125rem 0.375rem; font-size: 0.6875rem; font-weight: 600; vertical-align: middle; border-radius: 999px; color: var(--oc-muted-foreground); background: var(--oc-muted); }
+.oc-stat-card-trend--up { color: var(--oc-success); background: oklch(from var(--oc-success) l c h / 0.12); }
+.oc-stat-card-trend--down { color: var(--oc-destructive); background: oklch(from var(--oc-destructive) l c h / 0.12); }
+
+/* Tones. --accent = "needs attention" (e.g. open orders). */
+.oc-stat-card--accent { --oc-stat-card-color: var(--oc-destructive); }
+.oc-stat-card--success { --oc-stat-card-color: var(--oc-success); }
+.oc-stat-card--warning { --oc-stat-card-color: var(--oc-warning); }
+/* Accent stripe on the start edge (optional, combine with a tone). */
+.oc-stat-card--stripe { border-inline-start: 3px solid var(--oc-stat-card-color); }
+
+/* Clickable card (a / button): lift on hover, ring on keyboard focus. */
+a.oc-stat-card,
+button.oc-stat-card { cursor: pointer; }
+a.oc-stat-card:hover,
+button.oc-stat-card:hover { translate: 0 -2px; border-color: oklch(from var(--oc-stat-card-color) l c h / 0.4); box-shadow: 0 6px 18px oklch(from var(--color-black-60) l c h / 0.1); }
+a.oc-stat-card:focus-visible,
+button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-stat-card { transition: none; }
+  a.oc-stat-card:hover,
+  button.oc-stat-card:hover { translate: none; }
+}