@med-o/ui 0.0.0-stage → 0.1.0

package/src/toast/toast.css

@@ -0,0 +1,184 @@
+/**
+ * Toast – med.o Design System
+ *
+ * Short, temporary feedback after an action. Inverted surface, no icon, no tone.
+ *   <div class="medo-toast-region" role="region">                desktop bottom right · mobile full width
+ *     <div class="medo-toast" role="alertdialog">                 surface/inverse, radius/md, elevation/3
+ *       <div class="medo-toast__content" role="alert">
+ *         <span class="medo-toast__message">Q3-Report.pdf deleted</span>
+ *       </div>
+ *       <button class="medo-toast__button medo-toast__action">Undo</button>
+ *       <button class="medo-toast__button medo-toast__close">×</button>
+ *     </div>
+ *   </div>
+ * Max 3, newest closest to the edge. Region offset for a bottom navigation: --medo-toast-offset.
+ * State contract: [data-hovered] [data-pressed] [data-focus-visible] (React Aria).
+ */
+
+.medo-toast-region {
+  --medo-toast-offset: 0px;
+
+  position: fixed;
+  inset-block-end: calc(var(--medo-space-6) + var(--medo-toast-offset));
+  inset-inline-end: var(--medo-space-6);
+  z-index: var(--medo-layer-toast);
+  display: flex;
+  /* The queue is newest first: the newest toast sits at the edge, older ones above. */
+  flex-direction: column-reverse;
+  gap: var(--medo-space-2);
+  outline: none;
+}
+
+.medo-toast-region[data-focus-visible] {
+  border-radius: var(--medo-radius-md);
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+.medo-toast {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--medo-space-2);
+  inline-size: 25rem; /* 400 */
+  min-inline-size: 18rem; /* 288 */
+  max-inline-size: min(35rem, 100vw - 2 * var(--medo-space-6)); /* 560 */
+  min-block-size: var(--medo-size-control-lg); /* 48 */
+  padding: var(--medo-space-2);
+  padding-inline-start: var(--medo-space-4);
+  border-radius: var(--medo-radius-md);
+  background-color: var(--medo-color-surface-inverse);
+  box-shadow: var(--medo-shadow-elevation-3);
+  color: var(--medo-color-text-inverse);
+  outline: none;
+  view-transition-class: medo-toast;
+}
+
+.medo-toast[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring), var(--medo-shadow-elevation-3);
+}
+
+.medo-toast__content {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+/* One line; longer text is cut (write shorter). */
+.medo-toast__message {
+  display: block;
+  overflow: hidden;
+  font: var(--medo-typography-body-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---------- _Toast button (Action · Close) – inverse state layers ---------- */
+
+.medo-toast__button {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--medo-size-control-sm); /* 32 */
+  border: 0;
+  border-radius: var(--medo-radius-sm);
+  background-color: transparent;
+  color: var(--medo-color-text-inverse);
+  font: var(--medo-typography-label-md);
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.medo-toast__action {
+  padding-inline: var(--medo-space-3);
+}
+
+.medo-toast__close {
+  inline-size: var(--medo-size-control-sm);
+  color: var(--medo-color-text-inverse-secondary);
+}
+
+.medo-toast__close > svg {
+  inline-size: var(--medo-size-icon-sm);
+  block-size: var(--medo-size-icon-sm);
+}
+
+.medo-toast__button[data-hovered] {
+  background-color: var(--medo-color-state-hover-inverse);
+}
+
+.medo-toast__button[data-pressed] {
+  background-color: var(--medo-color-state-pressed-inverse);
+}
+
+.medo-toast__button[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+/* ---------- Mobile < 640 px: full width, 16 px margin, above the safe area ---------- */
+
+@media (max-width: 639.98px) {
+  .medo-toast-region {
+    inset-inline: var(--medo-space-4);
+    inset-block-end: calc(var(--medo-space-4) + var(--medo-toast-offset) + env(safe-area-inset-bottom));
+  }
+  .medo-toast {
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: none;
+  }
+}
+
+/* ---------- Motion (View Transitions, iOS): in slides up with a smooth spring, out fades and shrinks a little;
+ * the other toasts glide to their new place with the same spring. ---------- */
+
+::view-transition-group(.medo-toast) {
+  animation-duration: var(--medo-motion-spring-smooth-duration);
+  animation-timing-function: var(--medo-motion-spring-smooth);
+}
+::view-transition-new(.medo-toast):only-child {
+  animation: medo-toast-in var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth);
+}
+::view-transition-old(.medo-toast):only-child {
+  animation: medo-toast-out var(--medo-motion-duration-fast) var(--medo-motion-easing-exit) forwards;
+}
+
+@keyframes medo-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--medo-space-6)) scale(0.96);
+  }
+}
+@keyframes medo-toast-out {
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+@keyframes medo-toast-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: toasts cross-fade, nothing slides. */
+  ::view-transition-group(.medo-toast) {
+    animation-duration: var(--medo-motion-duration-fast);
+  }
+  ::view-transition-new(.medo-toast):only-child {
+    animation: medo-toast-fade var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  ::view-transition-old(.medo-toast):only-child {
+    animation: medo-toast-fade var(--medo-motion-duration-fast) var(--medo-motion-easing-standard) reverse forwards;
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-toast {
+    border: 1px solid CanvasText;
+  }
+  .medo-toast__button[data-focus-visible] {
+    outline: 2px solid Highlight;
+  }
+}

package/src/toggle-button/toggle-button.css

@@ -0,0 +1,143 @@
+/**
+ * Toggle Button – med.o Design System
+ *
+ * A button that stays pressed. Builds on the Button classes (sizes, icon, focus, motion):
+ *   <button class="medo-button medo-button--md medo-toggle" aria-pressed="true" data-selected>Bold</button>
+ * Off looks like a ghost button (text/secondary). On: action/selected + text/brand – fill and colour together.
+ *
+ * Groups:
+ *   <div class="medo-toggle-group medo-toggle-group--segmented medo-toggle-group--md">…</div>  single select, container
+ *   <div class="medo-toggle-group medo-toggle-group--toolbar">…</div>                         multiple, no container
+ *   <div class="medo-toolbar">group <hr class="medo-toolbar__separator"> group</div>           several groups
+ *
+ * State contract: [data-selected] [data-hovered] [data-pressed] [data-focus-visible] [data-disabled]
+ * (plain HTML: aria-pressed="true" counts as selected).
+ */
+
+.medo-toggle {
+  --_bg-hover: var(--medo-color-state-hover);
+  --_bg-pressed: var(--medo-color-state-pressed);
+  --_fg: var(--medo-color-text-secondary);
+  --_fg-hover: var(--medo-color-text-primary);
+}
+
+.medo-toggle:is([data-selected], [aria-pressed='true']) {
+  --_bg: var(--medo-color-action-selected);
+  --_bg-hover: var(--medo-color-action-selected-hover);
+  --_bg-pressed: var(--medo-color-action-selected-pressed);
+  --_fg: var(--medo-color-text-brand);
+  --_fg-hover: var(--medo-color-text-brand);
+  --_fg-pressed: var(--medo-color-text-brand-hover);
+}
+
+/* Disabled: off without fill, on keeps a neutral fill so the state stays visible. */
+.medo-toggle:is(:disabled, [data-disabled]) {
+  --_bg: transparent;
+  --_bg-hover: var(--_bg);
+  --_bg-pressed: var(--_bg);
+  --_fg: var(--medo-color-text-disabled);
+  --_fg-hover: var(--_fg);
+  --_fg-pressed: var(--_fg);
+}
+.medo-toggle:is(:disabled, [data-disabled]):is([data-selected], [aria-pressed='true']) {
+  --_bg: var(--medo-color-action-disabled);
+}
+
+/* ---------- Groups ---------- */
+
+.medo-toggle-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--medo-space-1);
+}
+
+/* Segmented: one container; items one size smaller, so the group has the control height (md 40, lg 48). */
+.medo-toggle-group--segmented {
+  box-sizing: border-box;
+  gap: var(--medo-space-0-5);
+  padding: var(--medo-space-1);
+  border-radius: var(--medo-radius-md);
+  background-color: var(--medo-color-surface-default);
+  /* Inside stroke: the border does not add to the height. */
+  box-shadow: inset 0 0 0 var(--medo-border-width-thin) var(--medo-color-border-default);
+}
+
+.medo-toggle-group--segmented .medo-toggle {
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--medo-radius-sm);
+}
+
+/* The selected fill is an indicator that slides between the items with a snappy spring (iOS segmented control). */
+.medo-toggle-group--segmented .medo-toggle:is([data-selected], [aria-pressed='true']) {
+  --_bg: transparent;
+}
+.medo-toggle__indicator {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background-color: var(--medo-color-action-selected);
+  transition:
+    translate var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy),
+    width var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy),
+    background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+.medo-toggle[data-hovered] > .medo-toggle__indicator {
+  background-color: var(--medo-color-action-selected-hover);
+}
+.medo-toggle[data-pressed] > .medo-toggle__indicator {
+  background-color: var(--medo-color-action-selected-pressed);
+}
+.medo-toggle:is(:disabled, [data-disabled]) > .medo-toggle__indicator {
+  background-color: var(--medo-color-action-disabled);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .medo-toggle__indicator {
+    transition: background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+}
+
+/* Full width (mobile): items share the space equally. */
+.medo-toggle-group--full {
+  display: flex;
+  inline-size: 100%;
+}
+.medo-toggle-group--full .medo-toggle {
+  flex: 1 1 0;
+  min-inline-size: 0;
+}
+
+/* ---------- Toolbar: several groups ---------- */
+
+.medo-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--medo-space-1);
+}
+
+.medo-toolbar__separator {
+  flex: none;
+  align-self: center;
+  inline-size: var(--medo-border-width-thin);
+  block-size: var(--medo-size-icon-lg);
+  margin: 0 var(--medo-space-1);
+  border: 0;
+  background-color: var(--medo-color-border-default);
+}
+
+@media (forced-colors: active) {
+  .medo-toggle:is([data-selected], [aria-pressed='true']) {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+  .medo-toggle-group--segmented {
+    border: 1px solid CanvasText;
+  }
+  .medo-toolbar__separator {
+    background-color: CanvasText;
+  }
+}

package/src/tooltip/tooltip.css

@@ -0,0 +1,66 @@
+/**
+ * Tooltip – med.o Design System
+ *
+ * Short label on hover (after 500 ms) or keyboard focus (instantly). Never interactive.
+ *   <div class="medo-tooltip" role="tooltip">Copy link<kbd class="medo-tooltip__shortcut">⌘C</kbd></div>
+ *
+ * State contract: [data-entering] [data-exiting] [data-placement] (set by React Aria).
+ */
+
+.medo-tooltip {
+  box-sizing: border-box;
+  display: flex;
+  align-items: baseline;
+  gap: var(--medo-space-2);
+  max-inline-size: 15rem; /* 240 px, then wraps */
+  padding: var(--medo-space-1) var(--medo-space-2);
+  border-radius: var(--medo-radius-sm);
+  background-color: var(--medo-color-surface-inverse);
+  color: var(--medo-color-text-inverse);
+  box-shadow: var(--medo-shadow-elevation-2);
+  font: var(--medo-typography-caption);
+  overflow-wrap: break-word;
+  z-index: var(--medo-layer-tooltip);
+  pointer-events: auto;
+}
+
+.medo-tooltip__shortcut {
+  font: inherit;
+  color: var(--medo-color-text-inverse-secondary);
+  white-space: nowrap;
+}
+
+/* Motion (iOS): fades in and settles from 96 % at the trigger; out: a quick fade without movement. */
+.medo-tooltip {
+  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-tooltip[data-entering] {
+  opacity: 0;
+  scale: 0.96;
+}
+.medo-tooltip[data-exiting] {
+  opacity: 0;
+  scale: 1;
+  transition:
+    opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-exit),
+    scale var(--medo-motion-duration-fast) var(--medo-motion-easing-exit);
+}
+
+@media (forced-colors: active) {
+  .medo-tooltip {
+    border: var(--medo-border-width-thin) solid CanvasText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: a short cross-fade, no scaling. */
+  .medo-tooltip {
+    transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-tooltip:is([data-entering], [data-exiting]) {
+    scale: none;
+  }
+}