@med-o/ui 0.0.0-stage → 0.3.0

package/src/dialog/dialog.css

@@ -0,0 +1,319 @@
+/**
+ * Dialog – med.o Design System
+ *
+ *   <div class="medo-dialog-overlay">                          scrim, overlay/scrim, centers the dialog
+ *     <div class="medo-dialog medo-dialog--md">                 surface/raised, border, elevation/4, radius/lg
+ *       <section class="medo-dialog__dialog" role="dialog" [data-scrolled]>
+ *         <div class="medo-dialog__header">  heading (title + description) · close X  </div>
+ *         <div class="medo-dialog__body">…only this scrolls…</div>
+ *         <div class="medo-dialog__footer">  Button group (footer)  </div>
+ *       </section>
+ *     </div>
+ *   </div>
+ * Sizes: sm 400 · md 560 · lg 720 · Alert dialog 400. Max height: viewport − 2 × 32.
+ * Fullscreen (mobile forms): .medo-dialog--fullscreen with .medo-dialog__bar (Cancel · title · action).
+ * Alert dialog: .medo-alert-dialog--{danger|warning|info} with .medo-alert-dialog__icon / __text.
+ * State contract: [data-entering] [data-exiting] on overlay and dialog (React Aria), [data-scrolled] on the section.
+ */
+
+.medo-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--medo-layer-modal);
+  display: grid;
+  place-items: center;
+  padding: var(--medo-space-8);
+  background-color: var(--medo-color-overlay-scrim);
+}
+
+.medo-dialog {
+  --_width: 35rem; /* md 560 */
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: min(var(--_width), 100%);
+  max-block-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-raised);
+  box-shadow: var(--medo-shadow-elevation-4);
+  color: var(--medo-color-text-primary);
+  outline: none;
+}
+
+.medo-dialog--sm,
+.medo-alert-dialog {
+  --_width: 25rem; /* 400 */
+}
+.medo-dialog--lg {
+  --_width: 45rem; /* 720 */
+}
+
+/* ---------- Motion: scrim fades, dialog scales 0.96 → 1 and fades ---------- */
+
+/*
+ * Motion: the scrim fades, the dialog settles from 96 % with a smooth spring (fullscreen: slides up);
+ * out: everything fades quickly. Transitions – an interrupted open or close reverses smoothly.
+ * React Aria waits for the overlay's own transition, so the dialog's exit is never longer than the overlay's.
+ */
+.medo-dialog-overlay {
+  transition: opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-enter);
+}
+.medo-dialog-overlay[data-entering] {
+  opacity: 0;
+}
+.medo-dialog-overlay[data-exiting] {
+  opacity: 0;
+  transition: opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-exit);
+}
+.medo-dialog {
+  transition:
+    scale var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth),
+    translate var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth);
+}
+.medo-dialog-overlay[data-entering] .medo-dialog {
+  scale: 0.96;
+}
+.medo-dialog-overlay[data-entering] .medo-dialog--fullscreen {
+  scale: none;
+  translate: 0 100%;
+}
+.medo-dialog-overlay[data-exiting] .medo-dialog {
+  scale: 0.98;
+  transition:
+    scale var(--medo-motion-duration-normal) var(--medo-motion-easing-exit),
+    translate var(--medo-motion-duration-normal) var(--medo-motion-easing-exit);
+}
+.medo-dialog-overlay[data-exiting] .medo-dialog--fullscreen {
+  scale: none;
+  translate: 0 100%;
+}
+
+/* ---------- Parts ---------- */
+
+.medo-dialog__dialog {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-block-size: 0;
+  outline: none;
+}
+
+.medo-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--medo-space-4);
+  padding: var(--medo-space-6) var(--medo-space-4) var(--medo-space-4) var(--medo-space-6);
+}
+
+.medo-dialog__heading {
+  display: grid;
+  flex: 1;
+  gap: var(--medo-space-1);
+  min-inline-size: 0;
+}
+
+.medo-dialog__title {
+  margin: 0;
+  font: var(--medo-typography-heading-md);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-dialog__description {
+  margin: 0;
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-dialog__body {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding-inline: var(--medo-space-6);
+  font: var(--medo-typography-body-sm);
+  outline: none;
+}
+
+.medo-dialog__body:focus-visible {
+  box-shadow: var(--medo-shadow-focus-ring-inset);
+}
+
+/* Without a footer the body keeps the bottom padding. */
+.medo-dialog__body:last-child {
+  padding-block-end: var(--medo-space-6);
+}
+
+.medo-dialog__footer {
+  padding: var(--medo-space-6);
+}
+
+/* Content too long: dividers keep title and actions apart from the scrolling body. */
+.medo-dialog__dialog[data-scrolled] .medo-dialog__header {
+  border-block-end: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+.medo-dialog__dialog[data-scrolled] .medo-dialog__body {
+  padding-block: var(--medo-space-4);
+}
+.medo-dialog__dialog[data-scrolled] .medo-dialog__footer {
+  padding-block-start: var(--medo-space-4);
+  border-block-start: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+/* ---------- Fullscreen (mobile forms) ---------- */
+
+.medo-dialog-overlay--fullscreen {
+  padding: 0;
+}
+
+.medo-dialog--fullscreen {
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding-block-start: env(safe-area-inset-top);
+  padding-block-end: env(safe-area-inset-bottom);
+}
+
+.medo-dialog__bar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--medo-space-2);
+  min-block-size: calc(var(--medo-size-control-md) + 2 * var(--medo-space-2)); /* 56 */
+  padding-inline: var(--medo-space-2);
+  border-block-end: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+.medo-dialog__bar > :first-child {
+  justify-self: start;
+}
+.medo-dialog__bar > :last-child {
+  justify-self: end;
+}
+
+.medo-dialog__bar-title {
+  min-inline-size: 0;
+  margin: 0;
+  overflow: hidden;
+  font: var(--medo-typography-label-lg);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.medo-dialog--fullscreen .medo-dialog__body,
+.medo-dialog--fullscreen .medo-dialog__dialog[data-scrolled] .medo-dialog__body {
+  padding: var(--medo-space-4);
+}
+
+.medo-dialog--fullscreen .medo-dialog__body-inner,
+.medo-dialog__sheet-body {
+  display: grid;
+  gap: var(--medo-space-4);
+}
+
+/* ---------- Bottom Sheet (short content on mobile) ---------- */
+
+.medo-dialog__sheet-body {
+  padding: var(--medo-space-2) var(--medo-space-4) var(--medo-space-4);
+  font: var(--medo-typography-body-sm);
+}
+
+/* ---------- Alert dialog ---------- */
+
+.medo-alert-dialog {
+  --_tone-bg: var(--medo-color-feedback-danger-surface);
+  --_tone-fg: var(--medo-color-feedback-danger-text);
+}
+.medo-alert-dialog--warning {
+  --_tone-bg: var(--medo-color-feedback-warning-surface);
+  --_tone-fg: var(--medo-color-feedback-warning-text);
+}
+.medo-alert-dialog--info {
+  --_tone-bg: var(--medo-color-feedback-info-surface);
+  --_tone-fg: var(--medo-color-feedback-info-text);
+}
+
+.medo-alert-dialog .medo-dialog__dialog {
+  gap: var(--medo-space-6);
+  padding: var(--medo-space-6);
+}
+
+.medo-alert-dialog__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--medo-space-4);
+}
+
+.medo-alert-dialog__icon {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: var(--medo-space-10); /* 40 */
+  block-size: var(--medo-space-10);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--_tone-bg);
+  color: var(--_tone-fg);
+}
+
+.medo-alert-dialog__icon > svg {
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+}
+
+.medo-alert-dialog__text {
+  display: grid;
+  flex: 1;
+  gap: var(--medo-space-2);
+  min-inline-size: 0;
+}
+
+.medo-alert-dialog__title {
+  margin: 0;
+  font: var(--medo-typography-heading-sm);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-alert-dialog__description {
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+/* ---------- Mobile < 640 px (breakpoint/sm) ---------- */
+
+@media (max-width: 639.98px) {
+  .medo-dialog-overlay {
+    padding: var(--medo-space-4);
+  }
+  .medo-dialog-overlay--fullscreen {
+    padding: 0;
+  }
+  /* Alert dialog: icon on top; the Button group stacks the buttons (main action on top). */
+  .medo-alert-dialog__content {
+    flex-direction: column;
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-dialog {
+    border: 1px solid CanvasText;
+  }
+  .medo-alert-dialog__icon {
+    border: 1px solid CanvasText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: only the cross-fade of the overlay. */
+  .medo-dialog-overlay {
+    transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-dialog-overlay:is([data-entering], [data-exiting]) .medo-dialog {
+    scale: none;
+    translate: none;
+  }
+}

package/src/drawer/drawer.css

@@ -0,0 +1,156 @@
+/**
+ * Drawer – med.o Design System
+ *
+ * Modal panel from the side, full height. Same surface and behaviour as the Dialog.
+ *   <div class="medo-drawer-overlay medo-drawer-overlay--right">     scrim, overlay/scrim
+ *     <div class="medo-drawer medo-drawer--right medo-drawer--sm">  surface/raised, elevation/4, border + radius/lg on the free side
+ *       <section class="medo-drawer__dialog" role="dialog">
+ *         <div class="medo-drawer__header">  title (heading/md) · close  </div>
+ *         <div class="medo-drawer__body">…scrolls…</div>
+ *         <div class="medo-drawer__footer">  Button group  </div>   optional
+ *       </section>
+ *     </div>
+ *   </div>
+ * Sizes: sm 320 · md 400 · lg 560 · max viewport − 56 (the scrim strip shows a tap outside closes).
+ * State contract: [data-entering] [data-exiting] (React Aria), [data-dragging] while swiped.
+ */
+
+.medo-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--medo-layer-modal);
+  display: flex;
+  justify-content: flex-end;
+  background-color: var(--medo-color-overlay-scrim);
+}
+
+.medo-drawer-overlay--left {
+  justify-content: flex-start;
+}
+
+.medo-drawer {
+  --_width: 20rem; /* sm 320 */
+  --_from: 100%;
+
+  box-sizing: border-box;
+  display: flex;
+  inline-size: min(var(--_width), 100vw - (var(--medo-space-12) + var(--medo-space-2))); /* viewport − 56 */
+  block-size: 100%;
+  border-start-start-radius: var(--medo-radius-lg);
+  border-end-start-radius: var(--medo-radius-lg);
+  border-inline-start: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+  background-color: var(--medo-color-surface-raised);
+  box-shadow: var(--medo-shadow-elevation-4);
+  color: var(--medo-color-text-primary);
+  outline: none;
+  touch-action: pan-y;
+  /* Slides with a smooth spring – also back when a swipe is too short. */
+  transition: transform var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth);
+}
+
+/* Left: radius and border on the free (right) side. */
+.medo-drawer--left {
+  --_from: -100%;
+  border-radius: 0;
+  border-inline-start: 0;
+  border-start-end-radius: var(--medo-radius-lg);
+  border-end-end-radius: var(--medo-radius-lg);
+  border-inline-end: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+.medo-drawer--md {
+  --_width: 25rem; /* 400 */
+}
+.medo-drawer--lg {
+  --_width: 35rem; /* 560 */
+}
+
+.medo-drawer[data-dragging] {
+  transition: none;
+}
+
+/* ---------- Motion: slide in from the side, scrim fades ---------- */
+
+.medo-drawer-overlay {
+  transition: opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-enter);
+}
+.medo-drawer-overlay[data-entering] {
+  opacity: 0;
+}
+.medo-drawer-overlay[data-exiting] {
+  opacity: 0;
+  transition: opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-exit);
+}
+.medo-drawer-overlay[data-entering] .medo-drawer {
+  transform: translateX(var(--_from));
+}
+.medo-drawer-overlay[data-exiting] .medo-drawer {
+  transform: translateX(var(--_from));
+  transition: transform var(--medo-motion-duration-normal) var(--medo-motion-easing-exit);
+}
+
+/* ---------- Parts ---------- */
+
+.medo-drawer__dialog {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-inline-size: 0;
+  outline: none;
+}
+
+.medo-drawer__header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--medo-space-2);
+  padding: var(--medo-space-4) var(--medo-space-3) var(--medo-space-4) var(--medo-space-6);
+}
+
+.medo-drawer__title {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-inline-size: 0;
+  margin: 0;
+  font: var(--medo-typography-heading-md);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-drawer__body {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  /* A scroll container starts its own touch-action: keep horizontal drags for the swipe. */
+  touch-action: pan-y;
+  padding: var(--medo-space-2) var(--medo-space-4) var(--medo-space-4);
+  font: var(--medo-typography-body-sm);
+}
+
+.medo-drawer__footer {
+  flex: none;
+  padding: var(--medo-space-4) var(--medo-space-6) var(--medo-space-6);
+  padding-block-end: calc(var(--medo-space-6) + env(safe-area-inset-bottom));
+  border-block-start: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+@media (forced-colors: active) {
+  .medo-drawer {
+    border: 1px solid CanvasText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: the panel fades with the scrim instead of sliding. */
+  .medo-drawer-overlay {
+    transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-drawer {
+    transition: none;
+  }
+  .medo-drawer-overlay:is([data-entering], [data-exiting]) .medo-drawer {
+    transform: none;
+  }
+}

package/src/empty-state/empty-state.css

@@ -0,0 +1,161 @@
+/**
+ * Empty state – med.o Design System
+ *
+ *   <section class="medo-empty-state medo-empty-state--page|section|inline" aria-labelledby="…">
+ *     <span class="medo-icon-tile medo-icon-tile--lg medo-icon-tile--neutral" aria-hidden="true"><svg/></span>
+ *     <div class="medo-empty-state__content"><h2 class="medo-empty-state__title">…</h2><p class="medo-empty-state__description">…</p></div>
+ *     <div class="medo-empty-state__actions">…</div>
+ *   </section>
+ * Page 480 · padding 48 · gap 16 · heading/md · body/md · Button md
+ * Section 400 · padding 32 · gap 12 · heading/sm · body/sm · Button sm
+ * Inline 320 · padding 24 · gap 8 · label/md · body/sm · Button sm
+ */
+
+.medo-empty-state {
+  --_max: 30rem; /* 480 */
+  --_gap: var(--medo-space-4);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--_gap);
+  inline-size: 100%;
+  max-inline-size: var(--_max);
+  margin-inline: auto;
+  padding-block: var(--medo-space-12);
+  text-align: center;
+}
+
+.medo-empty-state--section {
+  --_max: 25rem; /* 400 */
+  --_gap: var(--medo-space-3);
+  padding-block: var(--medo-space-8);
+}
+
+.medo-empty-state--inline {
+  --_max: 20rem; /* 320 */
+  --_gap: var(--medo-space-2);
+  padding-block: var(--medo-space-6);
+}
+
+.medo-empty-state__content {
+  display: grid;
+  gap: var(--medo-space-1);
+  inline-size: 100%;
+  overflow-wrap: anywhere;
+}
+
+.medo-empty-state__title {
+  margin: 0;
+  font: var(--medo-typography-heading-md);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-empty-state__description {
+  margin: 0;
+  font: var(--medo-typography-body-md);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-empty-state--section .medo-empty-state__title {
+  font: var(--medo-typography-heading-sm);
+}
+
+.medo-empty-state--inline .medo-empty-state__title {
+  font: var(--medo-typography-label-md);
+}
+
+.medo-empty-state:is(.medo-empty-state--section, .medo-empty-state--inline) .medo-empty-state__description {
+  font: var(--medo-typography-body-sm);
+}
+
+.medo-empty-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--medo-space-2);
+  padding-block-start: var(--medo-space-2);
+}
+
+.medo-empty-state--inline .medo-empty-state__actions {
+  padding-block-start: 0;
+}
+
+/* Illustration slot: 240 × 160 · 160 × 120 · 120 × 88, radius/lg. */
+.medo-empty-state__illustration {
+  display: block;
+  overflow: hidden;
+  inline-size: 15rem;
+  block-size: 10rem;
+  border-radius: var(--medo-radius-lg);
+}
+
+.medo-empty-state--section .medo-empty-state__illustration {
+  inline-size: 10rem;
+  block-size: 7.5rem;
+}
+
+.medo-empty-state--inline .medo-empty-state__illustration {
+  inline-size: 7.5rem;
+  block-size: 5.5rem;
+}
+
+.medo-empty-state__illustration > :is(img, svg) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: contain;
+}
+
+/* ---------- Icon tile – sm 40/20 · md 48/24 · lg 64/32 ---------- */
+
+.medo-icon-tile {
+  --_tile: var(--medo-size-control-lg);
+  --_icon: var(--medo-size-icon-lg);
+
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: var(--_tile);
+  block-size: var(--_tile);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--medo-color-surface-subtle);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-icon-tile--sm {
+  --_tile: var(--medo-size-control-md);
+  --_icon: var(--medo-size-icon-md);
+}
+
+.medo-icon-tile--lg {
+  --_tile: var(--medo-space-16);
+  --_icon: var(--medo-space-8);
+}
+
+.medo-icon-tile > svg {
+  inline-size: var(--_icon);
+  block-size: var(--_icon);
+}
+
+.medo-icon-tile--raised {
+  background-color: var(--medo-color-surface-default);
+}
+
+.medo-icon-tile--danger {
+  background-color: var(--medo-color-feedback-danger-surface);
+  color: var(--medo-color-feedback-danger-text);
+}
+
+.medo-icon-tile--success {
+  background-color: var(--medo-color-feedback-success-surface);
+  color: var(--medo-color-feedback-success-text);
+}
+
+@media (forced-colors: active) {
+  .medo-icon-tile {
+    outline: 1px solid CanvasText;
+  }
+}