@med-o/ui 0.0.0-stage → 0.3.0

package/src/card/card.css

@@ -0,0 +1,217 @@
+/**
+ * Card – med.o Design System
+ *
+ * Container for one topic. Media, header actions, body and footer are optional; the title is required.
+ *   <article class="medo-card medo-card--outlined">
+ *     <div class="medo-card__media">…</div>
+ *     <div class="medo-card__main">
+ *       <div class="medo-card__header">
+ *         <div class="medo-card__heading"><h3 class="medo-card__title">…</h3><p class="medo-card__subtitle">…</p></div>
+ *         <div class="medo-card__header-actions">…</div>
+ *       </div>
+ *       <div class="medo-card__body">…</div>
+ *       <div class="medo-card__footer">…</div>
+ *     </div>
+ *   </article>
+ *
+ * Variants: outlined (default) · elevated · filled · brand · plain. Density: standard (24) · compact (16).
+ * Interactive: the title link is stretched over the card (one click target); buttons stay above it.
+ */
+
+.medo-card {
+  --_pad: var(--medo-space-6);
+  --_bg: var(--medo-color-surface-default);
+  --_border: var(--medo-color-border-default);
+
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border: var(--medo-border-width-thin) solid var(--_border);
+  border-radius: var(--medo-radius-lg);
+  background-color: var(--_bg);
+  color: var(--medo-color-text-primary);
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.medo-card--compact {
+  --_pad: var(--medo-space-4);
+}
+
+.medo-card--elevated {
+  box-shadow: var(--medo-shadow-elevation-1);
+}
+.medo-card--filled {
+  --_bg: var(--medo-color-surface-subtle);
+  --_border: transparent;
+}
+.medo-card--brand {
+  --_bg: var(--medo-color-surface-brand-subtle);
+  --_border: var(--medo-color-border-brand);
+}
+.medo-card--plain {
+  --_bg: transparent;
+  --_border: transparent;
+  --_pad: 0;
+  overflow: visible;
+}
+
+/* ---------- Parts ---------- */
+
+.medo-card__media {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background-color: var(--medo-color-surface-subtle);
+}
+
+.medo-card__media > :is(img, video, picture, .medo-image) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+.medo-card--plain .medo-card__media {
+  border-radius: var(--medo-radius-lg);
+  margin-block-end: var(--medo-space-4);
+}
+
+.medo-card__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--medo-space-4);
+  flex: 1;
+  padding: var(--_pad);
+}
+
+.medo-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--medo-space-4);
+}
+
+.medo-card__heading {
+  display: grid;
+  gap: var(--medo-space-1);
+  min-inline-size: 0;
+}
+
+.medo-card__title {
+  margin: 0;
+  font: var(--medo-typography-heading-sm);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-card__subtitle {
+  margin: 0;
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-card__body {
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-card__body > :first-child {
+  margin-block-start: 0;
+}
+.medo-card__body > :last-child {
+  margin-block-end: 0;
+}
+
+/* Footer at the bottom, so cards in a row align. */
+.medo-card__footer {
+  margin-block-start: auto;
+}
+
+/* ---------- Horizontal (lists): media 180 px wide on the left ---------- */
+
+.medo-card--horizontal {
+  flex-direction: row;
+}
+
+.medo-card--horizontal .medo-card__media {
+  flex: 0 0 11.25rem; /* 180 px */
+  aspect-ratio: auto;
+}
+
+/* ---------- Interactive: stretched title link ---------- */
+
+.medo-card__link {
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+/* The link covers the whole card. */
+.medo-card__link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+/* Buttons and other controls stay clickable above the link. */
+.medo-card :is(.medo-card__header-actions, .medo-card__footer, .medo-card__body) :is(a, button, input, select, textarea, [tabindex]) {
+  position: relative;
+  z-index: 1;
+}
+
+.medo-card--interactive {
+  cursor: pointer;
+}
+
+.medo-card--interactive::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: transparent;
+  pointer-events: none;
+  z-index: 0;
+  transition: background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-card--interactive:has(.medo-card__link[data-hovered])::before {
+  background-color: var(--medo-color-state-hover);
+}
+
+.medo-card--interactive:has(.medo-card__link[data-pressed])::before {
+  background-color: var(--medo-color-state-pressed);
+}
+
+.medo-card--interactive:has(.medo-card__link[data-focus-visible]) {
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+.medo-card--interactive.medo-card--elevated:has(.medo-card__link[data-focus-visible]) {
+  box-shadow: var(--medo-shadow-focus-ring), var(--medo-shadow-elevation-1);
+}
+
+@media (forced-colors: active) {
+  .medo-card {
+    border-color: CanvasText;
+  }
+  .medo-card--interactive:has(.medo-card__link[data-focus-visible]) {
+    outline: var(--medo-focus-ring-width) solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+/* Interactive cards give way a little while pressed and spring back. */
+.medo-card--interactive {
+  transition: scale var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy);
+}
+.medo-card--interactive:has(.medo-card__link[data-pressed]) {
+  scale: 0.98;
+  transition-duration: var(--medo-motion-duration-fast);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .medo-card--interactive:has(.medo-card__link[data-pressed]) {
+    scale: none;
+  }
+}

package/src/checkbox/choice.css

@@ -0,0 +1,196 @@
+/**
+ * Checkbox + Radio – med.o Design System
+ *
+ * <div class="medo-choice medo-checkbox medo-choice--md" data-selected …>
+ *   <label class="medo-choice__button" data-hovered data-focus-visible …>
+ *     <span class="medo-choice__control">✓</span>
+ *     <span class="medo-choice__label">Label</span>
+ *   </label>
+ *   <span class="medo-choice__description">Description</span>
+ * </div>
+ *
+ * State contract: [data-selected] [data-indeterminate] [data-hovered] [data-pressed]
+ * [data-focus-visible] [data-invalid] [data-disabled] [data-readonly]
+ * The whole row incl. label is clickable. Focus ring around the box.
+ */
+
+.medo-choice {
+  --_box: var(--medo-size-icon-sm);
+  --_gap: var(--medo-space-2);
+  --_border: var(--medo-color-border-strong);
+  --_accent: var(--medo-color-action-primary);
+
+  display: flex;
+  flex-direction: column;
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-choice--lg {
+  --_box: var(--medo-size-icon-md);
+  font: var(--medo-typography-body-md);
+}
+
+.medo-choice__button {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--_gap);
+  inline-size: fit-content;
+  cursor: pointer;
+}
+
+.medo-choice__control {
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: var(--_box);
+  block-size: var(--_box);
+  /* Aligns the box with the first line of the label (20 px line, 16 px box). */
+  margin-block-start: var(--medo-space-0-5);
+  border: var(--medo-border-width-thin) solid var(--_border);
+  background-color: var(--medo-color-surface-default);
+  color: var(--medo-color-text-on-action);
+  transition:
+    background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+    border-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-checkbox .medo-choice__control {
+  border-radius: var(--medo-radius-sm);
+}
+
+.medo-checkbox .medo-choice__control > svg {
+  /* 2 px inset (md 16 → 12, lg 20 → 16). 75 % gave 15 px in lg:
+     odd size, half-pixel offset, so the mark looked off-centre. */
+  inline-size: calc(var(--_box) - 2 * var(--medo-space-0-5));
+  block-size: calc(var(--_box) - 2 * var(--medo-space-0-5));
+  stroke-width: 3;
+}
+
+.medo-radio .medo-choice__control {
+  border-radius: var(--medo-radius-full);
+}
+
+.medo-radio .medo-choice__control::after {
+  content: '';
+  /* Half of the outer size (md 16 → 8, lg 20 → 10). A % of the inner box
+     gives odd sizes (7 px) and a half-pixel offset, so the dot looks off-centre. */
+  inline-size: calc(var(--_box) / 2);
+  block-size: calc(var(--_box) / 2);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--_accent);
+  transform: scale(0);
+  transition: transform var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy);
+}
+
+/* The check pops in with a snappy spring. */
+.medo-checkbox .medo-choice__control > svg {
+  transition:
+    scale var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy),
+    opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+@starting-style {
+  .medo-checkbox .medo-choice__control > svg {
+    scale: 0.4;
+    opacity: 0;
+  }
+}
+
+.medo-choice__description {
+  margin-inline-start: calc(var(--_box) + var(--_gap));
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+/* ---------- States ---------- */
+
+.medo-choice__button[data-hovered] {
+  --_border: var(--medo-color-border-strong-hover);
+  --_accent: var(--medo-color-action-primary-hover);
+}
+
+.medo-choice[data-invalid] {
+  --_border: var(--medo-color-border-danger);
+}
+
+/* Checkbox checked / indeterminate: filled box */
+.medo-checkbox:is([data-selected], [data-indeterminate]) .medo-choice__control {
+  border-color: var(--_accent);
+  background-color: var(--_accent);
+}
+
+/* Radio selected: outline + dot */
+.medo-radio[data-selected] .medo-choice__control {
+  border-color: var(--_accent);
+}
+
+.medo-radio[data-selected] .medo-choice__control::after {
+  transform: scale(1);
+}
+
+.medo-choice__button[data-focus-visible] .medo-choice__control {
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+.medo-choice[data-readonly] .medo-choice__button {
+  cursor: default;
+}
+
+.medo-choice[data-disabled] {
+  --_border: var(--medo-color-border-default);
+  --_accent: var(--medo-color-border-default);
+  color: var(--medo-color-text-disabled);
+}
+
+.medo-choice[data-disabled] .medo-choice__button {
+  cursor: not-allowed;
+}
+
+.medo-choice[data-disabled] .medo-choice__control {
+  background-color: var(--medo-color-action-disabled);
+  color: var(--medo-color-text-disabled);
+}
+
+.medo-checkbox[data-disabled]:is([data-selected], [data-indeterminate]) .medo-choice__control {
+  background-color: var(--medo-color-action-disabled);
+}
+
+.medo-radio[data-disabled] .medo-choice__control::after {
+  background-color: var(--medo-color-text-disabled);
+}
+
+@media (forced-colors: active) {
+  .medo-choice__control {
+    border-color: CanvasText;
+  }
+  .medo-checkbox:is([data-selected], [data-indeterminate]) .medo-choice__control,
+  .medo-radio[data-selected] .medo-choice__control::after {
+    background-color: Highlight;
+    border-color: Highlight;
+  }
+  .medo-choice__button[data-focus-visible] .medo-choice__control {
+    outline: var(--medo-focus-ring-width) solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: marks fade in, nothing grows. */
+  .medo-radio .medo-choice__control::after {
+    transform: none;
+    opacity: 0;
+    transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-radio[data-selected] .medo-choice__control::after {
+    opacity: 1;
+  }
+  .medo-checkbox .medo-choice__control > svg {
+    transition: opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  @starting-style {
+    .medo-checkbox .medo-choice__control > svg {
+      scale: none;
+    }
+  }
+}

package/src/combobox/combobox.css

@@ -0,0 +1,125 @@
+/**
+ * Combobox – med.o Design System
+ *
+ * A Select you can type into. Input anatomy; clear and chevron are separate buttons (_Input action).
+ *   <div class="medo-field medo-combobox" data-open data-invalid data-disabled data-readonly>
+ *     <label class="medo-field__label">Assignee</label>
+ *     <div class="medo-input medo-input--md medo-combobox__field" role="group">
+ *       <span class="medo-input__icon">…</span>
+ *       <span class="medo-combobox__tags-row">tags · “+N”</span>   (multi)
+ *       <input class="medo-input__control medo-combobox__input" role="combobox">
+ *       <button class="medo-input__action" aria-label="Clear">×</button>
+ *       <button class="medo-input__action medo-combobox__toggle">⌄</button>
+ *     </div>
+ *   </div>
+ * The list is the shared Listbox (medo-listbox) in a popover anchored to the whole field.
+ */
+
+/* Multi with values: tags start closer to the edge (sm 4 · md/lg 8). */
+.medo-combobox__field:has(.medo-combobox__tags-row) {
+  padding-inline-start: var(--medo-space-2);
+}
+.medo-combobox__field.medo-input--sm:has(.medo-combobox__tags-row) {
+  padding-inline-start: var(--medo-space-1);
+}
+
+/* Clear and toggle: 8 px apart, flush with the field padding. */
+.medo-combobox__field > .medo-input__action {
+  margin-inline-end: 0;
+}
+
+.medo-combobox__toggle > svg {
+  transition: transform var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy);
+}
+
+.medo-combobox__toggle[data-pressed]:not([data-hovered]) {
+  /* React Aria marks the toggle as pressed while the list is open: only the chevron flips. */
+  background: transparent;
+}
+
+.medo-combobox[data-open] .medo-combobox__toggle > svg {
+  transform: rotate(180deg);
+}
+
+.medo-combobox__input {
+  min-inline-size: 4rem;
+}
+
+/* ---------- Tags (multi) ---------- */
+
+.medo-combobox__entry {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--medo-space-1);
+  min-inline-size: 0;
+  block-size: 100%;
+}
+
+.medo-combobox__tags-row {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--medo-space-1);
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+/* The tag group behaves like a plain row inside the field. */
+.medo-combobox__tags {
+  flex-direction: row;
+  gap: 0;
+  min-inline-size: 0;
+}
+
+.medo-combobox__tags .medo-tag-list {
+  flex-wrap: nowrap;
+  gap: var(--medo-space-1);
+  min-inline-size: 0;
+}
+
+.medo-combobox__tags .medo-tag:first-child {
+  flex-shrink: 1;
+  min-inline-size: 0;
+}
+
+.medo-combobox__more {
+  flex: none;
+}
+
+/* Hidden copy that measures every tag, so the visible row knows how many fit. */
+.medo-combobox__measure {
+  position: absolute;
+  inset-inline-start: 0;
+  display: flex;
+  gap: var(--medo-space-1);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* ---------- States ---------- */
+
+.medo-combobox[data-open] .medo-combobox__field {
+  --_border: var(--medo-color-focus-ring);
+  box-shadow: inset 0 0 0 var(--medo-border-width-thin) var(--medo-color-focus-ring);
+}
+
+.medo-combobox[data-invalid] .medo-combobox__field {
+  --_border: var(--medo-color-border-danger);
+}
+
+.medo-combobox[data-invalid]:is([data-open], :focus-within) .medo-combobox__field {
+  --_border: var(--medo-color-focus-ring);
+}
+
+.medo-combobox[data-disabled] .medo-tag {
+  --_bg: transparent;
+  --_fg: var(--medo-color-text-disabled);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .medo-combobox__toggle > svg {
+    transition: transform var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+}