@birdycom/omniaui 0.11.0 → 0.11.1

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

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

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

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

@@ -1,71 +1,71 @@
-/* File: packages/ui/src/parts/app-table-actions.css | Map: icon actions -> tone modifiers -> overflow trigger -> menu tweaks -> reduced motion */
-/* Table actions: row actions as small icon buttons or as one overflow ("more") menu.
-   Builds on the existing cell <td class="oc-table-actions"> from the table component.
-   The overflow menu is a native popover (.oc-dropdown-menu[popover]); no JavaScript needed. */
-
-/* Icon mode: tighter gap between the square icon buttons. */
-.oc-table-actions--icons > * + * { margin-inline-start: 0.125rem; }
-
-/* One square icon action (link or button). Needs aria-label (and title for a tooltip). */
-.oc-table-actions-icon {
-  display: inline-grid;
-  place-items: center;
-  inline-size: 1.75rem;
-  block-size: 1.75rem;
-  padding: 0;
-  font: inherit;
-  color: var(--oc-muted-foreground);
-  background: none;
-  border: 1px solid transparent;
-  border-radius: calc(var(--oc-radius) - 2px);
-  cursor: pointer;
-  text-decoration: none;
-  vertical-align: middle;
-  transition: color var(--oc-transition-fast), background var(--oc-transition-fast), border-color var(--oc-transition-fast);
-}
-.oc-table-actions-icon svg { inline-size: 1rem; block-size: 1rem; }
-.oc-table-actions-icon:hover { color: var(--oc-foreground); background: var(--oc-accent); border-color: var(--oc-border); }
-.oc-table-actions-icon:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-.oc-table-actions-icon:disabled,
-.oc-table-actions-icon[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
-
-/* Tone modifiers: the hover tint shows what the action does. */
-.oc-table-actions-icon--primary:hover { color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.1); }
-.oc-table-actions-icon--success:hover { color: var(--oc-success); background: oklch(from var(--oc-success) l c h / 0.1); }
-.oc-table-actions-icon--destructive { color: var(--oc-destructive); }
-.oc-table-actions-icon--destructive:hover { color: var(--oc-destructive); background: oklch(from var(--oc-destructive) l c h / 0.1); }
-
-/* Overflow trigger ("more" button, three dots drawn with CSS). Use popovertarget="<menu id>". */
-.oc-table-actions-more {
-  display: inline-grid;
-  place-items: center;
-  inline-size: 1.75rem;
-  block-size: 1.75rem;
-  padding: 0;
-  color: var(--oc-muted-foreground);
-  background: none;
-  border: 1px solid transparent;
-  border-radius: calc(var(--oc-radius) - 2px);
-  cursor: pointer;
-}
-/* Three dots: one dot plus two box-shadow copies, all in currentColor. */
-.oc-table-actions-more::before {
-  content: "";
-  inline-size: 0.2rem;
-  block-size: 0.2rem;
-  border-radius: 50%;
-  background: currentColor;
-  box-shadow: -0.35rem 0 0 currentColor, 0.35rem 0 0 currentColor;
-}
-.oc-table-actions-more:hover { color: var(--oc-foreground); background: var(--oc-accent); }
-.oc-table-actions-more:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-/* While its menu is open the trigger stays highlighted (:has on the cell, popover is a sibling). */
-.oc-table-actions:has(.oc-dropdown-menu:popover-open) .oc-table-actions-more { color: var(--oc-foreground); background: var(--oc-accent); border-color: var(--oc-border); }
-
-/* The menu opens to the left side of the trigger, because the actions column sits at the row end. */
-.oc-table-actions .oc-dropdown-menu[popover] { position-area: block-end span-inline-start; min-inline-size: 11rem; text-align: start; }
-.oc-table-actions .oc-dropdown-item svg { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-table-actions-icon { transition: none; }
-}
+/* File: packages/ui/src/parts/app-table-actions.css | Map: icon actions -> tone modifiers -> overflow trigger -> menu tweaks -> reduced motion */
+/* Table actions: row actions as small icon buttons or as one overflow ("more") menu.
+   Builds on the existing cell <td class="oc-table-actions"> from the table component.
+   The overflow menu is a native popover (.oc-dropdown-menu[popover]); no JavaScript needed. */
+
+/* Icon mode: tighter gap between the square icon buttons. */
+.oc-table-actions--icons > * + * { margin-inline-start: 0.125rem; }
+
+/* One square icon action (link or button). Needs aria-label (and title for a tooltip). */
+.oc-table-actions-icon {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  padding: 0;
+  font: inherit;
+  color: var(--oc-muted-foreground);
+  background: none;
+  border: 1px solid transparent;
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+  text-decoration: none;
+  vertical-align: middle;
+  transition: color var(--oc-transition-fast), background var(--oc-transition-fast), border-color var(--oc-transition-fast);
+}
+.oc-table-actions-icon svg { inline-size: 1rem; block-size: 1rem; }
+.oc-table-actions-icon:hover { color: var(--oc-foreground); background: var(--oc-accent); border-color: var(--oc-border); }
+.oc-table-actions-icon:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-table-actions-icon:disabled,
+.oc-table-actions-icon[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
+
+/* Tone modifiers: the hover tint shows what the action does. */
+.oc-table-actions-icon--primary:hover { color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.1); }
+.oc-table-actions-icon--success:hover { color: var(--oc-success); background: oklch(from var(--oc-success) l c h / 0.1); }
+.oc-table-actions-icon--destructive { color: var(--oc-destructive); }
+.oc-table-actions-icon--destructive:hover { color: var(--oc-destructive); background: oklch(from var(--oc-destructive) l c h / 0.1); }
+
+/* Overflow trigger ("more" button, three dots drawn with CSS). Use popovertarget="<menu id>". */
+.oc-table-actions-more {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  padding: 0;
+  color: var(--oc-muted-foreground);
+  background: none;
+  border: 1px solid transparent;
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+}
+/* Three dots: one dot plus two box-shadow copies, all in currentColor. */
+.oc-table-actions-more::before {
+  content: "";
+  inline-size: 0.2rem;
+  block-size: 0.2rem;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: -0.35rem 0 0 currentColor, 0.35rem 0 0 currentColor;
+}
+.oc-table-actions-more:hover { color: var(--oc-foreground); background: var(--oc-accent); }
+.oc-table-actions-more:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+/* While its menu is open the trigger stays highlighted (:has on the cell, popover is a sibling). */
+.oc-table-actions:has(.oc-dropdown-menu:popover-open) .oc-table-actions-more { color: var(--oc-foreground); background: var(--oc-accent); border-color: var(--oc-border); }
+
+/* The menu opens to the left side of the trigger, because the actions column sits at the row end. */
+.oc-table-actions .oc-dropdown-menu[popover] { position-area: block-end span-inline-start; min-inline-size: 11rem; text-align: start; }
+.oc-table-actions .oc-dropdown-item svg { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-table-actions-icon { transition: none; }
+}

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

