@med-o/ui 0.0.0-stage → 0.3.0

package/src/alert/alert.css

@@ -0,0 +1,147 @@
+/**
+ * Alert – med.o Design System
+ *
+ * Persistent message inside the page. Plain markup:
+ *   <div class="medo-alert medo-alert--info">
+ *     <svg class="medo-alert__icon" aria-hidden="true">…</svg>
+ *     <div class="medo-alert__content">
+ *       <p class="medo-alert__title">Title</p>
+ *       <div class="medo-alert__description">Description</div>
+ *       <div class="medo-alert__actions">…text buttons…</div>
+ *     </div>
+ *     <button class="medo-alert__close">…</button>
+ *   </div>
+ * Tones: info · success · warning · danger. Variants: inline (default) · banner (full width).
+ */
+
+.medo-alert {
+  --_bg: var(--medo-color-feedback-info-surface);
+  --_border: var(--medo-color-feedback-info-border);
+  --_icon: var(--medo-color-feedback-info-text);
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--medo-space-3);
+  padding: var(--medo-space-4);
+  padding-inline-end: var(--medo-space-3);
+  border: var(--medo-border-width-thin) solid var(--_border);
+  border-radius: var(--medo-radius-md);
+  background-color: var(--_bg);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-alert--success {
+  --_bg: var(--medo-color-feedback-success-surface);
+  --_border: var(--medo-color-feedback-success-border);
+  --_icon: var(--medo-color-feedback-success-text);
+}
+.medo-alert--warning {
+  --_bg: var(--medo-color-feedback-warning-surface);
+  --_border: var(--medo-color-feedback-warning-border);
+  --_icon: var(--medo-color-feedback-warning-text);
+}
+.medo-alert--danger {
+  --_bg: var(--medo-color-feedback-danger-surface);
+  --_border: var(--medo-color-feedback-danger-border);
+  --_icon: var(--medo-color-feedback-danger-text);
+}
+
+.medo-alert__icon {
+  flex-shrink: 0;
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+  color: var(--_icon);
+  stroke-width: 2; /* 1.67 px at 20 px */
+}
+
+.medo-alert__content {
+  display: grid;
+  gap: var(--medo-space-1);
+  flex: 1;
+  min-inline-size: 0;
+  /* Centre the first line with the 20 px icon (label/md has a 20 px line). */
+  padding-block-start: 0;
+}
+
+.medo-alert__title {
+  margin: 0;
+  font: var(--medo-typography-label-md);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-alert__description {
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-alert__description > :first-child {
+  margin-block-start: 0;
+}
+.medo-alert__description > :last-child {
+  margin-block-end: 0;
+}
+
+.medo-alert__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--medo-space-4);
+  margin-block-start: var(--medo-space-2);
+}
+
+/* The close button (Icon Button ghost sm) sits in the top-right corner. */
+.medo-alert__close {
+  flex-shrink: 0;
+  margin-block: calc(-1 * var(--medo-space-1-5));
+}
+
+/* ---------- Banner: full width, bottom border only, one line ---------- */
+
+.medo-alert--banner {
+  align-items: center;
+  padding: var(--medo-space-2) var(--medo-space-6);
+  border-width: 0 0 var(--medo-border-width-thin);
+  border-radius: 0;
+}
+
+.medo-alert--banner .medo-alert__content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--medo-space-3);
+}
+
+.medo-alert--banner .medo-alert__actions {
+  margin-block-start: 0;
+}
+
+.medo-alert--banner .medo-alert__close {
+  margin-block: 0;
+}
+
+@media (forced-colors: active) {
+  .medo-alert {
+    border-color: CanvasText;
+  }
+}
+
+/* An alert that appears (after an action) fades in and settles 4 px with a smooth spring. */
+.medo-alert {
+  transition:
+    opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-enter),
+    translate var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth);
+}
+@starting-style {
+  .medo-alert {
+    opacity: 0;
+    translate: 0 calc(-1 * var(--medo-space-1));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @starting-style {
+    .medo-alert {
+      translate: none;
+    }
+  }
+}

package/src/avatar/avatar.css

@@ -0,0 +1,221 @@
+/**
+ * Avatar – med.o Design System
+ *
+ * Fallback chain: image → initials → icon. Circle = person, square = organization.
+ *   <span class="medo-avatar medo-avatar--md medo-avatar--circle medo-avatar--teal" role="img" aria-label="Lea M.">
+ *     <span class="medo-avatar__initials" aria-hidden="true">LM</span>
+ *     <img class="medo-avatar__image" src="…" alt="">
+ *   </span>
+ *
+ * Sizes xs 20 · sm 24 · md 32 · lg 40 · xl 56 · 2xl 80
+ * Colours: blue · violet · pink · amber · green · teal (from the user id) · neutral (icon)
+ */
+
+.medo-avatar {
+  --_size: var(--medo-space-8);
+  --_bg: var(--medo-color-surface-subtle);
+  --_fg: var(--medo-color-text-secondary);
+  --_radius: var(--medo-radius-md);
+  --_status: calc(var(--medo-space-2) + var(--medo-space-0-5)); /* 10 */
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  vertical-align: middle;
+  user-select: none;
+}
+
+/* Initials, image and icon share one grid cell: the image covers the initials once loaded. */
+.medo-avatar > * {
+  grid-area: 1 / 1;
+}
+
+.medo-avatar--square {
+  border-radius: var(--_radius);
+}
+
+/* Sizes. Initials use the avatar text styles. */
+.medo-avatar--xs {
+  --_size: var(--medo-space-5);
+  --_radius: var(--medo-radius-sm);
+  --_status: var(--medo-space-2);
+  font: var(--medo-typography-avatar-xs);
+}
+.medo-avatar--sm {
+  --_size: var(--medo-space-6);
+  --_radius: var(--medo-radius-sm);
+  --_status: var(--medo-space-2);
+  font: var(--medo-typography-avatar-sm);
+}
+.medo-avatar--md {
+  font: var(--medo-typography-avatar-md);
+}
+.medo-avatar--lg {
+  --_size: var(--medo-space-10);
+  font: var(--medo-typography-avatar-lg);
+}
+.medo-avatar--xl {
+  --_size: calc(var(--medo-space-12) + var(--medo-space-2)); /* 56 */
+  --_radius: var(--medo-radius-lg);
+  --_status: calc(var(--medo-space-3) + var(--medo-space-0-5)); /* 14 */
+  font: var(--medo-typography-avatar-xl);
+}
+.medo-avatar--2xl {
+  --_size: var(--medo-space-20);
+  --_radius: var(--medo-radius-lg);
+  --_status: calc(var(--medo-space-3) + var(--medo-space-0-5));
+  font: var(--medo-typography-avatar-2xl);
+}
+
+/* Tones: same person, same colour (picked from the id). */
+.medo-avatar--blue {
+  --_bg: var(--medo-color-avatar-blue-surface);
+  --_fg: var(--medo-color-avatar-blue-text);
+}
+.medo-avatar--violet {
+  --_bg: var(--medo-color-avatar-violet-surface);
+  --_fg: var(--medo-color-avatar-violet-text);
+}
+.medo-avatar--pink {
+  --_bg: var(--medo-color-avatar-pink-surface);
+  --_fg: var(--medo-color-avatar-pink-text);
+}
+.medo-avatar--amber {
+  --_bg: var(--medo-color-avatar-amber-surface);
+  --_fg: var(--medo-color-avatar-amber-text);
+}
+.medo-avatar--green {
+  --_bg: var(--medo-color-avatar-green-surface);
+  --_fg: var(--medo-color-avatar-green-text);
+}
+.medo-avatar--teal {
+  --_bg: var(--medo-color-avatar-teal-surface);
+  --_fg: var(--medo-color-avatar-teal-text);
+}
+
+.medo-avatar__initials {
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+.medo-avatar__icon {
+  display: inline-flex;
+}
+
+/* Icon: 12 / 14 / 16 / 20 / 28 / 40 px = 60 % at xs, 58 % at sm, 50 % from md. */
+.medo-avatar__icon > svg {
+  inline-size: calc(var(--_size) * 0.5);
+  block-size: calc(var(--_size) * 0.5);
+}
+.medo-avatar--xs .medo-avatar__icon > svg {
+  inline-size: calc(var(--_size) * 0.6);
+  block-size: calc(var(--_size) * 0.6);
+}
+.medo-avatar--sm .medo-avatar__icon > svg {
+  inline-size: calc(var(--_size) * 7 / 12);
+  block-size: calc(var(--_size) * 7 / 12);
+}
+
+.medo-avatar__image {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+/* 1 px inner border so light photos don't blend into the page. */
+.medo-avatar--has-image::after {
+  content: '';
+  grid-area: 1 / 1;
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--medo-color-avatar-image-border);
+  pointer-events: none;
+}
+
+/* ---------- Status (bottom right, 2 px ring in the surface colour) ---------- */
+
+.medo-avatar__status {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  box-sizing: border-box;
+  inline-size: var(--_status);
+  block-size: var(--_status);
+  border-radius: var(--medo-radius-full);
+  box-shadow: 0 0 0 2px var(--medo-color-surface-default);
+}
+
+.medo-avatar__status--online {
+  background-color: var(--medo-color-feedback-success-solid);
+}
+.medo-avatar__status--away {
+  background-color: var(--medo-color-feedback-warning-solid);
+}
+.medo-avatar__status--busy {
+  background-color: var(--medo-color-feedback-danger-solid);
+}
+.medo-avatar__status--offline {
+  background-color: var(--medo-color-border-strong);
+}
+
+/* ---------- Group: max 4 + “+N”, 25 % overlap, 2 px ring ---------- */
+
+.medo-avatar-group {
+  display: inline-flex;
+  align-items: center;
+  isolation: isolate;
+}
+
+.medo-avatar-group > .medo-avatar {
+  box-shadow: 0 0 0 2px var(--medo-color-surface-default);
+}
+
+.medo-avatar-group > .medo-avatar + .medo-avatar {
+  margin-inline-start: calc(var(--_size) * -0.25);
+}
+
+.medo-avatar--more {
+  font: var(--medo-typography-label-sm);
+  padding: 0;
+  border: 0;
+}
+
+.medo-avatar-group--xs .medo-avatar--more,
+.medo-avatar-group--sm .medo-avatar--more {
+  font: var(--medo-typography-label-xs);
+}
+
+button.medo-avatar--more {
+  cursor: pointer;
+  outline: none;
+}
+button.medo-avatar--more[data-hovered] {
+  background-image: linear-gradient(var(--medo-color-state-hover), var(--medo-color-state-hover));
+}
+button.medo-avatar--more[data-pressed] {
+  background-image: linear-gradient(var(--medo-color-state-pressed), var(--medo-color-state-pressed));
+}
+.medo-avatar-group > button.medo-avatar--more[data-focus-visible] {
+  box-shadow:
+    0 0 0 2px var(--medo-color-surface-default),
+    var(--medo-shadow-focus-ring);
+}
+
+@media (forced-colors: active) {
+  .medo-avatar {
+    border: var(--medo-border-width-thin) solid CanvasText;
+  }
+  .medo-avatar__status {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+}

package/src/badge/badge.css

@@ -0,0 +1,153 @@
+/**
+ * Badge – med.o Design System
+ *
+ * Short, non-interactive status label. Plain CSS, works in every framework:
+ *   <span class="medo-badge medo-badge--success medo-badge--md">
+ *     <span class="medo-badge__dot" aria-hidden="true"></span>Active
+ *   </span>
+ *
+ * Count (notifications): <span class="medo-badge-count medo-badge-count--danger medo-badge-count--md">3</span>
+ * Dot (unread, presence): <span class="medo-badge-dot medo-badge-dot--success"></span>
+ *
+ * Tones: neutral · brand · success · warning · danger · info
+ */
+
+.medo-badge {
+  --_bg: var(--medo-color-surface-subtle);
+  --_fg: var(--medo-color-text-secondary);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--medo-space-1);
+  block-size: var(--medo-space-6);
+  padding-inline: var(--medo-space-2);
+  border-radius: var(--medo-radius-sm);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font: var(--medo-typography-label-sm);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.medo-badge--sm {
+  block-size: var(--medo-space-5);
+  padding-inline: var(--medo-space-1-5);
+}
+
+.medo-badge--brand {
+  --_bg: var(--medo-color-surface-brand-subtle);
+  --_fg: var(--medo-color-text-brand);
+}
+.medo-badge--success {
+  --_bg: var(--medo-color-feedback-success-surface);
+  --_fg: var(--medo-color-feedback-success-text);
+}
+.medo-badge--warning {
+  --_bg: var(--medo-color-feedback-warning-surface);
+  --_fg: var(--medo-color-feedback-warning-text);
+}
+.medo-badge--danger {
+  --_bg: var(--medo-color-feedback-danger-surface);
+  --_fg: var(--medo-color-feedback-danger-text);
+}
+.medo-badge--info {
+  --_bg: var(--medo-color-feedback-info-surface);
+  --_fg: var(--medo-color-feedback-info-text);
+}
+
+/* Leading dot (6 px) or icon (12 px) in the text colour – status not by colour alone. */
+.medo-badge__dot {
+  flex-shrink: 0;
+  inline-size: var(--medo-space-1-5);
+  block-size: var(--medo-space-1-5);
+  border-radius: var(--medo-radius-full);
+  background-color: currentColor;
+}
+
+.medo-badge__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.medo-badge__icon > svg {
+  inline-size: var(--medo-space-3);
+  block-size: var(--medo-space-3);
+  stroke-width: 3; /* 1.5 px at 12 px */
+}
+
+/* ---------- Count ---------- */
+
+.medo-badge-count {
+  --_bg: var(--medo-color-feedback-danger-solid);
+  --_fg: var(--medo-color-feedback-danger-on-solid);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--medo-space-5);
+  block-size: var(--medo-space-5);
+  padding-inline: var(--medo-space-1);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font: var(--medo-typography-label-sm);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.medo-badge-count--sm {
+  min-inline-size: var(--medo-space-4);
+  block-size: var(--medo-space-4);
+  font: var(--medo-typography-label-xs);
+}
+
+.medo-badge-count--brand {
+  --_bg: var(--medo-color-action-primary);
+  --_fg: var(--medo-color-text-on-action);
+}
+.medo-badge-count--neutral {
+  --_bg: var(--medo-color-surface-inverse);
+  --_fg: var(--medo-color-text-inverse);
+}
+
+/* ---------- Dot ---------- */
+
+.medo-badge-dot {
+  display: inline-block;
+  flex-shrink: 0;
+  inline-size: var(--medo-space-2);
+  block-size: var(--medo-space-2);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--medo-color-text-secondary);
+}
+
+.medo-badge-dot--brand {
+  background-color: var(--medo-color-action-primary);
+}
+.medo-badge-dot--success {
+  background-color: var(--medo-color-feedback-success-solid);
+}
+.medo-badge-dot--warning {
+  background-color: var(--medo-color-feedback-warning-solid);
+}
+.medo-badge-dot--danger {
+  background-color: var(--medo-color-feedback-danger-solid);
+}
+.medo-badge-dot--info {
+  background-color: var(--medo-color-feedback-info-solid);
+}
+
+/* High contrast mode of the operating system (forced-colors) removes backgrounds: keep the shapes visible. */
+@media (forced-colors: active) {
+  .medo-badge,
+  .medo-badge-count {
+    border: var(--medo-border-width-thin) solid CanvasText;
+  }
+  .medo-badge__dot,
+  .medo-badge-dot {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+}

package/src/bottom-sheet/bottom-sheet.css

@@ -0,0 +1,202 @@
+/**
+ * Bottom Sheet – med.o Design System
+ *
+ * Modal layer from the bottom on small screens.
+ *   <div class="medo-sheet-overlay">                       scrim, overlay/scrim
+ *     <div class="medo-sheet [medo-sheet--full]">           surface/raised, top radius/xl, elevation/4
+ *       <section class="medo-sheet__dialog" role="dialog">
+ *         <div class="medo-sheet__grab">  handle (decorative) + header: title and close button  </div>
+ *         <div class="medo-sheet__content">…scrolls…</div>
+ *         <div class="medo-sheet__footer">…sticky, safe area…</div>
+ *       </section>
+ *     </div>
+ *   </div>
+ * Height = content, max 90dvh (full: fixed 90dvh, e.g. with search). In: smooth spring; out: 250 ms ease-in; reduced motion: fade.
+ * State contract: [data-entering] [data-exiting] on overlay and sheet (React Aria).
+ */
+
+.medo-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--medo-layer-modal);
+  display: flex;
+  align-items: flex-end;
+  background-color: var(--medo-color-overlay-scrim);
+}
+
+.medo-sheet-overlay {
+  transition: opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-enter);
+}
+.medo-sheet-overlay[data-entering] {
+  opacity: 0;
+}
+.medo-sheet-overlay[data-exiting] {
+  opacity: 0;
+  transition: opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-exit);
+}
+
+.medo-sheet {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  max-block-size: 90dvh;
+  border-start-start-radius: var(--medo-radius-xl);
+  border-start-end-radius: var(--medo-radius-xl);
+  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);
+}
+
+/* With search: fixed height, so the sheet does not jump while typing or when the keyboard opens. */
+.medo-sheet--full {
+  block-size: 90dvh;
+}
+
+.medo-sheet[data-entering],
+.medo-sheet-overlay[data-entering] .medo-sheet {
+  transform: translateY(100%);
+}
+.medo-sheet[data-exiting],
+.medo-sheet-overlay[data-exiting] .medo-sheet {
+  transform: translateY(100%);
+  transition: transform var(--medo-motion-duration-normal) var(--medo-motion-easing-exit);
+}
+
+/*
+ * Select sheet (popover): React Aria positions popovers with inline styles next to the trigger.
+ * The sheet covers the viewport instead – !important is the only way to beat inline styles.
+ */
+.medo-sheet-overlay--popover {
+  position: fixed !important;
+  inset: 0 !important;
+  inline-size: auto !important;
+  block-size: auto !important;
+  max-block-size: none !important;
+  max-inline-size: none !important;
+}
+
+/* Select sheet (popover): the scrim fills the popover, the sheet sits at the bottom. */
+.medo-sheet-scrim {
+  display: flex;
+  flex: 1;
+  align-items: flex-end;
+  block-size: 100%;
+}
+
+/* While dragging: follow the finger, no transition. */
+.medo-sheet[data-dragging] {
+  transition: none;
+}
+
+.medo-sheet__dialog {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-block-size: 0;
+  outline: none;
+}
+
+/* Handle + header: the area that can be swiped down. */
+.medo-sheet__grab {
+  flex: none;
+  touch-action: none;
+  cursor: grab;
+}
+
+.medo-sheet__handle {
+  display: block;
+  inline-size: var(--medo-space-8);
+  block-size: var(--medo-space-1);
+  margin: var(--medo-space-2) auto var(--medo-space-1);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--medo-color-border-default);
+}
+
+.medo-sheet__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--medo-space-2);
+  padding-inline: var(--medo-space-4) var(--medo-space-2);
+}
+
+.medo-sheet__title {
+  flex: 1;
+  min-inline-size: 0;
+  margin: 0;
+  font: var(--medo-typography-heading-sm);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-sheet__content {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* Last block without footer: keep clear of the iPhone home indicator. */
+.medo-sheet__content:last-child {
+  padding-block-end: env(safe-area-inset-bottom);
+}
+
+.medo-sheet__footer {
+  display: grid;
+  gap: var(--medo-space-2);
+  padding: var(--medo-space-4);
+  padding-block-end: calc(var(--medo-space-4) + env(safe-area-inset-bottom));
+  border-block-start: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+.medo-sheet__footer .medo-button {
+  inline-size: 100%;
+}
+
+.medo-sheet__count {
+  margin: 0;
+  font: var(--medo-typography-caption);
+  color: var(--medo-color-text-secondary);
+}
+
+/* With a back button the header starts closer to the edge. */
+.medo-sheet__header:has(> .medo-button:first-child) {
+  padding-inline-start: var(--medo-space-1);
+}
+
+/* ---------- Select sheet ---------- */
+
+.medo-sheet__search {
+  flex: none;
+  padding: var(--medo-space-2) var(--medo-space-4);
+}
+
+.medo-sheet .medo-listbox {
+  max-block-size: none;
+  padding-inline: var(--medo-space-1);
+}
+
+@media (forced-colors: active) {
+  .medo-sheet {
+    border: 1px solid CanvasText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: the sheet fades with the scrim instead of sliding. */
+  .medo-sheet-overlay {
+    transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-sheet {
+    transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-sheet:is([data-entering], [data-exiting]),
+  .medo-sheet-overlay:is([data-entering], [data-exiting]) .medo-sheet {
+    transform: none;
+    opacity: 0;
+  }
+}