@revikornmann/muka-ui 0.25.0 → 0.26.0

package/dist/styles/wireframe-light.css

@@ -3766,6 +3766,88 @@ body {
 }
 
 
+/* TextLink */
+/* TextLink Component Styles - Using Muka Design Tokens */
+
+.muka-text-link {
+  display: inline;
+  cursor: pointer;
+  text-decoration: underline;
+  /* Nudge the rule clear of descenders; the Figma underline sits off baseline. */
+  text-underline-offset: 0.2em;
+  text-decoration-thickness: from-font;
+  /* Rounds the focus ring's corners; the link itself has no visible box. */
+  border-radius: var(--border-radius-sm);
+  transition: color var(--motion-duration-micro, 0.15s) var(--motion-easing-enter, ease);
+}
+
+/* ─── Sizes ───────────────────────────────────────────────
+   Mirrors the body text scale so a link matches the copy it sits in. */
+.muka-text-link--sm {
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+}
+
+.muka-text-link--base {
+  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);
+}
+
+.muka-text-link--lg {
+  font-family: var(--text-body-lg-regular-fontFamily);
+  font-weight: var(--text-body-lg-regular-fontWeight);
+  font-size: var(--text-body-lg-regular-fontSize);
+  line-height: var(--text-body-lg-regular-lineHeight);
+}
+
+/* ─── Variant: default (accent) ───────────────────────────
+   Visited repeats the default colour on purpose: the design treats visited and
+   default the same, and pinning it stops the browser's purple from showing. */
+.muka-text-link--default,
+.muka-text-link--default:visited {
+  color: var(--color-text-action-default);
+}
+
+.muka-text-link--default:hover,
+.muka-text-link--default:focus-visible {
+  color: var(--color-text-action-hover);
+}
+
+.muka-text-link--default:active {
+  color: var(--color-text-action-pressed);
+}
+
+/* ─── Variant: subtle (neutral) ───────────────────────────
+   Hover, focus and pressed all darken to the default text colour. */
+.muka-text-link--subtle,
+.muka-text-link--subtle:visited {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-text-link--subtle:hover,
+.muka-text-link--subtle:focus-visible,
+.muka-text-link--subtle:active {
+  color: var(--color-text-default-default);
+}
+
+/* ─── Focus ───────────────────────────────────────────────
+   Same ring as every other focusable Muka component. */
+.muka-text-link:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .muka-text-link {
+    transition: none;
+  }
+}
+
+
 /* Textarea */
 /* Textarea Component Styles - Using Muka Design Tokens */
 
@@ -3930,88 +4012,6 @@ body {
 }
 
 
-/* TextLink */
-/* TextLink Component Styles - Using Muka Design Tokens */
-
-.muka-text-link {
-  display: inline;
-  cursor: pointer;
-  text-decoration: underline;
-  /* Nudge the rule clear of descenders; the Figma underline sits off baseline. */
-  text-underline-offset: 0.2em;
-  text-decoration-thickness: from-font;
-  /* Rounds the focus ring's corners; the link itself has no visible box. */
-  border-radius: var(--border-radius-sm);
-  transition: color var(--motion-duration-micro, 0.15s) var(--motion-easing-enter, ease);
-}
-
-/* ─── Sizes ───────────────────────────────────────────────
-   Mirrors the body text scale so a link matches the copy it sits in. */
-.muka-text-link--sm {
-  font-family: var(--text-body-sm-regular-fontFamily);
-  font-weight: var(--text-body-sm-regular-fontWeight);
-  font-size: var(--text-body-sm-regular-fontSize);
-  line-height: var(--text-body-sm-regular-lineHeight);
-}
-
-.muka-text-link--base {
-  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);
-}
-
-.muka-text-link--lg {
-  font-family: var(--text-body-lg-regular-fontFamily);
-  font-weight: var(--text-body-lg-regular-fontWeight);
-  font-size: var(--text-body-lg-regular-fontSize);
-  line-height: var(--text-body-lg-regular-lineHeight);
-}
-
-/* ─── Variant: default (accent) ───────────────────────────
-   Visited repeats the default colour on purpose: the design treats visited and
-   default the same, and pinning it stops the browser's purple from showing. */
-.muka-text-link--default,
-.muka-text-link--default:visited {
-  color: var(--color-text-action-default);
-}
-
-.muka-text-link--default:hover,
-.muka-text-link--default:focus-visible {
-  color: var(--color-text-action-hover);
-}
-
-.muka-text-link--default:active {
-  color: var(--color-text-action-pressed);
-}
-
-/* ─── Variant: subtle (neutral) ───────────────────────────
-   Hover, focus and pressed all darken to the default text colour. */
-.muka-text-link--subtle,
-.muka-text-link--subtle:visited {
-  color: var(--color-text-subtle-default);
-}
-
-.muka-text-link--subtle:hover,
-.muka-text-link--subtle:focus-visible,
-.muka-text-link--subtle:active {
-  color: var(--color-text-default-default);
-}
-
-/* ─── Focus ───────────────────────────────────────────────
-   Same ring as every other focusable Muka component. */
-.muka-text-link:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .muka-text-link {
-    transition: none;
-  }
-}
-
-
 /* Tabs */
 /* Tabs Component Styles - Clean underline style tabs matching Figma */
 
