@med-o/ui 0.0.0-stage → 0.3.0

package/src/list-view/list-view.css

@@ -0,0 +1,473 @@
+/**
+ * List view – med.o Design System
+ *
+ *   <div class="medo-list-view medo-list-view--plain|card" role="grid">
+ *     <div class="medo-list-row medo-list-row--lines-1|2|3 [medo-list-row--unread]" role="row">
+ *       [check] [leading] <span class="medo-list-row__main">content · meta · trailing · chevron</span>
+ *     </div>
+ *   </div>
+ * Height 48 · 64 · 88. Padding 12 vertical, 16 left, 8 right, gap 12. Inset divider: starts at the text, none after the last row.
+ * State contract: [data-hovered] [data-pressed] [data-selected] [data-focus-visible] [data-disabled] (React Aria).
+ */
+
+.medo-list-view {
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
+
+.medo-list-view--card {
+  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-list-view[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+.medo-list-view__empty {
+  padding-inline: var(--medo-space-4);
+}
+
+/* ---------- Row ---------- */
+
+.medo-list-row {
+  --_lead: var(--medo-size-control-md); /* 40 */
+
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--medo-space-3);
+  padding-inline-start: var(--medo-space-4);
+  color: var(--medo-color-text-primary);
+  cursor: default;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.medo-list-row--lines-1 {
+  --_lead: var(--medo-size-icon-lg); /* 24 */
+}
+
+.medo-list-row[data-href],
+.medo-list-row[data-allows-selection],
+.medo-list-row[data-has-action] {
+  cursor: pointer;
+}
+
+/* Row feedback fades; pressed shows at once, so a tap feels immediate. */
+.medo-list-row {
+  transition: background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+.medo-list-row[data-pressed] {
+  transition-duration: 0s;
+}
+
+.medo-list-row[data-hovered] {
+  background-color: var(--medo-color-state-hover);
+}
+
+.medo-list-row[data-pressed] {
+  background-color: var(--medo-color-state-pressed);
+}
+
+.medo-list-row[data-selected] {
+  background-color: var(--medo-color-action-selected);
+}
+
+.medo-list-row[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring-inset);
+}
+
+.medo-list-row[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 3 lines: leading and trailing top aligned. */
+.medo-list-row--lines-3 {
+  align-items: flex-start;
+}
+
+.medo-list-row__check,
+.medo-list-row__leading {
+  display: flex;
+  flex: none;
+  align-items: center;
+  padding-block: var(--medo-space-3);
+}
+
+.medo-list-row__leading > * {
+  max-inline-size: var(--_lead);
+  max-block-size: var(--_lead);
+}
+
+/* Icon tile 40 (settings). */
+.medo-list-row__icon {
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--_lead);
+  block-size: var(--_lead);
+  border-radius: var(--medo-radius-md);
+  background-color: var(--medo-color-surface-subtle);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-list-row__icon > svg {
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+}
+
+/* Main: content, meta and trailing. Its bottom border is the inset divider – it starts at the text. */
+.medo-list-row__main {
+  display: flex;
+  flex: 1;
+  align-self: stretch;
+  align-items: center;
+  gap: var(--medo-space-3);
+  min-inline-size: 0;
+  padding: var(--medo-space-3) var(--medo-space-2) var(--medo-space-3) 0;
+  border-block-end: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+.medo-list-row--lines-3 .medo-list-row__main {
+  align-items: flex-start;
+}
+
+.medo-list-row:last-child .medo-list-row__main {
+  border-block-end-color: transparent;
+}
+
+.medo-list-row__content {
+  display: grid;
+  flex: 1;
+  gap: var(--medo-space-0-5);
+  min-inline-size: 0;
+}
+
+.medo-list-row__title {
+  overflow: hidden;
+  font: var(--medo-typography-label-md);
+  color: var(--medo-color-text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.medo-list-row__description {
+  display: -webkit-box;
+  overflow: hidden;
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+}
+
+.medo-list-row--lines-3 .medo-list-row__description {
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+/* Meta stack: meta text, unread dot below (gap 6). */
+.medo-list-row__meta {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--medo-space-1-5);
+}
+
+.medo-list-row__meta-text {
+  font: var(--medo-typography-caption);
+  color: var(--medo-color-text-secondary);
+  white-space: nowrap;
+}
+
+.medo-list-row__dot {
+  inline-size: var(--medo-space-2);
+  block-size: var(--medo-space-2);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--medo-color-action-primary);
+}
+
+.medo-list-row__trailing {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--medo-space-2);
+}
+
+.medo-list-row__chevron {
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-list-row__chevron > svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* Unread: strong title and excerpt, meta in brand (never colour alone – plus the dot and hidden text). */
+.medo-list-row--unread .medo-list-row__title {
+  font: var(--medo-typography-label-md-strong);
+}
+
+.medo-list-row--unread .medo-list-row__description {
+  font: var(--medo-typography-body-sm-strong);
+}
+
+.medo-list-row--unread .medo-list-row__meta-text {
+  color: var(--medo-color-text-brand);
+}
+
+/* Loading rows. */
+.medo-list-row--loading .medo-list-row__content {
+  gap: var(--medo-space-2);
+}
+
+@media (forced-colors: active) {
+  .medo-list-row[data-selected] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  .medo-list-row__dot {
+    background-color: CanvasText;
+  }
+}
+
+/* ---------- Cards ---------- */
+
+.medo-list-view--cards {
+  gap: var(--medo-space-3);
+}
+
+.medo-list-card {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--medo-space-3);
+  padding: var(--medo-space-4);
+  border: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+  border-radius: var(--medo-radius-md);
+  background-color: var(--medo-color-surface-default);
+  color: var(--medo-color-text-primary);
+  cursor: default;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.medo-list-card[data-href],
+.medo-list-card[data-allows-selection],
+.medo-list-card[data-has-action] {
+  cursor: pointer;
+}
+
+.medo-list-card[data-hovered] {
+  background-color: var(--medo-color-state-hover);
+}
+
+.medo-list-card[data-pressed] {
+  background-color: var(--medo-color-state-pressed);
+}
+
+.medo-list-card[data-selected] {
+  border-color: var(--medo-color-action-primary);
+  background-color: var(--medo-color-action-selected);
+}
+
+.medo-list-card[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+.medo-list-card[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.medo-list-card__check {
+  display: flex;
+  flex: none;
+}
+
+.medo-list-card__content {
+  display: grid;
+  flex: 1;
+  gap: var(--medo-space-2);
+  min-inline-size: 0;
+}
+
+.medo-list-card__top,
+.medo-list-card__bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--medo-space-3);
+  min-inline-size: 0;
+}
+
+.medo-list-card__title {
+  overflow: hidden;
+  font: var(--medo-typography-label-md);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.medo-list-card__amount {
+  flex: none;
+  font: var(--medo-typography-label-md-strong);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.medo-list-card__description {
+  display: flex;
+  align-items: center;
+  gap: var(--medo-space-2);
+  min-inline-size: 0;
+  overflow: hidden;
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+  white-space: nowrap;
+}
+
+.medo-list-card__meta {
+  font: var(--medo-typography-caption);
+  font-variant-numeric: tabular-nums;
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-list-card--loading .medo-list-card__content {
+  gap: var(--medo-space-3);
+}
+
+@media (forced-colors: active) {
+  .medo-list-card[data-selected] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}
+
+/* ---------- Swipe – touch only ----------
+ *   <div class="medo-list-row medo-list-row--swipe">
+ *     <span class="medo-list-row__swipe-action --end|--start --danger|--primary" style="inline-size: |offset|">icon + label</span>
+ *     <span class="medo-list-row__surface" style="transform">…row content…</span>
+ *   </div>
+ * Action 88 wide at the edge · icon 20 + label/sm · Delete feedback/danger/solid · Archive action/primary
+ */
+
+.medo-list-row--swipe {
+  overflow: hidden;
+  padding-inline-start: 0;
+}
+
+.medo-list-row__surface {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-self: stretch;
+  align-items: center;
+  gap: var(--medo-space-3);
+  min-inline-size: 0;
+  padding-inline-start: var(--medo-space-4);
+  /* Vertical scrolling stays with the browser; horizontal moves swipe the row. */
+  touch-action: pan-y;
+  /* Settles with a smooth spring (open, closed, back). */
+  transition: transform var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth);
+}
+
+.medo-list-row--lines-3 .medo-list-row__surface {
+  align-items: flex-start;
+}
+
+.medo-list-row__surface--dragging {
+  transition: none;
+}
+
+/* A full swipe: the row leaves quickly, accelerating. */
+.medo-list-row__surface--leaving {
+  transition: transform var(--medo-motion-duration-normal) var(--medo-motion-easing-exit);
+}
+.medo-list-row:has(.medo-list-row__surface--dragging) .medo-list-row__swipe-action {
+  transition: none;
+}
+.medo-list-row:has(.medo-list-row__surface--leaving) .medo-list-row__swipe-action {
+  transition: inline-size var(--medo-motion-duration-normal) var(--medo-motion-easing-exit);
+}
+
+.medo-list-row__swipe-action {
+  /* Grows with the surface – same spring, same timing. */
+  transition: inline-size var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth);
+  position: absolute;
+  inset-block: 0;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.medo-list-row__swipe-action--end {
+  inset-inline-end: 0;
+  justify-content: flex-end;
+}
+
+.medo-list-row__swipe-action--start {
+  inset-inline-start: 0;
+  justify-content: flex-start;
+}
+
+.medo-list-row__swipe-action--danger {
+  background-color: var(--medo-color-feedback-danger-solid);
+  color: var(--medo-color-feedback-danger-on-solid);
+}
+
+.medo-list-row__swipe-action--primary {
+  background-color: var(--medo-color-action-primary);
+  color: var(--medo-color-text-on-action);
+}
+
+/* Icon and label centred in the 88 px at the edge. */
+.medo-list-row__swipe-label {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--medo-space-1);
+  inline-size: calc(var(--medo-space-20) + var(--medo-space-2)); /* 88 */
+  font: var(--medo-typography-label-sm);
+}
+
+.medo-list-row__swipe-label > svg {
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+}
+
+/* While a row is open, a tap on it closes it. */
+.medo-list-row__swipe-shield {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .medo-list-row__surface,
+  .medo-list-row__swipe-action {
+    transition-duration: var(--medo-motion-duration-fast);
+    transition-timing-function: var(--medo-motion-easing-standard);
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-list-row__swipe-action {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}

package/src/listbox/listbox.css

@@ -0,0 +1,203 @@
+/**
+ * Option & Listbox – med.o Design System
+ *
+ * The popup list behind Select, Combobox and the Bottom Sheet.
+ *   <div class="medo-popover medo-listbox-popover">
+ *     <div class="medo-listbox medo-listbox--md" role="listbox">
+ *       <section class="medo-listbox__section">
+ *         <header class="medo-listbox__header">Group</header>
+ *         <div class="medo-option" role="option">
+ *           <span class="medo-option__icon">…</span>
+ *           <span class="medo-option__content"><span class="medo-option__label">…</span><span class="medo-option__description">…</span></span>
+ *           <span class="medo-option__check">✓</span>
+ *         </div>
+ *       </section>
+ *       <section class="medo-listbox__section">…</section>   (a line divides the groups)
+ *     </div>
+ *   </div>
+ *
+ * Highlighted (keyboard or pointer) = state/hover. Selected has no fill: check (single, right) or checkbox (multi, left).
+ * State contract: [data-focused] [data-hovered] [data-selected] [data-disabled] [data-selection-mode]
+ */
+
+/* ---------- Popover (shared by Select and Combobox) ---------- */
+
+.medo-listbox-popover {
+  box-sizing: border-box;
+  min-inline-size: var(--trigger-width);
+  max-inline-size: calc(100vw - 2 * var(--medo-space-4));
+  border: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+  border-radius: var(--medo-radius-md);
+  background-color: var(--medo-color-surface-raised);
+  box-shadow: var(--medo-shadow-elevation-2);
+  z-index: var(--medo-layer-dropdown);
+  outline: none;
+  overflow: hidden;
+}
+
+/* Motion: unfolds from the field with a snappy spring and fades in; out: a quick fade. */
+.medo-listbox-popover {
+  transform-origin: var(--trigger-anchor-point, top);
+  transition:
+    opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-enter),
+    scale var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy);
+}
+.medo-listbox-popover[data-entering] {
+  opacity: 0;
+  scale: 0.98;
+}
+.medo-listbox-popover[data-exiting] {
+  opacity: 0;
+  scale: 0.98;
+  transition:
+    opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-exit),
+    scale var(--medo-motion-duration-fast) var(--medo-motion-easing-exit);
+}
+
+/* ---------- Listbox ---------- */
+
+.medo-listbox {
+  --_pad: var(--medo-space-2);
+  --_label: var(--medo-typography-body-sm);
+  --_desc: var(--medo-typography-caption);
+  --_icon: var(--medo-size-icon-sm);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--medo-space-1);
+  max-block-size: 20rem; /* 320 px, then scroll */
+  padding: var(--medo-space-1);
+  overflow: auto;
+  outline: none;
+  color: var(--medo-color-text-primary);
+}
+
+.medo-listbox--lg {
+  --_pad: var(--medo-space-3);
+  --_label: var(--medo-typography-body-md);
+  --_desc: var(--medo-typography-body-sm);
+  --_icon: var(--medo-size-icon-md);
+}
+
+.medo-listbox__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--medo-space-1);
+}
+
+.medo-listbox__header {
+  padding: var(--medo-space-2) var(--medo-space-2) var(--medo-space-1);
+  font: var(--medo-typography-overline);
+  color: var(--medo-color-text-secondary);
+}
+
+/* Divider between groups (CSS, because role=separator is not allowed inside a listbox). */
+.medo-listbox__section + .medo-listbox__section {
+  margin-block-start: var(--medo-space-1);
+  padding-block-start: var(--medo-space-1);
+  border-block-start: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+/* Empty and loading row: never an empty popup. */
+.medo-listbox__message {
+  padding: var(--_pad);
+  font: var(--_label);
+  color: var(--medo-color-text-secondary);
+}
+
+/* ---------- Option ---------- */
+
+.medo-option {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--medo-space-2);
+  padding: var(--_pad);
+  border-radius: var(--medo-radius-sm);
+  font: var(--_label);
+  color: var(--medo-color-text-primary);
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.medo-option[data-focused],
+.medo-option[data-hovered] {
+  background-color: var(--medo-color-state-hover);
+}
+
+/* Keyboard focus is the same neutral highlight (no extra ring on options). */
+
+.medo-option[data-disabled] {
+  color: var(--medo-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.medo-option__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-inline-size: 0;
+  overflow-wrap: anywhere; /* labels wrap, never truncate */
+}
+
+.medo-option__match {
+  font-weight: var(--medo-font-weight-semibold);
+}
+
+.medo-option__description {
+  font: var(--_desc);
+  color: var(--medo-color-text-secondary);
+}
+
+/* Icons and the check sit on the first line of the label. */
+.medo-option__icon,
+.medo-option__check {
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--_icon);
+  block-size: var(--_icon);
+  margin-block-start: var(--medo-space-0-5);
+}
+
+.medo-option__icon {
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-option__check {
+  color: var(--medo-color-text-brand);
+}
+
+.medo-option__icon > svg,
+.medo-option__check > svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.medo-option[data-disabled] :is(.medo-option__icon, .medo-option__check) {
+  color: var(--medo-color-text-disabled);
+}
+
+/* Multi: checkbox on the left (visual only; the option itself is the selectable element). */
+.medo-option__checkbox {
+  flex: none;
+}
+
+@media (forced-colors: active) {
+  .medo-option:is([data-focused], [data-hovered]) {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: a short cross-fade, no scaling. */
+  .medo-listbox-popover {
+    transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-listbox-popover:is([data-entering], [data-exiting]) {
+    scale: none;
+  }
+}