react-material-expressive 1.0.0 → 1.1.0

package/dist/index.js

@@ -561,7 +561,8 @@ function useOutsideClose(ref, onClose, enabled = true) {
       const target = event.target;
       if (!element || !(target instanceof Node)) return;
       if (element.contains(target)) return;
-      if (target instanceof Element && target.closest('[role="menu"]')) return;
+      if (target instanceof Element && target.closest('[role="menu"],[role="listbox"]'))
+        return;
       onClose();
     };
     document.addEventListener("pointerdown", handler);
@@ -796,6 +797,83 @@ function IconButton({
     }
   );
 }
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+// src/components/_usePopoverPosition.ts
+var MARGIN = 8;
+var FALLBACK_WIDTH = 224;
+function usePopoverPosition(anchor, floating, open, options = {}) {
+  const { gap = 0, matchWidth = false, placement = "bottom-start" } = options;
+  const [pos, setPos] = useState({
+    flippedVertically: false,
+    left: 0,
+    top: 0
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    const compute = () => {
+      const a = anchor.current?.getBoundingClientRect();
+      if (!a) return;
+      const f = floating.current?.getBoundingClientRect();
+      const width = matchWidth ? a.width : f?.width || FALLBACK_WIDTH;
+      const height = f?.height || 0;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const dash = placement.indexOf("-");
+      const side = placement.slice(0, dash);
+      const align = placement.slice(dash + 1);
+      let left;
+      let top;
+      let flippedVertically = false;
+      if (side === "right") {
+        left = a.right + gap;
+        if (left + width > vw - MARGIN) {
+          const flipped = a.left - width - gap;
+          left = flipped >= MARGIN ? flipped : Math.max(MARGIN, vw - MARGIN - width);
+        }
+        top = a.top;
+        if (top + height > vh - MARGIN) {
+          top = Math.max(MARGIN, vh - MARGIN - height);
+        }
+      } else {
+        left = align === "end" ? a.right - width : a.left;
+        if (left + width > vw - MARGIN) left = vw - MARGIN - width;
+        if (left < MARGIN) left = MARGIN;
+        const below = a.bottom + gap;
+        const above = a.top - height - gap;
+        const roomBelow = vh - MARGIN - a.bottom;
+        const roomAbove = a.top - MARGIN;
+        if (side === "bottom") {
+          if (height > roomBelow && roomAbove > roomBelow) {
+            top = Math.max(MARGIN, above);
+            flippedVertically = true;
+          } else {
+            top = below;
+          }
+        } else if (height > roomAbove && roomBelow > roomAbove) {
+          top = below;
+          flippedVertically = true;
+        } else {
+          top = Math.max(MARGIN, above);
+        }
+      }
+      setPos({
+        flippedVertically,
+        left,
+        top,
+        width: matchWidth ? a.width : void 0
+      });
+    };
+    compute();
+    window.addEventListener("scroll", compute, true);
+    window.addEventListener("resize", compute);
+    return () => {
+      window.removeEventListener("scroll", compute, true);
+      window.removeEventListener("resize", compute);
+    };
+  }, [anchor, floating, open, gap, matchWidth, placement]);
+  return pos;
+}
 var MENU_NOOP = () => {
 };
 var MenuContext = createContext({
@@ -918,41 +996,6 @@ function MenuLabel({ children, className, leftElement }) {
     }
   );
 }
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-
-// src/components/menu/_useSubmenu.ts
-var MARGIN = 8;
-function useSubmenuPosition(anchor, floating, open) {
-  const [pos, setPos] = useState({ left: 0, top: 0 });
-  useIsomorphicLayoutEffect(() => {
-    if (!open) return;
-    const compute = () => {
-      const a = anchor.current?.getBoundingClientRect();
-      if (!a) return;
-      const f = floating.current?.getBoundingClientRect();
-      const width = f?.width || 224;
-      const height = f?.height || 0;
-      let left = a.right;
-      if (left + width > window.innerWidth - MARGIN) {
-        const flipped = a.left - width;
-        left = flipped >= MARGIN ? flipped : Math.max(MARGIN, window.innerWidth - MARGIN - width);
-      }
-      let top = a.top;
-      if (top + height > window.innerHeight - MARGIN) {
-        top = Math.max(MARGIN, window.innerHeight - MARGIN - height);
-      }
-      setPos({ left, top });
-    };
-    compute();
-    window.addEventListener("scroll", compute, true);
-    window.addEventListener("resize", compute);
-    return () => {
-      window.removeEventListener("scroll", compute, true);
-      window.removeEventListener("resize", compute);
-    };
-  }, [anchor, floating, open]);
-  return pos;
-}
 var HOVER_OPEN_MS = 120;
 var HOVER_CLOSE_MS = 220;
 function ChevronRight() {
@@ -982,7 +1025,9 @@ function MenuSub({
   const trigger = useRef(null);
   const floating = useRef(null);
   const timer = useRef(void 0);
-  const pos = useSubmenuPosition(trigger, floating, open);
+  const pos = usePopoverPosition(trigger, floating, open, {
+    placement: "right-start"
+  });
   const clear = () => timer.current && clearTimeout(timer.current);
   const hoverOpen = () => {
     clear();
@@ -1063,7 +1108,7 @@ function MenuSub({
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "fixed z-50",
+          className: "fixed z-[var(--md-sys-z-menu)]",
           onMouseEnter: clear,
           onMouseLeave: hoverClose,
           ref: floating,
@@ -1178,7 +1223,7 @@ function Menu({
         // outline-none: the surface is focusable (tabIndex -1) so a
         // root menu can focus it on open without highlighting any
         // item — it must never show a focus ring of its own.
-        "z-50 flex w-max min-w-[112px] max-w-[280px] flex-col outline-none [--menu-clip-bleed:-24px]",
+        "z-[var(--md-sys-z-menu)] flex w-max min-w-[112px] max-w-[280px] flex-col outline-none [--menu-clip-bleed:-24px]",
         grouped ? (
           // Transparent stack: each Menu.Group is its own
           // surface, separated by a 2dp gap. overflow-visible
@@ -1286,8 +1331,13 @@ function SplitButton({
   const [isOpen, setIsOpen] = useState(false);
   const wrapper = useRef(null);
   const trailing = useRef(null);
+  const floating = useRef(null);
   const wasOpen = useRef(false);
   const { exiting, mounted } = useDismissable(isOpen, 150);
+  const pos = usePopoverPosition(wrapper, floating, mounted, {
+    gap: 8,
+    placement: "bottom-end"
+  });
   const config = SIZES4[size];
   const corners = (classes) => disabled ? classes.replace(/ (?:hover|focus-visible|active):\S+/g, "") : classes;
   useOutsideClose(wrapper, () => setIsOpen(false), isOpen);
@@ -1361,15 +1411,27 @@ function SplitButton({
             )
           }
         ),
-        mounted ? /* @__PURE__ */ jsx("div", { className: "absolute top-full right-0 z-20 flex flex-col", children: /* @__PURE__ */ jsx(
-          Menu,
-          {
-            className: cn("mt-2", menuClassName),
-            exiting,
-            onClose: () => setIsOpen(false),
-            children: menu
-          }
-        ) }) : null
+        mounted && typeof document !== "undefined" ? createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "fixed z-[var(--md-sys-z-menu)]",
+              ref: floating,
+              style: { left: pos.left, top: pos.top },
+              children: /* @__PURE__ */ jsx(
+                Menu,
+                {
+                  className: menuClassName,
+                  exiting,
+                  onClose: () => setIsOpen(false),
+                  up: pos.flippedVertically,
+                  children: menu
+                }
+              )
+            }
+          ),
+          document.body
+        ) : null
       ]
     }
   );
@@ -1548,37 +1610,981 @@ function Chips({
                 children: /* @__PURE__ */ jsx(CheckIcon, { selected })
               }
             ),
-            /* @__PURE__ */ jsx(
-              "span",
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "absolute inset-0 flex items-center justify-center",
+                  selected ? "ease-md-linear opacity-0 transition-opacity duration-[50ms]" : "ease-legacy opacity-100 transition-opacity delay-[50ms] duration-150",
+                  accentIcon && !disabled && "text-primary"
+                ),
+                children: leftElement
+              }
+            )
+          ] })
+        ) : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: cn(
+              accentIcon && !disabled && !hasAvatar && "text-primary"
+            ),
+            iconLeft: leftElement,
+            size: hasAvatar ? 24 : 18
+          }
+        ) : null,
+        children ?? text,
+        rightElement ? /* @__PURE__ */ jsx(Icon, { iconRight: rightElement, size: 18 }) : null
+      ]
+    }
+  );
+  return removeButton ? /* @__PURE__ */ jsxs("span", { className: "relative inline-flex w-fit align-middle", children: [
+    chip,
+    removeButton
+  ] }) : chip;
+}
+function FloatingLabel({
+  children,
+  className,
+  floating,
+  floatingClassName,
+  htmlFor,
+  restingClassName
+}) {
+  const floatingRef = useRef(null);
+  const restingRef = useRef(null);
+  const animationRef = useRef(null);
+  const prevFloating = useRef(floating);
+  const [animating, setAnimating] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    if (prevFloating.current === floating) return;
+    prevFloating.current = floating;
+    const floatingEl = floatingRef.current;
+    const restingEl = restingRef.current;
+    if (!floatingEl || !restingEl) return;
+    const f = floatingEl.getBoundingClientRect();
+    const r = restingEl.getBoundingClientRect();
+    if (!f.width || !r.width) return;
+    const scale = r.width / f.width;
+    const xDelta = r.x - f.x;
+    const yDelta = r.y - f.y + Math.round((r.height - f.height * scale) / 2);
+    const rest = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;
+    const float = `translateX(0) translateY(0) scale(1)`;
+    animationRef.current?.cancel();
+    setAnimating(true);
+    const animation = floatingEl.animate(
+      { transform: floating ? [rest, float] : [float, rest] },
+      {
+        duration: 150,
+        easing: "cubic-bezier(0.2, 0, 0, 1)",
+        fill: "forwards"
+      }
+    );
+    animationRef.current = animation;
+    const done = () => {
+      if (animationRef.current === animation) setAnimating(false);
+    };
+    animation.addEventListener("finish", done);
+    animation.addEventListener("cancel", done);
+  }, [floating]);
+  useIsomorphicLayoutEffect(() => {
+    if (animating || !animationRef.current) return;
+    animationRef.current.cancel();
+    animationRef.current = null;
+  }, [animating]);
+  const showFloating = floating || animating;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "pointer-events-none absolute",
+          floatingClassName,
+          className,
+          !showFloating && "opacity-0"
+        ),
+        children: /* @__PURE__ */ jsx("span", { className: "inline-block origin-top-left", ref: floatingRef, children })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: cn(
+          "pointer-events-none absolute",
+          restingClassName,
+          className,
+          showFloating && "opacity-0"
+        ),
+        htmlFor,
+        children: /* @__PURE__ */ jsx("span", { className: "inline-block", ref: restingRef, children })
+      }
+    )
+  ] });
+}
+function useFieldState(value, defaultValue, disabled) {
+  const [focused, setFocusedState] = useState(false);
+  const [internalHasValue, setInternalHasValue] = useState(
+    defaultValue !== void 0 && defaultValue !== null && String(defaultValue).length > 0
+  );
+  const hasValue = value !== void 0 && value !== null ? String(value).length > 0 : internalHasValue;
+  return {
+    focused: focused && !disabled,
+    hasValue,
+    setFocused: setFocusedState,
+    setInternalHasValue
+  };
+}
+function labelColor(opts) {
+  if (opts.disabled) return "text-on-surface/38";
+  if (opts.error) return "text-error";
+  if (opts.focused) return "text-primary";
+  return "text-on-surface-variant";
+}
+function SupportingText({
+  error,
+  errorText,
+  id,
+  supportingText
+}) {
+  const isError = !!(error && errorText);
+  const text = isError ? errorText : supportingText;
+  if (!text) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      role: isError ? "alert" : void 0,
+      id,
+      className: cn(
+        "px-4 pt-1 text-body-small",
+        error ? "text-error" : "text-on-surface-variant"
+      ),
+      children: text
+    }
+  );
+}
+function FieldIcon({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "pointer-events-auto absolute flex h-6 w-6 items-center justify-center leading-none text-on-surface-variant",
+        className
+      ),
+      children
+    }
+  );
+}
+function useControlled(controlled, defaultValue) {
+  const isControlled = useRef(controlled !== void 0).current;
+  const [internal, setInternal] = useState(defaultValue);
+  const value = isControlled && controlled !== void 0 ? controlled : internal;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+var TYPEAHEAD_BUFFER_MS = 200;
+function optionText(option) {
+  return typeof option.label === "string" ? option.label : option.value;
+}
+function useSelect({
+  defaultValue,
+  disabled,
+  onChange,
+  options,
+  value: valueProp
+}) {
+  const [value, setValue] = useControlled(valueProp, defaultValue ?? "");
+  const [isOpen, setIsOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [highlighted, setHighlighted] = useState(-1);
+  const wrapper = useRef(null);
+  const typeahead = useRef({ buffer: "", time: 0 });
+  const { exiting, mounted } = useDismissable(isOpen, 150);
+  useOutsideClose(wrapper, () => setIsOpen(false), isOpen);
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const move = (start, delta) => {
+    for (let step = 1; step <= options.length; step += 1) {
+      const index = (start + delta * step + options.length * step) % options.length;
+      if (!options[index]?.disabled) return index;
+    }
+    return -1;
+  };
+  const openMenu = () => {
+    if (disabled) return;
+    setHighlighted(
+      selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : move(-1, 1)
+    );
+    setIsOpen(true);
+  };
+  const commit = (next) => {
+    setValue(next);
+    onChange?.(next);
+    setIsOpen(false);
+  };
+  const typeaheadFind = (char) => {
+    const now = Date.now();
+    const stale = now - typeahead.current.time > TYPEAHEAD_BUFFER_MS;
+    typeahead.current = {
+      buffer: (stale ? "" : typeahead.current.buffer) + char.toLowerCase(),
+      time: now
+    };
+    return options.findIndex(
+      (option) => !option.disabled && optionText(option).toLowerCase().startsWith(typeahead.current.buffer)
+    );
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    const { key } = event;
+    const printable = key.length === 1 && key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
+    if (!isOpen) {
+      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(key)) {
+        event.preventDefault();
+        openMenu();
+      } else if (printable) {
+        const index = typeaheadFind(key);
+        if (index >= 0) {
+          setValue(options[index].value);
+          onChange?.(options[index].value);
+        }
+      }
+      return;
+    }
+    switch (key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setHighlighted((current) => move(current, 1));
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setHighlighted((current) => move(current, -1));
+        break;
+      case "Home":
+        event.preventDefault();
+        setHighlighted(move(-1, 1));
+        break;
+      case "End":
+        event.preventDefault();
+        setHighlighted(move(options.length, -1));
+        break;
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        const option = options[highlighted];
+        if (option && !option.disabled) commit(option.value);
+        break;
+      }
+      case "Escape":
+        event.preventDefault();
+        setIsOpen(false);
+        break;
+      case "Tab":
+        setIsOpen(false);
+        break;
+      default:
+        if (printable) {
+          const index = typeaheadFind(key);
+          if (index >= 0) setHighlighted(index);
+        }
+    }
+  };
+  return {
+    commit,
+    exiting,
+    focused: focused && !disabled,
+    handleKeyDown,
+    highlighted,
+    isOpen,
+    mounted,
+    openMenu,
+    selectedIndex,
+    setFocused,
+    setHighlighted,
+    setIsOpen,
+    value,
+    wrapper
+  };
+}
+function SelectMenu({
+  baseId,
+  exiting,
+  highlighted,
+  onHighlight,
+  onSelect,
+  options,
+  value
+}) {
+  useEffect(() => {
+    if (highlighted < 0) return;
+    document.getElementById(`${baseId}-opt-${highlighted}`)?.scrollIntoView({ block: "nearest" });
+  }, [baseId, highlighted]);
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        "absolute top-full left-0 z-[var(--md-sys-z-dropdown)] mt-1 flex max-h-[280px] w-full min-w-max flex-col overflow-hidden overflow-y-auto rounded-large bg-surface-container-low py-0.5 shadow-mm-3 [--menu-clip-bleed:-24px]",
+        exiting ? "animate-menu-out" : "animate-menu-in"
+      ),
+      id: `${baseId}-listbox`,
+      role: "listbox",
+      children: options.map((option, index) => {
+        const isSelected = option.value === value;
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            "aria-disabled": option.disabled || void 0,
+            "aria-selected": isSelected,
+            className: cn(
+              "mx-1 my-0.5 flex h-11 shrink-0 cursor-pointer items-center rounded-extra-small px-3 text-label-large first:rounded-t-medium last:rounded-b-medium",
+              isSelected ? "rounded-medium bg-tertiary-container text-on-tertiary-container" : "text-on-surface",
+              highlighted === index && !isSelected && "bg-on-surface/8",
+              option.disabled && "cursor-not-allowed text-on-surface/38"
+            ),
+            id: `${baseId}-opt-${index}`,
+            onClick: () => {
+              if (!option.disabled) onSelect(option.value);
+            },
+            onMouseDown: (event) => event.preventDefault(),
+            onMouseEnter: () => {
+              if (!option.disabled) onHighlight(index);
+            },
+            role: "option",
+            children: /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label ?? option.value })
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+function SelectCaret({ open = false }) {
+  const fade = "ease-md-linear transition-opacity delay-75 duration-75";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": true,
+      fill: "currentColor",
+      height: 24,
+      viewBox: "0 0 24 24",
+      width: 24,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: cn(fade, open ? "opacity-0" : "opacity-100"),
+            d: "M7 10l5 5 5-5z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: cn(fade, open ? "opacity-100" : "opacity-0"),
+            d: "M7 15l5-5 5 5z"
+          }
+        )
+      ]
+    }
+  );
+}
+var COMBOBOX_LABELS = {
+  clear: "Clear",
+  empty: "No results",
+  loading: "Loading\u2026"
+};
+function useCombobox({
+  defaultValue,
+  disabled,
+  onChange,
+  onInputChange,
+  options,
+  value: valueProp
+}) {
+  const [value, setValue] = useControlled(valueProp, defaultValue ?? "");
+  const labelFor = (next) => options.find((option) => option.value === next)?.label ?? next;
+  const [query, setQuery] = useState(() => value ? labelFor(value) : "");
+  const [isOpen, setIsOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [highlighted, setHighlighted] = useState(-1);
+  const wrapper = useRef(null);
+  const input = useRef(null);
+  const { exiting, mounted } = useDismissable(isOpen, 150);
+  useEffect(() => {
+    if (!isOpen) setQuery(value ? labelFor(value) : "");
+  }, [isOpen, value]);
+  const move = (start, delta) => {
+    if (options.length === 0) return -1;
+    for (let step = 1; step <= options.length; step += 1) {
+      const index = (start + delta * step + options.length * step) % options.length;
+      if (!options[index]?.disabled) return index;
+    }
+    return -1;
+  };
+  const open = () => {
+    if (disabled) return;
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    setHighlighted(
+      selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : move(-1, 1)
+    );
+    setIsOpen(true);
+  };
+  const closeAndRevert = () => {
+    setIsOpen(false);
+    setHighlighted(-1);
+    setQuery(value ? labelFor(value) : "");
+  };
+  useOutsideClose(wrapper, closeAndRevert, isOpen);
+  const onType = (next) => {
+    setQuery(next);
+    setIsOpen(true);
+    setHighlighted(-1);
+    onInputChange?.(next);
+  };
+  const commit = (next) => {
+    setValue(next);
+    onChange?.(next);
+    setQuery(labelFor(next));
+    setIsOpen(false);
+    setHighlighted(-1);
+  };
+  const clear = () => {
+    setValue("");
+    onChange?.("");
+    setQuery("");
+    setHighlighted(-1);
+    onInputChange?.("");
+    input.current?.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (isOpen) setHighlighted((current) => move(current, 1));
+        else open();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (isOpen) setHighlighted((current) => move(current, -1));
+        else open();
+        break;
+      case "Home":
+        if (isOpen) {
+          event.preventDefault();
+          setHighlighted(move(-1, 1));
+        }
+        break;
+      case "End":
+        if (isOpen) {
+          event.preventDefault();
+          setHighlighted(move(options.length, -1));
+        }
+        break;
+      case "Enter":
+        if (isOpen && highlighted >= 0) {
+          event.preventDefault();
+          const option = options[highlighted];
+          if (option && !option.disabled) commit(option.value);
+        }
+        break;
+      case "Escape":
+        if (isOpen) {
+          event.preventDefault();
+          closeAndRevert();
+        }
+        break;
+      case "Tab":
+        if (isOpen) closeAndRevert();
+        break;
+    }
+  };
+  return {
+    clear,
+    commit,
+    exiting,
+    focused: focused && !disabled,
+    handleKeyDown,
+    highlighted,
+    input,
+    isOpen,
+    mounted,
+    onType,
+    query,
+    setFocused,
+    setHighlighted,
+    setIsOpen,
+    value,
+    wrapper
+  };
+}
+function CloseGlyph() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, fill: "currentColor", height: 18, viewBox: "0 0 24 24", width: 18, children: /* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" }) });
+}
+function ComboboxTrailing({
+  clearLabel,
+  disabled,
+  error,
+  isOpen,
+  onClear,
+  showClear
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute top-1/2 right-2 flex -translate-y-1/2 items-center gap-1", children: [
+    showClear ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": clearLabel,
+        className: "state-layer pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: onClear,
+        type: "button",
+        children: /* @__PURE__ */ jsx(CloseGlyph, {})
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "flex h-6 w-6 items-center justify-center text-on-surface-variant",
+          error && "text-error",
+          disabled && "text-on-surface/38"
+        ),
+        children: /* @__PURE__ */ jsx(SelectCaret, { open: isOpen })
+      }
+    )
+  ] });
+}
+function ComboboxListbox({
+  anchorRef,
+  baseId,
+  emptyText,
+  exiting,
+  highlighted,
+  listboxClassName,
+  loading,
+  loadingText,
+  onHighlight,
+  onSelect,
+  options,
+  value
+}) {
+  const floating = useRef(null);
+  const pos = usePopoverPosition(anchorRef, floating, true, {
+    gap: 4,
+    matchWidth: true,
+    placement: "bottom-start"
+  });
+  useEffect(() => {
+    if (highlighted < 0) return;
+    document.getElementById(`${baseId}-opt-${highlighted}`)?.scrollIntoView?.({ block: "nearest" });
+  }, [baseId, highlighted]);
+  if (typeof document === "undefined") return null;
+  const anim = exiting ? "animate-menu-out" : "animate-menu-in";
+  const surface = "max-h-[280px] w-full overflow-hidden overflow-y-auto rounded-large bg-surface-container-low py-0.5 shadow-mm-3 [--menu-clip-bleed:-24px]";
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed z-[var(--md-sys-z-menu)]",
+        ref: floating,
+        style: { left: pos.left, top: pos.top, width: pos.width },
+        children: loading || options.length === 0 ? (
+          // An empty listbox is an a11y violation — show a status row instead.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-live": "polite",
+              className: cn(
+                surface,
+                anim,
+                "px-4 py-3 text-body-medium text-on-surface-variant",
+                listboxClassName
+              ),
+              role: "status",
+              children: loading ? loadingText : emptyText
+            }
+          )
+        ) : /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: cn("flex flex-col", surface, anim, listboxClassName),
+            id: `${baseId}-listbox`,
+            role: "listbox",
+            children: options.map((option, index) => {
+              const isSelected = option.value === value;
+              return /* @__PURE__ */ jsx(
+                "li",
+                {
+                  "aria-disabled": option.disabled || void 0,
+                  "aria-selected": isSelected,
+                  className: cn(
+                    "mx-1 my-0.5 flex h-11 shrink-0 cursor-pointer items-center rounded-extra-small px-3 text-label-large first:rounded-t-medium last:rounded-b-medium",
+                    isSelected ? "rounded-medium bg-tertiary-container text-on-tertiary-container" : "text-on-surface",
+                    highlighted === index && !isSelected && "bg-on-surface/8",
+                    option.disabled && "cursor-not-allowed text-on-surface/38"
+                  ),
+                  id: `${baseId}-opt-${index}`,
+                  onClick: () => {
+                    if (!option.disabled) onSelect(option.value);
+                  },
+                  onMouseDown: (event) => event.preventDefault(),
+                  onMouseEnter: () => {
+                    if (!option.disabled) onHighlight(index);
+                  },
+                  role: "option",
+                  children: /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label ?? option.value })
+                },
+                option.value
+              );
+            })
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function ComboboxFilled({
+  className,
+  clearable = true,
+  defaultValue,
+  disabled,
+  error,
+  errorText,
+  id,
+  inputClassName,
+  label,
+  labels,
+  leftElement,
+  listboxClassName,
+  loading,
+  name,
+  onChange,
+  onInputChange,
+  options,
+  supportingText,
+  value: valueProp,
+  ...inputProps
+}) {
+  const l = { ...COMBOBOX_LABELS, ...labels };
+  const autoId = useId();
+  const inputId = id ?? `${autoId}-input`;
+  const {
+    clear,
+    commit,
+    exiting,
+    focused,
+    handleKeyDown,
+    highlighted,
+    input,
+    isOpen,
+    mounted,
+    onType,
+    query,
+    setFocused,
+    setHighlighted,
+    setIsOpen,
+    value,
+    wrapper
+  } = useCombobox({
+    defaultValue,
+    disabled,
+    onChange,
+    onInputChange,
+    options,
+    value: valueProp
+  });
+  const active = focused || isOpen;
+  const floating = active || query.length > 0;
+  const showClear = clearable && query.length > 0 && !disabled;
+  const hasOptions = !loading && options.length > 0;
+  const describedById = error && errorText || supportingText ? `${autoId}-support` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", ref: wrapper, children: [
+      /* @__PURE__ */ jsxs("div", { className: "group relative flex h-14 w-full overflow-hidden rounded-t-small", children: [
+        leftElement ? /* @__PURE__ */ jsx(FieldIcon, { className: "top-1/2 left-3 z-10 -translate-y-1/2", children: leftElement }) : null,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...inputProps,
+            "aria-activedescendant": isOpen && hasOptions && highlighted >= 0 ? `${autoId}-opt-${highlighted}` : void 0,
+            "aria-autocomplete": onInputChange ? "list" : "none",
+            "aria-controls": mounted && hasOptions ? `${autoId}-listbox` : void 0,
+            "aria-describedby": describedById,
+            "aria-expanded": isOpen,
+            "aria-invalid": error || void 0,
+            autoComplete: "off",
+            className: cn(
+              "h-14 w-full bg-surface-container-highest text-body-large text-on-surface outline-none disabled:cursor-not-allowed disabled:bg-on-surface/4 disabled:text-on-surface/38",
+              label ? "pt-5 pb-1" : "",
+              leftElement ? "pl-12" : "pl-4",
+              showClear ? "pr-20" : "pr-12",
+              inputClassName
+            ),
+            disabled,
+            id: inputId,
+            onBlur: () => setFocused(false),
+            onChange: (event) => onType(event.target.value),
+            onClick: () => {
+              if (!disabled) setIsOpen(true);
+            },
+            onFocus: () => setFocused(true),
+            onKeyDown: handleKeyDown,
+            ref: input,
+            role: "combobox",
+            type: "text",
+            value: query
+          }
+        ),
+        !disabled ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "ease-md-linear pointer-events-none absolute inset-0 bg-on-surface opacity-0 transition-opacity duration-[15ms] group-hover:opacity-8"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute inset-x-0 bottom-0 transition-all",
+              error ? "bg-error" : active ? "bg-primary" : "bg-on-surface-variant",
+              active || error ? "h-0.5" : "h-px",
+              disabled && "bg-on-surface/38"
+            )
+          }
+        ),
+        label ? /* @__PURE__ */ jsx(
+          FloatingLabel,
+          {
+            className: labelColor({ disabled, error, focused: active }),
+            floating,
+            floatingClassName: cn(
+              "top-2 text-body-small",
+              leftElement ? "left-12" : "left-4"
+            ),
+            htmlFor: inputId,
+            restingClassName: cn(
+              "top-1/2 -translate-y-1/2 text-body-large",
+              leftElement ? "left-12" : "left-4"
+            ),
+            children: label
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          ComboboxTrailing,
+          {
+            clearLabel: l.clear,
+            disabled,
+            error,
+            isOpen,
+            onClear: clear,
+            showClear
+          }
+        )
+      ] }),
+      mounted ? /* @__PURE__ */ jsx(
+        ComboboxListbox,
+        {
+          anchorRef: wrapper,
+          baseId: autoId,
+          emptyText: l.empty,
+          exiting,
+          highlighted,
+          listboxClassName,
+          loading,
+          loadingText: l.loading,
+          onHighlight: setHighlighted,
+          onSelect: commit,
+          options,
+          value
+        }
+      ) : null
+    ] }),
+    name ? /* @__PURE__ */ jsx("input", { name, type: "hidden", value }) : null,
+    /* @__PURE__ */ jsx(
+      SupportingText,
+      {
+        error,
+        errorText,
+        id: describedById,
+        supportingText
+      }
+    )
+  ] });
+}
+function ComboboxOutlined({
+  className,
+  clearable = true,
+  defaultValue,
+  disabled,
+  error,
+  errorText,
+  id,
+  inputClassName,
+  label,
+  labels,
+  leftElement,
+  listboxClassName,
+  loading,
+  name,
+  onChange,
+  onInputChange,
+  options,
+  supportingText,
+  value: valueProp,
+  ...inputProps
+}) {
+  const l = { ...COMBOBOX_LABELS, ...labels };
+  const autoId = useId();
+  const inputId = id ?? `${autoId}-input`;
+  const {
+    clear,
+    commit,
+    exiting,
+    focused,
+    handleKeyDown,
+    highlighted,
+    input,
+    isOpen,
+    mounted,
+    onType,
+    query,
+    setFocused,
+    setHighlighted,
+    setIsOpen,
+    value,
+    wrapper
+  } = useCombobox({
+    defaultValue,
+    disabled,
+    onChange,
+    onInputChange,
+    options,
+    value: valueProp
+  });
+  const active = focused || isOpen;
+  const floating = active || query.length > 0;
+  const showClear = clearable && query.length > 0 && !disabled;
+  const hasOptions = !loading && options.length > 0;
+  const describedById = error && errorText || supportingText ? `${autoId}-support` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", ref: wrapper, children: [
+      /* @__PURE__ */ jsxs("div", { className: "group relative flex h-14 w-full", children: [
+        leftElement ? /* @__PURE__ */ jsx(FieldIcon, { className: "top-1/2 left-3 -translate-y-1/2", children: leftElement }) : null,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...inputProps,
+            "aria-activedescendant": isOpen && hasOptions && highlighted >= 0 ? `${autoId}-opt-${highlighted}` : void 0,
+            "aria-autocomplete": onInputChange ? "list" : "none",
+            "aria-controls": mounted && hasOptions ? `${autoId}-listbox` : void 0,
+            "aria-describedby": describedById,
+            "aria-expanded": isOpen,
+            "aria-invalid": error || void 0,
+            autoComplete: "off",
+            className: cn(
+              "h-14 w-full bg-transparent text-body-large text-on-surface outline-none disabled:cursor-not-allowed disabled:text-on-surface/38",
+              leftElement ? "pl-12" : "pl-4",
+              showClear ? "pr-20" : "pr-12",
+              inputClassName
+            ),
+            disabled,
+            id: inputId,
+            onBlur: () => setFocused(false),
+            onChange: (event) => onType(event.target.value),
+            onClick: () => {
+              if (!disabled) setIsOpen(true);
+            },
+            onFocus: () => setFocused(true),
+            onKeyDown: handleKeyDown,
+            ref: input,
+            role: "combobox",
+            type: "text",
+            value: query
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "fieldset",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute inset-0 m-0 min-w-0 rounded-small px-2 transition-colors",
+              error ? active ? "border-2 border-error" : "border border-error" : active ? "border-2 border-primary" : "border border-outline group-hover:border-on-surface",
+              disabled && "border-on-surface/12 group-hover:border-on-surface/12"
+            ),
+            children: label ? /* @__PURE__ */ jsx(
+              "legend",
               {
                 className: cn(
-                  "absolute inset-0 flex items-center justify-center",
-                  selected ? "ease-md-linear opacity-0 transition-opacity duration-[50ms]" : "ease-legacy opacity-100 transition-opacity delay-[50ms] duration-150",
-                  accentIcon && !disabled && "text-primary"
+                  "invisible h-0 px-0 text-body-small whitespace-nowrap transition-all",
+                  floating ? "max-w-full px-1" : "max-w-0"
                 ),
-                children: leftElement
+                children: label
               }
-            )
-          ] })
-        ) : /* @__PURE__ */ jsx(
-          Icon,
+            ) : null
+          }
+        ),
+        label ? /* @__PURE__ */ jsx(
+          FloatingLabel,
           {
-            className: cn(
-              accentIcon && !disabled && !hasAvatar && "text-primary"
+            className: labelColor({ disabled, error, focused: active }),
+            floating,
+            floatingClassName: "top-0 left-3 -translate-y-1/2 px-1 text-body-small",
+            htmlFor: inputId,
+            restingClassName: cn(
+              "top-1/2 -translate-y-1/2 text-body-large",
+              leftElement ? "left-12" : "left-4"
             ),
-            iconLeft: leftElement,
-            size: hasAvatar ? 24 : 18
+            children: label
           }
         ) : null,
-        children ?? text,
-        rightElement ? /* @__PURE__ */ jsx(Icon, { iconRight: rightElement, size: 18 }) : null
-      ]
-    }
-  );
-  return removeButton ? /* @__PURE__ */ jsxs("span", { className: "relative inline-flex w-fit align-middle", children: [
-    chip,
-    removeButton
-  ] }) : chip;
+        /* @__PURE__ */ jsx(
+          ComboboxTrailing,
+          {
+            clearLabel: l.clear,
+            disabled,
+            error,
+            isOpen,
+            onClear: clear,
+            showClear
+          }
+        )
+      ] }),
+      mounted ? /* @__PURE__ */ jsx(
+        ComboboxListbox,
+        {
+          anchorRef: wrapper,
+          baseId: autoId,
+          emptyText: l.empty,
+          exiting,
+          highlighted,
+          listboxClassName,
+          loading,
+          loadingText: l.loading,
+          onHighlight: setHighlighted,
+          onSelect: commit,
+          options,
+          value
+        }
+      ) : null
+    ] }),
+    name ? /* @__PURE__ */ jsx("input", { name, type: "hidden", value }) : null,
+    /* @__PURE__ */ jsx(
+      SupportingText,
+      {
+        error,
+        errorText,
+        id: describedById,
+        supportingText
+      }
+    )
+  ] });
 }
 function TableBody({ children, className, ...props }) {
   return /* @__PURE__ */ jsx("tbody", { className: cn("text-body-medium", className), ...props, children });
@@ -1754,7 +2760,7 @@ function Dialog({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-50 flex items-center justify-center bg-scrim/32 p-4",
+        "fixed inset-0 z-[var(--md-sys-z-modal)] flex items-center justify-center bg-scrim/32 p-4",
         exiting ? "animate-scrim-out" : "animate-scrim-in"
       ),
       onClick: handleScrim,
@@ -1783,141 +2789,6 @@ function Dialog({
 Dialog.Header = DialogHeader;
 Dialog.Body = DialogBody;
 Dialog.Footer = DialogFooter;
-function FloatingLabel({
-  children,
-  className,
-  floating,
-  floatingClassName,
-  htmlFor,
-  restingClassName
-}) {
-  const floatingRef = useRef(null);
-  const restingRef = useRef(null);
-  const animationRef = useRef(null);
-  const prevFloating = useRef(floating);
-  const [animating, setAnimating] = useState(false);
-  useIsomorphicLayoutEffect(() => {
-    if (prevFloating.current === floating) return;
-    prevFloating.current = floating;
-    const floatingEl = floatingRef.current;
-    const restingEl = restingRef.current;
-    if (!floatingEl || !restingEl) return;
-    const f = floatingEl.getBoundingClientRect();
-    const r = restingEl.getBoundingClientRect();
-    if (!f.width || !r.width) return;
-    const scale = r.width / f.width;
-    const xDelta = r.x - f.x;
-    const yDelta = r.y - f.y + Math.round((r.height - f.height * scale) / 2);
-    const rest = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;
-    const float = `translateX(0) translateY(0) scale(1)`;
-    animationRef.current?.cancel();
-    setAnimating(true);
-    const animation = floatingEl.animate(
-      { transform: floating ? [rest, float] : [float, rest] },
-      {
-        duration: 150,
-        easing: "cubic-bezier(0.2, 0, 0, 1)",
-        fill: "forwards"
-      }
-    );
-    animationRef.current = animation;
-    const done = () => {
-      if (animationRef.current === animation) setAnimating(false);
-    };
-    animation.addEventListener("finish", done);
-    animation.addEventListener("cancel", done);
-  }, [floating]);
-  useIsomorphicLayoutEffect(() => {
-    if (animating || !animationRef.current) return;
-    animationRef.current.cancel();
-    animationRef.current = null;
-  }, [animating]);
-  const showFloating = floating || animating;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "label",
-      {
-        "aria-hidden": true,
-        className: cn(
-          "pointer-events-none absolute",
-          floatingClassName,
-          className,
-          !showFloating && "opacity-0"
-        ),
-        children: /* @__PURE__ */ jsx("span", { className: "inline-block origin-top-left", ref: floatingRef, children })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "label",
-      {
-        className: cn(
-          "pointer-events-none absolute",
-          restingClassName,
-          className,
-          showFloating && "opacity-0"
-        ),
-        htmlFor,
-        children: /* @__PURE__ */ jsx("span", { className: "inline-block", ref: restingRef, children })
-      }
-    )
-  ] });
-}
-function useFieldState(value, defaultValue, disabled) {
-  const [focused, setFocusedState] = useState(false);
-  const [internalHasValue, setInternalHasValue] = useState(
-    defaultValue !== void 0 && defaultValue !== null && String(defaultValue).length > 0
-  );
-  const hasValue = value !== void 0 && value !== null ? String(value).length > 0 : internalHasValue;
-  return {
-    focused: focused && !disabled,
-    hasValue,
-    setFocused: setFocusedState,
-    setInternalHasValue
-  };
-}
-function labelColor(opts) {
-  if (opts.disabled) return "text-on-surface/38";
-  if (opts.error) return "text-error";
-  if (opts.focused) return "text-primary";
-  return "text-on-surface-variant";
-}
-function SupportingText({
-  error,
-  errorText,
-  id,
-  supportingText
-}) {
-  const isError = !!(error && errorText);
-  const text = isError ? errorText : supportingText;
-  if (!text) return null;
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      role: isError ? "alert" : void 0,
-      id,
-      className: cn(
-        "px-4 pt-1 text-body-small",
-        error ? "text-error" : "text-on-surface-variant"
-      ),
-      children: text
-    }
-  );
-}
-function FieldIcon({
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "pointer-events-auto absolute flex h-6 w-6 items-center justify-center leading-none text-on-surface-variant",
-        className
-      ),
-      children
-    }
-  );
-}
 function InputOutlined({
   "aria-describedby": ariaDescribedBy,
   "aria-invalid": ariaInvalid,
@@ -2382,11 +3253,14 @@ var DOCKED_LABELS = {
 };
 function DatePickerDocked({
   className,
+  error,
+  errorText,
   labels,
   locale,
   max,
   min,
   onChange,
+  supportingText,
   value = null,
   weekStartsOn
 }) {
@@ -2399,6 +3273,8 @@ function DatePickerDocked({
     /* @__PURE__ */ jsx(
       InputOutlined,
       {
+        error,
+        errorText,
         inputClassName: "cursor-pointer",
         label: l.field,
         onFocus: () => setOpen(true),
@@ -2416,6 +3292,7 @@ function DatePickerDocked({
             children: calendarIcon
           }
         ),
+        supportingText,
         value: formatShort(value, locale)
       }
     ),
@@ -2423,7 +3300,7 @@ function DatePickerDocked({
       "div",
       {
         "aria-label": l.field,
-        className: "animate-menu-in absolute top-full left-0 z-40 mt-1 w-90 max-w-[calc(100vw-2rem)] overflow-hidden rounded-large bg-surface-container-high py-2 shadow-mm-3 [--menu-clip-bleed:-24px]",
+        className: "animate-menu-in absolute top-full left-0 z-[var(--md-sys-z-dropdown)] mt-1 w-90 max-w-[calc(100vw-2rem)] overflow-hidden rounded-large bg-surface-container-high py-2 shadow-mm-3 [--menu-clip-bleed:-24px]",
         id: popupId,
         role: "dialog",
         children: /* @__PURE__ */ jsx(
@@ -2572,9 +3449,14 @@ function Dropdown({
   const [open, setOpen] = useState(false);
   const wrapper = useRef(null);
   const trigger = useRef(null);
+  const floating = useRef(null);
   const wasOpen = useRef(false);
   const menuId = useId();
   const { exiting, mounted } = useDismissable(open, 150);
+  const pos = usePopoverPosition(wrapper, floating, mounted, {
+    gap: apart ? 4 : 0,
+    placement: "bottom-start"
+  });
   useOutsideClose(wrapper, () => setOpen(false), open);
   const triggerNode = isValidElement(children) ? cloneElement(
     children,
@@ -2605,17 +3487,29 @@ function Dropdown({
             children: triggerNode
           }
         ),
-        mounted ? /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 z-30 flex w-full flex-col", children: /* @__PURE__ */ jsx(
-          Menu,
-          {
-            className: cn(apart && "mt-1", menuClassName),
-            exiting,
-            id: menuId,
-            onClose: () => setOpen(false),
-            vibrant,
-            children: menu
-          }
-        ) }) : null
+        mounted && typeof document !== "undefined" ? createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "fixed z-[var(--md-sys-z-menu)]",
+              ref: floating,
+              style: { left: pos.left, top: pos.top },
+              children: /* @__PURE__ */ jsx(
+                Menu,
+                {
+                  className: menuClassName,
+                  exiting,
+                  id: menuId,
+                  onClose: () => setOpen(false),
+                  up: pos.flippedVertically,
+                  vibrant,
+                  children: menu
+                }
+              )
+            }
+          ),
+          document.body
+        ) : null
       ]
     }
   );
@@ -2998,7 +3892,7 @@ function NavigationRail({
       "div",
       {
         className: cn(
-          "fixed inset-0 z-40 bg-scrim/32",
+          "fixed inset-0 z-[var(--md-sys-z-modal)] bg-scrim/32",
           scrim.exiting ? "animate-scrim-drawer-out" : "animate-scrim-drawer-in"
         ),
         onClick: onClose
@@ -3023,11 +3917,16 @@ function OverflowMenu({
   const [open, setOpen] = useState(false);
   const wrapper = useRef(null);
   const trigger = useRef(null);
+  const floating = useRef(null);
   const wasOpen = useRef(false);
   const menuId = useId();
-  const noPosition = !topLeft && !topRight && !bottomLeft && !bottomRight;
-  const opensUp = Boolean(topLeft || topRight);
+  const placement = topRight ? "top-end" : topLeft ? "top-start" : bottomLeft ? "bottom-start" : bottomRight ? "bottom-end" : "bottom-end";
   const { exiting, mounted } = useDismissable(open, 150);
+  const pos = usePopoverPosition(wrapper, floating, mounted, {
+    gap: 8,
+    placement
+  });
+  const up = placement.startsWith("top") !== pos.flippedVertically;
   useOutsideClose(wrapper, () => setOpen(false), open);
   const triggerNode = isValidElement(children) ? cloneElement(
     children,
@@ -3058,29 +3957,28 @@ function OverflowMenu({
             children: triggerNode
           }
         ),
-        mounted ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "absolute z-20 flex flex-col",
-              topRight && "right-0 bottom-full",
-              topLeft && "bottom-full left-0",
-              (bottomRight || noPosition) && "top-full right-0",
-              bottomLeft && "top-full left-0"
-            ),
-            children: /* @__PURE__ */ jsx(
-              Menu,
-              {
-                className: cn(opensUp ? "mb-2" : "mt-2", menuClassName),
-                exiting,
-                id: menuId,
-                onClose: () => setOpen(false),
-                up: opensUp,
-                vibrant,
-                children: menu
-              }
-            )
-          }
+        mounted && typeof document !== "undefined" ? createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "fixed z-[var(--md-sys-z-menu)]",
+              ref: floating,
+              style: { left: pos.left, top: pos.top },
+              children: /* @__PURE__ */ jsx(
+                Menu,
+                {
+                  className: menuClassName,
+                  exiting,
+                  id: menuId,
+                  onClose: () => setOpen(false),
+                  up,
+                  vibrant,
+                  children: menu
+                }
+              )
+            }
+          ),
+          document.body
         ) : null
       ]
     }
@@ -3609,17 +4507,54 @@ function SearchItem({
   );
 }
 var SEARCH_INPUT_LABELS = {
+  clear: "Clear",
   placeholder: "Search"
 };
+function CloseIcon2() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, className: "h-6 w-6 fill-current", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" }) });
+}
 function SearchInput({
   className,
+  clearable,
+  defaultValue,
   inputClassName,
   labels,
   leftElement,
+  onChange,
+  onClear,
   rightElement,
+  value: valueProp,
   ...inputProps
 }) {
   const l = { ...SEARCH_INPUT_LABELS, ...labels };
+  const input = useRef(null);
+  const [value, setValue] = useControlled(
+    valueProp,
+    typeof defaultValue === "string" ? defaultValue : ""
+  );
+  const hasValue = value.length > 0;
+  const showClear = Boolean(
+    clearable && hasValue && !inputProps.disabled && !rightElement
+  );
+  const handleChange = (event) => {
+    setValue(event.target.value);
+    onChange?.(event);
+  };
+  const clear = () => {
+    const el = input.current;
+    if (el) {
+      const setter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value"
+      )?.set;
+      setter?.call(el, "");
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.focus();
+    } else {
+      setValue("");
+    }
+    onClear?.();
+  };
   return /* @__PURE__ */ jsxs("div", { className: cn("relative flex h-14 w-full", className), children: [
     leftElement ? /* @__PURE__ */ jsx("div", { className: "absolute left-0 flex h-14 w-14 items-center justify-center text-on-surface", children: leftElement }) : null,
     /* @__PURE__ */ jsx(
@@ -3629,15 +4564,29 @@ function SearchInput({
         className: cn(
           "h-14 w-full bg-transparent text-body-large text-on-surface outline-none placeholder:text-on-surface-variant",
           leftElement ? "pl-14" : "pl-4",
-          rightElement ? "pr-14" : "pr-4",
+          rightElement || showClear ? "pr-14" : "pr-4",
+          // Hide the inconsistent native clear when we render our own.
+          showClear && "[&::-webkit-search-cancel-button]:hidden",
           inputClassName
         ),
         type: "search",
         ...inputProps,
-        placeholder: l.placeholder
+        onChange: handleChange,
+        placeholder: l.placeholder,
+        ref: input,
+        value
       }
     ),
-    rightElement ? /* @__PURE__ */ jsx("div", { className: "absolute right-0 flex h-14 w-14 items-center justify-center text-on-surface-variant", children: rightElement }) : null
+    rightElement ? /* @__PURE__ */ jsx("div", { className: "absolute right-0 flex h-14 w-14 items-center justify-center text-on-surface-variant", children: rightElement }) : showClear ? /* @__PURE__ */ jsx("div", { className: "absolute right-0 flex h-14 w-14 items-center justify-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": l.clear,
+        className: "state-layer flex h-12 w-12 cursor-pointer items-center justify-center rounded-full text-on-surface-variant",
+        onClick: clear,
+        type: "button",
+        children: /* @__PURE__ */ jsx(CloseIcon2, {})
+      }
+    ) }) : null
   ] });
 }
 function Search({
@@ -3656,7 +4605,7 @@ function Search({
     "div",
     {
       className: cn(
-        "relative z-30 flex h-fit w-full min-w-[360px] max-w-[720px] cursor-pointer bg-surface-container-high text-on-surface",
+        "relative z-[var(--md-sys-z-dropdown)] flex h-fit w-full min-w-[360px] max-w-[720px] cursor-pointer bg-surface-container-high text-on-surface",
         // Contained (M3 Expressive): the bar stays a persistent 28px
         // pill (real px — corner-full would snap instead of morphing).
         // Divided (baseline): its bottom corners square off in step
@@ -3707,221 +4656,6 @@ function Search({
 }
 Search.Item = SearchItem;
 Search.Input = SearchInput;
-function useControlled(controlled, defaultValue) {
-  const isControlled = useRef(controlled !== void 0).current;
-  const [internal, setInternal] = useState(defaultValue);
-  const value = isControlled && controlled !== void 0 ? controlled : internal;
-  const setValue = useCallback(
-    (next) => {
-      if (!isControlled) setInternal(next);
-    },
-    [isControlled]
-  );
-  return [value, setValue];
-}
-var TYPEAHEAD_BUFFER_MS = 200;
-function optionText(option) {
-  return typeof option.label === "string" ? option.label : option.value;
-}
-function useSelect({
-  defaultValue,
-  disabled,
-  onChange,
-  options,
-  value: valueProp
-}) {
-  const [value, setValue] = useControlled(valueProp, defaultValue ?? "");
-  const [isOpen, setIsOpen] = useState(false);
-  const [focused, setFocused] = useState(false);
-  const [highlighted, setHighlighted] = useState(-1);
-  const wrapper = useRef(null);
-  const typeahead = useRef({ buffer: "", time: 0 });
-  const { exiting, mounted } = useDismissable(isOpen, 150);
-  useOutsideClose(wrapper, () => setIsOpen(false), isOpen);
-  const selectedIndex = options.findIndex((option) => option.value === value);
-  const move = (start, delta) => {
-    for (let step = 1; step <= options.length; step += 1) {
-      const index = (start + delta * step + options.length * step) % options.length;
-      if (!options[index]?.disabled) return index;
-    }
-    return -1;
-  };
-  const openMenu = () => {
-    if (disabled) return;
-    setHighlighted(
-      selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : move(-1, 1)
-    );
-    setIsOpen(true);
-  };
-  const commit = (next) => {
-    setValue(next);
-    onChange?.(next);
-    setIsOpen(false);
-  };
-  const typeaheadFind = (char) => {
-    const now = Date.now();
-    const stale = now - typeahead.current.time > TYPEAHEAD_BUFFER_MS;
-    typeahead.current = {
-      buffer: (stale ? "" : typeahead.current.buffer) + char.toLowerCase(),
-      time: now
-    };
-    return options.findIndex(
-      (option) => !option.disabled && optionText(option).toLowerCase().startsWith(typeahead.current.buffer)
-    );
-  };
-  const handleKeyDown = (event) => {
-    if (disabled) return;
-    const { key } = event;
-    const printable = key.length === 1 && key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
-    if (!isOpen) {
-      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(key)) {
-        event.preventDefault();
-        openMenu();
-      } else if (printable) {
-        const index = typeaheadFind(key);
-        if (index >= 0) {
-          setValue(options[index].value);
-          onChange?.(options[index].value);
-        }
-      }
-      return;
-    }
-    switch (key) {
-      case "ArrowDown":
-        event.preventDefault();
-        setHighlighted((current) => move(current, 1));
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        setHighlighted((current) => move(current, -1));
-        break;
-      case "Home":
-        event.preventDefault();
-        setHighlighted(move(-1, 1));
-        break;
-      case "End":
-        event.preventDefault();
-        setHighlighted(move(options.length, -1));
-        break;
-      case "Enter":
-      case " ": {
-        event.preventDefault();
-        const option = options[highlighted];
-        if (option && !option.disabled) commit(option.value);
-        break;
-      }
-      case "Escape":
-        event.preventDefault();
-        setIsOpen(false);
-        break;
-      case "Tab":
-        setIsOpen(false);
-        break;
-      default:
-        if (printable) {
-          const index = typeaheadFind(key);
-          if (index >= 0) setHighlighted(index);
-        }
-    }
-  };
-  return {
-    commit,
-    exiting,
-    focused: focused && !disabled,
-    handleKeyDown,
-    highlighted,
-    isOpen,
-    mounted,
-    openMenu,
-    selectedIndex,
-    setFocused,
-    setHighlighted,
-    setIsOpen,
-    value,
-    wrapper
-  };
-}
-function SelectMenu({
-  baseId,
-  exiting,
-  highlighted,
-  onHighlight,
-  onSelect,
-  options,
-  value
-}) {
-  useEffect(() => {
-    if (highlighted < 0) return;
-    document.getElementById(`${baseId}-opt-${highlighted}`)?.scrollIntoView({ block: "nearest" });
-  }, [baseId, highlighted]);
-  return /* @__PURE__ */ jsx(
-    "ul",
-    {
-      className: cn(
-        "absolute top-full left-0 z-30 mt-1 flex max-h-[280px] w-full min-w-max flex-col overflow-hidden overflow-y-auto rounded-large bg-surface-container-low py-0.5 shadow-mm-3 [--menu-clip-bleed:-24px]",
-        exiting ? "animate-menu-out" : "animate-menu-in"
-      ),
-      id: `${baseId}-listbox`,
-      role: "listbox",
-      children: options.map((option, index) => {
-        const isSelected = option.value === value;
-        return /* @__PURE__ */ jsx(
-          "li",
-          {
-            "aria-disabled": option.disabled || void 0,
-            "aria-selected": isSelected,
-            className: cn(
-              "mx-1 my-0.5 flex h-11 shrink-0 cursor-pointer items-center rounded-extra-small px-3 text-label-large first:rounded-t-medium last:rounded-b-medium",
-              isSelected ? "rounded-medium bg-tertiary-container text-on-tertiary-container" : "text-on-surface",
-              highlighted === index && !isSelected && "bg-on-surface/8",
-              option.disabled && "cursor-not-allowed text-on-surface/38"
-            ),
-            id: `${baseId}-opt-${index}`,
-            onClick: () => {
-              if (!option.disabled) onSelect(option.value);
-            },
-            onMouseDown: (event) => event.preventDefault(),
-            onMouseEnter: () => {
-              if (!option.disabled) onHighlight(index);
-            },
-            role: "option",
-            children: /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label ?? option.value })
-          },
-          option.value
-        );
-      })
-    }
-  );
-}
-function SelectCaret({ open = false }) {
-  const fade = "ease-md-linear transition-opacity delay-75 duration-75";
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      "aria-hidden": true,
-      fill: "currentColor",
-      height: 24,
-      viewBox: "0 0 24 24",
-      width: 24,
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: cn(fade, open ? "opacity-0" : "opacity-100"),
-            d: "M7 10l5 5 5-5z"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: cn(fade, open ? "opacity-100" : "opacity-0"),
-            d: "M7 15l5-5 5 5z"
-          }
-        )
-      ]
-    }
-  );
-}
 function SelectFilled({
   className,
   defaultValue,
@@ -4250,7 +4984,7 @@ function BottomSheet({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-40 flex items-end justify-center bg-scrim/32",
+        "fixed inset-0 z-[var(--md-sys-z-modal)] flex items-end justify-center bg-scrim/32",
         exiting ? "animate-scrim-sheet-out" : "animate-scrim-sheet-in"
       ),
       onClick: onClose,
@@ -4292,7 +5026,7 @@ var SIDE_SHEET_LABELS = {
   close: "Close",
   label: "Side sheet"
 };
-function CloseIcon2() {
+function CloseIcon3() {
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, fill: "none", height: 24, viewBox: "0 0 24 24", width: 24, children: /* @__PURE__ */ jsx(
     "path",
     {
@@ -4338,7 +5072,7 @@ function SideSheet({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-40 flex justify-end bg-scrim/32",
+        "fixed inset-0 z-[var(--md-sys-z-modal)] flex justify-end bg-scrim/32",
         exiting ? "animate-scrim-sheet-out" : "animate-scrim-sheet-in"
       ),
       onClick: onClose,
@@ -4372,7 +5106,7 @@ function SideSheet({
                 IconButton,
                 {
                   "aria-label": l.close,
-                  icon: /* @__PURE__ */ jsx(CloseIcon2, {}),
+                  icon: /* @__PURE__ */ jsx(CloseIcon3, {}),
                   onClick: onClose,
                   variant: "standard"
                 }
@@ -4769,7 +5503,7 @@ function SliderDual({
   );
 }
 var SNACKBAR_LABELS = { dismiss: "Dismiss" };
-function CloseIcon3() {
+function CloseIcon4() {
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, fill: "none", height: 24, viewBox: "0 0 24 24", width: 24, children: /* @__PURE__ */ jsx(
     "path",
     {
@@ -4848,7 +5582,7 @@ function Snackbar({
                 className: "iconBtn standard text-inverse-on-surface",
                 onClick: onClose,
                 type: "button",
-                children: /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 items-center justify-center leading-none", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon3, {}) })
+                children: /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 items-center justify-center leading-none", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon4, {}) })
               }
             ) : null
           ] })
@@ -4862,7 +5596,7 @@ function SnackbarWrapper({ children, className }) {
   useEffect(() => setMounted(true), []);
   if (!mounted) return null;
   return createPortal(
-    /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed inset-x-4 top-auto bottom-0 z-60 flex justify-center", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed inset-x-4 top-auto bottom-0 z-[var(--md-sys-z-snackbar)] flex justify-center", children: /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
@@ -6175,7 +6909,7 @@ function Tooltip({
           {
             id: tooltipId,
             className: cn(
-              "tooltip absolute z-40 my-1",
+              "tooltip absolute z-[var(--md-sys-z-tooltip)] my-1",
               rich ? "pointer-events-none w-max max-w-[320px] rounded-medium bg-surface-container px-4 pt-3 pb-2 shadow-mm-2 group-hover:pointer-events-auto group-focus-within:pointer-events-auto" : "pointer-events-none max-w-[200px] rounded-extra-small bg-inverse-surface px-2 py-1",
               topRight && "right-0 bottom-full",
               topLeft && "bottom-full left-0",
@@ -6867,40 +7601,54 @@ function Switch({
   );
 }
 function TextElement({
+  as: Wrapper = "div",
   body,
+  bodyAs: Body = "p",
   bodyStyle,
   className,
   label,
+  labelAs: Label = "p",
   labelStyle,
   title,
+  titleAs: Title = "h2",
   titleStyle
 }) {
+  const bare = [label, title, body].filter(Boolean).length === 1;
+  const labelNode = label ? /* @__PURE__ */ jsx(
+    Label,
+    {
+      className: cn(
+        "text-label-medium text-on-surface-variant",
+        labelStyle,
+        bare && className
+      ),
+      children: label
+    }
+  ) : null;
+  const titleNode = title ? /* @__PURE__ */ jsx(Title, { className: cn("text-title-medium text-on-surface", titleStyle, bare && className), children: title }) : null;
+  const bodyNode = body ? /* @__PURE__ */ jsx(
+    Body,
+    {
+      className: cn(
+        "text-body-medium text-on-surface-variant",
+        bodyStyle,
+        bare && className
+      ),
+      children: body
+    }
+  ) : null;
+  if (bare) return labelNode ?? titleNode ?? bodyNode;
   return /* @__PURE__ */ jsxs(
-    "div",
+    Wrapper,
     {
       className: cn(
         "flex flex-col items-start justify-center text-on-surface",
         className
       ),
       children: [
-        label ? /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cn(
-              "text-label-medium text-on-surface-variant",
-              labelStyle
-            ),
-            children: label
-          }
-        ) : null,
-        title ? /* @__PURE__ */ jsx("h2", { className: cn("text-title-medium", titleStyle), children: title }) : null,
-        body ? /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cn("text-body-medium text-on-surface-variant", bodyStyle),
-            children: body
-          }
-        ) : null
+        labelNode,
+        titleNode,
+        bodyNode
       ]
     }
   );
@@ -6936,6 +7684,6 @@ function Section({ children, className }) {
   );
 }
 
-export { Amount, Avatar, AvatarStack, Badge, Blob, BottomSheet, Button, ButtonGroup, ButtonGroupConnected, Card, Checkbox, Chips, Circle, Container, DatePicker, DateRangePicker, Dialog, Divider, DockedToolbar, DotBadge, Dropdown, ExtendedFAB, FAB, FABMenu, FloatingToolbar, Gallery, Icon, IconButton, Img, InputFilled, InputOutlined, LinkBox, LinkContainer, List, Loading, LoadingIndicator, MaterialSymbol, MediaFrame, Menu, NavigationBar, NavigationRail, OnIconBadge, OverflowMenu, PerspectiveCard, PerspectiveImage, Progress, Radio, Search, SearchInput, Section, SelectFilled, SelectOutlined, SideSheet, Slider, SliderDual, Snackbar, SnackbarWrapper, SplitButton, Stories, Switch, Table, TabsPrimary, TabsSecondary, TextElement, TextFieldFilled, TextFieldOutlined, TimePicker, ToggleTheme, ToggleThemeMenu, Tooltip, TopAppBar, Video };
+export { Amount, Avatar, AvatarStack, Badge, Blob, BottomSheet, Button, ButtonGroup, ButtonGroupConnected, Card, Checkbox, Chips, Circle, ComboboxFilled, ComboboxOutlined, Container, DatePicker, DateRangePicker, Dialog, Divider, DockedToolbar, DotBadge, Dropdown, ExtendedFAB, FAB, FABMenu, FloatingToolbar, Gallery, Icon, IconButton, Img, InputFilled, InputOutlined, LinkBox, LinkContainer, List, Loading, LoadingIndicator, MaterialSymbol, MediaFrame, Menu, NavigationBar, NavigationRail, OnIconBadge, OverflowMenu, PerspectiveCard, PerspectiveImage, Progress, Radio, Search, SearchInput, Section, SelectFilled, SelectOutlined, SideSheet, Slider, SliderDual, Snackbar, SnackbarWrapper, SplitButton, Stories, Switch, Table, TabsPrimary, TabsSecondary, TextElement, TextFieldFilled, TextFieldOutlined, TimePicker, ToggleTheme, ToggleThemeMenu, Tooltip, TopAppBar, Video };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map