@wzrhine/react 0.0.0-stage → 0.1.0

package/dist/components.css

@@ -0,0 +1,632 @@
+/*
+ * WzRhineLab UI · component styles
+ * Requires @wzrhine/tokens/styles.css and a `.rl-theme` ancestor.
+ * Only `rl-` classes are targeted; host elements and :root stay untouched.
+ * No literal colours, spacing or radii here: everything resolves to --rl-* tokens.
+ */
+
+@import './reset.css';
+@import './overlays.css';
+@import './feedback.css';
+@import './archive.css';
+@import './forms.css';
+@import './data.css';
+@import './drawer.css';
+@import './status.css';
+@import './disclosure.css';
+@import './advanced.css';
+@import './command.css';
+@import './split.css';
+
+/* Component roots use class specificity so a host `* { box-sizing }` loaded later cannot win. */
+:is(.rl-button, .rl-icon-button, .rl-surface, .rl-badge, .rl-text, .rl-field, .rl-input, .rl-tabs, .rl-tooltip, .rl-dialog, .rl-select, .rl-select__popup, .rl-popover, .rl-menu, .rl-toast, .rl-record, .rl-meta, .rl-status, .rl-archive-card, .rl-timeline, .rl-table-scroll, .rl-table) {
+  box-sizing: border-box;
+}
+
+:where(.rl-button, .rl-icon-button, .rl-surface, .rl-badge, .rl-field, .rl-input) *,
+:where(.rl-button, .rl-icon-button, .rl-surface, .rl-badge, .rl-field, .rl-input) *::before,
+:where(.rl-button, .rl-icon-button, .rl-surface, .rl-badge, .rl-field, .rl-input) *::after {
+  box-sizing: border-box;
+}
+
+/* ---------- Button ---------- */
+.rl-button {
+  --rl-button-bg: var(--rl-bg-surface);
+  --rl-button-fg: var(--rl-fg-primary);
+  --rl-button-border: var(--rl-border-strong);
+  --rl-button-bg-hover: var(--rl-bg-hover);
+  --rl-button-bg-pressed: var(--rl-bg-pressed);
+  --rl-button-border-hover: var(--rl-fg-primary);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  max-width: 100%;
+  min-height: var(--rl-control-height-md);
+  padding: 0 var(--rl-control-padding-x-md);
+  margin: 0;
+  appearance: none;
+  border: var(--rl-border-width) solid var(--rl-button-border);
+  border-radius: var(--rl-radius-sm);
+  background: var(--rl-button-bg);
+  color: var(--rl-button-fg);
+  font: var(--rl-type-label);
+  letter-spacing: 0;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--rl-motion-fast) var(--rl-ease-out),
+    border-color var(--rl-motion-fast) var(--rl-ease-out),
+    color var(--rl-motion-fast) var(--rl-ease-out);
+}
+
+.rl-button[data-size='sm'] {
+  min-height: var(--rl-control-height-sm);
+  padding: 0 var(--rl-control-padding-x-sm);
+  font: var(--rl-type-label-sm);
+}
+
+.rl-button[data-size='lg'] {
+  min-height: var(--rl-control-height-lg);
+  padding: 0 var(--rl-control-padding-x-lg);
+}
+
+.rl-button[data-variant='primary'] {
+  --rl-button-bg: var(--rl-bg-inverse);
+  --rl-button-fg: var(--rl-fg-inverse);
+  --rl-button-border: var(--rl-bg-inverse);
+  --rl-button-bg-hover: var(--rl-inverse-hover);
+  --rl-button-bg-pressed: var(--rl-inverse-hover);
+  --rl-button-border-hover: var(--rl-inverse-hover);
+}
+
+.rl-button[data-variant='accent'] {
+  --rl-button-bg: var(--rl-accent);
+  --rl-button-fg: var(--rl-fg-on-accent);
+  --rl-button-border: var(--rl-accent);
+  --rl-button-bg-hover: var(--rl-accent-hover);
+  --rl-button-bg-pressed: var(--rl-accent-hover);
+  --rl-button-border-hover: var(--rl-accent-hover);
+}
+
+.rl-button[data-variant='ghost'] {
+  --rl-button-bg: transparent;
+  --rl-button-border: transparent;
+  --rl-button-border-hover: transparent;
+}
+
+@media (hover: hover) {
+  .rl-button:not(:disabled, [aria-disabled='true']):hover {
+    background: var(--rl-button-bg-hover);
+    border-color: var(--rl-button-border-hover);
+  }
+}
+
+.rl-button:not(:disabled, [aria-disabled='true']):active {
+  background: var(--rl-button-bg-pressed);
+}
+
+.rl-button:focus-visible {
+  outline: var(--rl-focus-ring);
+  outline-offset: var(--rl-focus-offset);
+}
+
+.rl-button:disabled {
+  --rl-button-bg: var(--rl-bg-disabled);
+  --rl-button-fg: var(--rl-fg-disabled);
+  --rl-button-border: var(--rl-border-default);
+  cursor: not-allowed;
+}
+
+.rl-button[data-variant='ghost']:disabled {
+  --rl-button-bg: transparent;
+  --rl-button-border: transparent;
+}
+
+.rl-button[data-loading] {
+  cursor: progress;
+}
+
+.rl-button__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rl-control-gap);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.rl-button__label {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.rl-button__icon {
+  display: inline-flex;
+  flex: none;
+  width: var(--rl-icon-size-md);
+  height: var(--rl-icon-size-md);
+}
+
+.rl-button[data-size='sm'] .rl-button__icon {
+  width: var(--rl-icon-size-sm);
+  height: var(--rl-icon-size-sm);
+}
+
+.rl-button[data-size='lg'] .rl-button__icon {
+  width: var(--rl-icon-size-lg);
+  height: var(--rl-icon-size-lg);
+}
+
+.rl-button__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Spinner overlays the hidden label, so loading never changes the button width. */
+.rl-button__spinner {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+/* The spinner itself is the public Spinner (status.css). */
+
+/* ---------- Surface ---------- */
+.rl-surface {
+  display: block;
+  min-width: 0;
+  padding: var(--rl-surface-padding);
+  border: var(--rl-border-width) solid transparent;
+  border-radius: var(--rl-radius-sm);
+  background: var(--rl-bg-surface);
+  color: var(--rl-fg-primary);
+}
+
+.rl-surface[data-bordered] {
+  border-color: var(--rl-border-subtle);
+}
+
+.rl-surface[data-tone='subtle'] {
+  background: var(--rl-bg-subtle);
+}
+
+.rl-surface[data-tone='raised'] {
+  background: var(--rl-bg-raised);
+  box-shadow: var(--rl-shadow-raised);
+}
+
+.rl-surface[data-padding='none'] {
+  padding: 0;
+}
+
+.rl-surface[data-padding='sm'] {
+  padding: var(--rl-space-4);
+}
+
+.rl-surface[data-padding='lg'] {
+  padding: var(--rl-space-8);
+}
+
+/* ---------- StatusBadge ---------- */
+.rl-badge {
+  --rl-badge-fg: var(--rl-fg-primary);
+  --rl-badge-bg: var(--rl-bg-subtle);
+  --rl-badge-border: transparent;
+  --rl-badge-indicator: var(--rl-fg-muted);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rl-space-2);
+  max-width: 100%;
+  min-height: var(--rl-badge-height-md);
+  padding: 0 var(--rl-space-2);
+  border: var(--rl-border-width) solid var(--rl-badge-border);
+  border-radius: var(--rl-radius-xs);
+  background: var(--rl-badge-bg);
+  color: var(--rl-badge-fg);
+  font: var(--rl-type-meta);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.rl-badge[data-size='sm'] {
+  min-height: var(--rl-badge-height-sm);
+  gap: var(--rl-space-1);
+}
+
+.rl-badge__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rl-badge[data-status='info'] { --rl-badge-fg: var(--rl-info); --rl-badge-bg: var(--rl-info-subtle); --rl-badge-indicator: var(--rl-info); }
+.rl-badge[data-status='success'] { --rl-badge-fg: var(--rl-success); --rl-badge-bg: var(--rl-success-subtle); --rl-badge-indicator: var(--rl-success); }
+.rl-badge[data-status='warning'] { --rl-badge-fg: var(--rl-warning); --rl-badge-bg: var(--rl-warning-subtle); --rl-badge-indicator: var(--rl-warning); }
+.rl-badge[data-status='danger'] { --rl-badge-fg: var(--rl-danger); --rl-badge-bg: var(--rl-danger-subtle); --rl-badge-indicator: var(--rl-danger); }
+
+.rl-badge[data-appearance='outline'] {
+  --rl-badge-fg: var(--rl-fg-primary);
+  --rl-badge-bg: var(--rl-bg-surface);
+  --rl-badge-border: var(--rl-border-default);
+}
+
+/* Indicator shape differs per status so the state is not conveyed by colour alone. */
+.rl-badge__indicator {
+  flex: none;
+  width: var(--rl-indicator-size);
+  height: var(--rl-indicator-size);
+  border-radius: var(--rl-radius-round);
+  background: var(--rl-badge-indicator);
+}
+
+.rl-badge[data-status='neutral'] .rl-badge__indicator {
+  background: transparent;
+  box-shadow: inset 0 0 0 var(--rl-border-width-strong) var(--rl-badge-indicator);
+}
+
+.rl-badge[data-status='warning'] .rl-badge__indicator {
+  border-radius: 0;
+  transform: rotate(45deg) scale(0.85);
+}
+
+.rl-badge[data-status='danger'] .rl-badge__indicator {
+  border-radius: 0;
+}
+
+/* ---------- Text ---------- */
+.rl-text {
+  margin: 0;
+  color: var(--rl-text-tone, inherit);
+  overflow-wrap: break-word;
+}
+
+.rl-text[data-variant='display'] { font: var(--rl-type-display); letter-spacing: var(--rl-tracking-display); }
+.rl-text[data-variant='heading-1'] { font: var(--rl-type-heading-1); letter-spacing: var(--rl-tracking-display); }
+.rl-text[data-variant='heading-2'] { font: var(--rl-type-heading-2); }
+.rl-text[data-variant='heading-3'] { font: var(--rl-type-heading-3); }
+.rl-text[data-variant='body'] { font: var(--rl-type-body); }
+.rl-text[data-variant='body-sm'] { font: var(--rl-type-body-sm); }
+.rl-text[data-variant='label'] { font: var(--rl-type-label); }
+.rl-text[data-variant='meta'] { font: var(--rl-type-meta); }
+.rl-text[data-variant='mono'] { font: var(--rl-type-mono); letter-spacing: var(--rl-tracking-mono); }
+
+/* Archive-style index label: mono, uppercase, tracked. Never for Chinese body copy. */
+.rl-text[data-variant='eyebrow'] {
+  font: var(--rl-type-mono);
+  letter-spacing: var(--rl-tracking-caps);
+  text-transform: uppercase;
+}
+
+.rl-text[data-tone='primary'] { --rl-text-tone: var(--rl-fg-primary); }
+.rl-text[data-tone='muted'] { --rl-text-tone: var(--rl-fg-muted); }
+.rl-text[data-tone='subtle'] { --rl-text-tone: var(--rl-fg-subtle); }
+.rl-text[data-tone='accent'] { --rl-text-tone: var(--rl-accent-text); }
+.rl-text[data-tone='danger'] { --rl-text-tone: var(--rl-danger); }
+.rl-text[data-tone='success'] { --rl-text-tone: var(--rl-success); }
+.rl-text[data-tone='warning'] { --rl-text-tone: var(--rl-warning); }
+.rl-text[data-tone='info'] { --rl-text-tone: var(--rl-info); }
+
+.rl-text[data-truncate] {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rl-text[data-numeric] {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- IconButton ---------- */
+.rl-icon-button {
+  --rl-icon-button-size: var(--rl-control-height-md);
+  --rl-icon-button-bg: transparent;
+  --rl-icon-button-fg: var(--rl-fg-primary);
+  --rl-icon-button-border: transparent;
+  --rl-icon-button-bg-hover: var(--rl-bg-hover);
+
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: var(--rl-icon-button-size);
+  height: var(--rl-icon-button-size);
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  border: var(--rl-border-width) solid var(--rl-icon-button-border);
+  border-radius: var(--rl-radius-sm);
+  background: var(--rl-icon-button-bg);
+  color: var(--rl-icon-button-fg);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--rl-motion-fast) var(--rl-ease-out),
+    border-color var(--rl-motion-fast) var(--rl-ease-out),
+    color var(--rl-motion-fast) var(--rl-ease-out);
+}
+
+.rl-icon-button[data-size='sm'] { --rl-icon-button-size: var(--rl-control-height-sm); }
+.rl-icon-button[data-size='lg'] { --rl-icon-button-size: var(--rl-control-height-lg); }
+
+.rl-icon-button[data-variant='secondary'] {
+  --rl-icon-button-bg: var(--rl-bg-surface);
+  --rl-icon-button-border: var(--rl-border-strong);
+}
+
+.rl-icon-button[data-variant='primary'] {
+  --rl-icon-button-bg: var(--rl-bg-inverse);
+  --rl-icon-button-fg: var(--rl-fg-inverse);
+  --rl-icon-button-border: var(--rl-bg-inverse);
+  --rl-icon-button-bg-hover: var(--rl-inverse-hover);
+}
+
+@media (hover: hover) {
+  .rl-icon-button:not(:disabled):hover {
+    background: var(--rl-icon-button-bg-hover);
+  }
+}
+
+.rl-icon-button:not(:disabled):active {
+  background: var(--rl-bg-pressed);
+}
+
+.rl-icon-button[data-variant='primary']:not(:disabled):active {
+  background: var(--rl-inverse-hover);
+}
+
+/* Pressed (toggle on) is a distinct state from hover and focus: inset ink rule + accent-subtle fill. */
+.rl-icon-button[aria-pressed='true'] {
+  --rl-icon-button-bg: var(--rl-accent-subtle);
+  --rl-icon-button-bg-hover: var(--rl-accent-subtle);
+  --rl-icon-button-border: var(--rl-fg-primary);
+}
+
+.rl-icon-button:focus-visible {
+  outline: var(--rl-focus-ring);
+  outline-offset: var(--rl-focus-offset);
+}
+
+.rl-icon-button:disabled {
+  --rl-icon-button-fg: var(--rl-fg-disabled);
+  --rl-icon-button-bg: transparent;
+  cursor: not-allowed;
+}
+
+.rl-icon-button[data-variant='secondary']:disabled,
+.rl-icon-button[data-variant='primary']:disabled {
+  --rl-icon-button-bg: var(--rl-bg-disabled);
+  --rl-icon-button-border: var(--rl-border-default);
+}
+
+.rl-icon-button__icon {
+  display: inline-flex;
+  width: var(--rl-icon-size-lg);
+  height: var(--rl-icon-size-lg);
+  pointer-events: none;
+}
+
+.rl-icon-button[data-size='sm'] .rl-icon-button__icon {
+  width: var(--rl-icon-size-md);
+  height: var(--rl-icon-size-md);
+}
+
+.rl-icon-button__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ---------- Field ---------- */
+.rl-field {
+  display: grid;
+  gap: var(--rl-space-2);
+  min-width: 0;
+}
+
+.rl-field[data-layout='inline'] {
+  grid-template-columns: minmax(0, var(--rl-field-label-width)) minmax(0, 1fr);
+  align-items: start;
+  column-gap: var(--rl-space-4);
+}
+
+.rl-field[data-layout='inline'] > .rl-field__label {
+  /* Align label text with the first line of the control. */
+  min-height: var(--rl-control-height-md);
+  align-items: center;
+}
+
+.rl-field__label {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--rl-space-1);
+  font: var(--rl-type-label);
+  color: var(--rl-fg-primary);
+}
+
+.rl-field[data-disabled] .rl-field__label {
+  color: var(--rl-fg-muted);
+}
+
+.rl-field__required {
+  color: var(--rl-danger);
+}
+
+.rl-field__optional {
+  font: var(--rl-type-meta);
+  color: var(--rl-fg-muted);
+}
+
+.rl-field__body {
+  display: grid;
+  gap: var(--rl-space-2);
+  min-width: 0;
+}
+
+.rl-field__description {
+  margin: 0;
+  font: var(--rl-type-meta);
+  color: var(--rl-fg-muted);
+}
+
+.rl-field__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rl-space-2);
+  margin: 0;
+  font: var(--rl-type-meta);
+  font-weight: 600;
+  color: var(--rl-danger);
+}
+
+/* Icon + text, never colour alone. */
+.rl-field__error-icon {
+  flex: none;
+  width: var(--rl-icon-size-sm);
+  height: var(--rl-icon-size-sm);
+  /* Optical alignment with the 18px meta line box. */
+  margin-top: calc((var(--rl-space-4) + var(--rl-border-width-strong) - var(--rl-icon-size-sm)) / 2);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--rl-border-width-strong);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ---------- Input ---------- */
+.rl-input {
+  --rl-input-border: var(--rl-border-strong);
+  --rl-input-bg: var(--rl-bg-surface);
+  --rl-input-height: var(--rl-control-height-md);
+  --rl-input-padding-x: var(--rl-space-3);
+
+  display: flex;
+  align-items: center;
+  gap: var(--rl-space-2);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--rl-input-height);
+  padding: 0 var(--rl-input-padding-x);
+  border: var(--rl-border-width) solid var(--rl-input-border);
+  border-radius: var(--rl-radius-md);
+  background: var(--rl-input-bg);
+  color: var(--rl-fg-primary);
+  cursor: text;
+  transition:
+    border-color var(--rl-motion-fast) var(--rl-ease-out),
+    background-color var(--rl-motion-fast) var(--rl-ease-out);
+}
+
+.rl-input[data-size='sm'] {
+  --rl-input-height: var(--rl-control-height-sm);
+  --rl-input-padding-x: var(--rl-space-2);
+}
+
+.rl-input[data-size='lg'] {
+  --rl-input-height: var(--rl-control-height-lg);
+  --rl-input-padding-x: var(--rl-space-4);
+}
+
+@media (hover: hover) {
+  .rl-input:not([data-disabled], [data-readonly]):hover {
+    --rl-input-border: var(--rl-fg-muted);
+  }
+}
+
+/* Focus ring sits on the wrapper so adornments are inside the ring. */
+.rl-input:focus-within {
+  --rl-input-border: var(--rl-fg-primary);
+  outline: var(--rl-focus-ring);
+  outline-offset: var(--rl-focus-offset);
+}
+
+.rl-input[data-invalid],
+.rl-field[data-invalid] .rl-input {
+  --rl-input-border: var(--rl-danger);
+  box-shadow: inset 0 0 0 var(--rl-border-width) var(--rl-danger);
+}
+
+.rl-input[data-readonly] {
+  --rl-input-bg: var(--rl-bg-readonly);
+  --rl-input-border: var(--rl-border-default);
+  cursor: default;
+}
+
+.rl-input[data-disabled] {
+  --rl-input-bg: var(--rl-bg-disabled);
+  --rl-input-border: var(--rl-border-default);
+  color: var(--rl-fg-disabled);
+  cursor: not-allowed;
+}
+
+.rl-input__control {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  height: calc(var(--rl-input-height) - var(--rl-border-width) * 2);
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: var(--rl-type-body-sm);
+  cursor: inherit;
+}
+
+.rl-input[data-size='lg'] .rl-input__control {
+  font: var(--rl-type-body);
+}
+
+/* Mono values read at control size, not the 12px meta size. */
+.rl-input[data-mono] .rl-input__control {
+  font-family: var(--rl-font-mono);
+  letter-spacing: var(--rl-tracking-mono);
+}
+
+.rl-input__control::placeholder {
+  color: var(--rl-fg-subtle);
+  opacity: 1;
+}
+
+.rl-input__adornment {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--rl-fg-muted);
+  font: var(--rl-type-mono);
+}
+
+.rl-input__adornment > svg {
+  width: var(--rl-icon-size-md);
+  height: var(--rl-icon-size-md);
+}
+
+/* ---------- Forced colours (Windows High Contrast) ---------- */
+@media (forced-colors: active) {
+  .rl-button,
+  .rl-icon-button[data-variant='secondary'] { border-color: ButtonText; }
+  .rl-button:disabled,
+  .rl-icon-button:disabled { border-color: GrayText; color: GrayText; }
+  .rl-button:focus-visible,
+  .rl-icon-button:focus-visible,
+  .rl-input:focus-within { outline-color: Highlight; }
+  .rl-icon-button[aria-pressed='true'] { border-color: Highlight; }
+  .rl-badge { border-color: CanvasText; }
+  .rl-badge__indicator { background: CanvasText; }
+  .rl-surface[data-bordered] { border-color: CanvasText; }
+  .rl-input { border-color: FieldText; }
+  .rl-input[data-invalid],
+  .rl-field[data-invalid] .rl-input { border-color: Mark; }
+}