@birdycom/omniaui 0.11.0 → 0.11.1

package/dist/parts/app-confirm-dialog.css

@@ -1,70 +1,70 @@
-/* File: packages/ui/src/parts/app-confirm-dialog.css | Map: confirm modifier (icon ring) -> close button -> typed confirm field -> confirm lock -> three-button footer -> narrow screens */
-/* Confirm dialog: a variant of the alert dialog (dialog.oc-modal + .oc-alert-dialog).
-   Add .oc-alert-dialog--confirm next to the type modifier (--warning, --error, ...).
-   Extras: a larger thin icon ring, a close (X) button, an optional typed confirmation
-   ("type DELETE to confirm") and a third "discard" action. No JavaScript: the confirm button is a
-   submit button of a <form method="dialog">, so the browser blocks it until the typed value matches. */
-
-/* Larger content box, room for the close button. */
-.oc-alert-dialog--confirm { position: relative; max-inline-size: 27.5rem; padding: 1.75rem 1.5rem 0; border-radius: calc(var(--oc-radius) + 8px); }
-
-/* Thin ring (80px) with the glyph or an SVG in the type color; the inner disc uses the card color. */
-.oc-alert-dialog--confirm .oc-alert-dialog-icon {
-  inline-size: 5rem;
-  block-size: 5rem;
-  margin-block-end: 1.25rem;
-  font-size: 2.25rem;
-  font-weight: 400;
-  border-width: 2px;
-  background: var(--oc-card);
-  box-shadow: 0 0 0 6px oklch(from var(--oc-alert-dialog-color, var(--oc-warning)) l c h / 0.1);
-}
-.oc-alert-dialog--confirm .oc-alert-dialog-icon svg { inline-size: 2.25rem; block-size: 2.25rem; }
-
-/* Close (X) in the top corner. Use command="close" commandfor="<dialog id>". */
-.oc-alert-dialog-close {
-  position: absolute;
-  inset-block-start: 0.75rem;
-  inset-inline-end: 0.75rem;
-  display: grid;
-  place-items: center;
-  inline-size: 2rem;
-  block-size: 2rem;
-  padding: 0;
-  font-size: 1.25rem;
-  line-height: 1;
-  color: var(--oc-muted-foreground);
-  background: none;
-  border: 0;
-  border-radius: var(--oc-radius);
-  cursor: pointer;
-}
-.oc-alert-dialog-close:hover { color: var(--oc-foreground); background: var(--oc-accent); }
-.oc-alert-dialog-close:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-
-/* The form wraps body + footer; it adds no layout of its own. */
-.oc-alert-dialog-form { display: contents; }
-
-/* Typed confirmation: label with the word in <code>, then the input. */
-.oc-alert-dialog-typed { display: grid; gap: 0.375rem; align-self: stretch; margin-block-end: 1rem; text-align: start; font-size: 0.875rem; }
-.oc-alert-dialog-typed code {
-  padding: 0.1rem 0.35rem;
-  font-size: 0.8125rem;
-  color: var(--oc-alert-dialog-color, var(--oc-warning));
-  background: oklch(from var(--oc-alert-dialog-color, var(--oc-warning)) l c h / 0.1);
-  border-radius: 4px;
-}
-
-/* While the typed value does not match the pattern, the confirm button looks disabled. */
-.oc-alert-dialog--confirm:has(.oc-alert-dialog-typed input:invalid) .oc-alert-dialog-confirm { opacity: 0.5; cursor: not-allowed; }
-
-/* Three buttons: discard at the start, cancel + confirm at the end. */
-.oc-alert-dialog--confirm .oc-modal-footer { flex-wrap: wrap; gap: 0.5rem; padding-block: 0.5rem 1.5rem; }
-.oc-alert-dialog-discard { margin-inline-end: auto; }
-.oc-alert-dialog--confirm .oc-modal-footer:has(.oc-alert-dialog-discard) { justify-content: flex-end; }
-
-/* Narrow screens: full-width stacked buttons, confirm on top. */
-@media (max-width: 30rem) {
-  .oc-alert-dialog--confirm .oc-modal-footer { flex-direction: column-reverse; }
-  .oc-alert-dialog--confirm .oc-modal-footer > * { inline-size: 100%; margin: 0; }
-}
+/* File: packages/ui/src/parts/app-confirm-dialog.css | Map: confirm modifier (icon ring) -> close button -> typed confirm field -> confirm lock -> three-button footer -> narrow screens */
+/* Confirm dialog: a variant of the alert dialog (dialog.oc-modal + .oc-alert-dialog).
+   Add .oc-alert-dialog--confirm next to the type modifier (--warning, --error, ...).
+   Extras: a larger thin icon ring, a close (X) button, an optional typed confirmation
+   ("type DELETE to confirm") and a third "discard" action. No JavaScript: the confirm button is a
+   submit button of a <form method="dialog">, so the browser blocks it until the typed value matches. */
+
+/* Larger content box, room for the close button. */
+.oc-alert-dialog--confirm { position: relative; max-inline-size: 27.5rem; padding: 1.75rem 1.5rem 0; border-radius: calc(var(--oc-radius) + 8px); }
+
+/* Thin ring (80px) with the glyph or an SVG in the type color; the inner disc uses the card color. */
+.oc-alert-dialog--confirm .oc-alert-dialog-icon {
+  inline-size: 5rem;
+  block-size: 5rem;
+  margin-block-end: 1.25rem;
+  font-size: 2.25rem;
+  font-weight: 400;
+  border-width: 2px;
+  background: var(--oc-card);
+  box-shadow: 0 0 0 6px oklch(from var(--oc-alert-dialog-color, var(--oc-warning)) l c h / 0.1);
+}
+.oc-alert-dialog--confirm .oc-alert-dialog-icon svg { inline-size: 2.25rem; block-size: 2.25rem; }
+
+/* Close (X) in the top corner. Use command="close" commandfor="<dialog id>". */
+.oc-alert-dialog-close {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+  display: grid;
+  place-items: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--oc-muted-foreground);
+  background: none;
+  border: 0;
+  border-radius: var(--oc-radius);
+  cursor: pointer;
+}
+.oc-alert-dialog-close:hover { color: var(--oc-foreground); background: var(--oc-accent); }
+.oc-alert-dialog-close:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* The form wraps body + footer; it adds no layout of its own. */
+.oc-alert-dialog-form { display: contents; }
+
+/* Typed confirmation: label with the word in <code>, then the input. */
+.oc-alert-dialog-typed { display: grid; gap: 0.375rem; align-self: stretch; margin-block-end: 1rem; text-align: start; font-size: 0.875rem; }
+.oc-alert-dialog-typed code {
+  padding: 0.1rem 0.35rem;
+  font-size: 0.8125rem;
+  color: var(--oc-alert-dialog-color, var(--oc-warning));
+  background: oklch(from var(--oc-alert-dialog-color, var(--oc-warning)) l c h / 0.1);
+  border-radius: 4px;
+}
+
+/* While the typed value does not match the pattern, the confirm button looks disabled. */
+.oc-alert-dialog--confirm:has(.oc-alert-dialog-typed input:invalid) .oc-alert-dialog-confirm { opacity: 0.5; cursor: not-allowed; }
+
+/* Three buttons: discard at the start, cancel + confirm at the end. */
+.oc-alert-dialog--confirm .oc-modal-footer { flex-wrap: wrap; gap: 0.5rem; padding-block: 0.5rem 1.5rem; }
+.oc-alert-dialog-discard { margin-inline-end: auto; }
+.oc-alert-dialog--confirm .oc-modal-footer:has(.oc-alert-dialog-discard) { justify-content: flex-end; }
+
+/* Narrow screens: full-width stacked buttons, confirm on top. */
+@media (max-width: 30rem) {
+  .oc-alert-dialog--confirm .oc-modal-footer { flex-direction: column-reverse; }
+  .oc-alert-dialog--confirm .oc-modal-footer > * { inline-size: 100%; margin: 0; }
+}

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

@@ -1,63 +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; } }
+/* 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

@@ -1,174 +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; }
-}
+/* 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; }
+}