@med-o/ui 0.1.0 → 0.3.0

package/src/styles.css

@@ -1,40 +1,48 @@
-/* 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 './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),