@@ -7433,6 +7433,77 @@ body {
 }
 
 
+/* ProfileBadge */
+/* ProfileBadge Component Styles - Using Muka Design Tokens */
+
+.muka-profile-badge {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--text-body-base-regular-fontFamily);
+}
+
+/* Size variants */
+.muka-profile-badge--lg {
+  gap: var(--spacing-4); /* 16px */
+}
+
+.muka-profile-badge--md {
+  gap: var(--spacing-3); /* 12px */
+}
+
+.muka-profile-badge__avatar {
+  flex-shrink: 0;
+}
+
+/* Text stack */
+.muka-profile-badge__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.muka-profile-badge__name {
+  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-default-default);
+}
+
+.muka-profile-badge__email {
+  font-family: var(--text-body-xs-regular-fontFamily);
+  font-size: var(--text-body-xs-regular-fontSize);
+  font-weight: var(--text-body-xs-regular-fontWeight);
+  line-height: var(--text-body-xs-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+/* Clickable state */
+.muka-profile-badge--clickable {
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  text-align: left;
+  border-radius: var(--radius-md);
+  transition: opacity 0.2s ease;
+}
+
+.muka-profile-badge--clickable:hover {
+  opacity: 0.9;
+}
+
+.muka-profile-badge--clickable:active {
+  opacity: 0.8;
+}
+
+.muka-profile-badge--clickable:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+
 /* PriceTag */
 /* PriceTag Component Styles - Using Muka Design Tokens */
 
@@ -7499,105 +7570,34 @@ body {
   color: var(--color-text-default-default);
 }
 
-/* ─── Small size typography ───────────────────────────── */
-
-.muka-price-tag--sm .muka-price-tag__currency {
-  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-label-md-bold-lineHeight);
-  color: var(--color-text-subtle-default);
-}
-
-.muka-price-tag--sm .muka-price-tag__whole,
-.muka-price-tag--sm .muka-price-tag__decimal,
-.muka-price-tag--sm .muka-price-tag__cents {
-  font-family: var(--text-label-md-bold-fontFamily);
-  font-weight: var(--text-label-md-bold-fontWeight);
-  font-size: var(--text-label-md-bold-fontSize);
-  line-height: var(--text-label-md-bold-lineHeight);
-  color: var(--color-text-default-default);
-}
-
-/* ─── Unit label (same for both sizes) ────────────────── */
-
-.muka-price-tag__unit {
-  font-family: var(--text-body-sm-regular-fontFamily);
-  font-weight: var(--text-body-sm-regular-fontWeight);
-  font-size: var(--text-body-sm-regular-fontSize);
-  line-height: var(--text-body-sm-regular-lineHeight);
-  color: var(--color-text-subtle-default);
-}
-
-
-/* ProfileBadge */
-/* ProfileBadge Component Styles - Using Muka Design Tokens */
-
-.muka-profile-badge {
-  display: inline-flex;
-  align-items: center;
-  font-family: var(--text-body-base-regular-fontFamily);
-}
-
-/* Size variants */
-.muka-profile-badge--lg {
-  gap: var(--spacing-4); /* 16px */
-}
-
-.muka-profile-badge--md {
-  gap: var(--spacing-3); /* 12px */
-}
-
-.muka-profile-badge__avatar {
-  flex-shrink: 0;
-}
-
-/* Text stack */
-.muka-profile-badge__text {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  min-width: 0;
-}
-
-.muka-profile-badge__name {
-  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-default-default);
-}
-
-.muka-profile-badge__email {
-  font-family: var(--text-body-xs-regular-fontFamily);
-  font-size: var(--text-body-xs-regular-fontSize);
-  font-weight: var(--text-body-xs-regular-fontWeight);
-  line-height: var(--text-body-xs-regular-lineHeight);
-  color: var(--color-text-subtle-default);
-}
-
-/* Clickable state */
-.muka-profile-badge--clickable {
-  cursor: pointer;
-  border: none;
-  background: none;
-  padding: 0;
-  text-align: left;
-  border-radius: var(--radius-md);
-  transition: opacity 0.2s ease;
-}
-
-.muka-profile-badge--clickable:hover {
-  opacity: 0.9;
+/* ─── Small size typography ───────────────────────────── */
+
+.muka-price-tag--sm .muka-price-tag__currency {
+  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-label-md-bold-lineHeight);
+  color: var(--color-text-subtle-default);
 }
 
