@wzrhine/react 0.0.0-stage → 0.2.0

package/dist/data.css

@@ -0,0 +1,600 @@
+/*
+ * WzRhineLab UI · data & navigation (M8, ADR-0005): Breadcrumb, Pagination, Progress, Meter,
+ * Stat, and DataTable loading / error / pagination states. Tokens only.
+ */
+
+:is(.rl-breadcrumb, .rl-pagination, .rl-progress, .rl-stat, .rl-table-frame) {
+  box-sizing: border-box;
+}
+
+:where(.rl-breadcrumb, .rl-pagination, .rl-progress, .rl-stat, .rl-table-frame) *,
+:where(.rl-breadcrumb, .rl-pagination, .rl-progress, .rl-stat, .rl-table-frame) *::before,
+:where(.rl-breadcrumb, .rl-pagination, .rl-progress, .rl-stat, .rl-table-frame) *::after {
+  box-sizing: border-box;
+}
+
+/* ---------- Breadcrumb ---------- */
+/* One line. If even the minimum widths do not fit (a long uncollapsed path on a phone),
+   the trail scrolls inside its own box instead of widening the page. */
+.rl-breadcrumb {
+  --rl-breadcrumb-ring: calc(var(--rl-focus-offset) + var(--rl-focus-width));
+
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: thin;
+  /* Room for focus rings inside the scroll clip; the negative margin keeps the layout unchanged. */
+  margin: calc(var(--rl-breadcrumb-ring) * -1);
+  padding: var(--rl-breadcrumb-ring);
+}
+
+.rl-breadcrumb__list {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--rl-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: var(--rl-type-mono);
+  letter-spacing: var(--rl-tracking-caps);
+  text-transform: uppercase;
+  color: var(--rl-fg-subtle);
+}
+
+.rl-breadcrumb__item {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--rl-space-2);
+  min-width: 0;
+}
+
+/* Shrinking order: long ancestors first, down to three characters + ellipsis (floor set per item
+   from its text); short or non-text ancestors never shrink (min-width: auto = their content);
+   the current item last, down to a readable minimum at the line end, where extra width is invisible. */
+.rl-breadcrumb__item:not(:last-child) {
+  flex-shrink: 0;
+}
+
+.rl-breadcrumb__item[data-shrink] {
+  flex-shrink: 4;
+  min-width: var(--rl-crumb-floor);
+}
+
+.rl-breadcrumb__item[data-shrink]:not(:first-child) {
+  /* "//" separator (two mono glyphs) and its gap are part of the item. */
+  min-width: calc(var(--rl-crumb-floor) + 1.44em + var(--rl-space-2));
+}
+
+.rl-breadcrumb__item:last-child:not(:first-child) {
+  min-width: calc(var(--rl-space-16) + var(--rl-space-6));
+}
+
+/* The expand button never shrinks or truncates. */
+.rl-breadcrumb__item[data-collapsed] {
+  flex: none;
+  min-width: 0;
+}
+
+.rl-breadcrumb__item + .rl-breadcrumb__item::before {
+  content: '//';
+  flex: none;
+  color: var(--rl-border-strong);
+}
+
+.rl-breadcrumb__link,
+.rl-breadcrumb__current {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rl-breadcrumb__link {
+  color: var(--rl-fg-muted);
+  text-decoration: none;
+  border-radius: var(--rl-radius-xs);
+}
+
+@media (hover: hover) {
+  .rl-breadcrumb__link:hover {
+    color: var(--rl-fg-primary);
+    text-decoration: underline;
+    text-underline-offset: var(--rl-space-1);
+  }
+}
+
+.rl-breadcrumb__link:focus-visible,
+.rl-breadcrumb__current:focus-visible,
+.rl-breadcrumb__expand:focus-visible {
+  outline: var(--rl-focus-ring);
+  outline-offset: var(--rl-focus-offset);
+}
+
+/* Only the current page is emphasised; other non-link items keep the list colour. */
+.rl-breadcrumb__current[aria-current='page'] {
+  color: var(--rl-fg-primary);
+}
+
+.rl-breadcrumb__current:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.rl-breadcrumb__expand {
+  display: inline-grid;
+  place-items: center;
+  min-width: var(--rl-badge-height-md);
+  min-height: var(--rl-badge-height-md);
+  margin: 0;
+  padding: 0 var(--rl-space-1);
+  border: var(--rl-border-width) solid var(--rl-border-default);
+  border-radius: var(--rl-radius-xs);
+  background: transparent;
+  color: var(--rl-fg-muted);
+  font: inherit;
+  letter-spacing: normal;
+  text-transform: none;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .rl-breadcrumb__expand:hover {
+    border-color: var(--rl-border-strong);
+    color: var(--rl-fg-primary);
+  }
+}
+
+/* ---------- Pagination ---------- */
+/* The nav is the size container; a block-level box gets its width from the parent, not its content. */
+.rl-pagination {
+  container-type: inline-size;
+  display: block;
+  min-width: 0;
+}
+
+.rl-pagination__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rl-space-2) var(--rl-space-4);
+}
+
+.rl-pagination__list {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--rl-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.rl-pagination__page,
+.rl-pagination__step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rl-space-1);
+  min-width: var(--rl-control-height-sm);
+  height: var(--rl-control-height-sm);
+  margin: 0;
+  padding: 0 var(--rl-space-2);
+  border: var(--rl-border-width) solid transparent;
+  border-radius: var(--rl-radius-sm);
+  background: transparent;
+  color: var(--rl-fg-primary);
+  font: var(--rl-type-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: normal;
+  text-transform: none;
+  cursor: pointer;
+  transition:
+    background-color var(--rl-motion-fast) var(--rl-ease-out),
+    border-color var(--rl-motion-fast) var(--rl-ease-out);
+}
+
+.rl-pagination__step {
+  font: var(--rl-type-label-sm);
+  white-space: nowrap;
+  border-color: var(--rl-border-default);
+}
+
+@media (hover: hover) {
+  :is(.rl-pagination__page, .rl-pagination__step):not(:disabled, [aria-disabled='true'], [aria-current='page']):hover {
+    background: var(--rl-bg-hover);
+    border-color: var(--rl-border-strong);
+  }
+}
+
+:is(.rl-pagination__page, .rl-pagination__step):focus-visible {
+  outline: var(--rl-focus-ring);
+  outline-offset: var(--rl-focus-offset);
+}
+
+/* Current page: inverse fill plus its own border, so it is not signalled by colour alone. */
+.rl-pagination__page[aria-current='page'] {
+  border-color: var(--rl-bg-inverse);
+  background: var(--rl-bg-inverse);
+  color: var(--rl-fg-inverse);
+  font-weight: 700;
+  cursor: default;
+}
+
+:is(.rl-pagination__page, .rl-pagination__step):disabled {
+  color: var(--rl-fg-disabled);
+  border-color: var(--rl-border-subtle);
+  cursor: not-allowed;
+}
+
+.rl-pagination[data-busy] :is(.rl-pagination__page, .rl-pagination__step) {
+  cursor: progress;
+  opacity: 0.6;
+}
+
+.rl-pagination__page[aria-current='page']:disabled {
+  border-color: var(--rl-border-strong);
+  background: var(--rl-bg-disabled);
+  color: var(--rl-fg-muted);
+}
+
+.rl-pagination__icon {
+  flex: none;
+  width: var(--rl-icon-size-md);
+  height: var(--rl-icon-size-md);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--rl-border-width-strong);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.rl-pagination__ellipsis {
+  display: inline-grid;
+  place-items: center;
+  min-width: var(--rl-space-6);
+  color: var(--rl-fg-subtle);
+  font: var(--rl-type-mono);
+}
+
+.rl-pagination__compact {
+  display: none;
+  padding: 0 var(--rl-space-2);
+  font: var(--rl-type-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--rl-fg-primary);
+  white-space: nowrap;
+}
+
+.rl-pagination__status {
+  margin: 0;
+  font: var(--rl-type-meta);
+  font-variant-numeric: tabular-nums;
+  color: var(--rl-fg-muted);
+}
+
+/* Narrow container: "‹ 上一页 · 第 n / m 页 · 下一页 ›". Container width, not viewport. */
+@container (max-width: 26rem) {
+  .rl-pagination__page-item { display: none; }
+  .rl-pagination__compact { display: block; }
+}
+
+@container (max-width: 14rem) {
+  .rl-pagination__step-label {
+    position: absolute;
+    width: var(--rl-border-width);
+    height: var(--rl-border-width);
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
+/* ---------- Progress & Meter ---------- */
+.rl-progress {
+  --rl-progress-height: var(--rl-space-2);
+  --rl-progress-fill: var(--rl-bg-inverse);
+
+  display: grid;
+  gap: var(--rl-space-2);
+  min-width: 0;
+}
+
+.rl-progress[data-size='sm'] {
+  --rl-progress-height: var(--rl-space-1);
+}
+
+.rl-progress[data-tone='accent'] { --rl-progress-fill: var(--rl-accent); }
+.rl-progress[data-tone='success'] { --rl-progress-fill: var(--rl-success); }
+.rl-progress[data-tone='warning'] { --rl-progress-fill: var(--rl-warning); }
+.rl-progress[data-tone='danger'] { --rl-progress-fill: var(--rl-danger); }
+
+.rl-progress__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--rl-space-1) var(--rl-space-3);
+  min-width: 0;
+}
+
+.rl-progress__label {
+  min-width: 0;
+  font: var(--rl-type-label);
+  color: var(--rl-fg-primary);
+  overflow-wrap: anywhere;
+}
+
+.rl-progress[data-size='sm'] .rl-progress__label {
+  font: var(--rl-type-label-sm);
+}
+
+.rl-progress__value {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--rl-space-2);
+  font: var(--rl-type-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--rl-fg-muted);
+}
+
+.rl-meter__state {
+  font: var(--rl-type-label-sm);
+  color: var(--rl-fg-primary);
+}
+
+/* Border on the track gives the 3:1 boundary; the fill alone may be lighter. */
+.rl-progress__track {
+  position: relative;
+  height: var(--rl-progress-height);
+  overflow: hidden;
+  border-radius: var(--rl-radius-round);
+  background: var(--rl-bg-subtle);
+  box-shadow: inset 0 0 0 var(--rl-border-width) var(--rl-border-default);
+}
+
+.rl-progress__indicator {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--rl-progress-fill);
+  transition: width var(--rl-motion-base) var(--rl-ease-out);
+}
+
+/* Indeterminate: a segment travelling across the track. */
+.rl-progress[data-indeterminate] .rl-progress__indicator {
+  width: 40%;
+  animation: rl-progress-travel var(--rl-motion-loop) var(--rl-ease-in-out) infinite alternate;
+}
+
+@keyframes rl-progress-travel {
+  from { translate: -100% 0; }
+  to { translate: 250% 0; }
+}
+
+.rl-progress__description {
+  margin: 0;
+  font: var(--rl-type-meta);
+  color: var(--rl-fg-muted);
+}
+
+/* ---------- Stat ---------- */
+.rl-stat {
+  --rl-stat-rule: transparent;
+
+  display: grid;
+  align-content: start;
+  gap: var(--rl-space-1);
+  min-width: 0;
+  margin: 0;
+  padding-inline-start: var(--rl-space-3);
+  border-inline-start: var(--rl-border-width-strong) solid var(--rl-stat-rule);
+}
+
+.rl-stat[data-status='success'] { --rl-stat-rule: var(--rl-success); }
+.rl-stat[data-status='warning'] { --rl-stat-rule: var(--rl-warning); }
+.rl-stat[data-status='danger'] { --rl-stat-rule: var(--rl-danger); }
+.rl-stat[data-status='info'] { --rl-stat-rule: var(--rl-info); }
+.rl-stat[data-status='neutral'] { --rl-stat-rule: var(--rl-border-strong); }
+
+.rl-stat__label {
+  font: var(--rl-type-mono);
+  letter-spacing: var(--rl-tracking-mono);
+  text-transform: uppercase;
+  color: var(--rl-fg-muted);
+  overflow-wrap: anywhere;
+}
+
+.rl-stat__value {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--rl-space-1);
+  margin: 0;
+  font: var(--rl-type-heading-2);
+  font-variant-numeric: tabular-nums;
+  color: var(--rl-fg-primary);
+}
+
+.rl-stat[data-size='sm'] .rl-stat__value { font: var(--rl-type-heading-3); }
+.rl-stat[data-size='lg'] .rl-stat__value { font: var(--rl-type-display); letter-spacing: var(--rl-tracking-display); }
+
+.rl-stat__number {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.rl-stat__value[data-empty] {
+  color: var(--rl-fg-subtle);
+}
+
+.rl-stat__unit {
+  font: var(--rl-type-body-sm);
+  color: var(--rl-fg-muted);
+}
+
+.rl-stat__delta {
+  --rl-stat-delta: var(--rl-fg-muted);
+
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--rl-space-1);
+  margin: 0;
+  font: var(--rl-type-meta);
+  color: var(--rl-fg-muted);
+}
+
+.rl-stat__delta[data-tone='success'] { --rl-stat-delta: var(--rl-success); }
+.rl-stat__delta[data-tone='warning'] { --rl-stat-delta: var(--rl-warning); }
+.rl-stat__delta[data-tone='danger'] { --rl-stat-delta: var(--rl-danger); }
+.rl-stat__delta[data-tone='info'] { --rl-stat-delta: var(--rl-info); }
+
+.rl-stat__delta-icon {
+  flex: none;
+  width: var(--rl-icon-size-sm);
+  height: var(--rl-icon-size-sm);
+  fill: none;
+  stroke: var(--rl-stat-delta);
+  stroke-width: var(--rl-border-width-strong);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.rl-stat__delta-value {
+  font: var(--rl-type-mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--rl-stat-delta);
+}
+
+.rl-stat__description {
+  margin: 0;
+  font: var(--rl-type-meta);
+  color: var(--rl-fg-muted);
+}
+
+/* ---------- DataTable states & pagination ---------- */
+.rl-table-frame {
+  display: grid;
+  gap: var(--rl-space-3);
+  min-width: 0;
+}
+
+.rl-table__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rl-space-2) var(--rl-space-4);
+  min-width: 0;
+}
+
+.rl-table__pagination {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.rl-table__selection {
+  margin: 0;
+  font: var(--rl-type-meta);
+  color: var(--rl-fg-muted);
+}
+
+/* Stale rows while the next page / sort loads: still readable, clearly not final. */
+.rl-table tbody[data-stale] {
+  opacity: 0.55;
+  transition: opacity var(--rl-motion-fast) var(--rl-ease-out);
+}
+
+/* First-load skeleton cells and the empty state render Skeleton / EmptyState (status.css). */
+
+.rl-table__loading {
+  margin: 0;
+  padding: var(--rl-space-3) var(--rl-table-cell-x);
+  font: var(--rl-type-meta);
+  color: var(--rl-fg-muted);
+}
+
+.rl-table td.rl-table__message {
+  padding: var(--rl-space-8) var(--rl-table-cell-x);
+  text-align: center;
+}
+
+.rl-table__message-body {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--rl-space-2);
+  color: var(--rl-danger);
+  font: var(--rl-type-label);
+  white-space: normal;
+}
+
+.rl-table__message .rl-button {
+  margin-inline-start: var(--rl-space-3);
+}
+
+.rl-table__message-icon {
+  flex: none;
+  width: var(--rl-icon-size-md);
+  height: var(--rl-icon-size-md);
+  margin-top: calc((1lh - var(--rl-icon-size-md)) / 2);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--rl-border-width-strong);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.rl-table__empty-action {
+  margin-top: var(--rl-space-3);
+}
+
+.rl-table__sort:disabled {
+  cursor: not-allowed;
+}
+
+/* ---------- Reduced motion ---------- */
+.rl-theme[data-rl-motion='reduce'] .rl-progress__indicator {
+  transition: none;
+}
+
+.rl-theme[data-rl-motion='reduce'] .rl-progress[data-indeterminate] .rl-progress__indicator {
+  animation: none;
+}
+
+/* Static stripes stand in for the travelling segment. */
+.rl-theme[data-rl-motion='reduce'] .rl-progress[data-indeterminate] .rl-progress__indicator {
+  width: 100%;
+  translate: none;
+  background: repeating-linear-gradient(-45deg, var(--rl-progress-fill) 0 var(--rl-space-1), transparent var(--rl-space-1) var(--rl-space-2));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rl-progress__indicator {
+    transition: none;
+  }
+
+  .rl-progress[data-indeterminate] .rl-progress__indicator {
+    width: 100%;
+    translate: none;
+    background: repeating-linear-gradient(-45deg, var(--rl-progress-fill) 0 var(--rl-space-1), transparent var(--rl-space-1) var(--rl-space-2));
+  }
+
+  .rl-progress[data-indeterminate] .rl-progress__indicator {
+    animation: none;
+  }
+}
+
+/* ---------- Forced colours (Windows High Contrast) ---------- */
+@media (forced-colors: active) {
+  .rl-pagination__page,
+  .rl-pagination__step { border-color: ButtonText; }
+  .rl-pagination__page[aria-current='page'] { border-color: Highlight; background: Highlight; color: HighlightText; }
+  :is(.rl-pagination__page, .rl-pagination__step):disabled { border-color: GrayText; color: GrayText; }
+  .rl-breadcrumb__expand { border-color: ButtonText; }
+  .rl-progress__track { border: var(--rl-border-width) solid CanvasText; }
+  .rl-progress__indicator { background: Highlight; }
+  .rl-stat { border-inline-start-color: CanvasText; }
+}

