@revikornmann/muka-ui 0.11.0 → 0.13.0

package/build/manifest.json

@@ -11,6 +11,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -52,6 +54,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -71,6 +74,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -112,6 +117,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -130,6 +136,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -171,6 +179,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -189,6 +198,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -230,6 +241,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -248,6 +260,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -289,6 +303,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -307,6 +322,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -348,6 +365,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -366,6 +384,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -407,6 +427,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -425,6 +446,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -466,6 +489,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -484,6 +508,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -525,6 +551,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",
@@ -543,6 +570,8 @@
       "tokens/t3-semantics/ui.json",
       "tokens/t4-components/button.json",
       "tokens/t4-components/card.json",
+      "tokens/t4-components/chatbubble.json",
+      "tokens/t4-components/chatphotogrid.json",
       "tokens/t4-components/container.json",
       "tokens/t4-components/input.json",
       "tokens/t4-components/chip.json",
@@ -584,6 +613,7 @@
       "tokens/t4-components/bottombar.json",
       "tokens/t4-components/view.json",
       "tokens/t4-components/badge.json",
+      "tokens/t4-components/badge-number.json",
       "tokens/t4-components/table.json",
       "tokens/t4-components/datatable.json",
       "tokens/t4-components/datepicker.json",

package/dist/cjs/components/AgentTaskList/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/cjs/components/AgentTaskList/AgentTaskList.js

@@ -12,7 +12,7 @@ require("./AgentTaskList.css");
  * Renders a header + a vertical timeline of tasks the agent is performing
  * (e.g. searching the web, querying a database, drafting an answer).
  *