@@ -1,54 +1,54 @@
-/* File: packages/ui/src/parts/app-table-compact.css | Map: wrapper (scroll, inside a card) -> header cells -> body cells (compact + striped) -> footer total -> modifiers (bordered, plain) */
-/* Table compact: a small striped table for inside cards and side panels.
-   Wrap a normal <table class="oc-table"> in <div class="oc-table-compact">. The wrapper removes the
-   outer cell borders (the card gives the frame), shrinks padding and font, and stripes the rows.
-   Numbers: data-numeric on th / td (right aligned, tabular figures; from the table component). */
-
-.oc-table-compact { inline-size: 100%; overflow-x: auto; }
-.oc-table-compact > .oc-table { font-size: 0.8125rem; border-collapse: collapse; }
-
-/* Cells: compact padding, only horizontal lines between rows. */
-.oc-table-compact > .oc-table :is(th, td) {
-  padding: 0.3rem 0.625rem;
-  border: 0;
-  border-block-end: 1px solid var(--oc-border);
-  white-space: nowrap;
-}
-.oc-table-compact > .oc-table :is(th, td):first-child { padding-inline-start: 0.75rem; }
-.oc-table-compact > .oc-table :is(th, td):last-child { padding-inline-end: 0.75rem; }
-/* Long text columns may wrap: add data-wrap to the cell. */
-.oc-table-compact > .oc-table :is(th, td)[data-wrap] { white-space: normal; }
-
-/* Header: small muted labels on a quiet background. */
-.oc-table-compact > .oc-table thead th {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--oc-muted-foreground);
-  background: var(--oc-surface);
-  border-block-end-width: 1px;
-}
-
-/* Stripes on every second body row; hover stays the table default. */
-.oc-table-compact > .oc-table tbody tr:nth-child(even) { background: var(--oc-surface); }
-.oc-table-compact > .oc-table tbody tr:last-child > td { border-block-end: 0; }
-
-/* Footer row (total): bold, with a stronger line above it. */
-.oc-table-compact > .oc-table tfoot :is(th, td) {
-  font-weight: 600;
-  color: var(--oc-foreground);
-  background: none;
-  border-block-start: 2px solid var(--oc-border);
-  border-block-end: 0;
-}
-
-/* Muted secondary text inside a cell ("per unit", sub line). */
-.oc-table-compact-muted { color: var(--oc-muted-foreground); }
-
-/* Bordered: own rounded frame (when the table is not inside a card). */
-.oc-table-compact--bordered { border: 1px solid var(--oc-border); border-radius: var(--oc-radius); background: var(--oc-card); }
-
-/* Plain: no stripes, no header background (very dense lists). */
-.oc-table-compact--plain > .oc-table tbody tr:nth-child(even),
-.oc-table-compact--plain > .oc-table thead th { background: none; }
+/* File: packages/ui/src/parts/app-table-compact.css | Map: wrapper (scroll, inside a card) -> header cells -> body cells (compact + striped) -> footer total -> modifiers (bordered, plain) */
+/* Table compact: a small striped table for inside cards and side panels.
+   Wrap a normal <table class="oc-table"> in <div class="oc-table-compact">. The wrapper removes the
+   outer cell borders (the card gives the frame), shrinks padding and font, and stripes the rows.
+   Numbers: data-numeric on th / td (right aligned, tabular figures; from the table component). */
+
+.oc-table-compact { inline-size: 100%; overflow-x: auto; }
+.oc-table-compact > .oc-table { font-size: 0.8125rem; border-collapse: collapse; }
+
+/* Cells: compact padding, only horizontal lines between rows. */
+.oc-table-compact > .oc-table :is(th, td) {
+  padding: 0.3rem 0.625rem;
+  border: 0;
+  border-block-end: 1px solid var(--oc-border);
+  white-space: nowrap;
+}
+.oc-table-compact > .oc-table :is(th, td):first-child { padding-inline-start: 0.75rem; }
+.oc-table-compact > .oc-table :is(th, td):last-child { padding-inline-end: 0.75rem; }
+/* Long text columns may wrap: add data-wrap to the cell. */
+.oc-table-compact > .oc-table :is(th, td)[data-wrap] { white-space: normal; }
+
+/* Header: small muted labels on a quiet background. */
+.oc-table-compact > .oc-table thead th {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-surface);
+  border-block-end-width: 1px;
+}
+
+/* Stripes on every second body row; hover stays the table default. */
+.oc-table-compact > .oc-table tbody tr:nth-child(even) { background: var(--oc-surface); }
+.oc-table-compact > .oc-table tbody tr:last-child > td { border-block-end: 0; }
+
+/* Footer row (total): bold, with a stronger line above it. */
+.oc-table-compact > .oc-table tfoot :is(th, td) {
+  font-weight: 600;
+  color: var(--oc-foreground);
+  background: none;
+  border-block-start: 2px solid var(--oc-border);
+  border-block-end: 0;
+}
+
+/* Muted secondary text inside a cell ("per unit", sub line). */
+.oc-table-compact-muted { color: var(--oc-muted-foreground); }
+
+/* Bordered: own rounded frame (when the table is not inside a card). */
+.oc-table-compact--bordered { border: 1px solid var(--oc-border); border-radius: var(--oc-radius); background: var(--oc-card); }
+
+/* Plain: no stripes, no header background (very dense lists). */
+.oc-table-compact--plain > .oc-table tbody tr:nth-child(even),
+.oc-table-compact--plain > .oc-table thead th { background: none; }

