@med-o/ui 0.0.0-stage → 0.3.0

package/src/tabs/tabs.css

@@ -0,0 +1,211 @@
+/**
+ * Tabs – med.o Design System
+ *
+ * Contained style: tabs sit in a track, the selected tab is a raised thumb.
+ *   <div class="medo-tabs medo-tabs--md [medo-tabs--full]">
+ *     <div class="medo-tabs__list" role="tablist">                    track: surface/subtle, radius/md, padding + gap 4
+ *       <div class="medo-tab" role="tab" [data-selected]>
+ *         <div class="medo-tab__thumb"></div>                          surface/thumb, elevation/1 (selected only, slides)
+ *         <span class="medo-tab__icon">…</span> <span class="medo-tab__label">Activity</span> <span class="medo-badge-count">3</span>
+ *       </div>
+ *     </div>
+ *     <div class="medo-tabs__panel" role="tabpanel">…</div>
+ *   </div>
+ * Below 640 px: always lg; up to 3 tabs fill the width, more scroll with a fade.
+ * State contract: [data-selected] [data-hovered] [data-pressed] [data-focus-visible] [data-disabled],
+ * list [data-scroll-start] [data-scroll-end], panel [data-inert] (hidden).
+ */
+
+.medo-tabs {
+  --_tab-h: var(--medo-size-control-sm); /* 32 */
+  --_tab-pad: var(--medo-space-3);
+  --_label: var(--medo-typography-label-md);
+  --_icon: var(--medo-size-icon-sm);
+
+  display: grid;
+  gap: var(--medo-space-4);
+  min-inline-size: 0;
+}
+
+.medo-tabs--lg {
+  --_tab-h: var(--medo-size-control-md); /* 40 */
+  --_tab-pad: var(--medo-space-4);
+  --_label: var(--medo-typography-label-lg);
+  --_icon: var(--medo-size-icon-md);
+}
+
+/* ---------- Track ---------- */
+
+.medo-tabs__list {
+  display: flex;
+  gap: var(--medo-space-1);
+  justify-self: start;
+  max-inline-size: 100%;
+  padding: var(--medo-space-1);
+  border-radius: var(--medo-radius-md);
+  background-color: var(--medo-color-surface-subtle);
+  overflow-x: auto;
+  scrollbar-width: none;
+  outline: none;
+}
+
+.medo-tabs__list::-webkit-scrollbar {
+  display: none;
+}
+
+.medo-tabs--full .medo-tabs__list {
+  justify-self: stretch;
+}
+
+.medo-tabs--full .medo-tab {
+  flex: 1;
+}
+
+/* Fade at an edge that still has tabs – they never wrap. */
+.medo-tabs__list[data-scroll-end] {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--medo-space-8)), transparent);
+}
+.medo-tabs__list[data-scroll-start] {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--medo-space-8)), transparent);
+}
+.medo-tabs__list[data-scroll-start][data-scroll-end] {
+  mask-image: linear-gradient(to right, transparent, #000 var(--medo-space-8), #000 calc(100% - var(--medo-space-8)), transparent);
+}
+
+/* ---------- Tab ---------- */
+
+.medo-tab {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--medo-space-2);
+  block-size: var(--_tab-h);
+  padding-inline: var(--_tab-pad);
+  border-radius: var(--medo-radius-sm);
+  font: var(--_label);
+  color: var(--medo-color-text-secondary);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Content above the thumb. */
+.medo-tab > :not(.medo-tab__thumb) {
+  position: relative;
+  z-index: 1;
+}
+
+.medo-tab:not([data-selected])[data-hovered] {
+  background-color: var(--medo-color-state-hover);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-tab:not([data-selected])[data-pressed] {
+  background-color: var(--medo-color-state-pressed);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-tab[data-selected] {
+  color: var(--medo-color-text-primary);
+  cursor: default;
+}
+
+.medo-tab[data-disabled] {
+  color: var(--medo-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* Focus ring inside, drawn above the thumb. */
+.medo-tab::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.medo-tab[data-focus-visible]::after {
+  box-shadow: var(--medo-shadow-focus-ring-inset);
+}
+
+.medo-tab__thumb {
+  position: absolute;
+  inset: 0;
+  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, 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);
+}
+
+.medo-tab__icon {
+  display: inline-flex;
+  inline-size: var(--_icon);
+  block-size: var(--_icon);
+}
+
+.medo-tab__icon > svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* ---------- Panel ---------- */
+
+.medo-tabs__panel {
+  min-inline-size: 0;
+  border-radius: var(--medo-radius-sm);
+  outline: none;
+}
+
+.medo-tabs__panel[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+/* Kept mounted (input is not lost), but hidden while another tab is selected. */
+.medo-tabs__panel[data-inert] {
+  display: none;
+}
+
+/* ---------- Mobile < 640 px: always lg; up to 3 tabs fill, more scroll ---------- */
+
+@media (max-width: 639.98px) {
+  .medo-tabs {
+    --_tab-h: var(--medo-size-control-md);
+    --_tab-pad: var(--medo-space-4);
+    --_label: var(--medo-typography-label-lg);
+    --_icon: var(--medo-size-icon-md);
+  }
+  .medo-tabs__list:not(:has(> .medo-tab:nth-child(4))) {
+    justify-self: stretch;
+  }
+  .medo-tabs__list:not(:has(> .medo-tab:nth-child(4))) > .medo-tab {
+    flex: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-tabs__list {
+    border: 1px solid CanvasText;
+  }
+  .medo-tab[data-selected] .medo-tab__thumb {
+    border: 2px solid Highlight;
+  }
+  .medo-tab[data-focus-visible]::after {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: the thumb appears at the new tab, no slide. */
+  .medo-tab__thumb {
+    transition: none;
+  }
+}

package/src/tag/tag.css

@@ -0,0 +1,225 @@
+/**
+ * Tag – med.o Design System
+ *
+ * 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”
+ *
+ * Structure:
+ *   <div class="medo-tag medo-tag--md [medo-tag--selectable]">
+ *     <span class="medo-tag__icon">…</span>
+ *     <span class="medo-tag__label">Design</span>
+ *     <button class="medo-tag__remove" aria-label="Remove">…</button>
+ *   </div>
+ *
+ * State contract: [data-hovered] [data-pressed] [data-selected] [data-focus-visible]
+ * [data-disabled] [data-allows-removing] (set by React Aria – other frameworks set the same).
+ */
+
+.medo-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--medo-space-2);
+}
+
+.medo-tag {
+  --_bg: var(--medo-color-action-secondary);
+  --_fg: var(--medo-color-text-primary);
+  --_icon: var(--medo-color-text-secondary);
+  --_h: var(--medo-space-8);
+  --_icon-size: var(--medo-space-4);
+  --_pad: var(--medo-space-3);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--medo-space-1);
+  block-size: var(--_h);
+  padding-inline: var(--_pad);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font: var(--medo-typography-label-md);
+  white-space: nowrap;
+  outline: none;
+  cursor: default;
+  -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-tag--sm {
+  --_h: var(--medo-space-6);
+  --_icon-size: var(--medo-space-3);
+  --_pad: var(--medo-space-2);
+  font: var(--medo-typography-label-sm);
+}
+
+.medo-tag[data-allows-removing] {
+  padding-inline-end: var(--medo-space-1);
+}
+
+.medo-tag__label {
+  max-inline-size: 12.5rem; /* 200 px, then ellipsis */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.medo-tag__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--_icon);
+}
+
+.medo-tag__icon > svg {
+  inline-size: var(--_icon-size);
+  block-size: var(--_icon-size);
+  stroke-width: 2.66; /* ≈ 1.33 px at 16 px */
+}
+
+.medo-tag--sm .medo-tag__icon > svg {
+  stroke-width: 3; /* 1.5 px at 12 px */
+}
+
+/* ---------- Selectable (filter) ---------- */
+
+.medo-tag--selectable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.medo-tag--selectable[data-hovered] {
+  --_bg: var(--medo-color-action-secondary-hover);
+}
+.medo-tag--selectable[data-pressed] {
+  --_bg: var(--medo-color-action-secondary-pressed);
+}
+
+.medo-tag[data-selected] {
+  --_bg: var(--medo-color-action-selected);
+  --_fg: var(--medo-color-text-brand);
+  --_icon: var(--medo-color-text-brand);
+}
+.medo-tag[data-selected][data-hovered] {
+  --_bg: var(--medo-color-action-selected-hover);
+}
+.medo-tag[data-selected][data-pressed] {
+  --_bg: var(--medo-color-action-selected-pressed);
+  --_fg: var(--medo-color-text-brand-hover);
+  --_icon: var(--medo-color-text-brand-hover);
+}
+
+/* ---------- Focus · disabled ---------- */
+
+.medo-tag[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+.medo-tag[data-disabled] {
+  --_bg: var(--medo-color-action-disabled);
+  --_fg: var(--medo-color-text-disabled);
+  --_icon: var(--medo-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* ---------- Remove button (x) ---------- */
+
+.medo-tag__remove {
+  --_size: var(--medo-space-6);
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--medo-radius-full);
+  background-color: transparent;
+  color: var(--medo-color-text-secondary);
+  cursor: pointer;
+  outline: none;
+  transition: background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-tag__remove > svg {
+  inline-size: var(--medo-space-4);
+  block-size: var(--medo-space-4);
+  stroke-width: 2.66;
+}
+
+.medo-tag--sm .medo-tag__remove {
+  --_size: var(--medo-space-4);
+}
+
+.medo-tag--sm .medo-tag__remove > svg {
+  inline-size: var(--medo-space-3);
+  block-size: var(--medo-space-3);
+  stroke-width: 3;
+}
+
+/* sm: 16 px visible, 24 × 24 px hit area (WCAG 2.5.8). */
+.medo-tag--sm .medo-tag__remove::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--medo-space-1));
+}
+
+.medo-tag__remove[data-hovered] {
+  background-color: var(--medo-color-state-hover);
+  color: var(--medo-color-text-primary);
+}
+.medo-tag__remove[data-pressed] {
+  background-color: var(--medo-color-state-pressed);
+  color: var(--medo-color-text-primary);
+}
+.medo-tag__remove[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring-inset);
+}
+.medo-tag__remove[data-disabled] {
+  background-color: transparent;
+  color: var(--medo-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* ---------- System settings ---------- */
+
+@media (forced-colors: active) {
+  .medo-tag {
+    border: var(--medo-border-width-thin) solid CanvasText;
+  }
+  .medo-tag[data-selected] {
+    border-width: var(--medo-border-width-thick);
+  }
+  .medo-tag[data-focus-visible],
+  .medo-tag__remove[data-focus-visible] {
+    outline: var(--medo-focus-ring-width) solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+/* New tags pop in with a snappy spring (filters, multi-select). */
+@starting-style {
+  .medo-tag {
+    opacity: 0;
+    scale: 0.9;
+  }
+}
+.medo-tag {
+  transition:
+    background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+    color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+    opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+    scale var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @starting-style {
+    .medo-tag {
+      scale: none;
+    }
+  }
+}

package/src/text-field/input.css

@@ -0,0 +1,206 @@
+/**
+ * Input + Textarea – med.o Design System
+ *
+ * <div class="medo-input medo-input--md">
+ *   <span class="medo-input__icon">…</span>
+ *   <input class="medo-input__control">
+ *   <button class="medo-input__action" aria-label="…">…</button>
+ * </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 the automatic zoom of mobile browsers).
+ * Focus: the border turns focus/ring plus 1 px inside (flush, no outer band).
+ */
+
+.medo-input,
+.medo-textarea {
+  --_border: var(--medo-color-border-strong);
+
+  box-sizing: border-box;
+  inline-size: 100%;
+  border: var(--medo-border-width-thin) solid var(--_border);
+  border-radius: var(--medo-radius-md);
+  background-color: var(--medo-color-surface-default);
+  color: var(--medo-color-text-primary);
+  font: var(--medo-typography-body-sm);
+  transition:
+    border-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+    box-shadow var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-input {
+  display: flex;
+  align-items: center;
+  gap: var(--medo-space-2);
+  block-size: var(--medo-size-control-md);
+  padding-inline: var(--medo-space-3);
+  cursor: text;
+}
+
+.medo-input__control {
+  flex: 1;
+  min-inline-size: 0;
+  block-size: 100%;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.medo-input__control::placeholder,
+.medo-textarea::placeholder {
+  color: var(--medo-color-text-secondary);
+  opacity: 1;
+}
+
+.medo-input__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  inline-size: var(--medo-size-icon-sm);
+  block-size: var(--medo-size-icon-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-input__icon > svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* ---------- Textarea ---------- */
+
+.medo-textarea {
+  display: block;
+  padding: var(--medo-space-2) var(--medo-space-3);
+  /* 3 rows minimum, grows with the content up to 8 rows (where supported), then scrolls. */
+  min-block-size: calc(3lh + 2 * var(--medo-space-2) + 2 * var(--medo-border-width-thin));
+  max-block-size: calc(8lh + 2 * var(--medo-space-2) + 2 * var(--medo-border-width-thin));
+  field-sizing: content;
+  resize: vertical;
+  overflow: auto;
+  outline: none;
+}
+
+/* ---------- States ---------- */
+
+@media (hover: hover) {
+  .medo-input:hover:not(:has(> .medo-input__control:is(:disabled, [readonly]))),
+  .medo-textarea:hover:not(:disabled, [readonly]) {
+    --_border: var(--medo-color-border-strong-hover);
+  }
+}
+
+.medo-input:has(> .medo-input__control[data-invalid]),
+.medo-textarea[data-invalid] {
+  --_border: var(--medo-color-border-danger);
+}
+
+.medo-input:has(> .medo-input__control:focus),
+.medo-textarea:focus {
+  --_border: var(--medo-color-focus-ring);
+  box-shadow: inset 0 0 0 var(--medo-border-width-thin) var(--medo-color-focus-ring);
+}
+
+.medo-input:has(> .medo-input__control[readonly]),
+.medo-textarea[readonly] {
+  --_border: var(--medo-color-border-default);
+  background-color: var(--medo-color-surface-subtle);
+}
+
+.medo-input:has(> .medo-input__control:disabled),
+.medo-textarea:disabled {
+  --_border: var(--medo-color-border-default);
+  background-color: var(--medo-color-action-disabled);
+  color: var(--medo-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.medo-input:has(> .medo-input__control:disabled) .medo-input__icon {
+  color: var(--medo-color-text-disabled);
+}
+
+@media (forced-colors: active) {
+  .medo-input:has(> .medo-input__control:focus),
+  .medo-textarea:focus {
+    outline: var(--medo-focus-ring-width) solid Highlight;
+  }
+}
+
+/* Color fades stay with reduced motion – they do not move anything. */
+
+/* ---------- Sizes ---------- */
+
+.medo-input--sm {
+  block-size: var(--medo-size-control-sm);
+}
+
+.medo-input--lg {
+  block-size: var(--medo-size-control-lg);
+  padding-inline: var(--medo-space-4);
+  font: var(--medo-typography-body-md);
+}
+
+.medo-input--lg .medo-input__icon {
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+}
+
+.medo-textarea--lg {
+  padding: var(--medo-space-3) var(--medo-space-4);
+  font: var(--medo-typography-body-md);
+  min-block-size: calc(3lh + 2 * var(--medo-space-3) + 2 * var(--medo-border-width-thin));
+  max-block-size: calc(8lh + 2 * var(--medo-space-3) + 2 * var(--medo-border-width-thin));
+}
+
+/* ---------- Trailing action (e.g. clear, show password) ---------- */
+
+.medo-input__action {
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: var(--medo-size-icon-lg);
+  block-size: var(--medo-size-icon-lg);
+  margin-inline-end: calc(-1 * var(--medo-space-1));
+  padding: 0;
+  border: 0;
+  border-radius: var(--medo-radius-sm);
+  background: transparent;
+  color: var(--medo-color-text-secondary);
+  cursor: pointer;
+  outline: none;
+}
+
+.medo-input__action > svg {
+  inline-size: var(--medo-size-icon-sm);
+  block-size: var(--medo-size-icon-sm);
+}
+
+.medo-input__action[data-hovered] {
+  background: var(--medo-color-state-hover);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-input__action[data-pressed] {
+  background: var(--medo-color-state-pressed);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-input__action[data-focus-visible] {
+  box-shadow: inset 0 0 0 var(--medo-focus-ring-width) var(--medo-color-focus-ring);
+}
+
+.medo-input__action[data-disabled] {
+  color: var(--medo-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.medo-input--lg .medo-input__action {
+  inline-size: var(--medo-size-control-sm);
+  block-size: var(--medo-size-control-sm);
+}
+
+.medo-input--lg .medo-input__action > svg {
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+}