package/dist/disclosure.css

@@ -0,0 +1,93 @@
+/*
+ * WzRhineLab UI · disclosure (ADR-0010 §2): Collapsible. Imported by components.css; tokens only.
+ * Height is the only animated layout property in the library: Base UI measures the panel and
+ * writes `--collapsible-panel-height`; the transition reads it, so a toggle mid-flight reverses
+ * from the current height. Reduced motion zeroes `--rl-motion-base`, which makes it instant.
+ */
+
+.rl-collapsible {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.rl-collapsible__trigger {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--rl-space-2);
+  width: 100%;
+  min-height: var(--rl-control-height-sm);
+  margin: 0;
+  padding: var(--rl-space-1) var(--rl-space-2);
+  border: 0;
+  border-radius: var(--rl-radius-sm);
+  background: transparent;
+  color: var(--rl-fg-primary);
+  font: var(--rl-type-label-sm);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color var(--rl-motion-fast) var(--rl-ease-out);
+}
+
+.rl-collapsible__trigger:hover {
+  background: var(--rl-bg-hover);
+}
+
+.rl-collapsible__trigger:focus-visible {
+  outline: var(--rl-focus-ring);
+  outline-offset: var(--rl-focus-offset);
+}
+
+.rl-collapsible__trigger[data-disabled] {
+  color: var(--rl-fg-disabled);
+  cursor: not-allowed;
+}
+
+.rl-collapsible__label {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--rl-space-2);
+  min-width: 0;
+}
+
+.rl-collapsible__chevron {
+  flex: none;
+  width: var(--rl-icon-size-sm);
+  height: var(--rl-icon-size-sm);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  color: var(--rl-fg-muted);
+  transition: rotate var(--rl-motion-fast) var(--rl-ease-out);
+}
+
+.rl-collapsible__trigger[data-panel-open] .rl-collapsible__chevron {
+  rotate: 180deg;
+}
+
+.rl-collapsible__panel {
+  box-sizing: border-box;
+  height: var(--collapsible-panel-height);
+  overflow: hidden;
+  transition:
+    height var(--rl-motion-base) var(--rl-ease-out),
+    opacity var(--rl-motion-base) var(--rl-ease-out);
+}
+
+.rl-collapsible__panel[data-starting-style],
+.rl-collapsible__panel[data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
+
+.rl-collapsible__content {
+  min-width: 0;
+  padding: var(--rl-space-2) var(--rl-space-2) var(--rl-space-1);
+}
+
+@media (forced-colors: active) {
+  .rl-collapsible__trigger:focus-visible { outline-color: Highlight; }
+}