package/dist/parts/app-top-progress.css

@@ -1,68 +1,68 @@
-/* File: packages/ui/src/parts/app-top-progress.css | Map: bar (fixed, native progress) -> determinate value -> indeterminate animation -> color + static modifiers -> done state -> reduced motion */
-/* Top progress: thin loading bar at the very top of the page, on a native <progress> element.
-   <progress class="oc-top-progress"> without value = indeterminate (sliding glow);
-   with value="40" max="100" = determinate. Hide it with the hidden attribute or .is-done (fades out). */
-
-.oc-top-progress {
-  --oc-top-progress-color: var(--oc-primary);
-  --oc-top-progress-height: 3px;
-  position: fixed;
-  inset-block-start: 0;
-  inset-inline: 0;
-  z-index: 1000;
-  display: block;
-  inline-size: 100%;
-  block-size: var(--oc-top-progress-height);
-  margin: 0;
-  padding: 0;
-  border: 0;
-  appearance: none;
-  color: var(--oc-top-progress-color);
-  background: transparent;
-  pointer-events: none;
-  transition: opacity var(--oc-transition-normal);
-}
-
-/* Determinate value: the filled part, with a soft glow at its end. */
-.oc-top-progress::-webkit-progress-bar { background: transparent; }
-.oc-top-progress::-webkit-progress-value {
-  background: var(--oc-top-progress-color);
-  box-shadow: 0 0 8px var(--oc-top-progress-color);
-  transition: inline-size var(--oc-transition-normal);
-}
-.oc-top-progress::-moz-progress-bar { background: var(--oc-top-progress-color); box-shadow: 0 0 8px var(--oc-top-progress-color); }
-
-/* Indeterminate (no value): a segment slides from start to end, again and again. */
-.oc-top-progress:indeterminate {
-  background: linear-gradient(90deg, transparent, var(--oc-top-progress-color) 30% 70%, transparent) no-repeat;
-  background-size: 35% 100%;
-  animation: oc-top-progress-slide 1.2s ease-in-out infinite;
-}
-.oc-top-progress:indeterminate::-webkit-progress-bar { background: transparent; }
-.oc-top-progress:indeterminate::-moz-progress-bar { background: transparent; box-shadow: none; }
-@keyframes oc-top-progress-slide {
-  from { background-position: -40% 0; }
-  to { background-position: 140% 0; }
-}
-
-/* Color modifiers (theme tokens). */
-.oc-top-progress--success { --oc-top-progress-color: var(--oc-success); }
-.oc-top-progress--warning { --oc-top-progress-color: var(--oc-warning); }
-.oc-top-progress--danger { --oc-top-progress-color: var(--oc-destructive); }
-.oc-top-progress--brand { --oc-top-progress-color: var(--oc-brand-1); }
-
-/* Thicker bar. */
-.oc-top-progress--lg { --oc-top-progress-height: 4px; }
-
-/* Static: stays in the normal flow (inside a card, header or demo) instead of fixed to the window. */
-.oc-top-progress--static { position: relative; inset: auto; z-index: auto; background-color: var(--oc-surface-strong); }
-
-/* Done: fades out, then the app can remove it or set hidden. */
-.oc-top-progress.is-done { opacity: 0; }
-.oc-top-progress[hidden] { display: none; }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-top-progress:indeterminate { animation-duration: 3s; }
-  .oc-top-progress,
-  .oc-top-progress::-webkit-progress-value { transition: none; }
-}
+/* File: packages/ui/src/parts/app-top-progress.css | Map: bar (fixed, native progress) -> determinate value -> indeterminate animation -> color + static modifiers -> done state -> reduced motion */
+/* Top progress: thin loading bar at the very top of the page, on a native <progress> element.
+   <progress class="oc-top-progress"> without value = indeterminate (sliding glow);
+   with value="40" max="100" = determinate. Hide it with the hidden attribute or .is-done (fades out). */
+
+.oc-top-progress {
+  --oc-top-progress-color: var(--oc-primary);
+  --oc-top-progress-height: 3px;
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: 1000;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--oc-top-progress-height);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  color: var(--oc-top-progress-color);
+  background: transparent;
+  pointer-events: none;
+  transition: opacity var(--oc-transition-normal);
+}
+
+/* Determinate value: the filled part, with a soft glow at its end. */
+.oc-top-progress::-webkit-progress-bar { background: transparent; }
+.oc-top-progress::-webkit-progress-value {
+  background: var(--oc-top-progress-color);
+  box-shadow: 0 0 8px var(--oc-top-progress-color);
+  transition: inline-size var(--oc-transition-normal);
+}
+.oc-top-progress::-moz-progress-bar { background: var(--oc-top-progress-color); box-shadow: 0 0 8px var(--oc-top-progress-color); }
+
+/* Indeterminate (no value): a segment slides from start to end, again and again. */
+.oc-top-progress:indeterminate {
+  background: linear-gradient(90deg, transparent, var(--oc-top-progress-color) 30% 70%, transparent) no-repeat;
+  background-size: 35% 100%;
+  animation: oc-top-progress-slide 1.2s ease-in-out infinite;
+}
+.oc-top-progress:indeterminate::-webkit-progress-bar { background: transparent; }
+.oc-top-progress:indeterminate::-moz-progress-bar { background: transparent; box-shadow: none; }
+@keyframes oc-top-progress-slide {
+  from { background-position: -40% 0; }
+  to { background-position: 140% 0; }
+}
+
+/* Color modifiers (theme tokens). */
+.oc-top-progress--success { --oc-top-progress-color: var(--oc-success); }
+.oc-top-progress--warning { --oc-top-progress-color: var(--oc-warning); }
+.oc-top-progress--danger { --oc-top-progress-color: var(--oc-destructive); }
+.oc-top-progress--brand { --oc-top-progress-color: var(--oc-brand-1); }
+
+/* Thicker bar. */
+.oc-top-progress--lg { --oc-top-progress-height: 4px; }
+
+/* Static: stays in the normal flow (inside a card, header or demo) instead of fixed to the window. */
+.oc-top-progress--static { position: relative; inset: auto; z-index: auto; background-color: var(--oc-surface-strong); }
+
+/* Done: fades out, then the app can remove it or set hidden. */
+.oc-top-progress.is-done { opacity: 0; }
+.oc-top-progress[hidden] { display: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-top-progress:indeterminate { animation-duration: 3s; }
+  .oc-top-progress,
+  .oc-top-progress::-webkit-progress-value { transition: none; }
+}