@revikornmann/muka-ui 0.17.0 → 0.19.0

package/dist/esm/components/Scrollbar/Scrollbar.css

@@ -0,0 +1,124 @@
+/* Scrollbar — Figma menu scrollbar (32px rail, chevrons, grip thumb) */
+
+.muka-scrollbar {
+  display: flex;
+  flex-shrink: 0;
+  border-left: var(--border-width-regular) solid var(--color-border-default);
+  background-color: var(--color-surface-level3);
+  user-select: none;
+}
+
+.muka-scrollbar--vertical {
+  flex-direction: column;
+  width: var(--size-2xl, 32px);
+  align-self: stretch;
+}
+
+.muka-scrollbar--horizontal {
+  flex-direction: row;
+  height: var(--size-2xl, 32px);
+  width: 100%;
+  border-left: none;
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-scrollbar__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 100%;
+  height: var(--size-2xl, 32px);
+  padding: 0;
+  border: none;
+  background-color: var(--button-color-tertiary-background-default, var(--color-surface-level3));
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__button {
+  width: var(--size-2xl, 32px);
+  height: 100%;
+}
+
+.muka-scrollbar__button:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.muka-scrollbar__divider {
+  flex-shrink: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-border-default);
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__divider {
+  width: 1px;
+  height: 100%;
+}
+
+.muka-scrollbar__track {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__track {
+  flex-direction: row;
+  min-width: 0;
+  height: 100%;
+}
+
+.muka-scrollbar__thumb {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  /* Figma: scrollbar thumb fill = surface/level3 */
+  background-color: var(--color-surface-level3);
+  cursor: grab;
+  touch-action: none;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__thumb {
+  left: 0;
+  top: 0;
+  width: auto;
+  height: 100%;
+  margin-left: 0;
+  margin-top: 0;
+}
+
+.muka-scrollbar__thumb:active {
+  cursor: grabbing;
+}
+
+.muka-scrollbar__grip {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 14px;
+}
+
+.muka-scrollbar__grip::before,
+.muka-scrollbar__grip::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 2px;
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-text-subtle-default);
+}
+
+.muka-scrollbar__spacer {
+  flex: 1 1 auto;
+  min-height: 0;
+  background-color: var(--color-surface-level2);
+}

package/dist/esm/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Icon } from '../Icon';
+import './Scrollbar.css';
+/**
+ * Scrollbar — custom vertical scrollbar matching the Figma menu scrollbar
+ * (chevron buttons + grip thumb on a 32px rail).
+ */
+export const Scrollbar = ({ viewportRef, orientation = 'vertical', step = 48, className = '', }) => {
+    const [metrics, setMetrics] = useState({
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollHeight: 0,
+        scrollWidth: 0,
+        clientHeight: 0,
+        clientWidth: 0,
+    });
+    const updateMetrics = useCallback(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        setMetrics({
+            scrollTop: el.scrollTop,
+            scrollLeft: el.scrollLeft,
+            scrollHeight: el.scrollHeight,
+            scrollWidth: el.scrollWidth,
+            clientHeight: el.clientHeight,
+            clientWidth: el.clientWidth,
+        });
+    }, [viewportRef]);
+    useEffect(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        updateMetrics();
+        el.addEventListener('scroll', updateMetrics, { passive: true });
+        const resizeObserver = new ResizeObserver(updateMetrics);
+        resizeObserver.observe(el);
+        if (el.firstElementChild) {
+            resizeObserver.observe(el.firstElementChild);
+        }
+        return () => {
+            el.removeEventListener('scroll', updateMetrics);
+            resizeObserver.disconnect();
+        };
+    }, [viewportRef, updateMetrics]);
+    const isVertical = orientation === 'vertical';
+    const maxScroll = isVertical
+        ? metrics.scrollHeight - metrics.clientHeight
+        : metrics.scrollWidth - metrics.clientWidth;
+    if (maxScroll <= 0) {
+        return null;
+    }
+    const trackSize = isVertical ? metrics.clientHeight : metrics.clientWidth;
+    // Rail body between the two 32px chevron buttons + 2×1px dividers ≈ track - 66
+    const railBody = Math.max(trackSize - 66, 24);
+    const thumbRatio = isVertical
+        ? metrics.clientHeight / metrics.scrollHeight
+        : metrics.clientWidth / metrics.scrollWidth;
+    const thumbSize = Math.max(railBody * thumbRatio, 28);
+    const scrollPos = isVertical ? metrics.scrollTop : metrics.scrollLeft;
+    const thumbOffset = (scrollPos / maxScroll) * (railBody - thumbSize);
+    const scrollBy = (delta) => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        if (isVertical) {
+            el.scrollBy({ top: delta, behavior: 'smooth' });
+        }
+        else {
+            el.scrollBy({ left: delta, behavior: 'smooth' });
+        }
+    };
+    const handleThumbPointerDown = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        const startPos = isVertical ? event.clientY : event.clientX;
+        const startScroll = isVertical ? el.scrollTop : el.scrollLeft;
+        const movable = railBody - thumbSize;
+        const onMove = (e) => {
+            const current = isVertical ? e.clientY : e.clientX;
+            const delta = current - startPos;
+            const next = startScroll + (delta / movable) * maxScroll;
+            if (isVertical) {
+                el.scrollTop = next;
+            }
+            else {
+                el.scrollLeft = next;
+            }
+        };
+        const onUp = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    };
+    const rootClasses = [
+        'muka-scrollbar',
+        `muka-scrollbar--${orientation}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: rootClasses, "aria-hidden": "true", children: [_jsx("button", { type: "button", className: "muka-scrollbar__button muka-scrollbar__button--start", tabIndex: -1, onClick: () => scrollBy(-step), "aria-label": isVertical ? 'Scroll up' : 'Scroll left', children: _jsx(Icon, { name: isVertical ? 'arrow-up-s' : 'arrow-left-s', size: "sm" }) }), _jsx("div", { className: "muka-scrollbar__divider" }), _jsxs("div", { className: "muka-scrollbar__track", children: [_jsx("div", { className: "muka-scrollbar__thumb", style: isVertical
+                            ? { height: thumbSize, transform: `translateY(${thumbOffset}px)` }
+                            : { width: thumbSize, transform: `translateX(${thumbOffset}px)` }, onPointerDown: handleThumbPointerDown, children: _jsx("span", { className: "muka-scrollbar__grip" }) }), _jsx("div", { className: "muka-scrollbar__spacer" })] }), _jsx("div", { className: "muka-scrollbar__divider" }), _jsx("button", { type: "button", className: "muka-scrollbar__button muka-scrollbar__button--end", tabIndex: -1, onClick: () => scrollBy(step), "aria-label": isVertical ? 'Scroll down' : 'Scroll right', children: _jsx(Icon, { name: isVertical ? 'arrow-down-s' : 'arrow-right-s', size: "sm" }) })] }));
+};
+export default Scrollbar;
+//# sourceMappingURL=Scrollbar.js.map

package/dist/esm/components/Scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../../../../components/Scrollbar/Scrollbar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Scrollbar/index.js

@@ -0,0 +1,3 @@
+export { Scrollbar } from './Scrollbar';
+export { default } from './Scrollbar';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Scrollbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/esm/components/index.js

@@ -10,6 +10,7 @@ export { Icon } from './Icon';
 export { Chip } from './Chip';
 export { Divider } from './Divider';
 export { Select } from './Select';
+export { DropdownSelect, } from './DropdownSelect';
 export { Tabs, TabList, Tab, TabPanel } from './Tabs';
 export { Radio } from './Radio';
 export { Checkbox } from './Checkbox';
@@ -46,8 +47,9 @@ export { Tile } from './Tile';
 export { DocumentViewer } from './DocumentViewer';
 export { SmsOtpField } from './SmsOtpField';
 export { FileUpload, FileUploadItem, } from './FileUpload';
-export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, MenuGroup, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, } from './Menu';
-export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuGroup, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, } from './ContextMenu';
+export { Menu, DropdownMenu, MenuTrigger, MenuContent, MenuSearch, MenuItem, MenuSeparator, MenuGroup, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, highlightMenuMatch, useMenuSearch, } from './Menu';
+export { ContextSelect, } from './ContextSelect';
+export { Scrollbar } from './Scrollbar';
 // ─── New Base Components ───────────────────────────────────────────────────
 export { Textarea } from './Textarea';
 export { Skeleton } from './Skeleton';

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EACL,IAAI,EAEJ,OAAO,GAMR,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,IAAI,EAAiC,MAAM,QAAQ,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,MAAM,EAAuC,MAAM,UAAU,CAAC;AACvE,OAAO,EACL,cAAc,GAGf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,eAAe,EAAuD,MAAM,mBAAmB,CAAC;AACzG,OAAO,EACL,iBAAiB,GAIlB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAoB,UAAU,EAAwB,MAAM,UAAU,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,YAAY,EAA+C,MAAM,aAAa,CAAC;AACnG,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAkC,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,WAAW,EAA2C,MAAM,UAAU,CAAC;AACxF,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAA4C,MAAM,YAAY,CAAC;AAChF,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,eAAe,EACf,iBAAiB,GAWlB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,SAAS,GAKV,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,YAAY,EAA8C,MAAM,gBAAgB,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAmD,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,UAAU,EACV,cAAc,GAMf,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,OAAO,EACP,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,aAAa,GACd,MAAM,QAAQ,CAAC;AAiBhB,OAAO,EACL,aAAa,GAGd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAE7D,8EAA8E;AAC9E,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,UAAU,EAA6C,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,EACL,OAAO,EACP,cAAc,EACd,WAAW,EACX,cAAc,EACd,YAAY,GAGb,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAyC,MAAM,YAAY,CAAC;AACtF,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,WAAW,GAGZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,WAAW,GAIZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAA8B,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EACL,aAAa,GAGd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EACL,YAAY,GAGb,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,gBAAgB,EAIhB,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,gBAAgB,GACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,eAAe,GAGhB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,WAAW,EAEX,aAAa,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,aAAa,GAGd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EACL,kBAAkB,GAEnB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,QAAQ,GAGT,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,YAAY,GAGb,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AACzE,OAAO,EACL,iBAAiB,GAElB,MAAM,qBAAqB,CAAC;AAO7B,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,aAAa,GAEd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC"}

package/dist/styles/components/Breadcrumb.css

@@ -51,9 +51,17 @@
   user-select: none;
 }
 
-/* Ellipsis */
-.muka-breadcrumb__ellipsis {
-  color: var(--color-text-subtle-default);
+.muka-breadcrumb__item--context {
+  gap: 0;
+}
+
+.muka-breadcrumb__list:has(.muka-breadcrumb__item--context) {
+  gap: 0;
+}
+
+.muka-breadcrumb__item--context .muka-breadcrumb__separator {
+  margin: 0;
+  padding-inline: var(--spacing-1, 4px);
 }
 
 /* Size variants */

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