@med-o/ui 0.0.0-stage → 0.3.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;
+  }
+}

package/src/button/button.css

@@ -0,0 +1,319 @@
+/**
+ * Button – med.o Design System
+ *
+ * Plain CSS on top of the design tokens. The same classes work in React, Vue,
+ * Angular or plain HTML:
+ *   <button class="medo-button medo-button--primary medo-button--md">Save</button>
+ *
+ * Variants: primary · secondary · ghost · danger · text · ghost-danger
+ * Sizes:    sm (32) · md (40) · lg (48)
+ * Icon only: add medo-button--icon-only, always with aria-label.
+ *
+ * State contract: [data-hovered] [data-pressed] [data-focus-visible] [data-disabled] [data-pending]
+ * (set by React Aria – other frameworks set the same). Plain HTML buttons without
+ * data-rac fall back to :hover, :active, :focus-visible and :disabled.
+ */
+
+.medo-button {
+  /* Private custom properties set by the variants. */
+  --_bg: transparent;
+  --_bg-hover: var(--_bg);
+  --_bg-pressed: var(--_bg-hover);
+  --_fg: var(--medo-color-text-primary);
+  --_fg-hover: var(--_fg);
+  --_fg-pressed: var(--_fg-hover);
+  --_focus: var(--medo-shadow-focus-ring-inset);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--medo-space-2);
+  block-size: var(--medo-size-control-md);
+  padding-block: 0;
+  padding-inline: var(--medo-space-4);
+  border: 0;
+  border-radius: var(--medo-radius-md);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font: var(--medo-typography-label-md);
+  letter-spacing: var(--medo-font-tracking-normal);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: 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),
+    box-shadow var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-button[data-hovered] {
+  background-color: var(--_bg-hover);
+  color: var(--_fg-hover);
+}
+
+@media (hover: hover) {
+  .medo-button:not([data-rac]):hover {
+    background-color: var(--_bg-hover);
+    color: var(--_fg-hover);
+  }
+}
+
+.medo-button[data-pressed],
+.medo-button:not([data-rac]):active {
+  background-color: var(--_bg-pressed);
+  color: var(--_fg-pressed);
+}
+
+.medo-button:focus-visible {
+  outline: none;
+}
+
+.medo-button[data-focus-visible],
+.medo-button:not([data-rac]):focus-visible {
+  box-shadow: var(--_focus);
+}
+
+/* High contrast mode of the operating system (forced-colors) hides box-shadows: fall back to a real outline. */
+@media (forced-colors: active) {
+  .medo-button:is([data-focus-visible], :not([data-rac]):focus-visible) {
+    outline: var(--medo-focus-ring-width) solid CanvasText;
+    outline-offset: 2px;
+  }
+}
+
+/* Disabled: never only by opacity, the colors keep the label readable for the layout. */
+.medo-button:disabled,
+.medo-button[data-disabled],
+.medo-button[aria-disabled='true']:not([data-pending]) {
+  --_bg: var(--medo-color-action-disabled);
+  --_bg-hover: var(--_bg);
+  --_bg-pressed: var(--_bg);
+  --_fg: var(--medo-color-text-disabled);
+  --_fg-hover: var(--_fg);
+  cursor: not-allowed;
+}
+
+/* Pressed shows at once and fades out on release, so a tap feels immediate. Color fades stay with reduced motion. */
+.medo-button:is([data-pressed], :not([data-rac]):active) {
+  transition-duration: 0s;
+}
+
+/* ---------- Sizes ---------- */
+
+.medo-button--sm {
+  gap: var(--medo-space-1);
+  block-size: var(--medo-size-control-sm);
+  padding-inline: var(--medo-space-3);
+}
+
+.medo-button--lg {
+  block-size: var(--medo-size-control-lg);
+  padding-inline: var(--medo-space-5);
+  font: var(--medo-typography-label-lg);
+}
+
+.medo-button__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  inline-size: var(--medo-size-icon-sm);
+  block-size: var(--medo-size-icon-sm);
+}
+
+.medo-button--lg .medo-button__icon {
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+}
+
+.medo-button__icon > svg,
+.medo-button__icon > .medo-spinner {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* Pending (isPending): keeps its look and size; the spinner replaces the icon, the label says what happens. */
+.medo-button[data-pending] {
+  cursor: progress;
+}
+
+/* ---------- Variants ---------- */
+
+.medo-button--primary {
+  --_bg: var(--medo-color-action-primary);
+  --_bg-hover: var(--medo-color-action-primary-hover);
+  --_bg-pressed: var(--medo-color-action-primary-pressed);
+  --_fg: var(--medo-color-text-on-action);
+}
+
+.medo-button--secondary {
+  --_bg: var(--medo-color-action-secondary);
+  --_bg-hover: var(--medo-color-action-secondary-hover);
+  --_bg-pressed: var(--medo-color-action-secondary-pressed);
+  --_fg: var(--medo-color-text-primary);
+}
+
+.medo-button--danger {
+  --_bg: var(--medo-color-action-danger);
+  --_bg-hover: var(--medo-color-action-danger-hover);
+  --_bg-pressed: var(--medo-color-action-danger-pressed);
+  --_fg: var(--medo-color-text-on-danger);
+}
+
+.medo-button--ghost {
+  --_bg-hover: var(--medo-color-state-hover);
+  --_bg-pressed: var(--medo-color-state-pressed);
+  --_fg: var(--medo-color-text-primary);
+  --_focus: inset 0 0 0 var(--medo-focus-ring-width) var(--medo-color-focus-ring);
+}
+
+.medo-button--ghost-danger {
+  --_bg-hover: var(--medo-color-feedback-danger-surface);
+  --_bg-pressed: var(--medo-color-state-pressed);
+  --_fg: var(--medo-color-text-danger);
+  --_focus: inset 0 0 0 var(--medo-focus-ring-width) var(--medo-color-focus-ring);
+}
+
+.medo-button--text {
+  --_fg: var(--medo-color-text-brand);
+  --_fg-hover: var(--medo-color-text-brand-hover);
+  --_fg-pressed: var(--medo-color-text-brand-pressed);
+  padding-inline: 0;
+  border-radius: var(--medo-radius-sm);
+}
+
+.medo-button--text[data-hovered],
+.medo-button--text[data-pressed],
+.medo-button--text:not([data-rac]):is(:hover, :active) {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.medo-button--text:is([data-focus-visible], :not([data-rac]):focus-visible) {
+  box-shadow: none;
+  outline: var(--medo-focus-ring-width) solid var(--medo-color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Ghost, ghost danger and text buttons have no fill when disabled. */
+.medo-button--ghost:is(:disabled, [data-disabled], [aria-disabled='true']),
+.medo-button--ghost-danger:is(:disabled, [data-disabled], [aria-disabled='true']),
+.medo-button--text:is(:disabled, [data-disabled], [aria-disabled='true']) {
+  --_bg: transparent;
+  text-decoration: none;
+}
+
+/* ---------- Icon only ---------- */
+
+.medo-button--icon-only {
+  inline-size: var(--medo-size-control-md);
+  padding-inline: 0;
+}
+
+.medo-button--icon-only .medo-button__icon {
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+}
+
+.medo-button--icon-only.medo-button--sm {
+  inline-size: var(--medo-size-control-sm);
+}
+
+.medo-button--icon-only.medo-button--sm .medo-button__icon {
+  inline-size: var(--medo-size-icon-sm);
+  block-size: var(--medo-size-icon-sm);
+}
+
+.medo-button--icon-only.medo-button--lg {
+  inline-size: var(--medo-size-control-lg);
+}
+
+.medo-button--icon-only.medo-button--lg .medo-button__icon {
+  inline-size: var(--medo-size-icon-lg);
+  block-size: var(--medo-size-icon-lg);
+}
+
+/* ---------- Media icon button ----------
+ * On images and video: media (overlay/media circle) · media-ghost (no fill, on a gradient bar).
+ * Hover/pressed tint the fill with state/hover-on-media · state/pressed-on-media (same in both themes).
+ * Focus: media 2 px ring outside · media-ghost 2 px ring inside. sm is 28 with a 44 px hit area.
+ */
+
+.medo-button--media,
+.medo-button--media-ghost {
+  --_fg: var(--medo-color-text-on-media);
+  --_tint: transparent;
+  position: relative;
+  border-radius: var(--medo-radius-full);
+  background-image: linear-gradient(var(--_tint), var(--_tint));
+}
+
+.medo-button--media {
+  --_bg: var(--medo-color-overlay-media);
+  --_focus: var(--medo-shadow-focus-ring);
+}
+
+.medo-button--media:is([data-hovered], :not([data-rac]):hover),
+.medo-button--media-ghost:is([data-hovered], :not([data-rac]):hover) {
+  --_tint: var(--medo-color-state-hover-on-media);
+}
+
+.medo-button--media:is([data-pressed], :not([data-rac]):active),
+.medo-button--media-ghost:is([data-pressed], :not([data-rac]):active) {
+  --_tint: var(--medo-color-state-pressed-on-media);
+}
+
+.medo-button--icon-only:is(.medo-button--media, .medo-button--media-ghost).medo-button--sm {
+  inline-size: calc(var(--medo-space-6) + var(--medo-space-1)); /* 28 */
+  block-size: calc(var(--medo-space-6) + var(--medo-space-1));
+}
+
+.medo-button--icon-only:is(.medo-button--media, .medo-button--media-ghost).medo-button--sm::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--medo-space-2)); /* 44 hit area */
+  border-radius: var(--medo-radius-full);
+}
+
+/* ---------- Button group ----------
+ * The main action sits at the end of the reading path.
+ *   footer  – right, primary rightmost, destructive left (forms, dialogs, card footers)
+ *   header  – right, next to a title, size sm
+ *   content – left, primary first (hero, teaser, empty state)
+ * Mobile < 640 px: footer and content stack full width with the primary on top.
+ * DOM order = desktop reading order; mobile reorders visually only.
+ */
+
+.medo-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--medo-space-2);
+}
+
+.medo-button-group--footer,
+.medo-button-group--header {
+  justify-content: flex-end;
+}
+
+.medo-button-group__destructive {
+  margin-inline-end: auto;
+}
+
+@media (max-width: 639.98px) {
+  /* breakpoint/sm (640) */
+  .medo-button-group--footer,
+  .medo-button-group--content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .medo-button-group--footer {
+    flex-direction: column-reverse;
+  }
+  .medo-button-group--footer .medo-button-group__destructive {
+    order: -1; /* last on screen in column-reverse */
+    margin-inline-end: 0;
+    display: grid; /* the button fills the width like the others */
+  }
+}