@med-o/ui 0.0.0-stage → 0.1.0

package/src/pagination/pagination.css

@@ -0,0 +1,132 @@
+/**
+ * Pagination – med.o Design System
+ *
+ *   <nav class="medo-pagination medo-pagination--full" aria-label="Pagination">
+ *     <div class="medo-pagination__info"><p class="medo-pagination__summary" role="status">81–100 of 380</p> [Rows per page]</div>
+ *     <ul class="medo-pagination__pages">
+ *       <li><button class="medo-button medo-button--ghost medo-button--md medo-page-item" aria-current="page">5</button></li> …
+ *     </ul>
+ *   </nav>
+ * Page items reuse the ghost button (state layers, inset focus ring): min width = height, padding space/2.
+ * Current page: action/selected (-hover/-pressed), text/brand, label strong – calm, never the primary colour.
+ */
+
+.medo-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--medo-space-4) var(--medo-space-6);
+}
+
+.medo-pagination__info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--medo-space-2) var(--medo-space-6);
+}
+
+.medo-pagination__summary {
+  margin: 0;
+  font: var(--medo-typography-body-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--medo-color-text-secondary);
+  white-space: nowrap;
+}
+
+/* Rows per page: label on the left, Select sm 80 wide. */
+.medo-pagination__size {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--medo-space-2);
+}
+
+.medo-pagination__size .medo-field__label {
+  padding-inline-start: 0;
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+  white-space: nowrap;
+}
+
+.medo-pagination__size .medo-select__field {
+  inline-size: 5rem;
+}
+
+.medo-pagination__size .medo-field__footer {
+  display: none;
+}
+
+.medo-pagination__pages {
+  display: flex;
+  align-items: center;
+  gap: var(--medo-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* ---------- Page item – md 40 · lg 48 ---------- */
+
+.medo-page-item {
+  min-inline-size: var(--medo-size-control-md);
+  padding-inline: var(--medo-space-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.medo-page-item--lg {
+  min-inline-size: var(--medo-size-control-lg);
+  font: var(--medo-typography-label-lg);
+}
+
+.medo-page-item[aria-current='page'] {
+  --_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);
+  font: var(--medo-typography-label-md-strong);
+}
+
+.medo-page-item--lg[aria-current='page'] {
+  font: var(--medo-typography-label-lg-strong);
+}
+
+.medo-page-item--ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--medo-size-control-md);
+  font: var(--medo-typography-label-md);
+  color: var(--medo-color-text-secondary);
+  user-select: none;
+}
+
+.medo-page-item--ellipsis.medo-page-item--lg {
+  block-size: var(--medo-size-control-lg);
+}
+
+/* ---------- Compact (< 640 px): ‹ Page 5 of 19 › full width ---------- */
+
+.medo-pagination--compact {
+  flex-wrap: nowrap;
+  inline-size: 100%;
+}
+
+.medo-pagination__compact-label {
+  margin: 0;
+  font: var(--medo-typography-label-lg);
+  font-variant-numeric: tabular-nums;
+  color: var(--medo-color-text-primary);
+  text-align: center;
+}
+
+/* Disabled previous / next: the ghost button has no fill; links keep the button look. */
+.medo-pagination a.medo-button[data-disabled] {
+  pointer-events: none;
+}
+
+@media (forced-colors: active) {
+  .medo-page-item[aria-current='page'] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/src/popover/popover.css

@@ -0,0 +1,166 @@
+/**
+ * Popover – med.o Design System
+ *
+ * Small non-modal panel anchored to its trigger. Same surface as Menu and Listbox.
+ *   <div class="medo-popover medo-popover--md">                   surface/raised, border, elevation/2, radius/md
+ *     <section class="medo-popover__dialog" role="dialog">
+ *       <div class="medo-popover__header">  title (label/md) · close X  </div>   optional
+ *       <div class="medo-popover__body">…scrolls…</div>
+ *       <div class="medo-popover__footer">  Button group (sm)  </div>             optional
+ *     </section>
+ *   </div>
+ * Toggletip: .medo-popover.medo-toggletip with .medo-toggletip__text + link.
+ * Sizes: sm 240 · md 320 · lg 400 · auto (hugs, no padding). Below 640 px popovers open as Bottom Sheet.
+ * State contract: [data-entering] [data-exiting] [data-placement] (React Aria).
+ */
+
+.medo-popover {
+  --_width: 20rem; /* md 320 */
+  --_pad: var(--medo-space-4);
+
+  box-sizing: border-box;
+  display: flex;
+  inline-size: min(var(--_width), 100vw - 2 * var(--medo-space-4));
+  border: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+  border-radius: var(--medo-radius-md);
+  background-color: var(--medo-color-surface-raised);
+  box-shadow: var(--medo-shadow-elevation-2);
+  color: var(--medo-color-text-primary);
+  z-index: var(--medo-layer-popover);
+  outline: none;
+  transform-origin: var(--trigger-anchor-point);
+}
+
+.medo-popover--sm {
+  --_width: 15rem; /* 240 */
+}
+.medo-popover--lg {
+  --_width: 25rem; /* 400 */
+}
+.medo-popover--auto {
+  --_pad: 0px;
+  inline-size: auto;
+}
+
+/* Motion (iOS): grows from the trigger with a snappy spring and fades in; out: a quick fade. Transitions, so a fast open–close reverses smoothly. */
+.medo-popover {
+  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-popover[data-entering] {
+  opacity: 0;
+  scale: 0.96;
+}
+.medo-popover[data-exiting] {
+  opacity: 0;
+  scale: 0.98;
+  transition:
+    opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-exit),
+    scale var(--medo-motion-duration-fast) var(--medo-motion-easing-exit);
+}
+
+.medo-popover__dialog {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--medo-space-3);
+  min-block-size: 0;
+  padding: var(--_pad);
+  outline: none;
+}
+
+.medo-popover__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--medo-space-2);
+}
+
+.medo-popover__title {
+  margin: 0;
+  font: var(--medo-typography-label-md);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-popover__body {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  font: var(--medo-typography-body-sm);
+  /* Room for focus rings of the content, which the scroll container would clip. */
+  margin: calc(-1 * var(--medo-space-1));
+  padding: var(--medo-space-1);
+}
+
+.medo-popover--auto .medo-popover__body {
+  margin: 0;
+  padding: 0;
+}
+
+.medo-popover__footer {
+  padding-block-start: var(--medo-space-1);
+}
+
+/* auto: no padding around the content; header and footer keep an inset of 16. */
+.medo-popover--auto .medo-popover__dialog {
+  gap: 0;
+}
+.medo-popover--auto .medo-popover__header,
+.medo-popover--auto .medo-popover__footer {
+  padding: var(--medo-space-4);
+}
+
+/* ---------- Toggletip ---------- */
+
+.medo-toggletip {
+  --_width: 15rem; /* 240 */
+  --_pad: var(--medo-space-3);
+}
+
+.medo-toggletip__dialog {
+  display: grid;
+  justify-items: start;
+  gap: var(--medo-space-1);
+}
+
+.medo-toggletip__text {
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-toggletip__text > p {
+  margin: 0;
+}
+
+/* ---------- Bottom Sheet (mobile) ---------- */
+
+.medo-popover__sheet-body {
+  padding: var(--medo-space-2) var(--medo-space-4) var(--medo-space-4);
+  font: var(--medo-typography-body-sm);
+}
+
+/* Mobile: the toggletip stays a popover, full width minus 16 px on each side. */
+@media (max-width: 639.98px) {
+  .medo-toggletip {
+    inline-size: calc(100vw - 2 * var(--medo-space-4));
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-popover {
+    border-color: CanvasText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: a short cross-fade, no scaling. */
+  .medo-popover {
+    transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-popover:is([data-entering], [data-exiting]) {
+    scale: none;
+  }
+}

package/src/progress/progress.css

@@ -0,0 +1,225 @@
+/**
+ * Loading & Progress – med.o Design System
+ *
+ * Spinner:      <span class="medo-spinner medo-spinner--md" role="progressbar" aria-label="Loading"><svg>…</svg></span>
+ * Progress bar: label + value above, track, helper below. Modifiers --success · --error · --indeterminate
+ * Skeleton:     <span class="medo-skeleton medo-skeleton--text" aria-hidden="true"></span>
+ *               The loading region gets aria-busy="true".
+ */
+
+/* ---------- Spinner ---------- */
+
+.medo-spinner {
+  --_size: var(--medo-space-5);
+  --_stroke: 2.4; /* user units of the 24 × 24 viewBox: 2 px at 20 px */
+
+  display: inline-flex;
+  flex-shrink: 0;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  color: currentColor;
+  vertical-align: middle;
+}
+
+.medo-spinner--sm {
+  --_size: var(--medo-space-4);
+  --_stroke: 3; /* 2 px at 16 px */
+}
+.medo-spinner--lg {
+  --_size: var(--medo-space-6);
+  --_stroke: 2.5; /* 2.5 px at 24 px */
+}
+.medo-spinner--xl {
+  --_size: var(--medo-space-10);
+  --_stroke: 2.4; /* 4 px at 40 px */
+}
+
+.medo-spinner--brand {
+  color: var(--medo-color-text-brand);
+}
+.medo-spinner--neutral {
+  color: var(--medo-color-text-secondary);
+}
+.medo-spinner--on-brand {
+  color: var(--medo-color-text-on-brand);
+}
+
+.medo-spinner > svg {
+  inline-size: 100%;
+  block-size: 100%;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--_stroke);
+  animation: medo-spin 0.8s linear infinite;
+}
+
+/* The light ring keeps the shape visible, even without motion. */
+.medo-spinner__track {
+  opacity: 0.2;
+}
+
+.medo-spinner__arc {
+  stroke-linecap: round;
+  stroke-dasharray: 25 100; /* 90° of pathLength 100 */
+}
+
+@keyframes medo-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* ---------- Progress bar ---------- */
+
+.medo-progress {
+  --_fill: var(--medo-color-action-primary);
+  --_h: var(--medo-space-2);
+
+  display: grid;
+  gap: var(--medo-space-2);
+  min-inline-size: 0;
+}
+
+.medo-progress--sm {
+  --_h: var(--medo-space-1);
+}
+
+.medo-progress--success {
+  --_fill: var(--medo-color-feedback-success-solid);
+}
+.medo-progress--error {
+  --_fill: var(--medo-color-feedback-danger-solid);
+}
+
+.medo-progress__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--medo-space-4);
+}
+
+.medo-progress__label {
+  font: var(--medo-typography-label-md);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-progress__value {
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.medo-progress__track {
+  position: relative;
+  block-size: var(--_h);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--medo-color-surface-subtle);
+  overflow: hidden;
+}
+
+.medo-progress__fill {
+  block-size: 100%;
+  border-radius: inherit;
+  background-color: var(--_fill);
+  transition: inline-size var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth);
+}
+
+/* Indeterminate: a segment slides back and forth. */
+.medo-progress--indeterminate .medo-progress__fill {
+  position: absolute;
+  inset-block: 0;
+  inline-size: 30%;
+  animation: medo-progress-slide 1.5s ease-in-out infinite;
+}
+
+@keyframes medo-progress-slide {
+  from {
+    inset-inline-start: -30%;
+  }
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+.medo-progress__description {
+  font: var(--medo-typography-caption);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-progress--error .medo-progress__description {
+  color: var(--medo-color-text-danger);
+}
+
+/* ---------- Skeleton ---------- */
+
+.medo-skeleton {
+  display: block;
+  inline-size: 100%;
+  block-size: var(--medo-space-3);
+  border-radius: var(--medo-radius-sm);
+  background-color: var(--medo-color-surface-subtle);
+  animation: medo-skeleton-pulse 1.5s ease-in-out infinite alternate;
+}
+
+.medo-skeleton--circle {
+  inline-size: var(--medo-space-10);
+  block-size: var(--medo-space-10);
+  border-radius: var(--medo-radius-full);
+}
+
+.medo-skeleton--rect {
+  block-size: var(--medo-space-24);
+  border-radius: var(--medo-radius-md);
+}
+
+/* Text lines: the last one is shorter. */
+.medo-skeleton-lines {
+  display: grid;
+  gap: var(--medo-space-2);
+}
+.medo-skeleton-lines > .medo-skeleton:last-child:not(:first-child) {
+  inline-size: 60%;
+}
+
+@keyframes medo-skeleton-pulse {
+  to {
+    opacity: 0.5;
+  }
+}
+
+/* ---------- System settings ---------- */
+
+@media (prefers-reduced-motion: reduce) {
+  /* Slower spinner, static skeleton and segment – activity stays visible. */
+  .medo-spinner > svg {
+    animation-duration: 1.6s;
+  }
+  .medo-skeleton {
+    animation: none;
+  }
+  .medo-progress--indeterminate .medo-progress__fill {
+    animation: none;
+    inset-inline-start: 0;
+    inline-size: 40%;
+  }
+  .medo-progress__fill {
+    transition-duration: var(--medo-motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-spinner > svg {
+    stroke: CanvasText;
+  }
+  .medo-progress__track {
+    border: var(--medo-border-width-thin) solid CanvasText;
+  }
+  .medo-progress__fill {
+    forced-color-adjust: none;
+    background-color: Highlight;
+  }
+  .medo-skeleton {
+    border: var(--medo-border-width-thin) solid GrayText;
+  }
+}