@med-o/ui 0.0.0-stage → 0.3.0

package/src/search/search.css

@@ -0,0 +1,309 @@
+/**
+ * Search – med.o Design System
+ *
+ * Search field:  <div class="medo-field medo-search-field" [data-empty]> label · .medo-input (icon · input · clear) </div>
+ * Search result: <article class="medo-search-result medo-search-result--base|aesthetic"> leading · path · title link · snippet · meta </article>
+ *   inside <ul class="medo-search-results" role="list"><li>…</li></ul>
+ *   Base: padding 16 · gap 16 · title label/lg text/brand · divider · radius/sm
+ *   Aesthetic: padding 20 · gap 20 · title heading/sm text/primary · no divider · radius/lg · 8 between hits
+ *   Matches: <mark class="medo-search-result__match"> in bold – never colour alone.
+ * Quick search: Dialog shell (surface/raised, radius/lg, elevation/4), 640 wide, near the top · mobile full screen.
+ */
+
+/* ---------- Search field ---------- */
+
+/* The clear button shows only when there is a term. */
+.medo-search-field[data-empty] .medo-search-field__clear {
+  display: none;
+}
+
+/* Hide the browser's own clear button – ours is the same on every browser. */
+.medo-search-field .medo-input__control::-webkit-search-cancel-button,
+.medo-search-field .medo-input__control::-webkit-search-decoration {
+  appearance: none;
+}
+
+/* ---------- Search result ---------- */
+
+.medo-search-results {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.medo-search-results:has(> li > .medo-search-result--aesthetic) {
+  gap: var(--medo-space-2);
+}
+
+.medo-search-result {
+  --_pad: var(--medo-space-4);
+
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--_pad);
+  padding: var(--_pad);
+  border-radius: var(--medo-radius-sm);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-search-result--base {
+  border-block-end: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+.medo-search-result--aesthetic {
+  --_pad: var(--medo-space-5);
+  border-radius: var(--medo-radius-lg);
+}
+
+/* The whole result is the link's hit area; the state layer and focus ring sit on the result. */
+.medo-search-result:has(.medo-search-result__link[data-hovered]) {
+  background-color: var(--medo-color-state-hover);
+}
+
+.medo-search-result:has(.medo-search-result__link[data-pressed]) {
+  background-color: var(--medo-color-state-pressed);
+}
+
+.medo-search-result:has(.medo-search-result__link[data-focus-visible]) {
+  box-shadow: var(--medo-shadow-focus-ring-inset);
+}
+
+.medo-search-result__leading {
+  display: flex;
+  flex: none;
+}
+
+/* Media: image 4:3, 128 wide (aesthetic 160), radius/md. */
+.medo-search-result--media .medo-search-result__leading {
+  overflow: hidden;
+  inline-size: 8rem;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--medo-radius-md);
+  background-color: var(--medo-color-surface-subtle);
+}
+
+.medo-search-result--media.medo-search-result--aesthetic .medo-search-result__leading {
+  inline-size: 10rem;
+}
+
+.medo-search-result--media .medo-search-result__leading > :is(img, picture, video, .medo-image) {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+.medo-search-result__content {
+  display: grid;
+  flex: 1;
+  gap: var(--medo-space-1);
+  min-inline-size: 0;
+}
+
+.medo-search-result__path {
+  font: var(--medo-typography-caption);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-search-result__title {
+  margin: 0;
+  font: var(--medo-typography-label-lg);
+  color: var(--medo-color-text-brand);
+}
+
+.medo-search-result--aesthetic .medo-search-result__title {
+  font: var(--medo-typography-heading-sm);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-search-result__link {
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+.medo-search-result__link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.medo-search-result__link[data-hovered] {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.medo-search-result__snippet {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+/* Matches: bold, never colour alone. */
+.medo-search-result__match {
+  background: none;
+  color: inherit;
+  font-weight: var(--medo-font-weight-bold);
+}
+
+.medo-search-result__snippet .medo-search-result__match {
+  color: var(--medo-color-text-primary);
+  font-weight: var(--medo-font-weight-semibold);
+}
+
+.medo-search-result__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--medo-space-2);
+  padding-block-start: var(--medo-space-1);
+}
+
+.medo-search-result__meta-text {
+  font: var(--medo-typography-caption);
+  color: var(--medo-color-text-secondary);
+}
+
+/* ---------- Quick search ---------- */
+
+/* Near the top, so the list can grow downwards without the field jumping. */
+.medo-dialog-overlay.medo-quick-search-overlay {
+  align-items: start;
+  padding-block-start: 12vh;
+}
+
+.medo-dialog.medo-quick-search {
+  --_width: 40rem; /* 640 */
+  max-block-size: min(36rem, 100%);
+}
+
+.medo-quick-search__dialog {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  outline: none;
+}
+
+.medo-quick-search__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--medo-space-2);
+  padding: var(--medo-space-3);
+  border-block-end: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+.medo-quick-search__field {
+  flex: 1;
+}
+
+.medo-quick-search__scroll {
+  display: grid;
+  flex: 1;
+  align-content: start;
+  gap: var(--medo-space-1);
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: var(--medo-space-2);
+  outline: none;
+}
+
+.medo-quick-search__scroll:focus-visible {
+  box-shadow: var(--medo-shadow-focus-ring-inset);
+}
+
+/* Nothing to show (empty field without recent searches): no empty box. */
+.medo-quick-search__scroll:not(:has([role='option'], .medo-quick-search__message)) {
+  display: none;
+}
+
+.medo-quick-search__message {
+  margin: 0;
+  padding: var(--medo-space-2);
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-quick-search__all {
+  display: flex;
+  align-items: center;
+  gap: var(--medo-space-2);
+  min-block-size: calc(var(--medo-space-8) + var(--medo-space-1)); /* 36, like Option md */
+  padding: var(--medo-space-2);
+  border: 0;
+  border-radius: var(--medo-radius-sm);
+  background: none;
+  color: var(--medo-color-text-primary);
+  font: var(--medo-typography-body-sm);
+  text-align: start;
+  cursor: pointer;
+  outline: none;
+}
+
+.medo-quick-search__all > svg {
+  flex: none;
+  inline-size: var(--medo-size-icon-sm);
+  block-size: var(--medo-size-icon-sm);
+}
+
+.medo-quick-search__all[data-hovered] {
+  background-color: var(--medo-color-state-hover);
+}
+
+.medo-quick-search__all[data-focus-visible] {
+  box-shadow: var(--medo-shadow-focus-ring-inset);
+}
+
+.medo-quick-search__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--medo-space-4);
+  padding: var(--medo-space-2) var(--medo-space-4);
+  background-color: var(--medo-color-surface-subtle);
+  font: var(--medo-typography-caption);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-quick-search__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--medo-space-1-5);
+}
+
+.medo-quick-search__all-results {
+  margin-inline-start: auto;
+}
+
+/* Mobile: full screen, field + Cancel on top, list below. */
+.medo-dialog-overlay.medo-quick-search-overlay--mobile {
+  padding: 0;
+}
+
+.medo-dialog.medo-quick-search--mobile {
+  --_width: 100%;
+  block-size: 100%;
+  max-block-size: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.medo-quick-search--mobile .medo-quick-search__bar {
+  padding: var(--medo-space-3) var(--medo-space-2) var(--medo-space-3) var(--medo-space-3);
+}
+
+/* The scroll region scrolls, not the listbox. */
+.medo-quick-search .medo-quick-search__list {
+  max-block-size: none;
+  overflow: visible;
+  padding: 0;
+}

package/src/select/select.css

@@ -0,0 +1,229 @@
+/**
+ * Select – med.o Design System
+ *
+ * Input anatomy plus a chevron; the whole field is one button that opens the Listbox.
+ *   <div class="medo-field medo-select" data-open data-invalid data-disabled data-readonly>
+ *     <span class="medo-field__label">Country</span>
+ *     <div class="medo-input medo-input--md medo-select__field">
+ *       <button class="medo-select__trigger">
+ *         <span class="medo-input__icon">…</span>
+ *         <span class="medo-select__value">Germany</span>      (or tags for multi)
+ *         <span class="medo-select__chevron">⌄</span>
+ *       </button>
+ *       <button class="medo-input__action medo-select__clear" aria-label="Clear selection">×</button>
+ *     </div>
+ *     …helper / error…
+ *   </div>
+ * The clear button sits beside the trigger (never inside it: no button in a button).
+ */
+
+.medo-select__field {
+  --_pad: var(--medo-space-3);
+  --_pad-start: var(--_pad);
+  --_icon: var(--medo-size-icon-sm);
+  --_clear: var(--medo-size-icon-lg);
+
+  position: relative;
+  cursor: pointer;
+}
+
+/* The trigger carries the padding (higher specificity than .medo-input, independent of CSS order). */
+.medo-input.medo-select__field {
+  padding-inline: 0;
+}
+
+.medo-select__field.medo-input--lg {
+  --_pad: var(--medo-space-4);
+  --_icon: var(--medo-size-icon-md);
+  --_clear: var(--medo-size-control-sm);
+}
+
+/* Multi with values: tags start closer to the edge (sm 4 · md/lg 8). */
+.medo-select--tags .medo-select__field {
+  --_pad-start: var(--medo-space-2);
+}
+.medo-select--tags .medo-select__field.medo-input--sm {
+  --_pad-start: var(--medo-space-1);
+}
+
+.medo-select__trigger {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--medo-space-2);
+  min-inline-size: 0;
+  block-size: 100%;
+  padding-block: 0;
+  padding-inline: var(--_pad-start) var(--_pad);
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: inherit;
+  outline: none;
+}
+
+/* Room for the clear button between value and chevron (the button itself sits beside the trigger). */
+.medo-select--clearable .medo-select__chevron {
+  margin-inline-start: calc(var(--_clear) + var(--medo-space-2));
+}
+
+.medo-select__value {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.medo-select__value[data-placeholder] {
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-select__chevron {
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--_icon);
+  block-size: var(--_icon);
+  color: var(--medo-color-text-secondary);
+  transition: transform var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy);
+}
+
+.medo-select__chevron > svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.medo-select[data-open] .medo-select__chevron {
+  transform: rotate(180deg);
+}
+
+.medo-select__clear {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: calc(var(--_pad) + var(--_icon) + var(--medo-space-2));
+  display: flex;
+  translate: 0 -50%;
+}
+
+.medo-select__clear > .medo-input__action {
+  margin: 0;
+}
+
+/* ---------- Mobile: native picker (single) ---------- */
+
+/* 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;
+  inline-size: 100%;
+  block-size: 100%;
+  margin: 0;
+  border: 0;
+  opacity: 0;
+  font-size: 1rem;
+  cursor: pointer;
+  appearance: none;
+}
+
+.medo-select:has(.medo-select__native:focus-visible) .medo-select__field {
+  --_border: var(--medo-color-focus-ring);
+  box-shadow: inset 0 0 0 var(--medo-border-width-thin) var(--medo-color-focus-ring);
+}
+
+/* The clear button stays above the native select. */
+.medo-select__clear {
+  z-index: 1;
+}
+
+/* ---------- Tags (multi) ---------- */
+
+.medo-select__tags {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--medo-space-1);
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.medo-select__tags .medo-tag {
+  flex: none;
+  max-inline-size: 100%;
+}
+
+.medo-select__tags .medo-tag:first-child {
+  flex-shrink: 1;
+  min-inline-size: 0;
+}
+
+.medo-select__tag-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Hidden copy that measures every tag, so the visible row knows how many fit. */
+.medo-select__measure {
+  position: absolute;
+  inset-inline-start: 0;
+  display: flex;
+  gap: var(--medo-space-1);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* ---------- States ---------- */
+
+.medo-select:is([data-open], :has(.medo-select__trigger[data-focus-visible])) .medo-select__field {
+  --_border: var(--medo-color-focus-ring);
+  box-shadow: inset 0 0 0 var(--medo-border-width-thin) var(--medo-color-focus-ring);
+}
+
+.medo-select[data-invalid] .medo-select__field {
+  --_border: var(--medo-color-border-danger);
+}
+
+.medo-select[data-readonly] .medo-select__field {
+  --_border: var(--medo-color-border-default);
+  background-color: var(--medo-color-surface-subtle);
+  cursor: default;
+}
+
+.medo-select[data-disabled] .medo-select__field {
+  --_border: var(--medo-color-border-default);
+  background-color: var(--medo-color-action-disabled);
+  color: var(--medo-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.medo-select[data-disabled] :is(.medo-select__value[data-placeholder], .medo-select__chevron, .medo-input__icon) {
+  color: var(--medo-color-text-disabled);
+}
+
+.medo-select[data-disabled] .medo-tag {
+  --_bg: transparent;
+  --_fg: var(--medo-color-text-disabled);
+}
+
+/* Hover only when the field can change. */
+@media (hover: hover) {
+  .medo-select:is([data-readonly], [data-disabled]) .medo-select__field:hover {
+    --_border: var(--medo-color-border-default);
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-select:is([data-open], :has(.medo-select__trigger[data-focus-visible])) .medo-select__field {
+    outline: var(--medo-focus-ring-width) solid Highlight;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .medo-select__chevron {
+    transition: transform var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+}