@revikornmann/muka-ui 0.10.0 → 0.12.0

package/dist/styles/components/AgentTaskList.css

@@ -20,12 +20,19 @@
   margin: 0;
   cursor: pointer;
   color: var(--color-text-subtle-default);
+  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);
+  text-align: left;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-agent-task-list--open .muka-agent-task-list__header {
   font-family: var(--text-body-sm-bold-fontFamily);
   font-weight: var(--text-body-sm-bold-fontWeight);
   font-size: var(--text-body-sm-bold-fontSize);
   line-height: var(--text-body-sm-bold-lineHeight);
-  text-align: left;
-  -webkit-tap-highlight-color: transparent;
 }
 
 .muka-agent-task-list__header:focus-visible {
@@ -83,7 +90,7 @@
   position: absolute;
   left: 7px;
   width: 1px;
-  background-color: var(--color-border-default, #d9d9d9);
+  background-color: var(--color-border-default);
 }
 
 .muka-agent-task-list__line--top {
@@ -145,3 +152,15 @@
   line-height: var(--text-body-sm-regular-lineHeight);
   word-break: break-word;
 }
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-agent-task-list {
+    break-inside: avoid;
+  }
+
+  .muka-agent-task-list__chevron {
+    display: none;
+  }
+}

package/dist/styles/components/BottomBar.css

@@ -62,6 +62,25 @@
   flex-direction: row;
 }
 
