@revikornmann/muka-ui 0.18.0 → 0.20.0

package/dist/styles/components/Input.css

@@ -39,7 +39,7 @@
 }
 
 .muka-input__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 .muka-input__label--sm + .muka-input__field--disabled,
@@ -163,27 +163,58 @@
   color: var(--input-field-color-disabled-foreground);
 }
 
-/* Icons */
+/* Icons — Figma inputfield content: sm 16px, md 20px, lg 24px. */
 .muka-input__icon {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   color: var(--color-text-subtle-default);
-  width: var(--icon-size-default);
-  height: var(--icon-size-default);
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
 }
 
 .muka-input__field--sm .muka-input__icon {
-  width: var(--icon-size-sm);
-  height: var(--icon-size-sm);
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
 }
 
 .muka-input__field--lg .muka-input__icon {
-  width: var(--icon-size-lg);
-  height: var(--icon-size-lg);
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
 }
 
-.muka-input__field--disabled .muka-input__icon {
+.muka-input__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--size-2xl, 2rem);
+  height: var(--size-2xl, 2rem);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-subtle-default);
+  cursor: pointer;
+}
+
+.muka-input__field--sm .muka-input__clear {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
+}
+
+/* Icon sets its own color; pin the glyph to text subtle, including hover. */
+.muka-input__icon .muka-icon,
+.muka-input__clear .muka-icon,
+.muka-input__clear:hover,
+.muka-input__clear:hover .muka-icon {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-input__field--disabled .muka-input__icon,
+.muka-input__field--disabled .muka-input__icon .muka-icon,
+.muka-input__field--disabled .muka-input__clear,
+.muka-input__field--disabled .muka-input__clear .muka-icon {
   color: var(--input-field-color-disabled-foreground);
 }
 
@@ -192,6 +223,12 @@
   height: 100%;
 }
 
+.muka-input__native::-webkit-search-cancel-button,
+.muka-input__native::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 /* Helper text */
 .muka-input__helper {
   font-family: var(--text-label-sm-regular-fontFamily);
@@ -208,6 +245,6 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }

package/dist/styles/components/Label.css

@@ -34,5 +34,5 @@
 }
 
 .muka-label__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }

package/dist/styles/components/LicensePlateInput.css

@@ -185,6 +185,6 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }

package/dist/styles/components/Menu.css

