@med-o/ui 0.1.0 → 0.4.0

package/src/layout/layout.css

@@ -0,0 +1,148 @@
+/**
+ * Layout – med.o Design System
+ *
+ * Spacing rules: every gap between elements comes from one of six rules (tokens layout/gap/*, they grow with
+ * the layout mode mobile · tablet · desktop):
+ *   inline  side by side in one group (buttons, tags, filters)      8
+ *   content inside one block (heading, text, actions)               16
+ *   fields  form fields below each other                            16 · 24 · 24
+ *   items   cards and tiles in a grid or list (= layout gutter)      16 · 24 · 24
+ *   group   groups inside a section (sub-sections, fieldsets)       32 · 40 · 48
+ *   section sections of a page (= layout section)                   48 · 64 · 96
+ *
+ *   <div class="medo-stack">…</div>                                   vertical, gap content
+ *   <div class="medo-stack medo-stack--horizontal">…</div>            horizontal, gap inline
+ *   <div class="medo-grid">…</div>                                    as many columns as fit, gap items
+ *   <div class="medo-grid medo-grid--layout"><div class="medo-grid__item" style="--medo-grid-span: 6">…</div></div>
+ *   <div class="medo-container medo-container--lg">…</div>
+ * Another rule: add medo-gap-{rule}, e.g. medo-gap-section. It works on any flex or grid container.
+ */
+
+/* ---------- Stack ---------- */
+
+.medo-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--medo-layout-gap-content);
+  min-inline-size: 0;
+}
+
+.medo-stack--horizontal {
+  flex-direction: row;
+  gap: var(--medo-layout-gap-inline);
+}
+
+.medo-stack--wrap {
+  flex-wrap: wrap;
+}
+
+.medo-stack--align-start {
+  align-items: flex-start;
+}
+.medo-stack--align-center {
+  align-items: center;
+}
+.medo-stack--align-end {
+  align-items: flex-end;
+}
+.medo-stack--align-stretch {
+  align-items: stretch;
+}
+.medo-stack--align-baseline {
+  align-items: baseline;
+}
+
+.medo-stack--justify-start {
+  justify-content: flex-start;
+}
+.medo-stack--justify-center {
+  justify-content: center;
+}
+.medo-stack--justify-end {
+  justify-content: flex-end;
+}
+.medo-stack--justify-between {
+  justify-content: space-between;
+}
+
+/* ---------- Grid ---------- */
+
+/* Default: as many columns as fit, each at least --medo-grid-min wide. auto-fill keeps empty tracks, so one or
+   two cards keep the size they have in a full row. min(…, 100%) stops a single column from overflowing. */
+.medo-grid {
+  --medo-grid-min: 16rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--medo-grid-min), 100%), 1fr));
+  gap: var(--medo-layout-gap-items);
+  min-inline-size: 0;
+}
+
+/* A fixed number of equal columns. */
+.medo-grid--columns {
+  grid-template-columns: repeat(var(--medo-grid-columns, 2), minmax(0, 1fr));
+}
+
+/* The layout grid: 4 · 8 · 12 columns with the gutter of the layout mode. */
+.medo-grid--layout {
+  grid-template-columns: repeat(var(--medo-layout-columns), minmax(0, 1fr));
+}
+
+/* A span never exceeds the columns there are: span 6 is full width on a phone with 4 columns. */
+.medo-grid__item {
+  grid-column: span var(--medo-grid-span, 1);
+  grid-column: span min(var(--medo-grid-span, 1), var(--medo-layout-columns));
+  min-inline-size: 0;
+}
+
+.medo-grid--columns > .medo-grid__item {
+  grid-column: span min(var(--medo-grid-span, 1), var(--medo-grid-columns, 2));
+}
+
+.medo-grid__item.medo-grid__item--full {
+  grid-column: 1 / -1;
+}
+
+/* ---------- Container ---------- */
+
+/* Centred content with the page margin of the layout mode. The width limit applies to the content, the margin
+   comes on top (content-box), so text lines keep their measure on every screen. */
+.medo-container {
+  box-sizing: content-box;
+  max-inline-size: var(--medo-container-xl);
+  margin-inline: auto;
+  padding-inline: var(--medo-layout-margin);
+}
+
+.medo-container--prose {
+  max-inline-size: var(--medo-container-prose);
+}
+.medo-container--md {
+  max-inline-size: var(--medo-container-md);
+}
+.medo-container--lg {
+  max-inline-size: var(--medo-container-lg);
+}
+.medo-container--full {
+  max-inline-size: none;
+}
+
+/* ---------- Spacing rules as classes (last, so they win over the defaults above) ---------- */
+
+.medo-gap-inline {
+  gap: var(--medo-layout-gap-inline);
+}
+.medo-gap-content {
+  gap: var(--medo-layout-gap-content);
+}
+.medo-gap-fields {
+  gap: var(--medo-layout-gap-fields);
+}
+.medo-gap-items {
+  gap: var(--medo-layout-gap-items);
+}
+.medo-gap-group {
+  gap: var(--medo-layout-gap-group);
+}
+.medo-gap-section {
+  gap: var(--medo-layout-gap-section);
+}

