@revikornmann/muka-ui 0.17.0 → 0.19.0

package/dist/styles/components/Menu.css

@@ -3,14 +3,16 @@
 /* ─── Content Container ──────────────────────────────────────────────────── */
 
 .muka-menu__content {
+  display: flex;
+  flex-direction: column;
   min-width: var(--menu-content-min-width);
   max-height: var(--menu-content-max-height);
-  overflow-y: auto;
+  overflow: hidden;
   background-color: var(--menu-content-color-background);
   border: var(--menu-content-border-width) solid var(--menu-content-color-border);
   border-radius: var(--menu-content-border-radius);
   box-shadow: var(--menu-content-shadow);
-  padding: var(--menu-content-padding);
+  padding: 0;
   z-index: 50;
 
   /* Animation */
@@ -18,6 +20,132 @@
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.muka-menu__body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  align-items: stretch;
+  width: 100%;
+}
+
+.muka-menu__viewport {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--menu-content-padding);
+}
+
+.muka-menu__content--scrollbar .muka-menu__viewport {
+  /* Custom scrollbar owns the chrome; hide native track */
+  scrollbar-width: none;
+}
+
+.muka-menu__content--scrollbar .muka-menu__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+/* ─── Search header ──────────────────────────────────────────────────────── */
+
+.muka-menu__search {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  /* Figma dropdown filter header: 48px, 8px inset, 32px icon slots. */
+  height: var(--input-field-height-lg, 3rem);
+  padding: 0 var(--spacing-2);
+  border-bottom: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-menu__search--sm {
+  height: calc(var(--size-xl, 1.5rem) + var(--spacing-2) * 2);
+}
+
+.muka-menu__search-icon,
+.muka-menu__search-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--size-2xl, 2rem);
+  height: var(--size-2xl, 2rem);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-menu__search-icon .muka-icon,
+.muka-menu__search-clear .muka-icon,
+.muka-menu__search-clear:hover,
+.muka-menu__search-clear:hover .muka-icon {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-menu__search--sm .muka-menu__search-icon,
+.muka-menu__search--sm .muka-menu__search-clear {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
+}
+
+.muka-menu__search-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0 var(--spacing-1);
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  font-weight: var(--text-input-md-fontWeight);
+  line-height: var(--text-input-md-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-menu__search--sm .muka-menu__search-input {
+  font-family: var(--text-input-sm-fontFamily);
+  font-size: var(--text-input-sm-fontSize);
+  font-weight: var(--text-input-sm-fontWeight);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-menu__search-input::placeholder {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-menu__search-input::-webkit-search-cancel-button,
+.muka-menu__search-input::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.muka-menu__empty {
+  display: flex;
+  align-items: center;
+  min-height: var(--menu-item-height);
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  font-weight: var(--text-input-md-fontWeight);
+  line-height: var(--text-input-md-lineHeight);
+  pointer-events: none;
+  user-select: none;
+}
+
+.muka-menu__search-clear {
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.muka-menu__match {
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.muka-menu__content--scrollbar {
+  height: var(--menu-content-scroll-height, 20.625rem);
+  max-height: var(--menu-content-scroll-height, 20.625rem);
+}
+
 .muka-menu__content[data-state='open'] {
   animation-name: muka-menu-fade-in;
 }
@@ -45,22 +173,26 @@
 /* ─── Menu Item ──────────────────────────────────────────────────────────── */
 
 .muka-menu__item {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--menu-item-gap);
   min-height: var(--menu-item-height);
-  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  /* Right gutter always reserved for floating trailers (enter / check). */
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-right) var(--menu-item-padding-y)
+    var(--menu-item-padding-x);
   border-radius: var(--menu-item-border-radius);
   cursor: pointer;
   user-select: none;
   outline: none;
-  font-family: var(--text-label-md-regular-font-family);
-  font-size: var(--text-label-md-regular-font-size);
-  font-weight: var(--text-label-md-regular-font-weight);
-  line-height: var(--text-label-md-regular-line-height);
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-size: var(--text-label-md-regular-fontSize);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  line-height: var(--text-label-md-regular-lineHeight);
   color: var(--menu-item-color-default-foreground);
   background-color: var(--menu-item-color-default-background);
   transition: background-color 100ms ease, color 100ms ease;
+  white-space: nowrap;
 }
 
 .muka-menu__item:hover,
@@ -126,25 +258,55 @@
 }
 
 .muka-menu__item-label {
-  flex: 1;
+  flex: 1 1 auto;
   min-width: 0;
+  white-space: nowrap;
+}
+
+/* Shortcut trailers replace icons and sit with an 8px right inset. */
+.muka-menu__item--has-shortcut {
+  padding-right: var(--spacing-2);
 }
 
 .muka-menu__item-shortcut {
   flex-shrink: 0;
   margin-left: auto;
   padding-left: var(--menu-item-gap);
-  font-size: var(--text-label-sm-regular-font-size);
-  color: var(--menu-shortcut-color);
-  opacity: 0.7;
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-muted-default);
+  white-space: nowrap;
+}
+
+.muka-menu__item-hint {
+  /* Figma: trailer sits with 8px margin top / right / bottom; 24px glyph centered inside. */
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  bottom: var(--spacing-2);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size-default, 1.5rem);
+  color: var(--color-text-muted-default);
+  pointer-events: none;
+}
+
+.muka-menu__item--hint-enter[data-highlighted] .muka-menu__item-hint {
+  display: flex;
 }
 
 .muka-menu__item-chevron {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  bottom: var(--spacing-2);
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  margin-left: auto;
+  width: var(--icon-size-default, 1.5rem);
   color: var(--menu-shortcut-color);
 }
 
@@ -165,6 +327,40 @@
   padding-left: var(--menu-item-padding-x);
 }
 
