@mirror-physics/fractal-ui 0.2.0-next.78 → 0.2.0-next.80

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   Button,
   ColumnEditor,
   cn
-} from "./chunk-QZX655IA.js";
+} from "./chunk-UNMOINWV.js";
 
 // src/components/CodeBlock/CodeBlock.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -508,29 +508,50 @@ PromptGrid.displayName = "PromptGrid";
 
 // src/components/Input/Input.tsx
 import * as React3 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var Input = React3.forwardRef(
-  ({ className, type, controlSize = "md", ...props }, ref) => /* @__PURE__ */ jsx5(
-    "input",
-    {
-      type,
-      ref,
-      "data-control-size": controlSize,
-      className: cn("fractal-control", "fractal-input", className),
-      ...props
-    }
-  )
+  ({ className, type, controlSize = "lg", fieldLabel, id, placeholder, ...props }, ref) => {
+    const generatedId = React3.useId();
+    const fieldId = id ?? generatedId;
+    const floatingLabel = type === "search" ? void 0 : fieldLabel;
+    const input = /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type,
+        ref,
+        id: floatingLabel ? fieldId : id,
+        placeholder: floatingLabel ? placeholder || " " : placeholder,
+        "data-control-size": controlSize,
+        className: cn("fractal-control", "fractal-input", className),
+        ...props,
+        "aria-label": props["aria-label"] ?? (type === "search" && !props["aria-labelledby"] ? fieldLabel ?? "Search" : void 0)
+      }
+    );
+    if (!floatingLabel) return input;
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: "fractal-floating-field",
+        "data-control-size": controlSize,
+        "data-always-float": ["date", "datetime-local", "time", "month", "week", "color", "file", "range"].includes(type ?? "") || void 0,
+        children: [
+          input,
+          /* @__PURE__ */ jsx5("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
+        ]
+      }
+    );
+  }
 );
 Input.displayName = "Input";
 
 // src/components/TableSearch/TableSearch.tsx
 import * as React4 from "react";
 import { MagnifyingGlass, MagnifyingGlassLines } from "@mirror-physics/fractal-icons";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var TableSearch = React4.forwardRef(
   ({
     searchType = "text",
-    controlSize = "md",
+    controlSize = "lg",
     className,
     inputClassName,
     placeholder,
@@ -539,7 +560,7 @@ var TableSearch = React4.forwardRef(
   }, ref) => {
     const isGlob = searchType === "glob";
     const SearchIcon = isGlob ? MagnifyingGlassLines : MagnifyingGlass;
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         className: cn("fractal-table-search", className),
@@ -569,10 +590,10 @@ TableSearch.displayName = "TableSearch";
 // src/components/NumberInput/NumberInput.tsx
 import * as React5 from "react";
 import { Minus, Plus } from "@mirror-physics/fractal-icons";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function NumberInput({
   unit,
-  controlSize = "md",
+  controlSize = "lg",
   className,
   value,
   defaultValue,
@@ -585,7 +606,7 @@ function NumberInput({
   const inputRef = React5.useRef(null);
   const numericValue = Number(value ?? defaultValue);
   const characterCount = Math.max(String(value ?? defaultValue ?? "").length, 1);
-  const controlLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : "value";
+  const controlLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : props.fieldLabel ?? "value";
   const decrementDisabled = disabled || readOnly || Number.isFinite(numericValue) && min !== void 0 && numericValue <= Number(min);
   const incrementDisabled = disabled || readOnly || Number.isFinite(numericValue) && max !== void 0 && numericValue >= Number(max);
   const changeByStep = (direction) => {
@@ -596,7 +617,7 @@ function NumberInput({
     input.dispatchEvent(new Event("input", { bubbles: true }));
     input.focus();
   };
-  return /* @__PURE__ */ jsxs6("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
+  return /* @__PURE__ */ jsxs7("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
     /* @__PURE__ */ jsx7(
       Input,
       {
@@ -621,7 +642,7 @@ function NumberInput({
         children: unit
       }
     ),
-    /* @__PURE__ */ jsxs6("div", { className: "fractal-number-input-controls", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "fractal-number-input-controls", children: [
       /* @__PURE__ */ jsx7(
         "button",
         {
@@ -649,7 +670,7 @@ function NumberInput({
 }
 
 // src/components/Slider/Slider.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function Slider(props) {
   const {
     min = 0,
@@ -695,18 +716,18 @@ function Slider(props) {
     if (!(event.key in adjustments)) return null;
     return value + adjustments[event.key];
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: cn("fractal-slider", disabled && "fractal-slider--disabled", className),
       "data-disabled": disabled || void 0,
       "data-knobs": knobs,
       children: [
-        showValues && /* @__PURE__ */ jsxs7("div", { className: "fractal-slider-values", "aria-hidden": "true", children: [
+        showValues && /* @__PURE__ */ jsxs8("div", { className: "fractal-slider-values", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsx8("output", { children: formatValue(firstValue) }),
           knobs === 2 && /* @__PURE__ */ jsx8("output", { children: formatValue(secondValue) })
         ] }),
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             className: "fractal-slider-control",
@@ -777,11 +798,11 @@ function clamp(value, minimum, maximum) {
 // src/components/PasswordInput/PasswordInput.tsx
 import * as React6 from "react";
 import { Eye, EyeSlash } from "@mirror-physics/fractal-icons";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var PasswordInput = React6.forwardRef(
   ({
     className,
-    controlSize = "md",
+    controlSize = "lg",
     disabled,
     showPasswordLabel = "Show password",
     hidePasswordLabel = "Hide password",
@@ -789,7 +810,7 @@ var PasswordInput = React6.forwardRef(
   }, ref) => {
     const [passwordVisible, setPasswordVisible] = React6.useState(false);
     const toggleLabel = passwordVisible ? hidePasswordLabel : showPasswordLabel;
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
         className: cn("fractal-password-input", className),
@@ -831,7 +852,7 @@ PasswordInput.displayName = "PasswordInput";
 import * as React7 from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var Label = React7.forwardRef(
-  ({ className, controlSize = "md", ...props }, ref) => /* @__PURE__ */ jsx10(
+  ({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */ jsx10(
     "label",
     {
       ref,
@@ -846,7 +867,7 @@ Label.displayName = "Label";
 // src/components/Alert/Alert.tsx
 import * as React8 from "react";
 import { CircleCheck, CircleClose, CircleInfo, Warning } from "@mirror-physics/fractal-icons";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultIcons = {
   default: CircleInfo,
   info: CircleInfo,
@@ -857,7 +878,7 @@ var defaultIcons = {
 var Alert = React8.forwardRef(
   ({ className, variant = "default", icon, children, ...props }, ref) => {
     const DefaultIcon = defaultIcons[variant];
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "div",
       {
         ref,
@@ -886,7 +907,7 @@ AlertDescription.displayName = "AlertDescription";
 import * as React9 from "react";
 import { createPortal } from "react-dom";
 import { CircleCheck as CircleCheck2, CircleClose as CircleClose2, CircleInfo as CircleInfo2, Close, Warning as Warning2 } from "@mirror-physics/fractal-icons";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var defaultIcons2 = {
   default: CircleInfo2,
   info: CircleInfo2,
@@ -923,7 +944,7 @@ var Toast = React9.forwardRef(function Toast2({
     return () => window.clearTimeout(timeout);
   }, [paused, resolvedDuration]);
   const announcementRole = role ?? (variant === "error" ? "alert" : "status");
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref,
@@ -982,9 +1003,9 @@ var ToastViewport = React9.forwardRef(function ToastViewport2({ children, classN
 });
 
 // src/components/Toggle/Toggle.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function Toggle({ checked, onChange, label, className }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "button",
     {
       type: "button",
@@ -1055,13 +1076,13 @@ function useEscapeDismiss(priority, handler, enabled = true) {
 }
 
 // src/components/UILoader/UILoader.tsx
-import { useId } from "react";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useId as useId2 } from "react";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var LEFT = "M0 53C0 51 1.6 49.5 3.6 49.5h16.5c1 0 1.9.4 2.5 1L42.1 69.6c.7.7 1.1 1.6 1.1 2.5v16.2c0 2-1.6 3.5-3.6 3.5H23.1c-1 0-1.9-.4-2.5-1L1.1 71.7C.4 71 0 70.1 0 69.2V53Z";
 var CENTER = "M0 3.5C0 1.6 1.6 0 3.6 0h16.5c1 0 1.9.4 2.5 1L92.5 69.6c.7.7 1 1.6 1 2.5v16.2c0 2-1.6 3.5-3.6 3.5H73.4c-1 0-1.9-.4-2.5-1L1.1 22.2C.4 21.6 0 20.7 0 19.7V3.5Z";
 var RIGHT = "M50.4 3.5C50.4 1.6 52 0 54 0h16.5c1 0 1.9.4 2.5 1l69.8 68.6c.7.7 1.1 1.6 1.1 2.5v16.2c0 2-1.6 3.5-3.6 3.5h-16.5c-1 0-1.9-.4-2.5-1L51.4 22.2c-.7-.6-1-1.5-1-2.5V3.5Z";
 function UILoader({ size = 48, tone = "neutral", className, style, label = "Loading", ariaHidden = false }) {
-  const rawId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const rawId = useId2().replace(/[^a-zA-Z0-9_-]/g, "");
   const clipId = `fractal-ui-loader-clip-${rawId}`;
   const gradientId = `fractal-ui-loader-gradient-${rawId}`;
   const height = typeof size === "number" ? `${size}px` : size;
@@ -1073,18 +1094,18 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
       className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
       role: ariaHidden ? void 0 : "status",
       style,
-      children: /* @__PURE__ */ jsxs12("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
-        /* @__PURE__ */ jsxs12("defs", { children: [
-          /* @__PURE__ */ jsxs12("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
+      children: /* @__PURE__ */ jsxs13("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
+        /* @__PURE__ */ jsxs13("defs", { children: [
+          /* @__PURE__ */ jsxs13("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
             /* @__PURE__ */ jsx14("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
             /* @__PURE__ */ jsx14("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
           ] }),
-          /* @__PURE__ */ jsxs12("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+          /* @__PURE__ */ jsxs13("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
             /* @__PURE__ */ jsx14("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
             /* @__PURE__ */ jsx14("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
             /* @__PURE__ */ jsx14("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
           ] }),
-          /* @__PURE__ */ jsxs12("clipPath", { id: clipId, children: [
+          /* @__PURE__ */ jsxs13("clipPath", { id: clipId, children: [
             /* @__PURE__ */ jsx14("path", { d: LEFT }),
             /* @__PURE__ */ jsx14("path", { d: CENTER }),
             /* @__PURE__ */ jsx14("path", { d: RIGHT })
@@ -1100,7 +1121,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
 }
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var CloseIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
   const [bodyScrolled, setBodyScrolled] = React10.useState(false);
@@ -1112,13 +1133,13 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
   const sizeClass = `fractal-modal-panel--${size}`;
   const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
   return createPortal2(
-    /* @__PURE__ */ jsx15("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsx15("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs14(
       "div",
       {
         className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsxs14(
             "div",
             {
               className: cn(
@@ -1155,12 +1176,12 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
 }
 
 // src/components/TableLayout/TableOverflowMenu.tsx
-import { useId as useId2, useLayoutEffect, useRef as useRef5, useState as useState5 } from "react";
+import { useId as useId3, useLayoutEffect, useRef as useRef5, useState as useState5 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Ellipsis } from "@mirror-physics/fractal-icons";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function TableOverflowMenu({ items, label, disabled, onSelect }) {
-  const id = useId2();
+  const id = useId3();
   const trigger = useRef5(null);
   const panel = useRef5(null);
   const initialLast = useRef5(false);
@@ -1209,7 +1230,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
     if (disabled || items.length === 0) setOpen(false);
   }, [disabled, items.length]);
   if (items.length === 0) return null;
-  return /* @__PURE__ */ jsxs14("div", { className: "fractal-table-overflow-trigger", children: [
+  return /* @__PURE__ */ jsxs15("div", { className: "fractal-table-overflow-trigger", children: [
     /* @__PURE__ */ jsx16(
       Button,
       {
@@ -1264,7 +1285,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
             ordered.find((button) => button.textContent?.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()))?.focus();
           }
         },
-        children: items.map((item) => /* @__PURE__ */ jsxs14(
+        children: items.map((item) => /* @__PURE__ */ jsxs15(
           "button",
           {
             type: "button",
@@ -1377,16 +1398,16 @@ function TableCellContent({ children, label }) {
 }
 
 // src/components/DataTable/DataTable.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function DataTable({ columns, data, emptyMessage, header, size = "md", className, overflowMenu, layout = "fill", stickyHeader = false, stickyFirstColumn = false, maxHeight, "aria-label": ariaLabel = "Data table" }) {
-  return /* @__PURE__ */ jsx18("div", { className: cn("fractal-table-layout", "fractal-datatable", `fractal-datatable--${size}`, className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, children: /* @__PURE__ */ jsxs15("div", { className: "fractal-datatable-surface", children: [
+  return /* @__PURE__ */ jsx18("div", { className: cn("fractal-table-layout", "fractal-datatable", `fractal-datatable--${size}`, className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, children: /* @__PURE__ */ jsxs16("div", { className: "fractal-datatable-surface", children: [
     header && /* @__PURE__ */ jsx18("div", { className: "fractal-datatable-header", children: header }),
-    data.length === 0 ? /* @__PURE__ */ jsx18("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsx18(TableViewport, { maxHeight, label: ariaLabel, children: /* @__PURE__ */ jsxs15("table", { "aria-label": ariaLabel, className: "fractal-datatable-table", children: [
-      /* @__PURE__ */ jsx18("thead", { children: /* @__PURE__ */ jsxs15("tr", { className: "fractal-datatable-thead-row", children: [
+    data.length === 0 ? /* @__PURE__ */ jsx18("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsx18(TableViewport, { maxHeight, label: ariaLabel, children: /* @__PURE__ */ jsxs16("table", { "aria-label": ariaLabel, className: "fractal-datatable-table", children: [
+      /* @__PURE__ */ jsx18("thead", { children: /* @__PURE__ */ jsxs16("tr", { className: "fractal-datatable-thead-row", children: [
         columns.map((col, columnIndex) => /* @__PURE__ */ jsx18("th", { scope: "col", className: "fractal-datatable-th", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ jsx18(TableCellContent, { label: `${col.header} column`, children: col.header }) }, col.key)),
         overflowMenu && /* @__PURE__ */ jsx18("th", { scope: "col", "aria-label": "Row actions", className: "fractal-datatable-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
       ] }) }),
-      /* @__PURE__ */ jsx18("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsx18("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsxs16(
         "tr",
         {
           className: "fractal-datatable-row",
@@ -1403,7 +1424,7 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
 
 // src/components/Dropdown/Dropdown.tsx
 import * as React11 from "react";
-import { ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
+import { Check as Check2, MagnifyingGlass as MagnifyingGlass2, ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
 
 // src/components/Dropdown/position.ts
 function positionDropdown(trigger, panel, bounds, direction, align) {
@@ -1441,12 +1462,19 @@ function positionDropdown(trigger, panel, bounds, direction, align) {
 }
 
 // src/components/Dropdown/Dropdown.tsx
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function Dropdown({
   items,
-  selectedValue,
+  selectedValue = "",
   onSelect,
-  triggerLabel = "Options",
+  multiple = false,
+  selectedValues = [],
+  onSelectionChange,
+  searchable = false,
+  searchPlaceholder = "Find an option",
+  emptyMessage = "No matching options.",
+  triggerLabel,
+  fieldLabel,
   direction = "down",
   align = "left",
   maxHeight = 320,
@@ -1456,7 +1484,7 @@ function Dropdown({
   label,
   iconOnly = false,
   noChevron = false,
-  size: sizeAlias = "md",
+  size: sizeAlias = "lg",
   controlSize,
   triggerId,
   triggerVariant = "outline",
@@ -1466,17 +1494,37 @@ function Dropdown({
   closeOnSelect = true,
   disabled = false
 }) {
+  const [query, setQuery] = React11.useState("");
+  const searchRef = React11.useRef(null);
+  const accessibleLabel = triggerLabel ?? fieldLabel ?? "Options";
   const size = controlSize ?? sizeAlias;
   const [open, setOpen] = React11.useState(false);
+  React11.useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
   const rootRef = React11.useRef(null);
   const menuId = React11.useId();
   const focusOnOpen = React11.useRef(false);
   const triggerRef = React11.useRef(null);
   const panelRef = React11.useRef(null);
   const [panelStyle, setPanelStyle] = React11.useState({});
-  const visibleItems = items.filter(
+  const renderableItems = items.filter(
     (item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
   );
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  let groupTitle = "";
+  const matching = new Set(renderableItems.filter((item) => {
+    if (item.kind === "header") {
+      groupTitle = String(item.description ?? "");
+      return false;
+    }
+    return `${groupTitle} ${typeof item.description === "string" ? item.description : item.value}`.toLocaleLowerCase().includes(normalizedQuery);
+  }).map((item) => item.value));
+  const visibleItems = renderableItems.filter((item, index) => {
+    if (item.kind !== "header") return matching.has(item.value);
+    const nextHeader = renderableItems.findIndex((next, i) => i > index && next.kind === "header");
+    return renderableItems.slice(index + 1, nextHeader < 0 ? void 0 : nextHeader).some((next) => matching.has(next.value));
+  });
   const selectableItems = visibleItems.filter((i) => i.kind !== "header");
   const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
   const ChevronIcon = direction === "up" ? ChevronUp : direction === "left" ? ChevronLeft : direction === "right" ? ChevronRight2 : ChevronDown;
@@ -1536,6 +1584,7 @@ function Dropdown({
       setPanelStyle((previous) => Object.entries(nextStyle).every(([key, value]) => previous[key] === value) ? previous : nextStyle);
     };
     updatePosition();
+    if (searchable && !panel.contains(document.activeElement)) searchRef.current?.focus({ preventScroll: true });
     if (focusOnOpen.current) {
       focusOnOpen.current = false;
       const option = panel.querySelector('[aria-selected="true"]') ?? panel.querySelector('[role="option"]');
@@ -1559,7 +1608,7 @@ function Dropdown({
       window.visualViewport?.removeEventListener("resize", updatePosition);
       window.visualViewport?.removeEventListener("scroll", updatePosition);
     };
-  }, [open, direction, align, maxHeight, collisionPadding, items, label]);
+  }, [open, direction, align, maxHeight, collisionPadding, items, label, query, searchable]);
   React11.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
@@ -1570,19 +1619,19 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  if (visibleItems.length === 0) return null;
-  return /* @__PURE__ */ jsxs16("div", { ref: rootRef, "data-control-size": size, className: cn("fractal-dropdown", className), children: [
-    /* @__PURE__ */ jsxs16(
+  if (renderableItems.length === 0) return null;
+  return /* @__PURE__ */ jsxs17("div", { ref: rootRef, "data-control-size": size, "data-filled": multiple ? selectedValues.length > 0 : Boolean(selectedValue), "data-open": open, className: cn("fractal-dropdown", fieldLabel && "fractal-floating-field fractal-floating-field--dropdown", className), children: [
+    /* @__PURE__ */ jsxs17(
       "button",
       {
         ref: triggerRef,
-        id: triggerId,
+        id: triggerId ?? `${menuId}-trigger`,
         "data-control-size": size,
         type: "button",
         disabled,
-        "aria-haspopup": "listbox",
+        "aria-haspopup": searchable ? "dialog" : "listbox",
         "aria-expanded": open,
-        "aria-controls": open ? menuId : void 0,
+        "aria-controls": open ? searchable ? menuId : `${menuId}-options` : void 0,
         onKeyDown: (event) => {
           if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             event.preventDefault();
@@ -1596,7 +1645,7 @@ function Dropdown({
             }
           }
         },
-        "aria-label": triggerLabel,
+        "aria-label": accessibleLabel,
         onClick: () => setOpen((o) => !o),
         className: cn(
           "fractal-control",
@@ -1608,20 +1657,22 @@ function Dropdown({
           triggerClassName
         ),
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs16(Fragment2, { children: [
-            selected.icon != null && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
-            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-selected-text", children: selected.description })
-          ] }),
+          /* @__PURE__ */ jsx19("span", { className: fieldLabel ? "fractal-dropdown-field-value" : void 0, style: fieldLabel ? void 0 : { display: "contents" }, children: triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs17(Fragment2, { children: [
+            selected?.icon != null && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected?.icon }),
+            selected?.description != null && (typeof selected?.description !== "string" || selected?.description !== "") && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-selected-text", children: selected?.description })
+          ] }) }),
           !noChevron && !iconOnly && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx19(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs16(
+    fieldLabel ? /* @__PURE__ */ jsx19("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
+    open && /* @__PURE__ */ jsxs17(
       "div",
       {
         ref: panelRef,
         id: menuId,
         onKeyDown: (event) => {
+          if (event.target === searchRef.current && event.key !== "ArrowDown") return;
           if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
           event.preventDefault();
           const options = Array.from(panelRef.current?.querySelectorAll('[role="option"]') ?? []);
@@ -1630,49 +1681,58 @@ function Dropdown({
           options[index]?.focus({ preventScroll: true });
           options[index]?.scrollIntoView({ block: "nearest" });
         },
-        role: "listbox",
-        "aria-label": triggerLabel,
+        role: searchable ? "dialog" : void 0,
+        "aria-label": accessibleLabel,
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          label != null && /* @__PURE__ */ jsx19("div", { className: "fractal-dropdown-label", children: label }),
-          visibleItems.map((item, index) => {
-            const topDivider = item.border === "top" ? /* @__PURE__ */ jsx19("div", { className: "fractal-dropdown-separator" }) : null;
-            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx19("div", { className: "fractal-dropdown-separator" }) : null;
-            if (item.kind === "header") {
-              return /* @__PURE__ */ jsxs16(React11.Fragment, { children: [
+          searchable && /* @__PURE__ */ jsxs17("div", { className: "fractal-dropdown-search", children: [
+            /* @__PURE__ */ jsx19(MagnifyingGlass2, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx19("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
+          ] }),
+          /* @__PURE__ */ jsxs17("div", { role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
+            label != null && /* @__PURE__ */ jsx19("div", { className: "fractal-dropdown-label", children: label }),
+            visibleItems.map((item, index) => {
+              const topDivider = item.border === "top" ? /* @__PURE__ */ jsx19("div", { className: "fractal-dropdown-separator" }) : null;
+              const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx19("div", { className: "fractal-dropdown-separator" }) : null;
+              if (item.kind === "header") {
+                return /* @__PURE__ */ jsxs17(React11.Fragment, { children: [
+                  topDivider,
+                  /* @__PURE__ */ jsx19("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                  bottomDivider
+                ] }, `header-${index}`);
+              }
+              const isSelected = multiple ? selectedValues.includes(item.value) : item.value === selectedValue;
+              return /* @__PURE__ */ jsxs17(React11.Fragment, { children: [
                 topDivider,
-                /* @__PURE__ */ jsx19("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                /* @__PURE__ */ jsxs17(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isSelected,
+                    onClick: () => {
+                      if (multiple) onSelectionChange?.(isSelected ? selectedValues.filter((value) => value !== item.value) : [...selectedValues, item.value]);
+                      else onSelect?.(item.value);
+                      if (!multiple && closeOnSelect) {
+                        setOpen(false);
+                        triggerRef.current?.focus();
+                      }
+                    },
+                    className: "fractal-dropdown-option",
+                    children: [
+                      multiple && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-checkbox", "data-checked": isSelected, "aria-hidden": "true", children: isSelected && /* @__PURE__ */ jsx19(Check2, {}) }),
+                      item.icon != null && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-icon", children: item.icon }),
+                      item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-option-text", children: item.description }),
+                      item.trailing != null && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-trailing", children: item.trailing })
+                    ]
+                  }
+                ),
                 bottomDivider
-              ] }, `header-${index}`);
-            }
-            const isSelected = item.value === selectedValue;
-            return /* @__PURE__ */ jsxs16(React11.Fragment, { children: [
-              topDivider,
-              /* @__PURE__ */ jsxs16(
-                "button",
-                {
-                  type: "button",
-                  role: "option",
-                  "aria-selected": isSelected,
-                  onClick: () => {
-                    onSelect(item.value);
-                    if (closeOnSelect) {
-                      setOpen(false);
-                      triggerRef.current?.focus();
-                    }
-                  },
-                  className: "fractal-dropdown-option",
-                  children: [
-                    item.icon != null && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-icon", children: item.icon }),
-                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-option-text", children: item.description }),
-                    item.trailing != null && /* @__PURE__ */ jsx19("span", { className: "fractal-dropdown-trailing", children: item.trailing })
-                  ]
-                }
-              ),
-              bottomDivider
-            ] }, item.value);
-          })
+              ] }, item.value);
+            })
+          ] }),
+          !selectableItems.length && /* @__PURE__ */ jsx19("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
         ]
       }
     )
@@ -1711,7 +1771,7 @@ Chip.displayName = "Chip";
 
 // src/components/Checkbox/Checkbox.tsx
 import { Checkbox as CheckboxIcon, CheckboxChecked, Minus as Minus2 } from "@mirror-physics/fractal-icons";
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function Checkbox({
   checked,
   indeterminate = false,
@@ -1744,7 +1804,7 @@ function Checkbox({
         onKeyDown?.(event);
         if (event.key === " " || event.key === "Enter") event.stopPropagation();
       },
-      children: indeterminate ? /* @__PURE__ */ jsxs17("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
+      children: indeterminate ? /* @__PURE__ */ jsxs18("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx22(CheckboxIcon, { size: 18 }),
         /* @__PURE__ */ jsx22(Minus2, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
       ] }) : checked ? /* @__PURE__ */ jsx22(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx22(CheckboxIcon, { "aria-hidden": "true", size: 18 })
@@ -1753,7 +1813,7 @@ function Checkbox({
 }
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function Radio({
   checked,
   className,
@@ -1763,7 +1823,7 @@ function Radio({
   onCheckedChange,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs18("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
+  return /* @__PURE__ */ jsxs19("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
     /* @__PURE__ */ jsx23(
       "input",
       {
@@ -1776,7 +1836,7 @@ function Radio({
       }
     ),
     /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ jsx23("span", { className: "fractal-radio__dot" }) }),
-    /* @__PURE__ */ jsxs18("span", { className: "fractal-radio__content", children: [
+    /* @__PURE__ */ jsxs19("span", { className: "fractal-radio__content", children: [
       /* @__PURE__ */ jsx23("span", { className: "fractal-radio__label", children: label }),
       description && /* @__PURE__ */ jsx23("span", { className: "fractal-radio__description", children: description })
     ] })
@@ -1786,7 +1846,7 @@ function Radio({
 // src/components/SortableTable/SortableTable.tsx
 import { useMemo as useMemo2, useState as useState8 } from "react";
 import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function SortableTable({
   columns,
   data,
@@ -1886,10 +1946,10 @@ function SortableTable({
       onSortChange?.(nextKey, nextDirection);
     }
   };
-  return /* @__PURE__ */ jsx24("div", { className: cn("fractal-table-layout", "fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, "data-table-selection": Boolean(selection), children: /* @__PURE__ */ jsxs19("div", { className: "fractal-sortable-table-surface", children: [
+  return /* @__PURE__ */ jsx24("div", { className: cn("fractal-table-layout", "fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, "data-table-selection": Boolean(selection), children: /* @__PURE__ */ jsxs20("div", { className: "fractal-sortable-table-surface", children: [
     header && /* @__PURE__ */ jsx24("div", { className: "fractal-sortable-table-header", children: header }),
-    visibleRows.length === 0 ? /* @__PURE__ */ jsx24("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsx24(TableViewport, { maxHeight, label: ariaLabel || "Data table", children: /* @__PURE__ */ jsxs19("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
-      /* @__PURE__ */ jsx24("thead", { children: /* @__PURE__ */ jsxs19("tr", { className: "fractal-sortable-table-thead-row", children: [
+    visibleRows.length === 0 ? /* @__PURE__ */ jsx24("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsx24(TableViewport, { maxHeight, label: ariaLabel || "Data table", children: /* @__PURE__ */ jsxs20("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ jsx24("thead", { children: /* @__PURE__ */ jsxs20("tr", { className: "fractal-sortable-table-thead-row", children: [
         selection && /* @__PURE__ */ jsx24(
           "th",
           {
@@ -1941,7 +2001,7 @@ function SortableTable({
               scope: "col",
               style: columnStyle(col),
               "data-pinned-column": columnIndex === 0 ? "data" : void 0,
-              children: /* @__PURE__ */ jsx24(TableCellContent, { label: `${col.header} column`, children: /* @__PURE__ */ jsxs19(
+              children: /* @__PURE__ */ jsx24(TableCellContent, { label: `${col.header} column`, children: /* @__PURE__ */ jsxs20(
                 "button",
                 {
                   type: "button",
@@ -1972,7 +2032,7 @@ function SortableTable({
           label: rowAction.label(row, rowIndex),
           icon: rowAction.icon(row, rowIndex)
         } : null;
-        return /* @__PURE__ */ jsxs19(
+        return /* @__PURE__ */ jsxs20(
           "tr",
           {
             className: cn(
@@ -2008,7 +2068,7 @@ function SortableTable({
                   }
                 }
               ) }),
-              columns.map((col, columnIndex) => /* @__PURE__ */ jsxs19(
+              columns.map((col, columnIndex) => /* @__PURE__ */ jsxs20(
                 "td",
                 {
                   className: cn(
@@ -2046,8 +2106,8 @@ function SortableTable({
 }
 
 // src/components/Tabs/Tabs.tsx
-import { useId as useId4, useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState9 } from "react";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useId as useId5, useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState9 } from "react";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function Tabs({
   items,
   defaultValue,
@@ -2058,7 +2118,7 @@ function Tabs({
   divider = false,
   variant = "line"
 }) {
-  const reactId = useId4();
+  const reactId = useId5();
   const [internalValue, setInternalValue] = useState9(
     defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
   );
@@ -2118,7 +2178,7 @@ function Tabs({
     selectTab(nextId2);
     requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
   };
-  return /* @__PURE__ */ jsxs20("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
+  return /* @__PURE__ */ jsxs21("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
     /* @__PURE__ */ jsx25(
       "div",
       {
@@ -2181,7 +2241,7 @@ function Tabs({
 
 // src/components/ContentSwitcher/ContentSwitcher.tsx
 import * as React14 from "react";
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
   const switcherRef = React14.useRef(null);
   const buttonRefs = React14.useRef([]);
@@ -2239,7 +2299,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       onValueChange(items[nextIndex].value);
     }
   };
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
@@ -2282,9 +2342,9 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
 }
 
 // src/components/Disclosure/Disclosure.tsx
-import { useId as useId5, useState as useState10 } from "react";
+import { useId as useId6, useState as useState10 } from "react";
 import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 function Disclosure({
   title,
   meta,
@@ -2296,7 +2356,7 @@ function Disclosure({
   className,
   variant = "card"
 }) {
-  const reactId = useId5();
+  const reactId = useId6();
   const headerId = `${reactId}-header`;
   const panelId = `${reactId}-panel`;
   const [internalOpen, setInternalOpen] = useState10(defaultOpen);
@@ -2312,7 +2372,7 @@ function Disclosure({
       onOpenChange?.(next);
     }
   };
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn(
@@ -2323,7 +2383,7 @@ function Disclosure({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs23(
           "button",
           {
             type: "button",
@@ -2382,7 +2442,7 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
 }
 
 // src/components/Ghost/Ghost.tsx
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Ghost({ className, width, height, radius, style, ...props }) {
   return /* @__PURE__ */ jsx29(
@@ -2403,11 +2463,11 @@ function Ghost({ className, width, height, radius, style, ...props }) {
 function GhostLine({ className, size = "md", width = "100%", ...props }) {
   return /* @__PURE__ */ jsx29(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
 }
-function ButtonGhost({ className, size = "md", controlSize, iconOnly = false, width, ...props }) {
+function ButtonGhost({ className, size = "lg", controlSize, iconOnly = false, width, ...props }) {
   return /* @__PURE__ */ jsx29(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
 }
 function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
+  return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
     showHeader && /* @__PURE__ */ jsx29(GhostLine, { width: "38%" }),
     /* @__PURE__ */ jsx29("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx29(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
   ] });
@@ -2423,7 +2483,7 @@ function DataTableGhost({
   ...props
 }) {
   const cells = Array.from({ length: columns }, (_, index) => index);
-  return /* @__PURE__ */ jsx29("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs23("table", { className: "fractal-ghost-table__table", children: [
+  return /* @__PURE__ */ jsx29("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs24("table", { className: "fractal-ghost-table__table", children: [
     (showHeader || headers) && /* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsx29("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx29("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx29(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
     /* @__PURE__ */ jsx29("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx29("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx29("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx29(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
   ] }) });
@@ -2437,20 +2497,20 @@ function TextareaGhost({ className, labelWidth = "26%", ...props }) {
 function LabelGhost({ className, width = "26%", ...props }) {
   return /* @__PURE__ */ jsx29(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
 }
-function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "md", ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
+function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "lg", ...props }) {
+  return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
     /* @__PURE__ */ jsx29(LabelGhost, { width: labelWidth }),
     /* @__PURE__ */ jsx29(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
   ] });
 }
 function AlertGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
+  return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
     /* @__PURE__ */ jsx29(GhostLine, { width: "30%" }),
     /* @__PURE__ */ jsx29(GhostLine, { size: "sm", width: "78%" })
   ] });
 }
 function CheckboxGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
+  return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
     /* @__PURE__ */ jsx29(Ghost, { className: "fractal-ghost-choice__control" }),
     /* @__PURE__ */ jsx29(GhostLine, { width: "42%" })
   ] });
@@ -2463,8 +2523,8 @@ function LinkGhost({ className, width = 96, ...props }) {
   return /* @__PURE__ */ jsx29(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
 }
 var TextButtonGhost = LinkGhost;
-function DropdownGhost({ className, controlSize = "md", ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
+function DropdownGhost({ className, controlSize = "lg", ...props }) {
+  return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
     /* @__PURE__ */ jsx29(GhostLine, { width: "38%" }),
     /* @__PURE__ */ jsx29(Ghost, { className: "fractal-ghost-dropdown__chevron" })
   ] });
@@ -2474,7 +2534,7 @@ function ContentSwitcherGhost({ className, options = 3, ...props }) {
 }
 var TabsGhost = ContentSwitcherGhost;
 function DisclosureGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
+  return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
     /* @__PURE__ */ jsx29(Ghost, { className: "fractal-ghost-disclosure__icon" }),
     /* @__PURE__ */ jsx29(GhostLine, { width: "42%" })
   ] });
@@ -2483,7 +2543,7 @@ function PaginationGhost({ className, pages = 5, ...props }) {
   return /* @__PURE__ */ jsx29("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx29(Ghost, {}, index)) });
 }
 function FileDropzoneGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
+  return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
     /* @__PURE__ */ jsx29(Ghost, { className: "fractal-ghost-dropzone__icon" }),
     /* @__PURE__ */ jsx29(GhostLine, { width: "26%" }),
     /* @__PURE__ */ jsx29(GhostLine, { size: "sm", width: "46%" })
@@ -2497,7 +2557,7 @@ function ConversationGhost({
   "aria-label": ariaLabel = "Loading conversation",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       "aria-busy": "true",
@@ -2506,12 +2566,12 @@ function ConversationGhost({
       role: "status",
       ...props,
       children: [
-        /* @__PURE__ */ jsx29("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-conversation__bubble", children: [
+        /* @__PURE__ */ jsx29("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs24("div", { className: "fractal-ghost-conversation__bubble", children: [
           /* @__PURE__ */ jsx29(GhostLine, { width: "100%" }),
           /* @__PURE__ */ jsx29(GhostLine, { width: "86%" }),
           /* @__PURE__ */ jsx29(GhostLine, { width: "64%" })
         ] }) }),
-        /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
+        /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
           /* @__PURE__ */ jsx29(GhostLine, { width: "92%" }),
           /* @__PURE__ */ jsx29(GhostLine, { width: "78%" }),
           /* @__PURE__ */ jsx29(GhostLine, { width: "58%" })
@@ -2524,9 +2584,9 @@ function SortableTableGhost(props) {
   return /* @__PURE__ */ jsx29(DataTableGhost, { ...props });
 }
 function SidebarGhost({ className, items = 6, ...props }) {
-  return /* @__PURE__ */ jsxs23("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
+  return /* @__PURE__ */ jsxs24("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
     /* @__PURE__ */ jsx29(Ghost, { className: "fractal-ghost-sidebar__brand" }),
-    /* @__PURE__ */ jsx29("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-sidebar__item", children: [
+    /* @__PURE__ */ jsx29("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs24("div", { className: "fractal-ghost-sidebar__item", children: [
       /* @__PURE__ */ jsx29(Ghost, {}),
       /* @__PURE__ */ jsx29(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
     ] }, index)) })
@@ -2539,8 +2599,8 @@ function SidePanelGhost({ className, title, lines = 5, ...props }) {
   return /* @__PURE__ */ jsx29(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
 }
 function SurfaceGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
-    /* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-surface__header", children: [
+  return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
+    /* @__PURE__ */ jsxs24("div", { className: "fractal-ghost-surface__header", children: [
       /* @__PURE__ */ jsx29(GhostLine, { width: "42%" }),
       /* @__PURE__ */ jsx29(Ghost, { className: "fractal-ghost-surface__close" })
     ] }),
@@ -2551,7 +2611,7 @@ function SurfaceGhost({ className, title, lines = 3, ...props }) {
 
 // src/components/Sidebar/Sidebar.tsx
 import * as React15 from "react";
-import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var Sidebar = React15.forwardRef(
   ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx30(
     "aside",
@@ -2591,7 +2651,7 @@ function SidebarAccountMenu({
       panelClassName: "fractal-sidebar__account-panel",
       selectedValue: "",
       triggerClassName: "fractal-sidebar__account-trigger",
-      triggerContent: /* @__PURE__ */ jsxs24(Fragment3, { children: [
+      triggerContent: /* @__PURE__ */ jsxs25(Fragment3, { children: [
         icon && /* @__PURE__ */ jsx30("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
         /* @__PURE__ */ jsx30("span", { className: "fractal-sidebar__account-name", children: name })
       ] }),
@@ -2609,7 +2669,7 @@ var SidebarSection = React15.forwardRef(
 );
 SidebarSection.displayName = "SidebarSection";
 var SidebarNavItem = React15.forwardRef(
-  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs24(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs25(
     "button",
     {
       ref,
@@ -2636,7 +2696,7 @@ SidebarFooter.displayName = "SidebarFooter";
 import * as React16 from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { Close as Close2 } from "@mirror-physics/fractal-icons";
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
   useEscapeDismiss(80, onClose, open);
   const bodyRef = React16.useRef(null);
@@ -2672,7 +2732,7 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
   }, [open, loading]);
   if (!open) return null;
   return createPortal4(
-    /* @__PURE__ */ jsx31("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsx31("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs26(
       "aside",
       {
         className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
@@ -2681,8 +2741,8 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs25("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
-            /* @__PURE__ */ jsxs25("div", { className: "fractal-side-panel__heading", children: [
+          /* @__PURE__ */ jsxs26("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
+            /* @__PURE__ */ jsxs26("div", { className: "fractal-side-panel__heading", children: [
               typeof title === "string" ? /* @__PURE__ */ jsx31("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx31("div", { className: "fractal-side-panel__title", children: title }),
               description && /* @__PURE__ */ jsx31("p", { className: "fractal-side-panel__description", children: description })
             ] }),
@@ -2699,17 +2759,35 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 
 // src/components/Textarea/Textarea.tsx
 import * as React17 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var Textarea = React17.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+  ({ className, fieldLabel, textStyle = "source", id, placeholder, ...props }, ref) => {
+    const generatedId = React17.useId();
+    const fieldId = id ?? generatedId;
+    const input = /* @__PURE__ */ jsx32(
+      "textarea",
+      {
+        ref,
+        id: fieldLabel ? fieldId : id,
+        placeholder: fieldLabel ? placeholder || " " : placeholder,
+        className: cn("fractal-textarea", className),
+        "data-text-style": textStyle,
+        ...props
+      }
+    );
+    return fieldLabel ? /* @__PURE__ */ jsxs27("div", { className: "fractal-floating-field fractal-floating-field--textarea", "data-control-size": "md", children: [
+      input,
+      /* @__PURE__ */ jsx32("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
+    ] }) : input;
+  }
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
 import * as React18 from "react";
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var TextButton = React18.forwardRef(
-  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs26(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs28(
     "button",
     {
       ref,
@@ -2729,7 +2807,7 @@ TextButton.displayName = "TextButton";
 // src/components/FileDropzone/FileDropzone.tsx
 import * as React19 from "react";
 import { Close as Close3, FileArrowUp } from "@mirror-physics/fractal-icons";
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 function FileDropzone({
   files,
   onFilesChange,
@@ -2749,7 +2827,7 @@ function FileDropzone({
     if (additions.length === 0) return;
     onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
   };
-  return /* @__PURE__ */ jsxs27("div", { className: cn("fractal-file-dropzone", className), children: [
+  return /* @__PURE__ */ jsxs29("div", { className: cn("fractal-file-dropzone", className), children: [
     /* @__PURE__ */ jsx34(
       "input",
       {
@@ -2766,7 +2844,7 @@ function FileDropzone({
         }
       }
     ),
-    /* @__PURE__ */ jsxs27(
+    /* @__PURE__ */ jsxs29(
       "button",
       {
         className: "fractal-file-dropzone__target",
@@ -2790,14 +2868,14 @@ function FileDropzone({
         },
         children: [
           /* @__PURE__ */ jsx34(FileArrowUp, { "aria-hidden": "true", size: 20 }),
-          /* @__PURE__ */ jsxs27("span", { className: "fractal-file-dropzone__copy", children: [
+          /* @__PURE__ */ jsxs29("span", { className: "fractal-file-dropzone__copy", children: [
             /* @__PURE__ */ jsx34("span", { className: "fractal-file-dropzone__title", children: title }),
             description && /* @__PURE__ */ jsx34("span", { className: "fractal-file-dropzone__description", children: description })
           ] })
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ jsx34("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs27("li", { className: "fractal-file-dropzone__file", children: [
+    files.length > 0 && /* @__PURE__ */ jsx34("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs29("li", { className: "fractal-file-dropzone__file", children: [
       /* @__PURE__ */ jsx34("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
       /* @__PURE__ */ jsx34("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
       /* @__PURE__ */ jsx34(
@@ -2822,7 +2900,7 @@ function formatFileSize(bytes) {
 
 // src/components/Pagination/Pagination.tsx
 import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
-import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 function Pagination({
   page,
   pageSize,
@@ -2838,9 +2916,9 @@ function Pagination({
   const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
   const end = Math.min(currentPage * pageSize, totalItems);
   const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
-  return /* @__PURE__ */ jsxs28("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+  return /* @__PURE__ */ jsxs30("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
     /* @__PURE__ */ jsx35("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
-    /* @__PURE__ */ jsxs28("div", { className: "fractal-pagination__controls", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "fractal-pagination__controls", children: [
       canChangePageSize && /* @__PURE__ */ jsx35(
         Dropdown,
         {
@@ -2870,7 +2948,7 @@ function Pagination({
           children: /* @__PURE__ */ jsx35(ArrowLeft, { "aria-hidden": "true", size: 16 })
         }
       ),
-      /* @__PURE__ */ jsxs28("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+      /* @__PURE__ */ jsxs30("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
         currentPage,
         " of ",
         totalPages