-.muka-profile-badge--clickable:active {
-  opacity: 0.8;
+.muka-price-tag--sm .muka-price-tag__whole,
+.muka-price-tag--sm .muka-price-tag__decimal,
+.muka-price-tag--sm .muka-price-tag__cents {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+  color: var(--color-text-default-default);
 }
 
-.muka-profile-badge--clickable:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
+/* ─── Unit label (same for both sizes) ────────────────── */
+
+.muka-price-tag__unit {
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
 }
 
 
@@ -8019,6 +8019,34 @@ body {
 }
 
 
+/* NavigationTransition */
+/* NavigationTransition Component Styles */
+
+/* ─── Wrapper ────────────────────────────────────────── */
+
+.muka-nav-transition {
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Disable interaction during animation */
+.muka-nav-transition--active {
+  pointer-events: none;
+}
+
+/* ─── View slots ─────────────────────────────────────── */
+
+.muka-nav-transition--active .muka-nav-transition__view {
+  position: absolute;
+  inset: 0;
+}
+
+/* Z-index layering */
+.muka-nav-transition__view--bottom { z-index: 1; }
+.muka-nav-transition__view--top { z-index: 2; }
+
+
 /* Menu */
 /* Menu Component Styles */
 
@@ -8498,34 +8526,6 @@ body {
 }
 
 
-/* NavigationTransition */
-/* NavigationTransition Component Styles */
-
-/* ─── Wrapper ────────────────────────────────────────── */
-
-.muka-nav-transition {
-  position: relative;
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* Disable interaction during animation */
-.muka-nav-transition--active {
-  pointer-events: none;
-}
-
-/* ─── View slots ─────────────────────────────────────── */
-
-.muka-nav-transition--active .muka-nav-transition__view {
-  position: absolute;
-  inset: 0;
-}
-
-/* Z-index layering */
-.muka-nav-transition__view--bottom { z-index: 1; }
-.muka-nav-transition__view--top { z-index: 2; }
-
-
 /* ListItem */
 /* ListItem Component Styles - Using Muka Design Tokens */
 
@@ -8954,6 +8954,184 @@ li.muka-listitem {
 }
 
 
+/* InputCounter */
+/* InputCounter — numeric field + joined decrement/increment buttons.
+   Label, helper and error text reuse Input.css (../Input/Input.css).
+   Field and button group share one radius per size:
+   sm/md → input.field.radius.md, lg → input.field.radius.lg. */
+
+.muka-inputcounter {
+  --muka-inputcounter-radius: var(--input-field-radius-md);
+  --muka-inputcounter-height: var(--input-field-height-default);
+  --muka-inputcounter-pad: calc(var(--spacing-2) + var(--spacing-1));
+  --muka-inputcounter-min: var(--size-3xl);
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.muka-inputcounter--sm {
+  --muka-inputcounter-height: var(--input-field-height-sm);
+  --muka-inputcounter-pad: calc(var(--spacing-1) + var(--spacing-1));
+  --muka-inputcounter-min: var(--size-2xl);
+}
+
+.muka-inputcounter--lg {
+  --muka-inputcounter-radius: var(--input-field-radius-lg);
+  --muka-inputcounter-height: var(--input-field-height-lg);
+}
+
+/* Label row — label, info tooltip trigger, optional hint */
+.muka-inputcounter__label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-xl);
+}
+
+.muka-inputcounter__info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+}
+
+.muka-inputcounter__info .muka-icon {
+  color: var(--color-action-default);
+}
+
+.muka-inputcounter__info:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.muka-inputcounter__optional {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  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-text-subtle-default);
+}
+
+/* Field + button group */
+.muka-inputcounter__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+/* Field — grows with the value (in ch), never narrower than the Figma width.
+   Padding sits on the native input so the 2px focus/error border doesn't
+   need compensating: content is centred in a fixed box. */
+.muka-inputcounter__field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: var(--muka-inputcounter-height);
+  width: calc(
+    max(var(--muka-inputcounter-min), calc(var(--muka-inputcounter-chars, 1) * 1ch)) +
+      2 * var(--muka-inputcounter-pad) + 2 * var(--border-width-regular)
+  );
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--muka-inputcounter-radius);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.muka-inputcounter__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: var(--shadow-sunken);
+  pointer-events: none;
+}
+
+.muka-inputcounter__field--focused:not(.muka-inputcounter__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+}
+
+.muka-inputcounter__field--error:not(.muka-inputcounter__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+}
+
+.muka-inputcounter__field--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+}
+
+.muka-inputcounter__field--disabled::after {
+  display: none;
+}
+
+.muka-inputcounter__native {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 calc(var(--muka-inputcounter-pad) - var(--border-width-regular));
+  border: none;
+  outline: none;
+  background: transparent;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  color: var(--input-field-color-default-foreground);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+}
+
+.muka-inputcounter--sm .muka-inputcounter__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-inputcounter__field--disabled .muka-inputcounter__native {
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Button group — secondary icon-only Buttons joined by a divider.
+   Only the outer corners are rounded. */
+.muka-inputcounter__group {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.muka-inputcounter__group .muka-button {
+  border-radius: 0;
+}
+
+.muka-inputcounter__group .muka-button:first-child {
+  border-start-start-radius: var(--muka-inputcounter-radius);
+  border-end-start-radius: var(--muka-inputcounter-radius);
+}
+
+.muka-inputcounter__group .muka-button:last-child {
+  border-start-end-radius: var(--muka-inputcounter-radius);
+  border-end-end-radius: var(--muka-inputcounter-radius);
+}
+
+.muka-inputcounter__divider {
+  flex: none;
+  width: var(--border-width-regular);
+  background-color: var(--color-border-default);
+}
+
+
 /* Input */
 /* Input Component Styles - Using Muka Design Tokens */
 
@@ -14579,6 +14757,72 @@ button.muka-chat-photo-grid__tile:focus-visible {
 }
 
 
+/* Autocomplete */
+/* Autocomplete — Figma Input Autocomplete (Input field + single-line suggestion Menu).
+   The field reuses the Input styles (.muka-input*); only the menu wiring lives here. */
+
+.muka-autocomplete {
+  min-width: 200px;
+}
+
+/* Covers the field's outer edge so the menu matches its full width. The menu
+   is only open while focused, when the field has the bold border. */
+.muka-autocomplete__menu-anchor {
+  position: absolute;
+  inset: calc(-1 * var(--border-width-bold));
+  z-index: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  pointer-events: none;
+  opacity: 0;
+}
+
+/* Keep the field content above the invisible anchor. */
+.muka-autocomplete__field > :not(.muka-autocomplete__menu-anchor) {
+  position: relative;
+  z-index: 1;
+}
+
+/* Figma: the menu is as wide as the field (never below the menu min-width token). */
+.muka-autocomplete__menu {
+  width: var(--radix-dropdown-menu-trigger-width);
+  max-width: calc(100vw - 2rem);
+}
+
+/* Suggestions are single-line; long labels truncate. */
+.muka-autocomplete__menu .muka-menu__item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Loading and empty rows: menu-row geometry, not selectable. */
+.muka-autocomplete__status {
+  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);
+  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);
+}
+
+.muka-autocomplete__footer {
+  flex-shrink: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+  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);
+}
+
+
 /* AppShell */
 /* AppShell Component Styles */