@@ -50,32 +50,62 @@
 .muka-menu__search {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
   flex-shrink: 0;
-  height: var(--size-3xl, 48px);
-  padding: 0 var(--spacing-4);
+  /* 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-icon {
+.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;
-  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);
+  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);
 }
@@ -86,24 +116,29 @@
   appearance: none;
 }
 
-.muka-menu__search-clear {
+.muka-menu__empty {
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  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;
-  color: var(--color-text-subtle-default);
   cursor: pointer;
 }
 
-.muka-menu__search-clear:hover {
-  color: var(--color-text-default-default);
-}
-
 .muka-menu__match {
-  font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--text-label-md-bold-fontWeight);
 }
 
 .muka-menu__content--scrollbar {
@@ -138,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,
@@ -219,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);
 }
 
@@ -258,9 +327,10 @@
   padding-left: var(--menu-item-padding-x);
 }
 
+.muka-menu__item--checkbox-trailing,
 .muka-menu__item--radio-check {
-  position: relative;
-  padding-right: calc(var(--menu-item-padding-x) + var(--menu-checkbox-indicator-size) + var(--menu-item-gap));
+  /* 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'] {
@@ -268,11 +338,27 @@
 }
 
 .muka-menu__item-indicator--trailing {
+  /* Match enter-hint trailer: 8px inset, 24px box (override leading indicator size). */
   position: absolute;
-  right: var(--menu-item-padding-x);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--menu-checkbox-indicator-color);
+  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 {
@@ -298,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/Pagination.css

@@ -30,9 +30,9 @@
 
 /* Active page */
 .muka-pagination__button--active {
-  background-color: var(--button-color-primary-default-background);
-  color: var(--button-color-primary-default-foreground);
-  border-color: var(--button-color-primary-default-background);
+  background-color: var(--button-color-primary-background-default);
+  color: var(--button-color-primary-foreground-default);
+  border-color: var(--button-color-primary-background-default);
   font-weight: 600;
 }
 
@@ -63,37 +63,37 @@
 
 /* Size variants */
 .muka-pagination--sm .muka-pagination__button {
-  min-width: var(--button-height-sm);
-  height: var(--button-height-sm);
+  min-width: var(--size-2xl);
+  height: var(--size-2xl);
   font-size: var(--text-label-sm-regular-fontSize);
 }
 
 .muka-pagination--sm .muka-pagination__ellipsis {
-  min-width: var(--button-height-sm);
-  height: var(--button-height-sm);
+  min-width: var(--size-2xl);
+  height: var(--size-2xl);
   font-size: var(--text-label-sm-regular-fontSize);
 }
 
 .muka-pagination--md .muka-pagination__button {
-  min-width: var(--button-height-default);
-  height: var(--button-height-default);
+  min-width: var(--size-3xl);
+  height: var(--size-3xl);
   font-size: var(--text-label-md-regular-fontSize);
 }
 
 .muka-pagination--md .muka-pagination__ellipsis {
-  min-width: var(--button-height-default);
-  height: var(--button-height-default);
+  min-width: var(--size-3xl);
+  height: var(--size-3xl);
   font-size: var(--text-label-md-regular-fontSize);
 }
 
 .muka-pagination--lg .muka-pagination__button {
-  min-width: var(--button-height-lg);
-  height: var(--button-height-lg);
+  min-width: var(--size-4xl);
+  height: var(--size-4xl);
   font-size: var(--text-label-lg-regular-fontSize);
 }
 
 .muka-pagination--lg .muka-pagination__ellipsis {
-  min-width: var(--button-height-lg);
-  height: var(--button-height-lg);
+  min-width: var(--size-4xl);
+  height: var(--size-4xl);
   font-size: var(--text-label-lg-regular-fontSize);
 }

package/dist/styles/components/PhotoUploader.css

@@ -79,10 +79,10 @@
 }
 
 .muka-photo-uploader__dropzone-text {
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-size: var(--text-body-md-regular-fontSize);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-size: var(--text-body-base-regular-fontSize);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  line-height: var(--text-body-base-regular-lineHeight);
   color: var(--color-text-subtle-default);
 }
 

package/dist/styles/components/ProgressAccordeon.css

@@ -13,16 +13,18 @@
 
 /* Per-state gap: content-bearing steps are tighter, header-only steps looser */
 .muka-progress-accordeon--current,
-.muka-progress-accordeon--past.muka-progress-accordeon--expanded {
+.muka-progress-accordeon--past.muka-progress-accordeon--expanded,
+.muka-progress-accordeon--upcoming.muka-progress-accordeon--expanded {
   gap: var(--spacing-6);
 }
 
 .muka-progress-accordeon--upcoming,
-.muka-progress-accordeon--past.muka-progress-accordeon--collapsed {
+.muka-progress-accordeon--past.muka-progress-accordeon--collapsed,
+.muka-progress-accordeon--upcoming.muka-progress-accordeon--collapsed {
   gap: var(--spacing-8);
 }
 
-/* Past steps group header + slot. The header↔content gap lives inside the
+/* Collapsible steps group header + slot. The header↔content gap lives inside the
    collapsing slot (as padding-top) so it collapses with the content, so the
    body gap itself is 0. */
 .muka-progress-accordeon__body {
@@ -56,8 +58,10 @@
   gap: var(--spacing-4);
 }
 
-/* Past steps carry 40px controls; nudge the heading to vertically centre it */
-.muka-progress-accordeon--past .muka-progress-accordeon__heading-group {
+/* Steps with header controls (edit / chevron) are 40px tall; nudge the heading
+   so a single line centres against the indicator + controls row. */
+.muka-progress-accordeon:has(.muka-progress-accordeon__controls)
+  .muka-progress-accordeon__heading-group {
   padding-top: var(--spacing-1);
 }
 
@@ -161,7 +165,7 @@
   width: 100%;
 }
 
-/* ─── Collapse/expand animation (past steps) ─────────────────
+/* ─── Collapse/expand animation (past & upcoming steps) ──────
    The grid-template-rows 1fr → 0fr technique animates the content to/from its
    intrinsic (auto) height with no magic max-height. Under prefers-reduced-motion
    --motion-duration-view resolves to 0ms, so the toggle stays instant. */