- * Typically rendered above the agent's final reply inside a `ChatBubble`
+ * Typically rendered above the agent's final reply inside a `ChatMessage`
  * with `variant="agent"`.
  */
 const AgentTaskList = ({ title, tasks, defaultOpen = true, open: controlledOpen, onOpenChange, className = '', }) => {

package/dist/cjs/components/BadgeNumber/BadgeNumber.css

@@ -0,0 +1,105 @@
+/* BadgeNumber Component Styles - Using Muka Design Tokens */
+
+.muka-badge-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-full);
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/*
+ * Sizes — fixed height, matching min-width (so a single digit renders as a
+ * circle), horizontal padding, and bold label typography. Vertical centering
+ * is handled by the fixed height + align-items: center.
+ */
+.muka-badge-number--2xs {
+  height: var(--badge-number-size-2xs);
+  min-width: var(--badge-number-size-2xs);
+  padding: 0 var(--badge-number-padding-2xs);
+  font-family: var(--text-label-xs-bold-fontFamily);
+  font-weight: var(--text-label-xs-bold-fontWeight);
+  font-size: var(--text-label-xs-bold-fontSize);
+  line-height: var(--text-label-xs-bold-lineHeight);
+}
+
+.muka-badge-number--xs {
+  height: var(--badge-number-size-xs);
+  min-width: var(--badge-number-size-xs);
+  padding: 0 var(--badge-number-padding-xs);
+  font-family: var(--text-label-sm-bold-fontFamily);
+  font-weight: var(--text-label-sm-bold-fontWeight);
+  font-size: var(--text-label-sm-bold-fontSize);
+  line-height: var(--text-label-sm-bold-lineHeight);
+}
+
+.muka-badge-number--sm {
+  height: var(--badge-number-size-sm);
+  min-width: var(--badge-number-size-sm);
+  padding: 0 var(--badge-number-padding-sm);
+  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);
+}
+
+.muka-badge-number--md {
+  height: var(--badge-number-size-md);
+  min-width: var(--badge-number-size-md);
+  padding: 0 var(--badge-number-padding-md);
+  font-family: var(--text-label-lg-bold-fontFamily);
+  font-weight: var(--text-label-lg-bold-fontWeight);
+  font-size: var(--text-label-lg-bold-fontSize);
+  line-height: var(--text-label-lg-bold-lineHeight);
+}
+
+.muka-badge-number--lg {
+  height: var(--badge-number-size-lg);
+  min-width: var(--badge-number-size-lg);
+  padding: 0 var(--badge-number-padding-lg);
+  font-family: var(--text-label-2xl-bold-fontFamily);
+  font-weight: var(--text-label-2xl-bold-fontWeight);
+  font-size: var(--text-label-2xl-bold-fontSize);
+  line-height: var(--text-label-2xl-bold-lineHeight);
+}
+
+.muka-badge-number__label {
+  /*
+   * The badge sets a tight line-height for compact sizing, which would clip
+   * glyph descenders; give the label a roomier line-height. Vertical centering
+   * is unaffected because the badge height is fixed and content is centered.
+   */
+  line-height: normal;
+}
+
+/* Neutral variant */
+.muka-badge-number--neutral {
+  background-color: var(--color-surface-level1);
+  color: var(--color-text-default-default);
+}
+
+/* Info variant */
+.muka-badge-number--info {
+  background-color: var(--color-state-info-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Success variant */
+.muka-badge-number--success {
+  background-color: var(--color-state-success-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Warning variant */
+.muka-badge-number--warning {
+  background-color: var(--color-state-warning-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Error variant */
+.muka-badge-number--error {
+  background-color: var(--color-state-error-contrast);
+  color: var(--color-text-default-inverse);
+}

package/dist/cjs/components/BadgeNumber/BadgeNumber.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeNumber = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./BadgeNumber.css");
+const BadgeNumber = ({ children, variant = 'neutral', size = '2xs', className = '', 'aria-label': ariaLabel, ...props }) => {
+    const classes = [
+        'muka-badge-number',
+        `muka-badge-number--${variant}`,
+        `muka-badge-number--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsx)("span", { className: classes, role: "status", "aria-label": ariaLabel, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: "muka-badge-number__label", children: children }) }));
+};
+exports.BadgeNumber = BadgeNumber;
+exports.default = exports.BadgeNumber;
+//# sourceMappingURL=BadgeNumber.js.map

package/dist/cjs/components/BadgeNumber/BadgeNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeNumber.js","sourceRoot":"","sources":["../../../../components/BadgeNumber/BadgeNumber.tsx"],"names":[],"mappings":";;;;AACA,6BAA2B;AAepB,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,OAAO,GAAG;QACd,mBAAmB;QACnB,sBAAsB,OAAO,EAAE;QAC/B,sBAAsB,IAAI,EAAE;QAC5B,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iCAAM,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,gBAAa,SAAS,KAAM,KAAK,YACtE,iCAAM,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAQ,GACvD,CACR,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,WAAW,eAsBtB;AAEF,kBAAe,mBAAW,CAAC"}

package/dist/cjs/components/BadgeNumber/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.BadgeNumber = void 0;
+var BadgeNumber_1 = require("./BadgeNumber");
+Object.defineProperty(exports, "BadgeNumber", { enumerable: true, get: function () { return BadgeNumber_1.BadgeNumber; } });
+var BadgeNumber_2 = require("./BadgeNumber");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(BadgeNumber_2).default; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/BadgeNumber/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/BadgeNumber/index.ts"],"names":[],"mappings":";;;;;;AAAA,6CAAmE;AAA1D,0GAAA,WAAW,OAAA;AACpB,6CAAwC;AAA/B,uHAAA,OAAO,OAAA"}

package/dist/cjs/components/BottomBar/BottomBar.css

@@ -81,11 +81,6 @@
   max-width: var(--bottombar-chat-max-width);
 }
 
-/* Let the composer fill the wider bar instead of its standalone 768px cap. */
-.muka-bottombar--chat .muka-chat-composer {
-  max-width: none;
-}
-
 /* ─── Tab item ────────────────────────────────────────── */
 
 .muka-bottombar__tab {
@@ -296,3 +291,11 @@
     box-shadow: none;
   }
 }
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-bottombar {
+    display: none;
+  }
+}

package/dist/cjs/components/Button/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/cjs/components/Button/Button.js

@@ -21,7 +21,7 @@ require("./Button.css");
  * - Uses native <button> element for full keyboard support
  * - Focus indicator meets WCAG 2.4.7 (visible focus)
  * - When iconOnly=true, aria-label is required (dev warning if missing)
- * - Supports aria-pressed for toggle buttons
+ * - Supports aria-pressed for toggle buttons (renders the pressed treatment when true)
  * - Supports aria-expanded/aria-controls for menu buttons
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/

package/dist/cjs/components/ChatComposer/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;
+  }
+}