+.muka-menu__item--checkbox-trailing,
+.muka-menu__item--radio-check {
+  /* Same reserved right gutter as default items — trailing indicator floats. */
+  padding-right: var(--menu-item-padding-right);
+}
+
+.muka-menu__item--radio-check[data-state='checked'] {
+  background-color: var(--menu-item-color-selected-background);
+}
+
+.muka-menu__item-indicator--trailing {
+  /* Match enter-hint trailer: 8px inset, 24px box (override leading indicator size). */
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  bottom: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size-default, 1.5rem);
+  height: auto;
+  max-height: none;
+  transform: none;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-menu__item-indicator--trailing > [data-state] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
 .muka-menu__radio-dot {
   width: 8px;
   height: 8px;
@@ -188,10 +384,10 @@
 
 .muka-menu__group-label {
   padding: var(--menu-group-label-padding-y) var(--menu-group-label-padding-x);
-  font-family: var(--text-label-sm-semibold-font-family);
-  font-size: var(--text-label-sm-semibold-font-size);
-  font-weight: var(--text-label-sm-semibold-font-weight);
-  line-height: var(--text-label-sm-semibold-line-height);
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  line-height: var(--text-label-sm-semibold-lineHeight);
   color: var(--menu-group-label-color);
   text-transform: uppercase;
   letter-spacing: 0.05em;

package/dist/styles/components/ProgressTracker.css

@@ -3,19 +3,22 @@
 /* ─── Root ──────────────────────────────────────────────── */
 .muka-progress-tracker {
   width: 100%;
+}
+
+.muka-progress-tracker--horizontal {
   padding-bottom: var(--spacing-7);
 }
 
 /* ─── Track (layered container) ─────────────────────────── */
-.muka-progress-tracker__track {
+.muka-progress-tracker--horizontal .muka-progress-tracker__track {
   position: relative;
   /* Vertical padding = (indicator size - connector height) / 2 = (32 - 4) / 2 = 14px */
   padding-top: 14px;
   padding-bottom: 14px;
 }
 
-/* ─── Steps layer (on top) ──────────────────────────────── */
-.muka-progress-tracker__steps {
+/* ─── Steps layer (on top) — horizontal ─────────────────── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__steps {
   position: absolute;
   inset: 0;
   display: flex;
@@ -24,13 +27,16 @@
   z-index: 2;
 }
 
-/* ─── Individual step ───────────────────────────────────── */
-.muka-progress-tracker__step {
+/* ─── Individual step — horizontal ──────────────────────── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__step {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 7px;
   position: relative;
+  /* Labels are absolutely positioned so the step stays 32px and
+     circle centers line up with the connector padding. */
+  width: 32px;
+  flex: 0 0 32px;
 }
 
 /* ─── Step indicator (circle) ───────────────────────────── */
@@ -43,20 +49,24 @@
   justify-content: center;
   flex-shrink: 0;
   position: relative;
+  z-index: 1;
 }
 
 /* Past: dark accent contrast circle with white checkmark */
 .muka-progress-tracker__indicator--past {
   background-color: var(--alias-color-accent-contrast);
   color: var(--color-text-default-inverse);
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past {
   cursor: pointer;
 }
 
-.muka-progress-tracker__indicator--past:hover {
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past:hover {
   background-color: var(--alias-color-accent-pressed);
 }
 
-.muka-progress-tracker__indicator--past:focus-visible {
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past:focus-visible {
   outline: 2px solid var(--color-border-focus);
   outline-offset: 2px;
 }
@@ -83,6 +93,18 @@
   user-select: none;
 }
 
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--upcoming .muka-progress-tracker__number {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__indicator--upcoming .muka-progress-tracker__number {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
 /* ─── Checkmark icon ────────────────────────────────────── */
 .muka-progress-tracker__check-icon {
   width: 20px;
@@ -95,8 +117,12 @@
   color: var(--color-text-default-inverse);
 }
 
-/* ─── Step label ────────────────────────────────────────── */
-.muka-progress-tracker__label {
+/* ─── Step label — horizontal ───────────────────────────── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__label {
+  position: absolute;
+  top: 39px;
+  left: 50%;
+  transform: translateX(-50%);
   font-family: var(--text-label-sm-regular-fontFamily);
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
@@ -109,14 +135,14 @@
   text-overflow: ellipsis;
 }
 
-/* Current step label is bold */
-.muka-progress-tracker__label--current {
+/* Current step label is bold (horizontal only) */
+.muka-progress-tracker--horizontal .muka-progress-tracker__label--current {
   font-family: var(--text-label-sm-bold-fontFamily);
   font-weight: var(--text-label-sm-bold-fontWeight);
 }
 
-/* ─── Connectors layer (behind indicators) ──────────────── */
-.muka-progress-tracker__connectors {
+/* ─── Connectors layer (behind indicators) — horizontal ─── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__connectors {
   display: flex;
   align-items: center;
   /* Horizontal padding = indicator radius (32/2 = 16px) so lines meet circle centers */
@@ -126,20 +152,31 @@
   z-index: 1;
 }
 
-/* ─── Individual connector line ─────────────────────────── */
-.muka-progress-tracker__connector {
+/* Rounder, bar, rounder in a row. Chromium treats a negative gap as invalid,
+   so the overlap is margins: the bar runs 2px under each circle. */
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   flex: 1 0 0;
   height: 4px;
   min-width: 1px;
+  position: relative;
+  overflow: visible;
+  background: none;
 }
 
-/* Past: solid dark line */
-.muka-progress-tracker__connector--past {
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector-line {
+  flex: 1 1 auto;
+  height: 4px;
+  min-width: 1px;
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--past .muka-progress-tracker__connector-line {
   background-color: var(--alias-color-accent-contrast);
 }
 
-/* Current: gradient from past (dark) toward current step */
-.muka-progress-tracker__connector--current {
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--current .muka-progress-tracker__connector-line {
   background: linear-gradient(
     to right,
     var(--alias-color-accent-contrast) 0%,
@@ -147,8 +184,7 @@
   );
 }
 
-/* Current-right: gradient fading from current step into upcoming */
-.muka-progress-tracker__connector--current-right {
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--current-right .muka-progress-tracker__connector-line {
   background: linear-gradient(
     to right,
     var(--alias-color-accent-default) 0%,
@@ -157,7 +193,222 @@
   );
 }
 
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--upcoming .muka-progress-tracker__connector-line {
+  background-color: var(--color-surface-sunken);
+}
+
+/* Past: solid dark line (vertical; horizontal uses the inner line) */
+.muka-progress-tracker__connector--past {
+  background-color: var(--alias-color-accent-contrast);
+}
+
 /* Upcoming: solid gray line */
 .muka-progress-tracker__connector--upcoming {
   background-color: var(--color-surface-sunken);
 }
+
+/* ═══════════════════════════════════════════════════════════
+   Vertical orientation
+   ═══════════════════════════════════════════════════════════ */
+
+.muka-progress-tracker--vertical .muka-progress-tracker__track {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-6);
+  width: 100%;
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__step {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  padding-right: var(--spacing-1);
+  position: relative;
+  width: 100%;
+  min-height: 32px;
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive {
+  cursor: pointer;
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 4px;
+  border-radius: 20px;
+}
+
+/* Indicator column: circle only; connector is absolutely positioned on the step */
+.muka-progress-tracker--vertical .muka-progress-tracker__indicator-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+  width: 32px;
+  z-index: 1;
+}
+
+/* Vertical connector: from mid-indicator through gap to next mid-indicator */
+.muka-progress-tracker--vertical .muka-progress-tracker__connector {
+  position: absolute;
+  left: 14px; /* (32px indicator - 4px line) / 2 */
+  top: 16px;
+  /* Through track gap (spacing-6) into the next indicator's top half */
+  bottom: calc(-1 * var(--spacing-6) - 16px);
+  width: 4px;
+  z-index: 0;
+  overflow: visible;
+}
+
+/* Divider rounders: circle bleeds into the connector (Figma Divider Rounder) */
+.muka-progress-tracker__rounder {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.muka-progress-tracker__rounder--past {
+  color: var(--alias-color-accent-contrast);
+}
+
+.muka-progress-tracker__rounder--current {
+  color: var(--alias-color-accent-default);
+}
+
+.muka-progress-tracker__rounder--upcoming {
+  color: var(--color-surface-sunken);
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__rounder {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  transform: none;
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__rounder--start {
+  margin-left: 14px;
+  /* Rounder overhangs the circle by 3px; -5px tucks the bar 2px under the circle. */
+  margin-right: -5px;
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__rounder--end {
+  margin-left: -5px;
+  margin-right: 14px;
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__rounder--start {
+  left: 50%;
+  top: 14px;
+  transform: translateX(-50%);
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__rounder--end {
+  left: 50%;
+  bottom: 14px;
+  transform: translateX(-50%);
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__connector--current {
+  background: linear-gradient(
+    to bottom,
+    var(--alias-color-accent-contrast) 0%,
+    var(--alias-color-accent-default) 100%
+  );
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__connector--current-right {
+  background: linear-gradient(
+    to bottom,
+    var(--alias-color-accent-default) 0%,
+    var(--alias-color-accent-default) 15%,
+    var(--color-surface-sunken) 50%
+  );
+}
+
+/* Vertical label: body/base/regular, wraps, not bold for current */
+.muka-progress-tracker--vertical .muka-progress-tracker__label {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-default-default);
+  text-align: left;
+  flex: 1 0 0;
+  min-width: 0;
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+  word-break: break-word;
+}
+
+/* Current label stays regular weight in vertical layout */
+.muka-progress-tracker--vertical .muka-progress-tracker__label--current {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+}
+
+/* Ensure step content paints above hover/selected backgrounds */
+.muka-progress-tracker--vertical .muka-progress-tracker__indicator-col,
+.muka-progress-tracker--vertical .muka-progress-tracker__label {
+  position: relative;
+  z-index: 1;
+}
+
+/* ─── Hover halo (vertical interactive only) ────────────── */
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:hover::before,
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:active::before,
+.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']::before {
+  content: '';
+  position: absolute;
+  background-color: var(--color-surface-level1);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Hover: 40px circle behind indicator only */
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:hover::before {
+  left: -4px;
+  top: -4px;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
+
+/* Selected / :active: pill behind full step row — wins over hover */
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:active::before,
+.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']::before {
+  left: -4px;
+  right: -8px;
+  top: -4px;
+  bottom: -4px;
+  width: auto;
+  height: auto;
+  border-radius: 20px;
+}
+
+/* Selected steps without interactive class still show the pill */
+.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']:not(.muka-progress-tracker__step--interactive)::before {
+  content: '';
+  position: absolute;
+  left: -4px;
+  right: -8px;
+  top: -4px;
+  bottom: -4px;
+  background-color: var(--color-surface-level1);
+  border-radius: 20px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Connector stays behind indicators (indicator-col is z-index 1) */
+.muka-progress-tracker--vertical .muka-progress-tracker__connector {
+  z-index: 0;
+}