@revikornmann/muka-ui 0.28.1 → 0.30.0

package/dist/styles/components/Badge.css

@@ -60,6 +60,33 @@
   padding-left: var(--badge-padding-leading-lg);
 }
 
+/* Icon-only — square, sized to the badge height (Figma: 24 / 32 / 40).
+ * Padding resets at size+icon-only specificity so `--has-icon` leading padding
+ * cannot win and shift the icon off-center. */
+.muka-badge--icon-only {
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+}
+
+.muka-badge--sm.muka-badge--icon-only,
+.muka-badge--md.muka-badge--icon-only,
+.muka-badge--lg.muka-badge--icon-only {
+  padding: 0;
+}
+
+.muka-badge--sm.muka-badge--icon-only {
+  width: var(--badge-size-height-sm);
+}
+
+.muka-badge--md.muka-badge--icon-only {
+  width: var(--badge-size-height-md);
+}
+
+.muka-badge--lg.muka-badge--icon-only {
+  width: var(--badge-size-height-lg);
+}
+
 /* Leading icon slot — Figma icon sizes: sm 16, md 20, lg 24 (matches Chip) */
 .muka-badge__icon {
   display: inline-flex;

package/dist/styles/components/ChatComposer.css

@@ -17,7 +17,7 @@
   pointer-events: none;
 }
 
-/* ─── Input row ────────────────────────────────────────── */
+/* ─── Input row (default layout) ───────────────────────── */
 
 .muka-chat-composer__row {
   display: flex;
@@ -43,6 +43,19 @@
   transition: border-color 0.12s ease;
 }
 
+.muka-chat-composer--options .muka-chat-composer__field {
+  flex: 1 1 auto;
+  width: auto;
+}
+
+/* Options input row: text field + mic / send beside it */
+.muka-chat-composer__options-input {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-3);
+  width: 100%;
+}
+
 .muka-chat-composer__field:focus-within {
   border-color: var(--input-field-color-focus-border, var(--color-action-default));
 }
@@ -116,6 +129,113 @@
   transform: translateY(-50%);
 }
 
+/* ─── Options mode (Figma State=Options / State7 / State8) ─ */
+
+.muka-chat-composer__prompt {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  width: 100%;
+}
+
+.muka-chat-composer__prompt-step {
+  flex-shrink: 0;
+}
+
+.muka-chat-composer__prompt-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.muka-chat-composer__prompt-heading {
+  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);
+}
+
+.muka-chat-composer__prompt-description {
+  color: var(--color-text-subtle-default);
+  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-chat-composer__choices {
+  width: 100%;
+}
+
+.muka-chat-composer__choices-card {
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Choice rows: the ListItem is the interactive control; the Radio/Checkbox is
+   decorative for AT (aria-hidden) and sits in the leading slot. */
+.muka-chat-composer__choice-control {
+  display: inline-flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+.muka-chat-composer__choice-control .muka-radio,
+.muka-chat-composer__choice-control .muka-checkbox {
+  pointer-events: none;
+}
+
+/*
+ * Multi-step footer (Figma Canned responses). Previous (muted) | centered
+ * progress | Next/Send (muted when not ready, primary when ready — never
+ * disabled for unreadiness).
+ */
+.muka-chat-composer__footer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  width: 100%;
+  min-height: var(--input-field-height-lg, 48px);
+}
+
+.muka-chat-composer__footer-spacer {
+  display: inline-block;
+  /* Approximate width of a Previous button so Next stays right-aligned when
+     there is no back control (step 1 of N). */
+  min-width: 7rem;
+  flex-shrink: 0;
+}
+
+.muka-chat-composer__footer-back {
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.muka-chat-composer__footer-action {
+  flex-shrink: 0;
+  margin-left: auto;
+  z-index: 1;
+}
+
+.muka-chat-composer__progress {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-label-lg-regular-fontFamily, var(--text-body-base-regular-fontFamily));
+  font-weight: var(--text-label-lg-regular-fontWeight, var(--text-body-base-regular-fontWeight));
+  font-size: var(--text-label-lg-regular-fontSize, var(--text-body-base-regular-fontSize));
+  line-height: var(--text-label-lg-regular-lineHeight, var(--text-body-base-regular-lineHeight));
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 /* ─── Print ────────────────────────────────────────────── */
 
 @media print {

package/dist/styles/components/PhotoUploader.css

@@ -42,7 +42,7 @@
   padding: 0;
 }
 
-/* ─── Drop zone card ──────────────────────────────────── */
+/* ─── Drop zone card (button + "or drop here") ────────── */
 .muka-photo-uploader__dropzone {
   display: flex;
   flex-direction: column;
@@ -66,24 +66,12 @@
   background-color: var(--color-surface-level1);
 }
 
-.muka-photo-uploader__dropzone:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-.muka-photo-uploader__dropzone-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-icon-subtle-default);
-}
-
 .muka-photo-uploader__dropzone-text {
-  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);
+  font-family: var(--text-subheading-sm-fontFamily);
+  font-size: var(--text-subheading-sm-fontSize);
+  font-weight: var(--text-subheading-sm-fontWeight);
+  line-height: var(--text-subheading-sm-lineHeight);
+  color: var(--color-text-default-default);
 }
 
 /* ─── Disabled ────────────────────────────────────────── */

