@med-o/ui 0.0.0-stage → 0.1.0

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);
+}
+
+/* Windows high contrast mode 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 (iOS sheet) – 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;
+  }
+}

package/src/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,147 @@
+/**
+ * Breadcrumbs – med.o Design System
+ *
+ *   <nav class="medo-breadcrumbs medo-breadcrumbs--md" aria-label="Breadcrumb">
+ *     <ol class="medo-breadcrumbs__list">
+ *       <li class="medo-breadcrumbs__item"><a class="medo-breadcrumbs__icon-part" aria-label="Home">⌂</a> ›</li>
+ *       <li class="medo-breadcrumbs__item"><a class="medo-breadcrumbs__link"><span class="medo-breadcrumbs__label">Projects</span></a> ›</li>
+ *       <li class="medo-breadcrumbs__item"><span class="medo-breadcrumbs__link medo-breadcrumbs__current" aria-current="page">…</span></li>
+ *     </ol>
+ *   </nav>
+ * sm: caption, current label/sm, height 24, icons 16, separator 12, gap 2 · md: body/sm, label/md, 28, 20, 16, gap 4.
+ * Parts: padding space/1, radius/sm, gap icon–text space/0-5. Labels max 200 px with „…“.
+ * State contract: [data-hovered] [data-pressed] [data-focus-visible] [data-current] (React Aria).
+ */
+
+.medo-breadcrumbs {
+  --_height: var(--medo-space-6); /* sm 24 */
+  --_icon: var(--medo-size-icon-sm);
+  --_sep: var(--medo-space-3);
+  --_gap: var(--medo-space-0-5);
+  --_text: var(--medo-typography-caption);
+  --_current: var(--medo-typography-label-sm);
+}
+
+.medo-breadcrumbs--md {
+  --_height: calc(var(--medo-space-6) + var(--medo-space-1)); /* 28 */
+  --_icon: var(--medo-size-icon-md);
+  --_sep: var(--medo-space-4);
+  --_gap: var(--medo-space-1);
+  --_text: var(--medo-typography-body-sm);
+  --_current: var(--medo-typography-label-md);
+}
+
+.medo-breadcrumbs__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--_gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.medo-breadcrumbs__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_gap);
+  min-inline-size: 0;
+}
+
+.medo-breadcrumbs__link,
+.medo-breadcrumbs__icon-part {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--medo-space-0-5);
+  min-block-size: var(--_height);
+  padding: var(--medo-space-1);
+  border: 0;
+  border-radius: var(--medo-radius-sm);
+  background: none;
+  color: var(--medo-color-text-secondary);
+  font: var(--_text);
+  text-decoration: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+    color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-breadcrumbs__link[data-pressed] {
+  transition-duration: 0s;
+}
+
+.medo-breadcrumbs__link[data-hovered]:not([data-current]) {
+  color: var(--medo-color-text-primary);
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.medo-breadcrumbs__link[data-pressed] {
+  background-color: var(--medo-color-state-pressed);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-breadcrumbs__current {
+  color: var(--medo-color-text-primary);
+  font: var(--_current);
+  cursor: default;
+}
+
+.medo-breadcrumbs__label {
+  overflow: hidden;
+  max-inline-size: 12.5rem; /* 200 */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Home and „…“: square, a soft surface on hover so the target is visible. */
+.medo-breadcrumbs__icon-part {
+  justify-content: center;
+  inline-size: var(--_height);
+  padding: 0;
+  cursor: pointer;
+}
+
+.medo-breadcrumbs__icon-part > svg {
+  inline-size: var(--_icon);
+  block-size: var(--_icon);
+}
+
+.medo-breadcrumbs__icon-part:is([data-hovered], [aria-expanded='true']) {
+  background-color: var(--medo-color-state-hover);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-breadcrumbs__icon-part[data-pressed] {
+  background-color: var(--medo-color-state-pressed);
+}
+
+.medo-breadcrumbs__link[data-focus-visible],
+.medo-breadcrumbs__icon-part[data-focus-visible] {
+  box-shadow: inset 0 0 0 var(--medo-focus-ring-width) var(--medo-color-focus-ring);
+}
+
+.medo-breadcrumbs__separator {
+  flex: none;
+  inline-size: var(--_sep);
+  block-size: var(--_sep);
+  color: var(--medo-color-text-secondary);
+}
+
+/* Mobile: one link to the parent page. */
+.medo-breadcrumbs__back-icon {
+  flex: none;
+  inline-size: var(--_icon);
+  block-size: var(--_icon);
+}
+
+@media (forced-colors: active) {
+  .medo-breadcrumbs__link[data-focus-visible],
+  .medo-breadcrumbs__icon-part[data-focus-visible] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/src/bulk-action-bar/bulk-action-bar.css

@@ -0,0 +1,98 @@
+/**
+ * Bulk action bar – med.o Design System
+ *
+ *   <div class="medo-bulk-bar medo-bulk-bar--desktop" role="toolbar" aria-label="Bulk actions">
+ *     <span class="medo-bulk-bar__count">3 selected</span> | <button class="medo-toast__button medo-toast__action">Export</button> … | ×
+ *   </div>
+ * Desktop: floating, bottom centre, 24 px above the viewport edge · surface/inverse · radius/lg · elevation/3 ·
+ *          padding 8 8 8 16 · gap 8 · buttons = _Toast button (32).
+ * Mobile:  full width at the bottom · surface/raised + top border · Button ghost lg · Icon Button ghost lg · safe area.
+ * In: slides up with spring/smooth (a fade with reduced motion).
+ */
+
+.medo-bulk-bar-host {
+  display: contents;
+}
+
+.medo-bulk-bar {
+  position: fixed;
+  z-index: var(--medo-layer-toast);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  /* Slides up with a smooth spring when the first item is selected. */
+  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-bulk-bar {
+    opacity: 0;
+    translate: 0 var(--medo-space-4);
+  }
+}
+
+.medo-bulk-bar--desktop {
+  inset-block-end: var(--medo-space-6);
+  inset-inline: 0;
+  inline-size: fit-content;
+  max-inline-size: calc(100vw - 2 * var(--medo-space-4));
+  margin-inline: auto;
+  gap: var(--medo-space-2);
+  padding: var(--medo-space-2) var(--medo-space-2) var(--medo-space-2) var(--medo-space-4);
+  border-radius: var(--medo-radius-lg);
+  background-color: var(--medo-color-surface-inverse);
+  box-shadow: var(--medo-shadow-elevation-3);
+  color: var(--medo-color-text-inverse);
+}
+
+.medo-bulk-bar__count {
+  font: var(--medo-typography-label-md-strong);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.medo-bulk-bar__divider {
+  flex: none;
+  inline-size: var(--medo-border-width-thin);
+  block-size: var(--medo-space-5);
+  background-color: var(--medo-color-text-inverse-secondary);
+  opacity: var(--medo-opacity-40);
+}
+
+.medo-bulk-bar--mobile {
+  inset-inline: 0;
+  inset-block-end: 0;
+  justify-content: space-between;
+  gap: var(--medo-space-1);
+  padding: var(--medo-space-2) var(--medo-space-2) max(var(--medo-space-2), env(safe-area-inset-bottom));
+  border-block-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-3);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-bulk-bar__start,
+.medo-bulk-bar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--medo-space-1);
+  min-inline-size: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .medo-bulk-bar {
+    transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  @starting-style {
+    .medo-bulk-bar {
+      translate: none;
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-bulk-bar {
+    border: 1px solid CanvasText;
+  }
+}