package/src/list/list.css

@@ -7,7 +7,7 @@
  *   </ul>
  *   <dl class="medo-dl medo-dl--auto"><div class="medo-dl__row"><dt class="medo-dl__term"/><dd class="medo-dl__value"/></div></dl>
  * Without a size class the list takes the size of the surrounding text; markers scale with it.
- * Marker column 24 (numbers 28), aligned to the first line. Item spacing space/2. Level 2: ring, „a.“.
+ * Marker column 24 (numbers 28), aligned to the first line. Item spacing space/2. Level 2: ring, “a.”.
  */
 
 .medo-list {
@@ -79,7 +79,7 @@
   background-color: transparent;
 }
 
-/* Number: same style as the text, tabular figures, right aligned so „9.“ and „10.“ line up. */
+/* Number: same style as the text, tabular figures, right aligned so “9.” and “10.” line up. */
 .medo-list--number > .medo-list__item {
   counter-increment: medo-list;
 }

package/src/list-view/list-view.css

@@ -58,7 +58,7 @@
   cursor: pointer;
 }
 
-/* Row feedback fades; pressed shows at once (iOS highlight). */
+/* Row feedback fades; pressed shows at once, so a tap feels immediate. */
 .medo-list-row {
   transition: background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
 }

package/src/listbox/listbox.css

@@ -35,7 +35,7 @@
   overflow: hidden;
 }
 
