@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/styles/data.css

@@ -0,0 +1,474 @@
+/* data — component CSS owned by the data group. Tokens only. */
+
+/* ------------------------------------------------------------------ */
+/* Table                                                               */
+/* ------------------------------------------------------------------ */
+
+/* Opaque header/pinned-cell fill: never blurred (glass budget X10), never see-through. */
+.ui-table {
+  --table-head-bg: color-mix(in oklab, var(--surface) 92%, var(--scene));
+  --table-pin-bg: color-mix(in oklab, var(--surface) 96%, var(--scene));
+}
+.ui-table > thead > tr > th {
+  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
+  border-bottom: 1px solid var(--line);
+}
+.ui-table[data-bordered="rows"] > tbody > tr:not(:last-child) > *,
+.ui-table[data-bordered="grid"] > tbody > tr:not(:last-child) > * {
+  border-bottom: 1px solid var(--line);
+}
+.ui-table[data-bordered="grid"] :is(th, td):not(:last-child) {
+  border-inline-end: 1px solid var(--line);
+}
+.ui-table > tfoot > tr > * {
+  border-top: 1px solid var(--line);
+  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
+}
+.ui-table[data-striped] > tbody > tr:nth-child(even) > * {
+  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
+}
+.ui-table[data-hover] > tbody > tr:not([data-slot="table-empty"]):hover > * {
+  background: var(--hover);
+}
+.ui-table > tbody > tr[data-state="selected"] > * {
+  background: var(--selected);
+}
+.ui-table > tbody > tr[data-disabled] > * {
+  color: var(--fg-subtle);
+}
+.ui-table > tbody > tr[data-highlighted] > :first-child {
+  box-shadow: inset calc(2px * var(--dir)) 0 0 var(--accent-ink);
+}
+
+/* Sticky header: opaque mix (and only the header row may carry a light blur). */
+.ui-table[data-sticky-header] > thead > tr > th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--table-head-bg);
+}
+.ui-table[data-sticky-column] > * > tr > :first-child {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  background: var(--table-pin-bg);
+  box-shadow: inset calc(-1px * var(--dir)) 0 0 var(--line);
+}
+.ui-table[data-sticky-column] > tbody > tr:hover > :first-child {
+  background: color-mix(in oklab, var(--table-pin-bg), var(--fg) 4%);
+}
+.ui-table[data-sticky-header][data-sticky-column] > thead > tr > :first-child {
+  z-index: 3;
+  background: var(--table-head-bg);
+}
+
+/* Edge fades on a scrolling TableContainer (scroll-driven, no JS; inactive when nothing overflows). */
+@property --table-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --table-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@keyframes ui-table-fade {
+  0% { --table-fade-start: 0px; --table-fade-end: 28px; }
+  8%, 92% { --table-fade-start: 28px; --table-fade-end: 28px; }
+  100% { --table-fade-start: 28px; --table-fade-end: 0px; }
+}
+@supports (animation-timeline: scroll()) {
+  .ui-table-scroll {
+    animation: ui-table-fade linear both;
+    animation-timeline: scroll(self inline);
+    mask-image: linear-gradient(to right, transparent 0, #000 var(--table-fade-start), #000 calc(100% - var(--table-fade-end)), transparent 100%);
+  }
+  [dir="rtl"] .ui-table-scroll,
+  .ui-table-scroll[dir="rtl"] {
+    mask-image: linear-gradient(to left, transparent 0, #000 var(--table-fade-start), #000 calc(100% - var(--table-fade-end)), transparent 100%);
+  }
+}
+@supports (animation-timeline: scroll()) {
+  /* A pinned first column must never fade out. */
+  .ui-table-scroll:has(> [data-sticky-column]) {
+    mask-image: linear-gradient(to right, #000 calc(100% - var(--table-fade-end)), transparent 100%);
+  }
+  [dir="rtl"] .ui-table-scroll:has(> [data-sticky-column]) {
+    mask-image: linear-gradient(to left, #000 calc(100% - var(--table-fade-end)), transparent 100%);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Description list                                                    */
+/* ------------------------------------------------------------------ */
+
+.ui-dl > .ui-dl-row {
+  display: grid;
+  gap: 0.25rem 1rem;
+  min-width: 0;
+  align-items: baseline;
+}
+.ui-dl > .ui-dl-row > dt {
+  color: var(--fg-muted);
+  min-width: 0;
+}
+.ui-dl > .ui-dl-row > dd {
+  margin: 0;
+  min-width: 0;
+  color: var(--fg);
+}
+.ui-dl[data-layout="horizontal"] > .ui-dl-row,
+.ui-dl[data-layout="vertical"] > .ui-dl-row {
+  padding-block: calc(var(--row-h) * 0.22);
+}
+.ui-dl[data-size="sm"][data-layout="horizontal"] > .ui-dl-row,
+.ui-dl[data-size="sm"][data-layout="vertical"] > .ui-dl-row {
+  padding-block: calc(var(--row-h) * 0.14);
+}
+.ui-dl[data-layout="grid"] > .ui-dl-row > dt,
+.ui-dl[data-layout="vertical"] > .ui-dl-row > dt {
+  font-size: 0.923em;
+}
+.ui-dl[data-divided] > .ui-dl-row:not(:last-child) {
+  border-bottom: 1px solid var(--line);
+}
+.ui-dl[data-divided][data-layout="grid"] > .ui-dl-row {
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 0.875rem;
+}
+/* Horizontal: label column + value column once the list is wide enough. */
+@container dl (min-width: 28rem) {
+  .ui-dl[data-layout="horizontal"] > .ui-dl-row {
+    grid-template-columns: var(--dl-label-w, 11rem) minmax(0, 1fr);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Activity timeline                                                   */
+/* ------------------------------------------------------------------ */
+
+@keyframes ui-timeline-new {
+  from { background-color: var(--accent-soft); }
+  to { background-color: transparent; }
+}
+[data-slot="timeline-item"][data-highlight] > [data-slot="timeline-content"] {
+  border-radius: var(--radius-ui-sm, 6px);
+  margin-inline: -0.375rem;
+  padding-inline: 0.375rem;
+}
+@media (prefers-reduced-motion: no-preference) {
+  [data-slot="timeline-item"][data-highlight] > [data-slot="timeline-content"] {
+    animation: ui-timeline-new 2.4s ease-out both;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Data Table                                                          */
+/* ------------------------------------------------------------------ */
+
+.ui-dt {
+  container: dt / inline-size;
+}
+.ui-dt[data-variant="flush"] {
+  background: transparent;
+}
+/* Pinned cells: opaque (never blurred, X10), a hairline + soft shadow on the inner edge. */
+.ui-dt-table :is(th, td)[data-pinned] {
+  background: var(--table-pin-bg);
+}
+.ui-dt-table > thead > tr > th[data-pinned] {
+  background: var(--table-head-bg);
+}
+.ui-dt-table > tbody > tr:hover > td[data-pinned] {
+  background: color-mix(in oklab, var(--table-pin-bg), var(--fg) 3%);
+}
+.ui-dt-table > tbody > tr[data-state="selected"] > td[data-pinned] {
+  background: color-mix(in oklab, var(--table-pin-bg), var(--accent-ink) 7%);
+}
+.ui-dt-table :is(th, td)[data-pinned="start"][data-pin-edge] {
+  box-shadow: inset calc(-1px * var(--dir)) 0 0 var(--line), calc(6px * var(--dir)) 0 8px -6px rgb(0 0 0 / 0.12);
+}
+.ui-dt-table :is(th, td)[data-pinned="end"][data-pin-edge] {
+  box-shadow: inset calc(1px * var(--dir)) 0 0 var(--line), calc(-6px * var(--dir)) 0 8px -6px rgb(0 0 0 / 0.12);
+}
+
+/* Resize handle: a 9px hit area with a 2px rule that lights up while dragging or focused. */
+.ui-dt-resize {
+  position: absolute;
+  inset-block: 0.5rem;
+  inset-inline-end: -4px;
+  width: 9px;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+  z-index: 5;
+  outline: none;
+}
+.ui-dt-resize::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 3.5px;
+  width: 2px;
+  border-radius: 2px;
+  background: transparent;
+  transition: background-color 120ms;
+}
+th:hover > .ui-dt-resize::after {
+  background: var(--line);
+}
+.ui-dt-resize:hover::after,
+.ui-dt-resize:focus-visible::after,
+.ui-dt-resize[data-resizing]::after {
+  background: var(--accent-ink);
+}
+
+/* Editable cells: a faint field border on hover, saving / error states. */
+.ui-dt-editable {
+  box-shadow: inset 0 0 0 1px transparent;
+  transition: box-shadow 120ms, background-color 120ms;
+}
+.ui-dt-editable:hover {
+  box-shadow: inset 0 0 0 1px var(--field-border);
+  background: var(--field);
+}
+.ui-dt-table td[data-status="saving"] {
+  color: var(--fg-muted);
+}
+.ui-dt-table td[data-status="error"] {
+  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 70%, transparent);
+  background: color-mix(in srgb, var(--danger) 6%, transparent);
+}
+.ui-dt-table td[data-editing] {
+  overflow: visible;
+  z-index: 3;
+}
+/* Grid navigation focus. */
+.ui-dt-table [role="gridcell"]:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+/* Refreshing: thin indeterminate bar over the header (data stays visible). */
+@keyframes ui-dt-refresh {
+  from { transform: translateX(calc(-100% * var(--dir))); }
+  to { transform: translateX(calc(250% * var(--dir))); }
+}
+.ui-dt-refresh {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  height: 2px;
+  z-index: 6;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--accent-ink) 14%, transparent);
+}
+.ui-dt-refresh::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 40%;
+  background: var(--accent-ink);
+  animation: ui-dt-refresh 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ui-dt-refresh::after {
+    animation: none;
+    width: 100%;
+    opacity: 0.6;
+  }
+}
+
+/* Bulk bar: the selected count reads as the accent moment; on narrow cards it floats at the bottom. */
+@container dt (max-width: 639px) {
+  .ui-dt[data-layout="cards"] .ui-dt-toolbar:has(> .ui-dt-bulk) {
+    position: sticky;
+    bottom: 0.75rem;
+    z-index: var(--z-sticky);
+    margin: 0 0.75rem;
+    border: 1px solid var(--popover-border);
+    border-radius: var(--radius);
+    background: var(--popover);
+    box-shadow: var(--popover-shadow);
+    order: 10;
+  }
+}
+
+/* Mobile cards: hover tint like table rows. */
+.ui-dt-card:hover {
+  background: color-mix(in srgb, var(--surface-2), var(--fg) 3%);
+}
+.ui-dt-card[data-state="selected"] {
+  background: var(--selected);
+  border-color: color-mix(in srgb, var(--accent-ink) 30%, var(--line));
+}
+
+/* ------------------------------------------------------------------ */
+/* Attachment list                                                      */
+/* ------------------------------------------------------------------ */
+
+.ui-attachment-progress[data-indeterminate] > span {
+  width: 35%;
+  animation: ui-attachment-indeterminate 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+@keyframes ui-attachment-indeterminate {
+  from { inset-inline-start: -35%; }
+  to { inset-inline-start: 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ui-attachment-progress[data-indeterminate] > span {
+    animation: none;
+    width: 100%;
+    opacity: 0.45;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Diff view (Version history, Audit log)                               */
+/* Panels are surface-2 — never blurred. Colour is paired with +/− and <ins>/<del>. */
+/* ------------------------------------------------------------------ */
+
+.ui-diff {
+  --diff-add: color-mix(in srgb, var(--success) 13%, transparent);
+  --diff-del: color-mix(in srgb, var(--danger) 12%, transparent);
+  --diff-add-word: color-mix(in srgb, var(--success) 30%, transparent);
+  --diff-del-word: color-mix(in srgb, var(--danger) 28%, transparent);
+  --diff-no-w: 2.75rem;
+}
+.ui-diff-body {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  overflow-x: auto;
+  max-height: var(--diff-max-h, none);
+  overflow-y: auto;
+}
+.ui-diff-line {
+  display: grid;
+  grid-template-columns: auto auto 1.25rem minmax(0, 1fr);
+  align-items: start;
+  min-width: max-content;
+}
+.ui-diff[data-wrap] .ui-diff-line { min-width: 0; }
+.ui-diff:not([data-numbers]) .ui-diff-line { grid-template-columns: 1.25rem minmax(0, 1fr); }
+.ui-diff-split .ui-diff-line { grid-template-columns: auto 1.25rem minmax(0, 1fr); }
+.ui-diff:not([data-numbers]) .ui-diff-split .ui-diff-line { grid-template-columns: 1.25rem minmax(0, 1fr); }
+.ui-diff-no {
+  width: var(--diff-no-w);
+  padding-inline: 0.5rem;
+  text-align: end;
+  color: var(--fg-subtle);
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+  border-inline-end: 1px solid var(--line);
+}
+.ui-diff-marker {
+  text-align: center;
+  user-select: none;
+  color: var(--fg-subtle);
+}
+.ui-diff-text {
+  padding-inline-end: 0.75rem;
+  white-space: pre;
+  color: var(--fg);
+}
+.ui-diff[data-wrap] .ui-diff-text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.ui-diff-text ins,
+.ui-diff-text del,
+ins.ui-diff-text,
+del.ui-diff-text { text-decoration: none; }
+.ui-diff-line[data-type="add"] { background: var(--diff-add); }
+.ui-diff-line[data-type="del"] { background: var(--diff-del); }
+.ui-diff-line[data-type="add"] .ui-diff-marker { color: var(--success); font-weight: 600; }
+.ui-diff-line[data-type="del"] .ui-diff-marker { color: var(--danger); font-weight: 600; }
+.ui-diff-line[data-type="add"] .ui-diff-no { box-shadow: inset calc(-2px * var(--dir, 1)) 0 0 var(--success); }
+.ui-diff-line[data-type="del"] .ui-diff-no { box-shadow: inset calc(-2px * var(--dir, 1)) 0 0 var(--danger); }
+.ui-diff-line[data-type="empty"] {
+  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--fg) 3%, transparent) 6px 7px);
+}
+.ui-diff-text ins[data-word] { background: var(--diff-add-word); border-radius: 2px; }
+.ui-diff-text del[data-word] { background: var(--diff-del-word); border-radius: 2px; }
+[data-current] > .ui-diff-line,
+.ui-diff-line[data-current] { box-shadow: inset calc(3px * var(--dir, 1)) 0 0 var(--accent-ink); }
+.ui-diff-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+.ui-diff-split > .ui-diff-line:first-child { border-inline-end: 1px solid var(--line); }
+.ui-diff-head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  font-family: var(--font-ui);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fg-muted);
+  background: color-mix(in oklab, var(--surface-2) 94%, var(--scene));
+  border-bottom: 1px solid var(--line);
+}
+.ui-diff-head > span { padding: 0.35rem 0.75rem; }
+.ui-diff-head > span:first-child { border-inline-end: 1px solid var(--line); }
+.ui-diff-gap {
+  border-block: 1px solid var(--line);
+  background: color-mix(in srgb, var(--fg) 3%, transparent);
+}
+.ui-diff-gap > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  padding: 0.25rem 0.75rem;
+  font-family: var(--font-ui);
+  font-size: 11.5px;
+  color: var(--fg-muted);
+  cursor: pointer;
+}
+.ui-diff-gap > button:hover { color: var(--fg); background: var(--hover); }
+
+/* Field diff */
+.ui-field-diff :is(th, td) {
+  padding: 0.55rem 0.75rem;
+  text-align: start;
+  vertical-align: top;
+  border-bottom: 1px solid var(--line);
+}
+.ui-field-diff tbody tr:last-child > * { border-bottom: 0; }
+.ui-field-diff thead th {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fg-muted);
+  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
+}
+.ui-field-diff tbody th { width: 28%; font-weight: 500; color: var(--fg); }
+.ui-field-diff td { color: var(--fg); }
+.ui-field-diff td > del {
+  text-decoration: line-through;
+  text-decoration-color: color-mix(in srgb, var(--danger) 70%, transparent);
+  color: var(--fg-muted);
+  background: color-mix(in srgb, var(--danger) 9%, transparent);
+  border-radius: 3px;
+  padding: 0 0.2em;
+}
+.ui-field-diff td > ins {
+  text-decoration: none;
+  background: color-mix(in srgb, var(--success) 13%, transparent);
+  border-radius: 3px;
+  padding: 0 0.2em;
+}
+.ui-field-diff td > .ui-diff { margin: -0.25rem -0.5rem; }
+
+/* ------------------------------------------------------------------ */
+/* Audit log                                                            */
+/* ------------------------------------------------------------------ */
+
+.ui-audit {
+  --audit-head-bg: color-mix(in oklab, var(--surface) 94%, var(--scene));
+}
+.ui-audit-table { border-collapse: separate; border-spacing: 0; }
+.ui-audit-table > thead > tr > th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--audit-head-bg);
+  border-bottom: 1px solid var(--line);
+}
+.ui-audit-table > tbody > tr > td { border-bottom: 1px solid var(--line); }
+.ui-audit-table > tbody[data-expanded] > tr:first-child > td { border-bottom-color: transparent; background: var(--selected); }
+.ui-audit-table > tbody > tr[data-slot="audit-row"]:hover > td { background: var(--hover); }
+.ui-audit-table > tbody[data-severity="critical"] > tr:first-child > td:first-child { box-shadow: inset calc(2px * var(--dir, 1)) 0 0 var(--danger); }
+.ui-audit-table > tbody[data-severity="warning"] > tr:first-child > td:first-child { box-shadow: inset calc(2px * var(--dir, 1)) 0 0 var(--warning); }
+.ui-audit-table > tbody > tr[data-slot="audit-detail"] > td { background: color-mix(in srgb, var(--selected) 55%, transparent); }