@birdycom/omniaui 0.12.5 → 0.13.0

package/dist/form-extras.js

@@ -0,0 +1,214 @@
+// File: packages/ui/src/form-extras.js
+// Map: ISO week -> date field (week label) -> name card (rename) -> avatar picker (preview, drop, remove) -> quantity
+//      (step buttons) -> init -> boot
+// Small behaviour for four CSS components; each works without it (native date input, <details>, file input, number input).
+// Events on the component root: oc-namecard-rename { name }, oc-avatar-change { file } (null when removed),
+// oc-avatar-invalid { file, reason } (wrong type or too large).
+
+/** ISO 8601 week of a date: { week, year } (the week with the year's first Thursday is week 1). */
+export function isoWeek(date) {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const day = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - day);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return { week: Math.ceil(((d - yearStart) / 86400000 + 1) / 7), year: d.getUTCFullYear() };
+}
+
+/** .oc-date-field: write "Week 45" (or the template in data-oc-week, e.g. "W{week} · {year}") into its __week. */
+export function bindDateField(root) {
+  const input = root.querySelector(".oc-date-field__input");
+  const out = root.querySelector(".oc-date-field__week");
+  if (!input || !out || root.dataset.ocBound) return;
+  root.dataset.ocBound = "";
+  const template = out.dataset.ocWeek || "Week {week}";
+  const show = () => {
+    const [y, m, d] = (input.value || "").split("-").map(Number);
+    if (!y) { out.textContent = ""; return; }
+    const { week, year } = isoWeek(new Date(y, m - 1, d));
+    out.textContent = template.replace("{week}", String(week)).replace("{year}", String(year));
+  };
+  input.addEventListener("input", show);
+  input.addEventListener("change", show);
+  show();
+}
+
+/** .oc-name-card: the [data-oc-rename] button swaps the title for an input; Enter or blur saves, Escape cancels. */
+export function bindNameCard(root) {
+  const head = root.querySelector(":scope > .oc-name-card__head");
+  const title = head?.querySelector(".oc-name-card__title");
+  const button = head?.querySelector("[data-oc-rename]");
+  if (!title || !button || root.dataset.ocBound) return;
+  root.dataset.ocBound = "";
+  const input = document.createElement("input");
+  input.className = "oc-name-card__input";
+  input.hidden = true;
+  input.setAttribute("aria-label", button.getAttribute("aria-label") || "Name");
+  title.after(input);
+  const finish = (save) => {
+    if (input.hidden) return;
+    const name = input.value.trim();
+    if (save && name && name !== title.textContent) {
+      title.textContent = name;
+      root.dispatchEvent(new CustomEvent("oc-namecard-rename", { bubbles: true, detail: { name } }));
+    }
+    input.hidden = true;
+    title.hidden = false;
+    button.focus();
+  };
+  button.addEventListener("click", (event) => {
+    event.preventDefault(); // a button in <summary> would also toggle the card
+    input.value = title.textContent.trim();
+    title.hidden = true;
+    input.hidden = false;
+    input.focus();
+    input.select();
+  });
+  // Typing in the input must not toggle the card (Space and Enter in a <summary>).
+  input.addEventListener("click", (event) => event.preventDefault());
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") { event.preventDefault(); finish(true); }
+    if (event.key === "Escape") { event.preventDefault(); finish(false); }
+    if (event.key === " ") event.stopPropagation();
+  });
+  input.addEventListener("keyup", (event) => { if (event.key === " ") event.preventDefault(); });
+  input.addEventListener("blur", () => finish(true));
+}
+
+/** Does file match an accept list ("image/*", "image/png,.svg")? An empty list accepts images only. */
+export function acceptsFile(file, accept = "image/*") {
+  if (!file) return false;
+  const rules = (accept || "image/*").split(",").map((r) => r.trim().toLowerCase()).filter(Boolean);
+  const type = (file.type || "").toLowerCase();
+  const name = (file.name || "").toLowerCase();
+  return rules.some((r) => (r.startsWith(".") ? name.endsWith(r) : r.endsWith("/*") ? type.startsWith(r.slice(0, -1)) : type === r));
+}
+
+/** .oc-avatar-picker: preview the chosen or dropped image; [data-oc-avatar-remove] goes back to the initials.
+ *  A file that does not match the input's accept (a PDF picked through "All files") or is larger than
+ *  data-oc-max-kb is refused: the input is cleared and .oc-avatar-picker__error says why (oc-avatar-invalid). */
+export function bindAvatarPicker(root) {
+  const preview = root.querySelector(".oc-avatar-picker__preview");
+  const file = root.querySelector(".oc-avatar-picker__file");
+  if (!preview || !file || root.dataset.ocBound) return;
+  root.dataset.ocBound = "";
+  const initials = preview.querySelector("[data-oc-initials]") || null;
+  let url = "";
+  const error = (text) => {
+    let box = root.querySelector(".oc-avatar-picker__error");
+    if (!box && text) {
+      box = document.createElement("span");
+      box.className = "oc-avatar-picker__error";
+      box.setAttribute("role", "alert");
+      (root.querySelector(".oc-avatar-picker__text") || root).append(box);
+    }
+    if (box) { box.textContent = text; box.hidden = !text; }
+    root.classList.toggle("is-invalid", Boolean(text));
+  };
+  const show = (picked) => {
+    if (url) URL.revokeObjectURL(url);
+    url = "";
+    preview.querySelector("img")?.remove();
+    if (initials) initials.hidden = Boolean(picked);
+    if (picked) {
+      url = URL.createObjectURL(picked);
+      const img = document.createElement("img");
+      img.src = url;
+      img.alt = "";
+      preview.prepend(img);
+    }
+    root.dispatchEvent(new CustomEvent("oc-avatar-change", { bubbles: true, detail: { file: picked || null } }));
+  };
+  const take = (picked) => {
+    if (!picked) return show(null);
+    const maxKb = Number(root.dataset.ocMaxKb || 0);
+    const reason = !acceptsFile(picked, file.accept) ? (root.dataset.ocTypeError || "This file is not an image. Choose a PNG, JPG, WebP or SVG.")
+      : maxKb && picked.size > maxKb * 1024 ? (root.dataset.ocSizeError || `This image is larger than ${maxKb >= 1024 ? `${Math.round(maxKb / 102.4) / 10} MB` : `${maxKb} KB`}.`) : "";
+    if (reason) {
+      file.value = "";
+      error(reason);
+      root.dispatchEvent(new CustomEvent("oc-avatar-invalid", { bubbles: true, detail: { file: picked, reason } }));
+      return;
+    }
+    error("");
+    show(picked);
+  };
+  file.addEventListener("change", () => take(file.files?.[0] || null));
+  root.addEventListener("click", (event) => {
+    if (event.target.closest("[data-oc-avatar-upload]")) file.click();
+    if (event.target.closest("[data-oc-avatar-remove]")) { file.value = ""; error(""); show(null); }
+  });
+  root.addEventListener("dragover", (event) => { event.preventDefault(); root.classList.add("is-dragover"); });
+  root.addEventListener("dragleave", () => root.classList.remove("is-dragover"));
+  root.addEventListener("drop", (event) => {
+    event.preventDefault();
+    root.classList.remove("is-dragover");
+    const picked = event.dataTransfer?.files?.[0];
+    if (!picked) return;
+    // A dropped file never reaches the input, so put it there for the form (where the browser allows it).
+    if (acceptsFile(picked, file.accept)) try { const dt = new DataTransfer(); dt.items.add(picked); file.files = dt.files; } catch { /* old browsers */ }
+    take(picked);
+  });
+}
+
+/** Next value of a quantity: one step (data-oc-step = -1 or 1) within min and max, on the step grid. */
+export function stepQuantity(value, direction, { min = -Infinity, max = Infinity, step = 1 } = {}) {
+  const size = step > 0 ? step : 1;
+  const base = Number.isFinite(min) ? min : 0;
+  const current = Number.isFinite(value) ? value : base;
+  // Off the step grid (2.5 with step 1), the first step lands on the grid: 3 up, 2 down.
+  const k = (current - base) / size;
+  const onGrid = Math.abs(k - Math.round(k)) < 1e-9;
+  const next = onGrid ? current + direction * size : base + (direction > 0 ? Math.ceil(k) : Math.floor(k)) * size;
+  return Math.min(max, Math.max(min, Number(next.toFixed(6))));
+}
+
+/** .oc-quantity: the [data-oc-step] buttons change the number input and disable themselves at min / max. */
+export function bindQuantity(root) {
+  const input = root.querySelector(".oc-quantity__input");
+  if (!input || root.dataset.ocBound) return;
+  root.dataset.ocBound = "";
+  const num = (attr, fallback) => (input.getAttribute(attr) === null || input.getAttribute(attr) === "" ? fallback : Number(input.getAttribute(attr)));
+  const limits = () => ({ min: num("min", -Infinity), max: num("max", Infinity), step: num("step", 1) });
+  const sync = () => {
+    const { min, max } = limits();
+    const value = Number(input.value);
+    root.querySelectorAll("[data-oc-step]").forEach((button) => {
+      const down = Number(button.dataset.ocStep) < 0;
+      button.disabled = input.disabled || (down ? value <= min : value >= max);
+    });
+  };
+  root.addEventListener("click", (event) => {
+    const button = event.target.closest("[data-oc-step]");
+    if (!button || !root.contains(button) || input.disabled || input.readOnly) return;
+    const next = stepQuantity(Number(input.value), Number(button.dataset.ocStep) < 0 ? -1 : 1, limits());
+    if (String(next) === input.value) return;
+    input.value = String(next);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+  input.addEventListener("input", sync);
+  input.addEventListener("change", sync);
+  sync();
+}
+
+/** Wire every date field, name card, avatar picker and quantity field under scope. */
+export function initFormExtras(scope = document) {
+  scope.querySelectorAll(".oc-date-field").forEach(bindDateField);
+  scope.querySelectorAll(".oc-name-card").forEach(bindNameCard);
+  scope.querySelectorAll(".oc-avatar-picker").forEach(bindAvatarPicker);
+  scope.querySelectorAll(".oc-quantity").forEach(bindQuantity);
+}
+
+// Starts on its own as /js/oc-form-extras.js (`npx omniaui copy-js`), with ?auto in the URL or data-oc-auto on the tag.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-form-extras") || /[?&]auto(=|&|$)/.test(url)) return true;
+  const file = url.split(/[?#]/)[0];
+  return [...document.querySelectorAll("script[data-oc-auto][src]")].some((s) => s.src.split(/[?#]/)[0] === file);
+}
+if (autoStart()) {
+  const boot = () => initFormExtras(document);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+}

package/dist/lazy.d.ts

@@ -0,0 +1,5 @@
+// File: packages/ui/src/lazy.d.ts
+// Types for the lazy image script.
+
+export function watchLazy(img: HTMLImageElement): void;
+export function initLazy(scope?: ParentNode): void;

package/dist/lazy.js

@@ -0,0 +1,37 @@
+// File: packages/ui/src/lazy.js
+// Map: mark one image (loaded / error) -> bind every .oc-lazy -> boot
+// Lazy images: <figure class="oc-lazy"><img loading="lazy" …></figure>. The browser loads the image when it comes near
+// the screen; this script only adds .is-loaded (the photo fades in over the placeholder) or .is-error. Without it the
+// image simply shows when it is there.
+
+/** Mark the .oc-lazy box of one image as loaded or failed, now or when the image finishes. */
+export function watchLazy(img) {
+  const box = img.closest(".oc-lazy");
+  if (!box || box.dataset.ocBound) return;
+  box.dataset.ocBound = "";
+  const done = () => box.classList.add(img.naturalWidth ? "is-loaded" : "is-error");
+  if (img.complete) done();
+  else {
+    img.addEventListener("load", done, { once: true });
+    img.addEventListener("error", () => box.classList.add("is-error"), { once: true });
+  }
+}
+
+/** Watch every lazy image under scope. */
+export function initLazy(scope = document) {
+  scope.querySelectorAll(".oc-lazy img").forEach(watchLazy);
+}
+
+// Starts on its own as /js/oc-lazy.js (`npx omniaui copy-js`), with ?auto in the URL or data-oc-auto on the tag.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-lazy") || /[?&]auto(=|&|$)/.test(url)) return true;
+  const file = url.split(/[?#]/)[0];
+  return [...document.querySelectorAll("script[data-oc-auto][src]")].some((s) => s.src.split(/[?#]/)[0] === file);
+}
+if (autoStart()) {
+  const boot = () => initLazy(document);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+}

package/dist/oc-theme.css

@@ -1,4 +1,4 @@
-/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.5. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.13.0. Do not edit. */
 /* Semantic theme tokens: every color is light-dark() of an Omnia palette token (oc-colors.css). */
 /* Same source as the desktop export: npx omniacss tokens --format json|dtcg|python */
 :root {
@@ -14,6 +14,7 @@
   --oc-foreground: light-dark(var(--color-duskblue-60), var(--color-frostblue-10));
   --oc-muted: light-dark(var(--color-frostblue-60), var(--color-shallowblue-50));
   --oc-muted-foreground: light-dark(var(--color-stormblue-40), var(--color-mistblue-70));
+  --oc-subtle-foreground: light-dark(var(--color-stormblue-10), var(--color-mistblue-95));
   --oc-card: light-dark(var(--color-white-50), var(--color-shallowblue-70));
   --oc-popover: light-dark(var(--color-white-50), var(--color-shallowblue-60));
   --oc-popover-foreground: var(--oc-foreground);
@@ -58,6 +59,7 @@
   --oc-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --oc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Cantarell, "Helvetica Neue", sans-serif;
   --oc-font-mono: "Cascadia Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
+  --oc-font-display: system-ui, -apple-system, "Segoe UI", Roboto, Cantarell, "Helvetica Neue", sans-serif;
 
   /* Shadows (x y blur spread; color + alpha per mode in --oc-shadow-<name>-color) */
   --oc-shadow-sm-color: light-dark(oklch(from var(--color-stormblue-50) l c h / 0.08), oklch(from var(--color-black-50) l c h / 0.4));

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

@@ -0,0 +1,38 @@
+/* File: packages/ui/src/parts/app-data-table-footer.css | Map: footer grid (count, rows per page, pager) -> page buttons -> narrow screens */
+/* Footer of the list table (app-data-table.css): the count on the left, rows per page in the middle, the pager on the right. */
+
+/* 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); }
+
+@media (max-width: 40rem) {
+  .oc-data-table-footer { grid-template-columns: 1fr; }
+  .oc-data-table-pager { justify-content: flex-start; }
+}

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

@@ -0,0 +1,161 @@
+/* File: packages/ui/src/parts/app-data-table-rich.css | Map: control height -> header (sort icons, columns) -> type tabs -> filter row -> name, truncate and count cells -> card fields */
+/* The rich relations list on top of app-data-table.css: tabs that filter a column, filter selects with an icon,
+   rich cells and the label/value lines of the card view. Behaviour: data-oc-col-filter in src/data-table.js. */
+
+/* Every control is 2rem high: search, filter selects, trash pills, icon buttons, rows per page and the pager. */
+.oc-data-table :is(.oc-data-table-toolbar, .oc-data-table-filters, .oc-data-table-footer) :is(.oc-input, .oc-select) { block-size: 2rem; padding-block: 0; font-size: 0.8125rem; }
+.oc-data-table .oc-data-table-page { min-block-size: 2rem; }
+.oc-data-table :is(.oc-data-table-toolbar, .oc-data-table-filters, thead) .oc-btn--icon { --oc-btn-square: 2rem; }
+.oc-data-table-toolbar .oc-filter-pill {
+  display: inline-flex;
+  align-items: center;
+  block-size: 2rem;
+  padding-inline: 0.625rem;
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+
+/* Header: the sort mark only on the sorted column (and on hover); the actions header holds the column button. */
+/* The sort mark always keeps its 1rem, so sorting another column never moves the header: empty while unsorted,
+   faint chevrons on hover, the accent sort icon on the sorted column. */
+:is(.oc-data-table, .oc-block-datatable) th:has(.oc-table-sort) { cursor: pointer; }
+:is(.oc-data-table, .oc-block-datatable) th .oc-table-sort::after { content: ""; flex-shrink: 0; inline-size: 1rem; block-size: 1rem; opacity: 1; }
+:is(.oc-data-table, .oc-block-datatable) th:not([aria-sort]):hover .oc-table-sort::after {
+  background: var(--oc-muted-foreground);
+  opacity: 0.6;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+/* Sorted column: a bold label and a sort icon in the accent color. aria-sort on a header in the HTML
+   is the column sorted when the page opens. */
+:is(.oc-data-table, .oc-block-datatable) th[aria-sort] .oc-table-sort { color: var(--oc-foreground); }
+:is(.oc-data-table, .oc-block-datatable) th[aria-sort] .oc-table-sort::after {
+  content: "";
+  inline-size: 1rem;
+  block-size: 1rem;
+  opacity: 1;
+  background: var(--oc-primary);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 17h3l-4 4l-4-4h3V3h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 17h3l-4 4l-4-4h3V3h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+:is(.oc-data-table, .oc-block-datatable) th[aria-sort="descending"] .oc-table-sort::after {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 7h3l-4-4l-4 4h3v14h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 7h3l-4-4l-4 4h3v14h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E");
+}
+.oc-data-table th[data-oc-col="actions"] .oc-data-table-th { justify-content: flex-end; gap: 0.5rem; font-weight: 500; color: var(--oc-muted-foreground); }
+.oc-data-table td[data-oc-col="actions"] { text-align: end; }
+/* Row actions per status: data-oc-when="active" (edit, view) only on live rows, data-oc-when="deleted" (restore,
+   delete permanently) only on rows in the trash. */
+.oc-data-table tr[data-oc-status="deleted"] [data-oc-when="active"],
+.oc-data-table tr:not([data-oc-status="deleted"]) [data-oc-when="deleted"] { display: none; }
+/* The column chooser in the actions header: a large plain icon (1.75rem), no button frame. */
+.oc-data-table-columns-btn { font-size: 1.75rem; }
+.oc-data-table-columns-btn > :is(svg, iconify-icon) { font-size: 1em; inline-size: 1em; block-size: 1em; }
+
+/* Tabs above the toolbar (All / Customers / Companies …): icon, label and a count; they filter one column. */
+.oc-data-table-tabs { display: flex; inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
+.oc-data-table-tabs .oc-tab-trigger { flex-shrink: 0; }
+.oc-data-table-tabs .oc-tab-trigger { display: inline-flex; align-items: center; gap: 0.4rem; }
+.oc-data-table-tabs .oc-tab-trigger :is(svg, iconify-icon) { font-size: 1.1em; inline-size: 1.1em; block-size: 1.1em; }
+.oc-data-table-tabs .oc-tab-trigger[aria-selected="true"] { color: var(--oc-primary); border-bottom-color: var(--oc-primary); }
+.oc-data-table-tab-count {
+  min-inline-size: 1.25rem;
+  padding: 0 0.375rem;
+  font-size: 0.6875rem;
+  line-height: 1.125rem;
+  text-align: center;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-muted);
+  border-radius: 999px;
+}
+.oc-data-table-tabs [aria-selected="true"] .oc-data-table-tab-count { color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.12); }
+/* A count in the color of its type (the same tone as the type badge in the table). */
+.oc-data-table-tab-count:is(.oc-data-table-tab-count--success, .oc-data-table-tab-count--info, .oc-data-table-tab-count--warning) {
+  color: var(--oc-tab-tone);
+  background: oklch(from var(--oc-tab-tone) l c h / 0.12);
+  box-shadow: inset 0 0 0 1px oklch(from var(--oc-tab-tone) l c h / 0.35);
+}
+.oc-data-table-tab-count--success { --oc-tab-tone: var(--oc-success); }
+.oc-data-table-tab-count--info { --oc-tab-tone: var(--oc-info, light-dark(var(--color-deepskyblue-70), var(--color-skyblue-50))); }
+.oc-data-table-tab-count--warning { --oc-tab-tone: var(--oc-warning); }
+
+/* Filter row: selects with a leading icon (status, type …) and the column button on the right. */
+.oc-data-table-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.oc-data-table-filters[hidden] { display: none; }
+.oc-data-table-filters > :last-child:is(.oc-btn) { margin-inline-start: auto; }
+.oc-data-table-filter { position: relative; display: inline-flex; align-items: center; }
+.oc-data-table-filter > :is(svg, iconify-icon) {
+  position: absolute;
+  inset-inline-start: 0.625rem;
+  font-size: 1rem;
+  inline-size: 1rem;
+  block-size: 1rem;
+  color: var(--oc-muted-foreground);
+  pointer-events: none;
+}
+.oc-data-table-filter > .oc-select { inline-size: auto; min-inline-size: 11rem; padding-inline-start: 2.125rem; }
+
+/* Cells. Name: avatar, name with a badge, and a muted second line (VAT number, e-mail …). */
+.oc-data-table-name { display: flex; align-items: center; gap: 0.625rem; min-inline-size: 0; }
+.oc-data-table-name .oc-avatar { inline-size: 2.25rem; block-size: 2.25rem; font-size: 0.75rem; }
+.oc-data-table-name-text { display: grid; min-inline-size: 0; }
+.oc-data-table-name-line { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; }
+.oc-data-table-name-sub { font-size: 0.75rem; color: var(--oc-muted-foreground); }
+/* One line with an ellipsis; put the full text in title="". */
+.oc-data-table-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: var(--oc-data-table-truncate, 18rem); }
+/* A count that opens the related list (projects, invoices …); muted while it is 0. */
+.oc-data-table-count { font-variant-numeric: tabular-nums; }
+.oc-data-table-count[data-count="0"] { color: var(--oc-muted-foreground); opacity: 0.75; }
+/* The sort is visible in the header (icon, bold label); the summary line is for screen readers only. */
+.oc-data-table-sort-summary {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.oc-data-table-file { display: none; }
+
+/* The other visible columns as label / value lines, and the row actions at the bottom. */
+.oc-data-table-card-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0; font-size: 0.8125rem; }
+.oc-data-table-card-fields dt { color: var(--oc-muted-foreground); }
+.oc-data-table-card-fields dd { margin: 0; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-data-table-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; margin-block-start: auto; }
+
+/* Code cells (article numbers, SKUs): monospace and a step smaller. */
+.oc-data-table-code { font-family: var(--oc-font-mono); font-size: 0.75rem; }
+
+/* Version 2, ".oc-data-table--bordered": a tinted header row, a line between the columns and the
+   sort chevrons always visible; the filter select has its icon in a zone of its own. The rest is the same table. */
+.oc-data-table.oc-data-table--bordered .oc-table :is(th, td) { border-inline-end: 1px solid var(--oc-border); }
+.oc-data-table.oc-data-table--bordered .oc-table :is(th, td):last-child { border-inline-end: 0; }
+.oc-data-table.oc-data-table--bordered .oc-table thead th {
+  font-weight: 500;
+  background: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 4%);
+}
+.oc-data-table.oc-data-table--bordered .oc-table thead th[data-oc-col="actions"] {
+  background: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 4%);
+}
+.oc-data-table--bordered td[data-oc-col="actions"] { text-align: center; }
+.oc-data-table--bordered th[data-oc-col="actions"] .oc-data-table-th { justify-content: center; }
+.oc-data-table--bordered th:not([aria-sort]) .oc-table-sort::after,
+.oc-data-table--bordered th:not([aria-sort]):hover .oc-table-sort::after {
+  content: "";
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+  opacity: 0.5;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+.oc-data-table--bordered .oc-data-table-filter::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 2rem;
+  inline-size: 1px;
+  background: var(--oc-border);
+  pointer-events: none;
+}
+.oc-data-table--bordered .oc-data-table-filter > .oc-select { padding-inline-start: 2.75rem; }