-/* Motion (iOS): unfolds from the field with a snappy spring and fades in; out: a quick fade. */
+/* Motion: unfolds from the field with a snappy spring and fades in; out: a quick fade. */
 .medo-listbox-popover {
   transform-origin: var(--trigger-anchor-point, top);
   transition:

package/src/menu/menu.css

@@ -32,7 +32,7 @@
   overflow: 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. */
+/* Motion: grows from the trigger with a snappy spring and fades in; out: a quick fade. Transitions, so a fast open–close reverses smoothly. */
 .medo-menu-popover {
   transform-origin: var(--trigger-anchor-point, top);
   transition:

package/src/navigation/navigation.css

@@ -196,7 +196,6 @@
   padding: var(--medo-space-2) var(--medo-space-2) var(--medo-space-1);
   font: var(--medo-typography-overline);
   color: var(--medo-color-text-secondary);
-  text-transform: uppercase;
 }
 
 .medo-nav-section__divider {

package/src/popover/popover.css

@@ -42,7 +42,7 @@
   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. */
+/* Motion: 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:

package/src/select/select.css

@@ -115,7 +115,7 @@
 
 /* ---------- Mobile: native picker (single) ---------- */
 
-/* Invisible native select over the field: taps open the system picker. 16 px prevents iOS zoom. */
+/* Invisible native select over the field: taps open the system picker. 16 px prevents the automatic zoom of mobile browsers. */
 .medo-select__native {
   position: absolute;
   inset: 0;

package/src/styles.css

@@ -1,40 +1,49 @@
-/* All component styles of @med-o/ui. Needs the tokens: @import "@med-o/design-tokens/css"; */
-@import './utils/utilities.css';
-@import './button/button.css';
-@import './field/field.css';
-@import './text-field/input.css';
-@import './checkbox/choice.css';
-@import './switch/switch.css';
-@import './badge/badge.css';
-@import './tag/tag.css';
-@import './avatar/avatar.css';
-@import './tooltip/tooltip.css';
-@import './progress/progress.css';
-@import './list/list.css';
-@import './list-view/list-view.css';
-@import './bulk-action-bar/bulk-action-bar.css';
-@import './empty-state/empty-state.css';
-@import './pagination/pagination.css';
-@import './search/search.css';
-@import './breadcrumbs/breadcrumbs.css';
-@import './accordion/accordion.css';
-@import './slider/slider.css';
-@import './toggle-button/toggle-button.css';
-@import './listbox/listbox.css';
-@import './select/select.css';
-@import './combobox/combobox.css';
-@import './bottom-sheet/bottom-sheet.css';
-@import './menu/menu.css';
-@import './dialog/dialog.css';
-@import './drawer/drawer.css';
-@import './link/link.css';
-@import './alert/alert.css';
-@import './toast/toast.css';
-@import './tabs/tabs.css';
-@import './popover/popover.css';
-@import './navigation/navigation.css';
-@import './card/card.css';
-@import './table/table.css';
-@import './upload/upload.css';
-@import './date-time/date-time.css';
-@import './media/media.css';
+/*
+ * All component styles of @med-o/ui. Needs the tokens: @import "@med-o/design-tokens/css";
+ *
+ * Cascade layers: every component style sits in the layer `components`. CSS without a layer (your app) always
+ * wins over it, whatever the specificity – no !important needed. With Tailwind v4 the utilities win as well.
+ * The first line fixes the order of the layers (the same as Tailwind v4), so it holds in any import order.
+ */
+@layer theme, base, components, utilities;
+
+@import './utils/utilities.css' layer(components);
+@import './layout/layout.css' layer(components);
+@import './button/button.css' layer(components);
+@import './field/field.css' layer(components);
+@import './text-field/input.css' layer(components);
+@import './checkbox/choice.css' layer(components);
+@import './switch/switch.css' layer(components);
+@import './badge/badge.css' layer(components);
+@import './tag/tag.css' layer(components);
+@import './avatar/avatar.css' layer(components);
+@import './tooltip/tooltip.css' layer(components);
+@import './progress/progress.css' layer(components);
+@import './list/list.css' layer(components);
+@import './list-view/list-view.css' layer(components);
+@import './bulk-action-bar/bulk-action-bar.css' layer(components);
+@import './empty-state/empty-state.css' layer(components);
+@import './pagination/pagination.css' layer(components);
+@import './search/search.css' layer(components);
+@import './breadcrumbs/breadcrumbs.css' layer(components);
+@import './accordion/accordion.css' layer(components);
+@import './slider/slider.css' layer(components);
+@import './toggle-button/toggle-button.css' layer(components);
+@import './listbox/listbox.css' layer(components);
+@import './select/select.css' layer(components);
+@import './combobox/combobox.css' layer(components);
+@import './bottom-sheet/bottom-sheet.css' layer(components);
+@import './menu/menu.css' layer(components);
+@import './dialog/dialog.css' layer(components);
+@import './drawer/drawer.css' layer(components);
+@import './link/link.css' layer(components);
+@import './alert/alert.css' layer(components);
+@import './toast/toast.css' layer(components);
+@import './tabs/tabs.css' layer(components);
+@import './popover/popover.css' layer(components);
+@import './navigation/navigation.css' layer(components);
+@import './card/card.css' layer(components);
+@import './table/table.css' layer(components);
+@import './upload/upload.css' layer(components);
+@import './date-time/date-time.css' layer(components);
+@import './media/media.css' layer(components);

package/src/switch/switch.css

@@ -63,7 +63,7 @@
   border-radius: var(--medo-radius-full);
   background-color: var(--medo-color-text-on-action);
   color: var(--_track);
-  /* The thumb moves with a snappy spring (iOS). */
+  /* The thumb moves with a snappy spring. */
   transition:
     transform var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy),
     color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);

package/src/table/table.css

@@ -23,6 +23,12 @@
 }
 
 /* Without the frame, e.g. inside a card or a documentation page. */
