@med-o/ui 0.0.0-stage → 0.3.0

package/src/slider/slider.css

@@ -0,0 +1,212 @@
+/**
+ * Slider – med.o Design System
+ *
+ *   <div class="medo-slider" [data-disabled]>
+ *     <div class="medo-slider__header"><label>Volume</label><output>40 %</output></div>
+ *     <div class="medo-slider__track">                       20 high, 10 px inset on both ends
+ *       rail (4, border/default) · ticks (2 × 6, border/strong) · fill (action/primary)
+ *       <div class="medo-slider__thumb" [data-hovered] [data-dragging] [data-focus-visible]>  20 · hit area 44
+ *     </div>
+ *     <div class="medo-slider__limits">0 · 100</div>
+ *   </div>
+ * Halo: hover 36 state/hover · pressed 40 state/pressed. Focus: 2 px focus/ring, 28 ring. Disabled 50 %.
+ */
+
+.medo-slider {
+  display: grid;
+  gap: var(--medo-space-2);
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.medo-slider[data-disabled] {
+  opacity: 0.5;
+}
+
+.medo-slider__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--medo-space-3);
+}
+
+.medo-slider__label {
+  font: var(--medo-typography-label-md);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-slider__value {
+  font: var(--medo-typography-body-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--medo-color-text-secondary);
+  white-space: nowrap;
+}
+
+/* The track is inset by 10 px, so the thumb never overflows the field; pointer positions map to it. */
+.medo-slider__track {
+  position: relative;
+  block-size: var(--medo-space-5); /* 20 */
+  margin-inline: calc(var(--medo-space-2) + var(--medo-space-0-5)); /* 10 */
+  cursor: pointer;
+}
+
+.medo-slider[data-disabled] .medo-slider__track {
+  cursor: not-allowed;
+}
+
+.medo-slider__rail,
+.medo-slider__fill {
+  position: absolute;
+  inset-block-start: 50%;
+  block-size: var(--medo-space-1); /* 4 */
+  border-radius: var(--medo-radius-full);
+  translate: 0 -50%;
+}
+
+.medo-slider__rail {
+  inset-inline: 0;
+  background-color: var(--medo-color-border-default);
+}
+
+.medo-slider__fill {
+  background-color: var(--medo-color-action-primary);
+}
+
+.medo-slider__ticks {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: calc(var(--medo-space-4)); /* 16: below the track */
+}
+
+.medo-slider__tick {
+  position: absolute;
+  inline-size: var(--medo-space-0-5);
+  block-size: var(--medo-space-1-5);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--medo-color-border-strong);
+  translate: -50% 0;
+}
+
+.medo-slider__thumb {
+  /* React Aria positions the thumb (left, top 50 %, translate -50 %). */
+  inset-block-start: 50%;
+  box-sizing: border-box;
+  inline-size: var(--medo-space-5); /* 20 */
+  block-size: var(--medo-space-5);
+  border: var(--medo-border-width-thick) solid var(--medo-color-action-primary);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--medo-color-surface-default);
+  box-shadow: var(--medo-shadow-elevation-1);
+  transition:
+    box-shadow var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+    left var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy),
+    right var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy);
+}
+
+/* 44 px hit area around the 20 px thumb. */
+.medo-slider__thumb::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--medo-space-3));
+  border-radius: var(--medo-radius-full);
+}
+
+.medo-slider__thumb[data-hovered] {
+  box-shadow:
+    0 0 0 var(--medo-space-2) var(--medo-color-state-hover),
+    var(--medo-shadow-elevation-1);
+}
+
+.medo-slider__thumb[data-dragging] {
+  box-shadow:
+    0 0 0 calc(var(--medo-space-2) + var(--medo-space-0-5)) var(--medo-color-state-pressed),
+    var(--medo-shadow-elevation-1);
+}
+
+.medo-slider__thumb[data-focus-visible] {
+  outline: var(--medo-focus-ring-width) solid var(--medo-color-focus-ring);
+  outline-offset: var(--medo-space-0-5);
+}
+
+.medo-slider__thumb[data-disabled] {
+  cursor: not-allowed;
+}
+
+/* Value bubble while dragging – the Tooltip look, above the thumb. */
+.medo-slider__bubble {
+  position: absolute;
+  inset-block-end: calc(100% + var(--medo-space-2));
+  inset-inline-start: 50%;
+  translate: -50% 0;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.medo-slider__limits {
+  display: flex;
+  justify-content: space-between;
+  font: var(--medo-typography-caption);
+  font-variant-numeric: tabular-nums;
+  color: var(--medo-color-text-secondary);
+}
+
+/* ---------- Slider field ---------- */
+
+.medo-slider-field {
+  display: grid;
+  gap: var(--medo-space-2);
+}
+
+/* Single: input 88 on the right, level with the track. */
+.medo-slider-field--single {
+  grid-template-columns: 1fr 5.5rem;
+  align-items: end;
+  gap: var(--medo-space-4);
+}
+
+.medo-slider-field__inputs {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--medo-space-2);
+}
+
+.medo-slider-field__dash {
+  color: var(--medo-color-text-secondary);
+}
+
+/* Tabular figures, so digits do not jump while the value changes. */
+.medo-number-field__control {
+  font-variant-numeric: tabular-nums;
+}
+
+/* A click on the track or a key moves thumb and fill with a snappy spring; while dragging they follow 1:1. */
+.medo-slider__fill {
+  transition:
+    inset-inline-start var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy),
+    inline-size var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy);
+}
+.medo-slider__track:has(.medo-slider__thumb[data-dragging]) :is(.medo-slider__thumb, .medo-slider__fill) {
+  transition-property: box-shadow;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .medo-slider__thumb {
+    transition: box-shadow var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-slider__fill {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-slider__fill,
+  .medo-slider__thumb {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    border-color: CanvasText;
+  }
+  .medo-slider__rail {
+    background-color: GrayText;
+  }
+}

package/src/styles.css

@@ -0,0 +1,48 @@
+/*
+ * All component styles of @med-o/ui. Needs the tokens: @import "@med-o/design-tokens/css";
+ *
+ * Cascade layers: every component style sits in the layer `components`. CSS without a layer (your app) always
+ * wins over it, whatever the specificity – no !important needed. With Tailwind v4 the utilities win as well.
+ * The first line fixes the order of the layers (the same as Tailwind v4), so it holds in any import order.
+ */
+@layer theme, base, components, utilities;
+
+@import './utils/utilities.css' layer(components);
+@import './button/button.css' layer(components);
+@import './field/field.css' layer(components);
+@import './text-field/input.css' layer(components);
+@import './checkbox/choice.css' layer(components);
+@import './switch/switch.css' layer(components);
+@import './badge/badge.css' layer(components);
+@import './tag/tag.css' layer(components);
+@import './avatar/avatar.css' layer(components);
+@import './tooltip/tooltip.css' layer(components);
+@import './progress/progress.css' layer(components);
+@import './list/list.css' layer(components);
+@import './list-view/list-view.css' layer(components);
+@import './bulk-action-bar/bulk-action-bar.css' layer(components);
+@import './empty-state/empty-state.css' layer(components);
+@import './pagination/pagination.css' layer(components);
+@import './search/search.css' layer(components);
+@import './breadcrumbs/breadcrumbs.css' layer(components);
+@import './accordion/accordion.css' layer(components);
+@import './slider/slider.css' layer(components);
+@import './toggle-button/toggle-button.css' layer(components);
+@import './listbox/listbox.css' layer(components);
+@import './select/select.css' layer(components);
+@import './combobox/combobox.css' layer(components);
+@import './bottom-sheet/bottom-sheet.css' layer(components);
+@import './menu/menu.css' layer(components);
+@import './dialog/dialog.css' layer(components);
+@import './drawer/drawer.css' layer(components);
+@import './link/link.css' layer(components);
+@import './alert/alert.css' layer(components);
+@import './toast/toast.css' layer(components);
+@import './tabs/tabs.css' layer(components);
+@import './popover/popover.css' layer(components);
+@import './navigation/navigation.css' layer(components);
+@import './card/card.css' layer(components);
+@import './table/table.css' layer(components);
+@import './upload/upload.css' layer(components);
+@import './date-time/date-time.css' layer(components);
+@import './media/media.css' layer(components);

package/src/switch/switch.css

@@ -0,0 +1,160 @@
+/**
+ * Switch – med.o Design System
+ * On / off that takes effect immediately (no submit). The label never changes with the state.
+ *
+ * State contract: [data-selected] [data-hovered] [data-focus-visible] [data-disabled] [data-readonly]
+ * Label position: start (settings lists, switch at the end) or end (forms, switch first).
+ */
+
+.medo-switch {
+  --_track-w: calc(var(--medo-space-8) + var(--medo-space-1));
+  --_track-h: var(--medo-space-5);
+  --_thumb: var(--medo-space-4);
+  --_pad: var(--medo-space-0-5);
+  --_track: var(--medo-color-action-toggle-off);
+  --_gap: var(--medo-space-2);
+
+  display: flex;
+  flex-direction: column;
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-switch--lg {
+  --_track-w: calc(var(--medo-space-10) + var(--medo-space-1));
+  --_track-h: var(--medo-space-6);
+  --_thumb: var(--medo-space-5);
+  font: var(--medo-typography-body-md);
+}
+
+.medo-switch__button {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--_gap);
+  inline-size: fit-content;
+  cursor: pointer;
+}
+
+.medo-switch--label-start .medo-switch__button {
+  --_gap: var(--medo-space-4);
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  inline-size: 100%;
+}
+
+.medo-switch__track {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  inline-size: var(--_track-w);
+  block-size: var(--_track-h);
+  padding: var(--_pad);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--_track);
+  transition: background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-switch__thumb {
+  display: grid;
+  place-items: center;
+  inline-size: var(--_thumb);
+  block-size: var(--_thumb);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--medo-color-text-on-action);
+  color: var(--_track);
+  /* The thumb moves with a snappy spring. */
+  transition:
+    transform var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy),
+    color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-switch__thumb > svg {
+  inline-size: 70%;
+  block-size: 70%;
+  stroke-width: 3;
+}
+
+.medo-switch__description {
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-switch--label-end .medo-switch__description {
+  margin-inline-start: calc(var(--_track-w) + var(--_gap));
+}
+
+/* ---------- States ---------- */
+
+.medo-switch__button[data-hovered] {
+  --_track: var(--medo-color-action-toggle-off-hover);
+}
+
+.medo-switch[data-selected] {
+  --_track: var(--medo-color-action-primary);
+}
+
+.medo-switch[data-selected] .medo-switch__button[data-hovered] {
+  --_track: var(--medo-color-action-primary-hover);
+}
+
+.medo-switch[data-selected] .medo-switch__thumb {
+  transform: translateX(calc(var(--_track-w) - var(--_thumb) - 2 * var(--_pad)));
+}
+
+.medo-switch[data-selected]:dir(rtl) .medo-switch__thumb {
+  transform: translateX(calc(-1 * (var(--_track-w) - var(--_thumb) - 2 * var(--_pad))));
+}
+
+.medo-switch__button[data-focus-visible] .medo-switch__track {
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+.medo-switch[data-disabled] {
+  --_track: var(--medo-color-border-default);
+  color: var(--medo-color-text-disabled);
+}
+
+.medo-switch[data-disabled] .medo-switch__button {
+  cursor: not-allowed;
+}
+
+.medo-switch[data-disabled] .medo-switch__thumb {
+  background-color: var(--medo-color-surface-default);
+  color: var(--medo-color-text-disabled);
+}
+
+.medo-switch[aria-busy='true'] .medo-switch__button {
+  cursor: progress;
+}
+
+.medo-switch__spinner {
+  animation: medo-switch-spin 0.8s linear infinite;
+}
+
+@keyframes medo-switch-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-switch__track {
+    border: var(--medo-border-width-thin) solid CanvasText;
+  }
+  .medo-switch[data-selected] .medo-switch__track {
+    background-color: Highlight;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: a short, plain move – the state change stays visible. */
+  .medo-switch__thumb {
+    transition:
+      transform var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+      color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-switch__spinner {
+    animation-duration: 3s;
+  }
+}

package/src/table/table.css

@@ -0,0 +1,286 @@
+/**
+ * Table – med.o Design System
+ *
+ * One look for two kinds of tables:
+ *   Static (content, docs, simple data): a native <table> – read like a table, not navigable cell by cell.
+ *     <div class="medo-table-container"><table class="medo-table">…</table></div>
+ *   Interactive (sort, select): React Aria Table (role grid) with the same classes.
+ *
+ * Text left, numbers right with tabular figures (class medo-table__cell--number or align="end").
+ * Density: standard (rows 48, header 40) · compact (rows 40, header 36).
+ *
+ * State contract (interactive rows): [data-hovered] [data-pressed] [data-selected] [data-focus-visible] [data-disabled]
+ * Sortable header: [data-allows-sorting] [data-sort-direction] (aria-sort is set too).
+ */
+
+.medo-table-container {
+  box-sizing: border-box;
+  inline-size: 100%;
+  overflow: auto;
+  border: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+  border-radius: var(--medo-radius-lg);
+  background-color: var(--medo-color-surface-default);
+}
+
+/* Without the frame, e.g. inside a card or a documentation page. */
+/* Scrolls sideways: the container takes the focus (see StaticTable), so it needs a visible ring. */
+.medo-table-container:focus-visible {
+  outline: none;
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+.medo-table-container--plain {
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.medo-table {
+  --_row: var(--medo-space-12);
+  --_head: var(--medo-space-10);
+  --_pad: var(--medo-space-4);
+
+  inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-primary);
+  text-align: start;
+}
+
+.medo-table--compact {
+  --_row: var(--medo-space-10);
+  --_head: calc(var(--medo-space-8) + var(--medo-space-1)); /* 36 */
+  --_pad: var(--medo-space-3);
+}
+
+.medo-table caption {
+  padding: var(--medo-space-3) var(--_pad);
+  font: var(--medo-typography-label-md);
+  text-align: start;
+}
+
+/* ---------- Header ---------- */
+
+.medo-table__column,
+.medo-table thead th {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+  block-size: var(--_head);
+  padding: 0 var(--_pad);
+  border-block-end: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+  background-color: var(--medo-color-surface-subtle);
+  font: var(--medo-typography-label-sm);
+  color: var(--medo-color-text-secondary);
+  text-align: start;
+  vertical-align: middle;
+  white-space: nowrap;
+  outline: none;
+}
+
+.medo-table__column[data-allows-sorting] {
+  cursor: pointer;
+  user-select: none;
+}
+
+.medo-table__column {
+  transition: color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+.medo-table__column[data-hovered] {
+  color: var(--medo-color-text-primary);
+}
+
+.medo-table__column[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring-inset);
+}
+
+.medo-table__column[aria-sort='ascending'],
+.medo-table__column[aria-sort='descending'] {
+  font: var(--medo-typography-label-sm-strong);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-table__column-inner {
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  gap: var(--medo-space-1);
+}
+
+.medo-table__sort {
+  inline-size: calc(var(--medo-space-3) + var(--medo-space-0-5)); /* 14 */
+  block-size: calc(var(--medo-space-3) + var(--medo-space-0-5));
+  stroke-width: 2.5;
+}
+
+/* Unsorted sortable columns show the arrow on hover and focus only. */
+.medo-table__sort {
+  transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+.medo-table__column:not([aria-sort='ascending'], [aria-sort='descending']) .medo-table__sort {
+  opacity: 0;
+}
+.medo-table__column:is([data-hovered], [data-focus-visible]) .medo-table__sort {
+  opacity: 1;
+}
+
+/* ---------- Rows and cells ---------- */
+
+.medo-table__row,
+.medo-table tbody tr {
+  outline: none;
+}
+
+.medo-table__cell,
+.medo-table tbody :is(td, th) {
+  block-size: var(--_row);
+  padding: var(--medo-space-2) var(--_pad);
+  border-block-end: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+  vertical-align: middle;
+  text-align: start;
+  outline: none;
+}
+
+.medo-table tbody th {
+  font-weight: var(--medo-font-weight-medium);
+}
+
+.medo-table tbody tr:last-child > *,
+.medo-table__row:last-child > .medo-table__cell {
+  border-block-end: 0;
+}
+
+/* Numbers: right, tabular, never truncated. */
+.medo-table :is(th, td, .medo-table__column, .medo-table__cell):is(.medo-table__cell--number, [data-align='end']) {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.medo-table__column[data-align='end'] .medo-table__column-inner {
+  flex-direction: row-reverse;
+}
+
+/* Skeletons in number columns sit on the right, like the numbers will. */
+.medo-table :is(.medo-table__cell--number, [data-align='end']) .medo-skeleton {
+  margin-inline-start: auto;
+}
+
+/* Utility columns (checkbox, actions, chevron) */
+.medo-table :is(.medo-table__cell--utility, .medo-table__column--utility) {
+  inline-size: var(--medo-space-12);
+  padding-inline: var(--medo-space-4) 0;
+}
+
+/* Row feedback fades; pressed shows at once, so a tap feels immediate. */
+.medo-table__row > .medo-table__cell {
+  transition: background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+.medo-table__row[data-pressed] > .medo-table__cell {
+  transition-duration: 0s;
+}
+
+.medo-table__row[data-hovered] > .medo-table__cell {
+  background-color: var(--medo-color-state-hover);
+}
+
+.medo-table__row[data-pressed] > .medo-table__cell {
+  background-color: var(--medo-color-state-pressed);
+}
+
+.medo-table__row[data-selected] > .medo-table__cell {
+  background-color: var(--medo-color-action-selected);
+}
+
+.medo-table__row[data-selected][data-hovered] > .medo-table__cell {
+  background-color: var(--medo-color-action-selected-hover);
+}
+
+.medo-table__row[data-focus-visible] > .medo-table__cell:first-child {
+  box-shadow: inset var(--medo-focus-ring-width) 0 0 var(--medo-color-focus-ring);
+}
+
+.medo-table__row[data-focus-visible] {
+  outline: var(--medo-focus-ring-width) solid var(--medo-color-focus-ring);
+  outline-offset: calc(-1 * var(--medo-focus-ring-width));
+}
+
+.medo-table__cell[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring-inset);
+}
+
+.medo-table__row[data-disabled] {
+  color: var(--medo-color-text-disabled);
+}
+
+.medo-table__row[data-href],
+.medo-table__row[data-selection-mode] {
+  cursor: pointer;
+}
+
+/* Optional zebra stripes for wide, dense data. */
+.medo-table--striped tbody tr:nth-child(even) > *,
+.medo-table--striped .medo-table__row:nth-child(even) > .medo-table__cell {
+  background-color: var(--medo-color-surface-subtle);
+}
+
+/* Empty and loading states fill the body; toolbar and header stay. */
+.medo-table__empty {
+  padding: var(--medo-space-12) var(--_pad);
+  text-align: center;
+  color: var(--medo-color-text-secondary);
+}
+
+@media (forced-colors: active) {
+  .medo-table__row[data-selected] > .medo-table__cell {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+  .medo-table__row[data-focus-visible] {
+    outline-color: Highlight;
+  }
+  .medo-table-container:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+/* ---------- Frame: toolbar – table – footer in one bordered surface ---------- */
+
+.medo-table-frame {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  overflow: hidden;
+  border: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+  border-radius: var(--medo-radius-lg);
+  background-color: var(--medo-color-surface-default);
+}
+
+.medo-table-frame--plain {
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+/* Search, filter, columns – spacer – primary action. Wraps on narrow screens. */
+.medo-table__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--medo-space-2);
+  padding: var(--medo-space-3) var(--medo-space-4);
+}
+
+.medo-table__footer {
+  padding: var(--medo-space-3) var(--medo-space-4);
+  border-block-start: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+/* Rows above the footer keep their bottom divider only between rows. */
+.medo-table-frame .medo-table__row:last-child > .medo-table__cell {
+  border-block-end: 0;
+}