package/dist/styles/components/ProgressAccordeon.css

@@ -13,6 +13,7 @@
 
 /* Per-state gap: content-bearing steps are tighter, header-only steps looser */
 .muka-progress-accordeon--current,
+.muka-progress-accordeon--current.muka-progress-accordeon--expanded,
 .muka-progress-accordeon--past.muka-progress-accordeon--expanded,
 .muka-progress-accordeon--upcoming.muka-progress-accordeon--expanded {
   gap: var(--spacing-6);
@@ -20,7 +21,8 @@
 
 .muka-progress-accordeon--upcoming,
 .muka-progress-accordeon--past.muka-progress-accordeon--collapsed,
-.muka-progress-accordeon--upcoming.muka-progress-accordeon--collapsed {
+.muka-progress-accordeon--upcoming.muka-progress-accordeon--collapsed,
+.muka-progress-accordeon--current.muka-progress-accordeon--collapsed {
   gap: var(--spacing-8);
 }
 
@@ -165,32 +167,44 @@
   width: 100%;
 }
 
-/* ─── 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. */
-.muka-progress-accordeon__slot-wrapper {
+/* ─── Collapse/expand animation (any expandable step) ──────
+   Animates grid-template-rows 1fr ↔ 0fr so the panel (slot + actions) grows and
+   shrinks to its intrinsic height. Opacity fades with the same duration.
+   Under prefers-reduced-motion, --motion-duration-view is 0ms. */
+.muka-progress-accordeon__panel-wrapper {
   display: grid;
   grid-template-rows: 1fr;
-  transition: grid-template-rows var(--motion-duration-view) var(--motion-easing-enter);
+  opacity: 1;
+  transition:
+    grid-template-rows var(--motion-duration-view) var(--motion-easing-enter),
+    opacity var(--motion-duration-view) var(--motion-easing-enter);
 }
 
-.muka-progress-accordeon__slot-wrapper--collapsed {
+.muka-progress-accordeon__panel-wrapper--collapsed {
   grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows var(--motion-duration-view) var(--motion-easing-exit),
+    opacity calc(var(--motion-duration-view) * 0.6) var(--motion-easing-exit);
 }
 
 /* The direct grid child clips and must have NO padding/border of its own —
    min-height:0 lets it shrink, and with no padding the 0fr track reaches a true
    0 height (padding on the item would leave a residual gap when collapsed). */
-.muka-progress-accordeon__slot-clip {
+.muka-progress-accordeon__panel-clip {
   overflow: hidden;
   min-height: 0;
 }
 
-/* The header↔content spacing lives on the inner slot (inside the clip region)
-   so it collapses together with the content. */
-.muka-progress-accordeon__slot-wrapper .muka-progress-accordeon__slot {
+/* Header↔content spacing + slot/actions gap live inside the clip so they
+   collapse together with the panel. */
+.muka-progress-accordeon__panel {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-6);
   padding-top: var(--spacing-4);
+  width: 100%;
 }
 
 /* ─── Action buttons (current state) ─────────────────────── */

package/dist/styles/components/ProgressTracker.css

@@ -58,17 +58,26 @@
   color: var(--color-text-default-inverse);
 }
 
-.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past {
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--interactive {
   cursor: pointer;
 }
 
-.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past:hover {
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--interactive:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past.muka-progress-tracker__indicator--interactive:hover {
   background-color: var(--alias-color-accent-pressed);
 }
 
-.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--current.muka-progress-tracker__indicator--interactive:hover {
+  background-color: var(--alias-color-accent-hover);
+}
+
+/* Upcoming (clickableSteps="all"): a 4px halo, the vertical hover's 40px circle */
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--upcoming.muka-progress-tracker__indicator--interactive:hover {
+  box-shadow: 0 0 0 4px var(--color-surface-level1);
 }
 
 /* Current: accent default circle with white number */
@@ -141,6 +150,15 @@
   font-weight: var(--text-label-sm-bold-fontWeight);
 }
 
+/* Selected step: a pill behind the label (horizontal), matching the vertical
+   selected pill's surface. The label stays centred under its indicator. */
+.muka-progress-tracker--horizontal .muka-progress-tracker__step[data-selected='true'] .muka-progress-tracker__label {
+  padding: 0 var(--spacing-2);
+  border-radius: var(--border-radius-full);
+  background-color: var(--color-surface-level1);
+  max-width: calc(120px + 2 * var(--spacing-2));
+}
+
 /* ─── Connectors layer (behind indicators) — horizontal ─── */
 .muka-progress-tracker--horizontal .muka-progress-tracker__connectors {
   display: flex;