@revikornmann/muka-ui 0.18.0 → 0.19.0

package/dist/styles/components/Combobox.css

@@ -1,186 +1,170 @@
-/* Combobox Component Styles */
+/* Combobox — Figma Input Combobox (free-input chips + suggestion Menu) */
 
-/* ─── Trigger group (positioning context for the trailing controls) ── */
+.muka-combobox {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 200px;
+}
 
-/*
- * The clear control is a sibling of the trigger, not a child (a <button> may
- * not contain interactive content), so it is overlaid on the trigger's trailing
- * padding. The trigger reserves that space with padding-right below.
- */
-.muka-combobox__trigger-group {
-  position: relative;
-  display: block;
+.muka-combobox--full-width {
   width: 100%;
 }
 
-/* ─── Trigger (looks like an Input field, behaves like a button) ── */
+.muka-combobox__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-combobox__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
 
-.muka-combobox {
-  display: inline-flex;
+.muka-combobox__label--md {
+  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);
+}
+
+.muka-combobox__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-combobox__field {
+  display: flex;
   align-items: center;
-  gap: var(--spacing-2);
   width: 100%;
-  padding: 0 var(--muka-combobox-trailing-space) 0 var(--input-field-padding-x);
+  position: relative;
+  isolation: isolate;
+  box-sizing: border-box;
   background-color: var(--input-field-color-default-background);
   border: var(--border-width-regular) solid var(--input-field-color-default-border);
-  color: var(--color-text-default-default);
-  text-align: left;
-  cursor: pointer;
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
-  -webkit-tap-highlight-color: transparent;
-  transition: border-color 0.12s ease;
-
-  /* Room for the chevron overlaid on the trailing edge. */
-  --muka-combobox-trailing-space: calc(
-    var(--input-field-padding-x) + var(--icon-size-sm) + var(--spacing-2)
-  );
+  border-radius: var(--input-field-radius-lg);
+  padding: var(--spacing-2);
+  cursor: text;
+  transition: border-color 0.12s ease, background-color 0.12s ease;
 }
 
-/* …and for the clear button next to it, when one is rendered. */
-.muka-combobox--clearable {
-  --muka-combobox-trailing-space: calc(
-    var(--input-field-padding-x) + var(--icon-size-sm) + var(--spacing-2) +
-      var(--icon-size-xs) + var(--spacing-1) * 2 + var(--spacing-2)
-  );
+.muka-combobox__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
 }
 
-.muka-combobox--sm {
+.muka-combobox__field--sm {
   min-height: var(--input-field-height-sm);
   border-radius: var(--input-field-radius-sm);
 }
 
-.muka-combobox--md {
+.muka-combobox__field--md {
   min-height: var(--input-field-height-default);
   border-radius: var(--input-field-radius-md);
 }
 
-.muka-combobox--lg {
+.muka-combobox__field--lg {
   min-height: var(--input-field-height-lg);
   border-radius: var(--input-field-radius-lg);
 }
 
-.muka-combobox:hover:not(:disabled) {
-  border-color: var(--input-field-color-hover-border, var(--input-field-color-default-border));
+.muka-combobox__field--focused:not(.muka-combobox__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--spacing-2) - 1px);
 }
 
-.muka-combobox:focus-visible {
-  outline: none;
-  border-color: var(--input-field-color-focus-border, var(--color-action-default));
+.muka-combobox__field--error:not(.muka-combobox__field--disabled) {
+  border-color: var(--color-state-error-border, var(--color-state-error-foreground));
 }
 
-.muka-combobox--disabled,
-.muka-combobox:disabled {
+.muka-combobox__field--disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.muka-combobox--placeholder .muka-combobox__label {
-  color: var(--color-text-subtle-default);
-}
-
-.muka-combobox__leading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--color-text-subtle-default);
-}
-
-.muka-combobox__label {
-  flex: 1 1 auto;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.muka-combobox__field--multiline {
+  align-items: flex-start;
+  min-height: 7rem;
 }
 
-/* ─── Trailing controls (clear + chevron) ─────────────── */
-
-.muka-combobox__actions {
-  position: absolute;
-  top: 0;
-  right: var(--input-field-padding-x);
-  height: 100%;
+.muka-combobox__chips {
   display: flex;
-  align-items: center;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
   gap: var(--spacing-2);
-  /*
-   * The strip sits on top of the trigger, so it must not swallow taps meant to
-   * open the picker. Only the clear button takes pointer events back.
-   */
-  pointer-events: none;
-}
-
-.muka-combobox__clear,
-.muka-combobox__chevron {
-  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--color-text-subtle-default);
+  min-width: 0;
+  width: 100%;
+  position: relative;
+  z-index: 1;
 }
 
-.muka-combobox__clear {
-  pointer-events: auto;
-  cursor: pointer;
-  padding: var(--spacing-1);
+.muka-combobox__input {
+  flex: 1 1 5rem;
+  min-width: 5rem;
+  min-height: 2rem;
+  margin: 0;
+  padding: 0 var(--spacing-1);
   border: none;
-  background: none;
-  border-radius: var(--radius-sm);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.muka-combobox__clear:hover {
-  color: var(--color-text-default-default);
-  background-color: var(--color-surface-level1);
-}
-
-.muka-combobox__clear:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-  color: var(--color-text-default-default);
+  outline: none;
+  background: transparent;
+  color: var(--input-field-color-default-foreground);
+  caret-color: var(--input-field-color-default-foreground);
+  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);
 }
 
-.muka-combobox--disabled ~ .muka-combobox__actions,
-.muka-combobox:disabled ~ .muka-combobox__actions {
-  opacity: 0.5;
+.muka-combobox__input::placeholder {
+  color: var(--color-text-subtle-default);
 }
 
-/* ─── Picker sheet body ───────────────────────────────── */
-
-.muka-combobox__picker {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
-  padding: 0 var(--spacing-4) var(--spacing-4);
-  min-height: 0;
-  max-height: 80vh;
+.muka-combobox__helper {
+  margin: 0;
+  color: var(--color-text-subtle-default);
+  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);
 }
 
-.muka-combobox__title {
+.muka-combobox__error {
   margin: 0;
-  padding: var(--spacing-2) 0;
-  color: var(--color-text-default-default);
-  font-family: var(--text-heading-sm-fontFamily);
-  font-weight: var(--text-heading-sm-fontWeight);
-  font-size: var(--text-heading-sm-fontSize);
-  line-height: var(--text-heading-sm-lineHeight);
+  color: var(--color-state-error-foreground);
+  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);
 }
 
-.muka-combobox__search {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  padding-bottom: var(--spacing-2);
-  background-color: var(--color-surface-level3);
+.muka-combobox__menu-anchor {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  pointer-events: none;
+  opacity: 0;
 }
 
-.muka-combobox__list {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
+.muka-combobox__menu {
+  /* Prefer Menu token min-width (280px); may exceed the field when left-aligned. */
+  min-width: var(--menu-content-min-width);
+  width: max-content;
+  max-width: min(100vw - 2rem, 24rem);
 }

package/dist/styles/components/DropdownSelect.css

@@ -0,0 +1,225 @@
+/* DropdownSelect — Figma Dropdown Menu form field (Menu + chips) */
+
+.muka-dropdown-select {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 200px;
+}
+
+.muka-dropdown-select--full-width {
+  width: 100%;
+}
+
+.muka-dropdown-select__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-dropdown-select__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-dropdown-select__label--md {
+  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);
+}
+
+.muka-dropdown-select__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-dropdown-select__required {
+  color: var(--color-state-error-foreground);
+}
+
+.muka-dropdown-select__field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-lg);
+  padding: var(--spacing-2);
+  padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem));
+  text-align: left;
+  cursor: pointer;
+  color: var(--color-text-default-default);
+  transition: border-color 0.12s ease, background-color 0.12s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-dropdown-select__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
+}
+
+.muka-dropdown-select__field--sm {
+  min-height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+  padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem));
+}
+
+.muka-dropdown-select__field--md {
+  min-height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-dropdown-select__field--lg {
+  min-height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--spacing-2) - 1px);
+  padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem) - 1px);
+}
+
+.muka-dropdown-select__field--sm.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
+  padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem) - 1px);
+}
+
+.muka-dropdown-select__field--error:not(.muka-dropdown-select__field--disabled) {
+  border-color: var(--color-state-error-border, var(--color-state-error-foreground));
+}
+
+.muka-dropdown-select__field--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.muka-dropdown-select__content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  /* Let empty-field / value clicks reach the full-field MenuTrigger underneath. */
+  pointer-events: none;
+}
+
+.muka-dropdown-select__placeholder {
+  color: var(--color-text-subtle-default);
+  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);
+  padding-inline: var(--spacing-1);
+}
+
+.muka-dropdown-select__value {
+  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);
+  padding-inline: var(--spacing-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.muka-dropdown-select__chips {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  align-items: flex-start;
+  min-width: 0;
+  /* Chip remove controls must remain clickable above the field hit target. */
+  pointer-events: auto;
+}
+
+.muka-dropdown-select__field--multiline {
+  align-items: flex-start;
+  min-height: 7rem;
+}
+
+.muka-dropdown-select__menu-button {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: auto;
+  height: auto;
+  padding: 0;
+  padding-right: var(--spacing-2);
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+  color: var(--color-text-subtle-default);
+  cursor: pointer;
+}
+
+.muka-dropdown-select__field--multiline .muka-dropdown-select__menu-button {
+  align-items: flex-start;
+  padding-top: calc(var(--spacing-2) + 8px);
+}
+
+.muka-dropdown-select__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-2xl, 2rem);
+  height: var(--size-2xl, 2rem);
+  pointer-events: none;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-dropdown-select__chevron .muka-icon,
+.muka-dropdown-select__menu-button:hover .muka-dropdown-select__chevron,
+.muka-dropdown-select__menu-button:hover .muka-icon {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-dropdown-select__field--sm .muka-dropdown-select__chevron {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
+}
+
+.muka-dropdown-select__menu-button:focus-visible {
+  outline: 2px solid var(--color-border-focus, var(--color-action-default));
+  outline-offset: 2px;
+}
+
+.muka-dropdown-select__helper {
+  margin: 0;
+  color: var(--color-text-subtle-default);
+  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);
+}
+
+.muka-dropdown-select__error {
+  margin: 0;
+  color: var(--color-state-error-foreground);
+  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);
+}
+
+.muka-dropdown-select__menu {
+  /* Uses Menu min-width (280px); grows with long labels; left-aligned to the field. */
+}

package/dist/styles/components/Input.css

@@ -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);