+/* Scrolls sideways: the container takes the focus (see StaticTable), so it needs a visible ring. */
+.medo-table-container:focus-visible {
+  outline: none;
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
 .medo-table-container--plain {
   border: 0;
   border-radius: 0;
@@ -167,7 +173,7 @@
   padding-inline: var(--medo-space-4) 0;
 }
 
-/* Row feedback fades; pressed shows at once (iOS highlight). */
+/* Row feedback fades; pressed shows at once, so a tap feels immediate. */
 .medo-table__row > .medo-table__cell {
   transition: background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
 }
@@ -235,6 +241,10 @@
   .medo-table__row[data-focus-visible] {
     outline-color: Highlight;
   }
+  .medo-table-container:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
 }
 
 /* ---------- Frame: toolbar – table – footer in one bordered surface ---------- */

package/src/tabs/tabs.css

@@ -139,7 +139,7 @@
   border-radius: inherit;
   background-color: var(--medo-color-surface-thumb);
   box-shadow: var(--medo-shadow-elevation-1);
-  /* SelectionIndicator animates translate and size from the previous tab – a snappy spring like the iOS segmented control. */
+  /* SelectionIndicator animates translate and size from the previous tab – a snappy spring, so the eye follows the selection. */
   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);

package/src/tag/tag.css

@@ -3,7 +3,7 @@
  *
  * Compact pill for a value. Two roles, never mixed:
  *   removable  – a chosen value (multi-select): the x removes it
- *   selectable – a filter: the whole tag toggles, a check marks „selected“
+ *   selectable – a filter: the whole tag toggles, a check marks “selected”
  *
  * Structure:
  *   <div class="medo-tag medo-tag--md [medo-tag--selectable]">

package/src/text-field/input.css

@@ -8,7 +8,7 @@
  * </div>
  * <textarea class="medo-textarea medo-textarea--md"></textarea>
  *
- * Sizes sm / md / lg = 32 / 40 / 48 px. Mobile and touch: always lg (16 px text prevents iOS zoom).
+ * Sizes sm / md / lg = 32 / 40 / 48 px. Mobile and touch: always lg (16 px text prevents the automatic zoom of mobile browsers).
  * Focus: the border turns focus/ring plus 1 px inside (flush, no outer band).
  */
 

package/src/toast/toast.css

@@ -129,7 +129,7 @@
   }
 }
 
-/* ---------- Motion (View Transitions, iOS): in slides up with a smooth spring, out fades and shrinks a little;
+/* ---------- Motion (View Transitions): 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) {

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

@@ -68,7 +68,7 @@
   border-radius: var(--medo-radius-sm);
 }
 
-/* The selected fill is an indicator that slides between the items with a snappy spring (iOS segmented control). */
+/* The selected fill is an indicator that slides between the items with a snappy spring. */
 .medo-toggle-group--segmented .medo-toggle:is([data-selected], [aria-pressed='true']) {
   --_bg: transparent;
 }

package/src/tooltip/tooltip.css

@@ -30,7 +30,7 @@
   white-space: nowrap;
 }
 
-/* Motion (iOS): fades in and settles from 96 % at the trigger; out: a quick fade without movement. */
+/* Motion: 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:

package/src/upload/upload.css

@@ -344,7 +344,7 @@
   color: var(--medo-color-feedback-danger-text);
 }
 
-/* New files slide in softly (iOS list insert). */
+/* New files slide in softly, so the eye finds them. */
 .medo-upload__item {
   transition:
     opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-enter),