+/* ─── Chat variant (houses a ChatComposer) ───────────── */
+
+.muka-bottombar--chat .muka-bottombar__content {
+  flex-direction: row;
+  max-width: var(--bottombar-chat-max-width);
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* Docked chat pads its content; the floating card supplies its own padding. */
+.muka-bottombar--chat:not(.muka-bottombar--floating) .muka-bottombar__content {
+  padding: var(--bottombar-chat-padding);
+}
+
+/* Floating chat card widens to the chat cap (overrides the md default below). */
+.muka-bottombar--chat.muka-bottombar--floating .muka-bottombar__content {
+  max-width: var(--bottombar-chat-max-width);
+}
+
 /* ─── Tab item ────────────────────────────────────────── */
 
 .muka-bottombar__tab {
@@ -118,8 +137,6 @@
     var(--bottombar-floating-backdrop-start),
     var(--bottombar-floating-backdrop-end)
   );
-  backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
-  -webkit-backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
   padding: var(--bottombar-floating-padding-top) var(--bottombar-floating-margin-x) var(--bottombar-floating-margin-bottom);
 
   /* The transparent frosted margin around the pill overlays scrolling content;
@@ -274,3 +291,11 @@
     box-shadow: none;
   }
 }
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-bottombar {
+    display: none;
+  }
+}

package/dist/styles/components/Button.css

@@ -96,10 +96,13 @@
 }
 
 /* `[data-state="open"]` keeps a Button pressed while it's an open disclosure
-   trigger (Radix Menu/Popover set this on the trigger). */
+   trigger (Radix Menu/Popover set this on the trigger). `[aria-pressed="true"]`
+   gives toggle buttons a visible selected state, so the toggle is not conveyed
+   to sighted users by the accessibility tree alone. */
 .muka-button--primary:active:not(:disabled),
 .muka-button--primary.muka-button--pressed:not(:disabled),
-.muka-button--primary[data-state="open"]:not(:disabled) {
+.muka-button--primary[data-state="open"]:not(:disabled),
+.muka-button--primary[aria-pressed="true"]:not(:disabled) {
   background-color: var(--button-color-primary-background-pressed);
   color: var(--button-color-primary-foreground-pressed);
   box-shadow: var(--button-color-primary-shadow-pressed);
@@ -128,7 +131,8 @@
 
 .muka-button--secondary:active:not(:disabled),
 .muka-button--secondary.muka-button--pressed:not(:disabled),
-.muka-button--secondary[data-state="open"]:not(:disabled) {
+.muka-button--secondary[data-state="open"]:not(:disabled),
+.muka-button--secondary[aria-pressed="true"]:not(:disabled) {
   background-color: var(--button-color-secondary-background-pressed);
   color: var(--button-color-secondary-foreground-pressed);
   box-shadow: var(--button-color-secondary-shadow-pressed);
@@ -157,7 +161,8 @@
 
 .muka-button--tertiary:active:not(:disabled),
 .muka-button--tertiary.muka-button--pressed:not(:disabled),
-.muka-button--tertiary[data-state="open"]:not(:disabled) {
+.muka-button--tertiary[data-state="open"]:not(:disabled),
+.muka-button--tertiary[aria-pressed="true"]:not(:disabled) {
   background-color: var(--button-color-tertiary-background-pressed);
   color: var(--button-color-tertiary-foreground-pressed);
   border-color: var(--button-color-tertiary-border-pressed);
@@ -186,7 +191,8 @@
 
 .muka-button--ghost:active:not(:disabled),
 .muka-button--ghost.muka-button--pressed:not(:disabled),
-.muka-button--ghost[data-state="open"]:not(:disabled) {
+.muka-button--ghost[data-state="open"]:not(:disabled),
+.muka-button--ghost[aria-pressed="true"]:not(:disabled) {
   background-color: var(--button-color-ghost-background-pressed);
   color: var(--button-color-ghost-foreground-pressed);
   border-color: var(--button-color-ghost-border-pressed);
@@ -215,7 +221,8 @@
 
 .muka-button--muted:active:not(:disabled),
 .muka-button--muted.muka-button--pressed:not(:disabled),
-.muka-button--muted[data-state="open"]:not(:disabled) {
+.muka-button--muted[data-state="open"]:not(:disabled),
+.muka-button--muted[aria-pressed="true"]:not(:disabled) {
   background-color: var(--button-color-muted-background-pressed);
   color: var(--button-color-muted-foreground-pressed);
   border-color: var(--button-color-muted-border-pressed);

package/dist/styles/components/ChatBubble.css

@@ -3,69 +3,222 @@
 .muka-chat-bubble {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
   width: 100%;
   max-width: 100%;
 }
 
-/* ─── User variant — right-aligned bubble ──────────────── */
+/* ─── Row: avatar rail + bubble + action bar ───────────────
+ *
+ * A two-row grid rather than a flex column, so the avatar bottom-aligns to the
+ * bubble itself and not to the action bar underneath it (Figma 5223:8520).
+ */
 
-.muka-chat-bubble--user {
-  align-items: flex-end;
+.muka-chat-bubble__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    'bubble'
+    'actions';
+  column-gap: var(--chatbubble-row-gap);
+  row-gap: var(--chatbubble-gap);
+  width: 100%;
 }
 
-.muka-chat-bubble--user .muka-chat-bubble__message {
-  background-color: var(--color-surface-level2);
-  color: var(--color-text-default-default);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-4);
-  max-width: min(600px, 100%);
-  word-break: break-word;
+.muka-chat-bubble--has-avatar .muka-chat-bubble__row {
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    'rail bubble'
+    '.    actions';
 }
 
-.muka-chat-bubble--user .muka-chat-bubble__meta {
-  justify-content: flex-end;
+.muka-chat-bubble--own.muka-chat-bubble--has-avatar .muka-chat-bubble__row {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'bubble  rail'
+    'actions .';
 }
 
-/* ─── Agent variant — no bubble, full width ────────────── */
-
-.muka-chat-bubble--agent {
-  align-items: flex-start;
+.muka-chat-bubble__rail {
+  grid-area: rail;
+  /* Sits on the bubble's baseline, above the action bar */
+  align-self: end;
+  display: flex;
+  justify-content: center;
+  min-width: var(--chatbubble-avatar-size);
 }
 
-.muka-chat-bubble--agent .muka-chat-bubble__message {
-  color: var(--color-text-default-default);
-  padding: 0 var(--spacing-2);
+/* ─── Bubble surface ───────────────────────────────────── */
+
+.muka-chat-bubble__bubble {
+  grid-area: bubble;
+  max-width: var(--chatbubble-max-width);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-gap);
   width: 100%;
+  padding: var(--chatbubble-padding);
+  border-radius: var(--chatbubble-radius);
+  border: var(--border-width-regular) solid transparent;
   word-break: break-word;
 }
 
-.muka-chat-bubble--agent .muka-chat-bubble__meta {
-  justify-content: flex-start;
+.muka-chat-bubble--own .muka-chat-bubble__bubble,
+.muka-chat-bubble--own .muka-chat-bubble__actions {
+  justify-self: end;
+}
+
+.muka-chat-bubble--own .muka-chat-bubble__bubble {
+  background-color: var(--chatbubble-color-own-background);
+  border-color: var(--chatbubble-color-own-border);
+  color: var(--chatbubble-color-own-foreground);
+  /* Room for the inset timestamp in the bottom-right corner */
+  padding-right: var(--spacing-6);
+}
+
+.muka-chat-bubble--peer .muka-chat-bubble__bubble {
+  background-color: var(--chatbubble-color-peer-background);
+  border-color: var(--chatbubble-color-peer-border);
+  color: var(--chatbubble-color-peer-foreground);
+  box-shadow: var(--shadow-level2);
+}
+
+.muka-chat-bubble--agent .muka-chat-bubble__bubble {
+  background-color: var(--chatbubble-color-agent-background);
+  border-color: var(--chatbubble-color-agent-border);
+  color: var(--chatbubble-color-agent-foreground);
 }
 
-/* ─── Message typography ───────────────────────────────── */
+/* ─── Header row (author · meta · time · badge) ────────── */
+
+.muka-chat-bubble__header {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: var(--chatbubble-row-gap);
+}
+
+.muka-chat-bubble__author {
+  font-family: var(--text-body-base-bold-fontFamily);
+  font-weight: var(--text-body-base-bold-fontWeight);
+  font-size: var(--text-body-base-bold-fontSize);
+  line-height: var(--text-body-base-bold-lineHeight);
+}
+
+.muka-chat-bubble__author-meta {
+  /* Inherits the variant's body colour from the bubble */
+  color: inherit;
+  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-bubble__badge {
+  display: inline-flex;
+  align-items: center;
+}
+
+/*
+ * Keep the first line of content clear of the absolutely positioned menu
+ * button in the bubble's top-right corner.
+ */
+.muka-chat-bubble--has-menu .muka-chat-bubble__header,
+.muka-chat-bubble--has-menu.muka-chat-bubble--no-header .muka-chat-bubble__message {
+  padding-right: var(--spacing-6);
+}
+
+/* ─── Body ─────────────────────────────────────────────── */
+
+.muka-chat-bubble__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-gap);
+  min-width: 0;
+}
+
+/* The agent balloon spaces its blocks further apart (Figma 5223:8520) */
+.muka-chat-bubble--agent .muka-chat-bubble__body {
+  gap: var(--chatbubble-body-gap);
+}
+
+.muka-chat-bubble__media {
+  min-width: 0;
+}
 
 .muka-chat-bubble__message {
   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);
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
-/* ─── Meta row (timestamp + actions) ───────────────────── */
+/* Empty message block should not add a gap of its own */
+.muka-chat-bubble__message:empty {
+  display: none;
+}
 
-.muka-chat-bubble__meta {
+/* ─── Embedded card ────────────────────────────────────── */
+
+.muka-chat-bubble__embed {
+  position: relative;
   display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
+  flex-direction: column;
+  gap: var(--chatbubble-embed-gap);
+  padding: var(--chatbubble-embed-padding);
+  border-radius: var(--chatbubble-embed-radius);
+  border: var(--border-width-regular) solid transparent;
 }
 
+/*
+ * The embed sits on the raised surface of its author's role, one step apart
+ * from the bubble it is nested in, and reuses that role's border colour.
+ */
+.muka-chat-bubble--own .muka-chat-bubble__embed {
+  background-color: var(--chatbubble-embed-color-own-background);
+  border-color: var(--chatbubble-embed-color-own-border);
+  color: var(--chatbubble-embed-color-own-foreground);
+}
+
+.muka-chat-bubble--peer .muka-chat-bubble__embed {
+  background-color: var(--chatbubble-embed-color-peer-background);
+  border-color: var(--chatbubble-embed-color-peer-border);
+  color: var(--chatbubble-embed-color-peer-foreground);
+}
+
+.muka-chat-bubble--agent .muka-chat-bubble__embed {
+  background-color: var(--chatbubble-embed-color-agent-background);
+  border-color: var(--chatbubble-embed-color-agent-border);
+  color: var(--chatbubble-embed-color-agent-foreground);
+}
+
+.muka-chat-bubble__embed-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-embed-gap);
+  min-width: 0;
+}
+
+.muka-chat-bubble__embed-copy {
+  position: absolute;
+  top: var(--chatbubble-embed-padding);
+  right: var(--chatbubble-embed-padding);
+}
+
+/* ─── Stacked full-width action buttons ────────────────── */
+
+.muka-chat-bubble__action-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chatbubble-action-stack-gap);
+}
+
+/* ─── Inset timestamp (user variant) ───────────────────── */
+
 .muka-chat-bubble__timestamp {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 var(--spacing-2);
-  color: var(--color-text-subtle-default);
+  color: var(--chatbubble-color-timestamp);
   font-family: var(--text-body-sm-regular-fontFamily);
   font-weight: var(--text-body-sm-regular-fontWeight);
   font-size: var(--text-body-sm-regular-fontSize);
@@ -73,8 +226,75 @@
   white-space: nowrap;
 }
 
+.muka-chat-bubble__timestamp--inset {
+  align-self: flex-end;
+}
+
+/* ─── Menu affordance ──────────────────────────────────── */
+
+.muka-chat-bubble__menu {
+  position: absolute;
+  top: var(--spacing-1);
+  right: var(--spacing-1);
+}
+
+/* ─── Meta action row (below the bubble) ───────────────── */
+
 .muka-chat-bubble__actions {
+  grid-area: actions;
+  max-width: var(--chatbubble-max-width);
   display: flex;
   align-items: center;
   gap: 0;
 }
+
+.muka-chat-bubble--own .muka-chat-bubble__actions,
+.muka-chat-bubble--agent .muka-chat-bubble__actions {
+  justify-content: flex-end;
+}
+
+/*
+ * The meta row uses 32px icon buttons per the design. Expand the pointer/touch
+ * target to the 44px WCAG 2.1 AA minimum without changing the visual size.
+ */
+.muka-chat-bubble__actions .muka-button--icon-only {
+  position: relative;
+}
+
+.muka-chat-bubble__actions .muka-button--icon-only::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 44px;
+  height: 44px;
+  transform: translate(-50%, -50%);
+}
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-bubble__bubble {
+    box-shadow: none;
+    break-inside: avoid;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .muka-chat-bubble__embed {
+    break-inside: avoid;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .muka-chat-bubble__menu,
+  .muka-chat-bubble__actions,
+  .muka-chat-bubble__embed-copy,
+  .muka-chat-bubble__action-stack {
+    display: none;
+  }
+
+  .muka-chat-bubble__column {
+    max-width: 100%;
+  }
+}

package/dist/styles/components/ChatComposer.css

@@ -1,11 +1,15 @@
 /* ChatComposer Component Styles */
 
+/*
+ * The composer is a bare, fill-width row: no padding, background, border or
+ * max-width of its own (Figma 5243:14141). Whatever hosts it owns the
+ * container — see BottomBar's `chat` variant.
+ */
 .muka-chat-composer {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3);
   width: 100%;
-  max-width: 768px;
 }
 
 .muka-chat-composer--disabled {
@@ -111,3 +115,11 @@
   right: var(--spacing-2);
   transform: translateY(-50%);
 }
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-composer {
+    display: none;
+  }
+}

package/dist/styles/components/ChatMessageList.css

@@ -19,6 +19,22 @@
   align-items: stretch;
   gap: var(--spacing-8);
   width: 100%;
-  max-width: 640px;
+  max-width: var(--container-max-width-sm);
   margin: 0 auto;
 }
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-message-list {
+    overflow: visible;
+    height: auto;
+    max-height: none;
+    background: none;
+    padding: 0;
+  }
+
+  .muka-chat-message-list__inner {
+    max-width: 100%;
+  }
+}

package/dist/styles/components/ChatPhotoGrid.css

@@ -0,0 +1,113 @@
+/* ChatPhotoGrid Component Styles */
+
+.muka-chat-photo-grid {
+  display: grid;
+  gap: var(--chatphotogrid-gap);
+  width: 100%;
+  min-width: 0;
+}
+
+/* ─── Tiles ────────────────────────────────────────────── */
+
+.muka-chat-photo-grid__tile {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: var(--chatphotogrid-radius);
+  background-color: var(--chatphotogrid-color-placeholder);
+  aspect-ratio: 1 / 1;
+}
+
+button.muka-chat-photo-grid__tile {
+  cursor: pointer;
+  appearance: none;
+}
+
+button.muka-chat-photo-grid__tile:focus-visible {
+  outline: var(--border-width-bold) solid var(--color-border-focus);
+  outline-offset: var(--spacing-1);
+}
+
+.muka-chat-photo-grid__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ─── Overflow tile ────────────────────────────────────── */
+
+.muka-chat-photo-grid__overflow {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--chatphotogrid-color-overflow-background);
+  color: var(--chatphotogrid-color-overflow-foreground);
+  font-family: var(--text-body-2xl-regular-fontFamily);
+  font-weight: var(--text-body-2xl-regular-fontWeight);
+  font-size: var(--text-body-2xl-regular-fontSize);
+  line-height: var(--text-body-2xl-regular-lineHeight);
+}
+
+/* ─── Layouts ──────────────────────────────────────────── */
+
+.muka-chat-photo-grid--1 {
+  grid-template-columns: 1fr;
+}
+
+.muka-chat-photo-grid--landscape .muka-chat-photo-grid__tile {
+  aspect-ratio: 4 / 3;
+}
+
+.muka-chat-photo-grid--portrait .muka-chat-photo-grid__tile {
+  aspect-ratio: 3 / 4;
+}
+
+.muka-chat-photo-grid--2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.muka-chat-photo-grid--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.muka-chat-photo-grid--4 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+/* 5 photos: a 2-up row above a 3-up row, on a shared 6-column track */
+.muka-chat-photo-grid--5 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(-n + 2) {
+  grid-column: span 3;
+}
+
+.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(n + 3) {
+  grid-column: span 2;
+}
+
+.muka-chat-photo-grid--6,
+.muka-chat-photo-grid--overflow {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-photo-grid {
+    break-inside: avoid;
+  }
+
+  .muka-chat-photo-grid__image {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+}