@fairfox/polly 0.89.0 → 0.89.1

package/dist/src/polly-ui/index.js

@@ -505,8 +505,33 @@ var Select_module_default = {
   optionCheck: "optionCheck_daofbw"
 };
 
+// src/polly-ui/internal/select-trigger.tsx
+import { jsxDEV as jsxDEV4 } from "preact/jsx-dev-runtime";
+function SelectTrigger(props) {
+  const { label, caret = true, as = "div" } = props;
+  return /* @__PURE__ */ jsxDEV4(Layout, {
+    as,
+    inline: true,
+    columns: caret ? "1fr auto" : "1fr",
+    ...caret ? { gap: "var(--polly-space-sm)" } : {},
+    alignItems: "center",
+    maxInlineSize: "100%",
+    children: [
+      /* @__PURE__ */ jsxDEV4("span", {
+        class: Select_module_default["triggerLabel"],
+        "data-polly-select-label": true,
+        children: label
+      }, undefined, false, undefined, this),
+      caret && /* @__PURE__ */ jsxDEV4("span", {
+        class: Select_module_default["caret"],
+        "aria-hidden": "true"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/polly-ui/ActionSelect.tsx
-import { jsxDEV as jsxDEV4, Fragment } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV5 } from "preact/jsx-dev-runtime";
 function labelFor(options, value) {
   for (const opt of options) {
     if (opt.value === value)
@@ -546,7 +571,7 @@ function ActionSelect(props) {
   const parts = [Select_module_default["select"] ?? ""];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV4("div", {
+  return /* @__PURE__ */ jsxDEV5("div", {
     ...collectPassthrough(props),
     id,
     class: parts.filter(Boolean).join(" "),
@@ -554,44 +579,36 @@ function ActionSelect(props) {
     "data-polly-action-select": true,
     "data-state": isEmpty ? "empty" : "filled",
     children: [
-      label !== undefined && /* @__PURE__ */ jsxDEV4("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV5("span", {
         class: Select_module_default["label"],
         children: label
       }, undefined, false, undefined, this),
-      disabled ? /* @__PURE__ */ jsxDEV4("span", {
+      disabled ? /* @__PURE__ */ jsxDEV5("span", {
         class: triggerClass,
         "aria-disabled": "true",
         title: displayText,
-        children: /* @__PURE__ */ jsxDEV4("span", {
-          class: Select_module_default["triggerLabel"],
-          children: displayText
+        children: /* @__PURE__ */ jsxDEV5(SelectTrigger, {
+          as: "span",
+          caret: false,
+          label: displayText
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4(Dropdown, {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV5(Dropdown, {
         isOpen,
         triggerClassName: triggerClass,
         triggerTitle: displayText,
-        trigger: /* @__PURE__ */ jsxDEV4(Fragment, {
-          children: [
-            /* @__PURE__ */ jsxDEV4("span", {
-              class: Select_module_default["triggerLabel"],
-              children: displayText
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV4("span", {
-              class: Select_module_default["caret"],
-              "aria-hidden": "true"
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this),
+        trigger: /* @__PURE__ */ jsxDEV5(SelectTrigger, {
+          label: displayText
+        }, undefined, false, undefined, this),
         children: options.map((opt) => {
           const isSelected = opt.value === value;
           const optClass = isSelected ? `${Select_module_default["option"]} ${Select_module_default["optionSelected"]}` : Select_module_default["option"];
-          return /* @__PURE__ */ jsxDEV4("button", {
+          return /* @__PURE__ */ jsxDEV5("button", {
             type: "button",
             role: "option",
             class: optClass,
             "aria-selected": isSelected ? "true" : "false",
             onClick: () => commit(opt.value),
-            children: /* @__PURE__ */ jsxDEV4("span", {
+            children: /* @__PURE__ */ jsxDEV5("span", {
               children: opt.label
             }, undefined, false, undefined, this)
           }, opt.value, false, undefined, this);
@@ -610,7 +627,7 @@ var Badge_module_default = {
 };
 
 // src/polly-ui/Badge.tsx
-import { jsxDEV as jsxDEV5 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
 function variantClass(variant) {
   if (variant === "info")
     return Badge_module_default["info"];
@@ -630,7 +647,7 @@ function Badge(props) {
     parts.push(v);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV5("span", {
+  return /* @__PURE__ */ jsxDEV6("span", {
     id,
     title,
     class: parts.join(" "),
@@ -660,7 +677,7 @@ var Button_module_default = {
 };
 
 // src/polly-ui/Button.tsx
-import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV7 } from "preact/jsx-dev-runtime";
 function tierClass(tier) {
   if (tier === "primary")
     return Button_module_default["tierPrimary"];
@@ -723,17 +740,17 @@ function Button(props) {
   if (className)
     parts.push(className);
   const buttonClass = parts.filter(Boolean).join(" ");
-  const content = icon === undefined ? label : /* @__PURE__ */ jsxDEV6(Layout, {
+  const content = icon === undefined ? label : /* @__PURE__ */ jsxDEV7(Layout, {
     inline: true,
     columns: "auto auto",
     gap: "var(--polly-space-sm)",
     alignItems: "center",
     children: [
-      /* @__PURE__ */ jsxDEV6("span", {
+      /* @__PURE__ */ jsxDEV7("span", {
         class: Button_module_default["icon"],
         children: icon
       }, undefined, false, undefined, this),
-      label !== undefined && /* @__PURE__ */ jsxDEV6("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV7("span", {
         class: Button_module_default["label"],
         children: label
       }, undefined, false, undefined, this)
@@ -752,7 +769,7 @@ function Button(props) {
     }
   }
   if ("href" in props && props.href) {
-    return /* @__PURE__ */ jsxDEV6("a", {
+    return /* @__PURE__ */ jsxDEV7("a", {
       id,
       class: buttonClass,
       title: resolvedTitle,
@@ -770,7 +787,7 @@ function Button(props) {
     }, undefined, false, undefined, this);
   }
   const resolvedType = "type" in props && props.type ? props.type : "button";
-  return /* @__PURE__ */ jsxDEV6("button", {
+  return /* @__PURE__ */ jsxDEV7("button", {
     id,
     class: buttonClass,
     title: resolvedTitle,
@@ -998,10 +1015,10 @@ function Surface(props) {
 }
 
 // src/polly-ui/Card.tsx
-import { jsxDEV as jsxDEV7 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV8 } from "preact/jsx-dev-runtime";
 function Root(props) {
   const { variant = "raised", radius = "md", ...rest } = props;
-  return /* @__PURE__ */ jsxDEV7(Surface, {
+  return /* @__PURE__ */ jsxDEV8(Surface, {
     variant,
     radius,
     "data-polly-card": true,
@@ -1016,7 +1033,7 @@ function Header(props) {
     borderSides = "block-end",
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxDEV7(Surface, {
+  return /* @__PURE__ */ jsxDEV8(Surface, {
     padding,
     border,
     borderSides,
@@ -1027,7 +1044,7 @@ function Header(props) {
 }
 function Body(props) {
   const { padding = "var(--polly-space-lg)", ...rest } = props;
-  return /* @__PURE__ */ jsxDEV7(Surface, {
+  return /* @__PURE__ */ jsxDEV8(Surface, {
     padding,
     "data-polly-card-body": true,
     ...rest,
@@ -1041,7 +1058,7 @@ function Footer(props) {
     borderSides = "block-start",
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxDEV7(Surface, {
+  return /* @__PURE__ */ jsxDEV8(Surface, {
     padding,
     border,
     borderSides,
@@ -1060,7 +1077,7 @@ var Checkbox_module_default = {
 };
 
 // src/polly-ui/Checkbox.tsx
-import { jsxDEV as jsxDEV8 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "preact/jsx-dev-runtime";
 function isSignal(value) {
   return typeof value === "object" && value !== null && "value" in value && "peek" in value;
 }
@@ -1077,7 +1094,7 @@ function Checkbox(props) {
     parts.push(Checkbox_module_default["disabled"] ?? "");
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV8(Layout, {
+  return /* @__PURE__ */ jsxDEV9(Layout, {
     as: "label",
     inline: true,
     columns: "auto auto",
@@ -1087,7 +1104,7 @@ function Checkbox(props) {
     "data-polly-ui": true,
     "data-polly-checkbox": true,
     children: [
-      /* @__PURE__ */ jsxDEV8("input", {
+      /* @__PURE__ */ jsxDEV9("input", {
         id,
         type: "checkbox",
         class: Checkbox_module_default["input"],
@@ -1097,7 +1114,7 @@ function Checkbox(props) {
         disabled,
         onChange: handleChange
       }, undefined, false, undefined, this),
-      label !== undefined && /* @__PURE__ */ jsxDEV8("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV9("span", {
         class: Checkbox_module_default["label"],
         children: label
       }, undefined, false, undefined, this)
@@ -1148,7 +1165,7 @@ var Code_module_default = {
 };
 
 // src/polly-ui/Code.tsx
-import { jsxDEV as jsxDEV9 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10 } from "preact/jsx-dev-runtime";
 function Code(props) {
   const { children, block, className, id } = props;
   const passthrough = collectPassthrough(props);
@@ -1156,13 +1173,13 @@ function Code(props) {
     const parts = [Code_module_default["block"]];
     if (className)
       parts.push(className);
-    return /* @__PURE__ */ jsxDEV9("pre", {
+    return /* @__PURE__ */ jsxDEV10("pre", {
       ...passthrough,
       id,
       class: parts.filter(Boolean).join(" "),
       "data-polly-ui": true,
       "data-polly-code": "block",
-      children: /* @__PURE__ */ jsxDEV9("code", {
+      children: /* @__PURE__ */ jsxDEV10("code", {
         children
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
@@ -1170,7 +1187,7 @@ function Code(props) {
   const parts = [Code_module_default["code"]];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV9("code", {
+  return /* @__PURE__ */ jsxDEV10("code", {
     ...passthrough,
     id,
     class: parts.filter(Boolean).join(" "),
@@ -1189,7 +1206,7 @@ var Collapsible_module_default = {
 };
 
 // src/polly-ui/Collapsible.tsx
-import { jsxDEV as jsxDEV10 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV11 } from "preact/jsx-dev-runtime";
 var NON_TEXT_INPUT_TYPES = new Set([
   "checkbox",
   "radio",
@@ -1225,14 +1242,14 @@ function Collapsible(props) {
   const parts = [Collapsible_module_default["collapsible"]];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV10("details", {
+  return /* @__PURE__ */ jsxDEV11("details", {
     id,
     class: parts.join(" "),
     open: defaultOpen,
     "data-polly-ui": true,
     "data-polly-collapsible": true,
     children: [
-      /* @__PURE__ */ jsxDEV10(Layout, {
+      /* @__PURE__ */ jsxDEV11(Layout, {
         as: "summary",
         columns: "auto 1fr",
         gap: "var(--polly-space-sm)",
@@ -1240,17 +1257,17 @@ function Collapsible(props) {
         className: Collapsible_module_default["summary"],
         onKeyUp: handleSummaryKeyUp,
         children: [
-          /* @__PURE__ */ jsxDEV10("span", {
+          /* @__PURE__ */ jsxDEV11("span", {
             class: Collapsible_module_default["marker"],
             "aria-hidden": "true"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV10("span", {
+          /* @__PURE__ */ jsxDEV11("span", {
             class: Collapsible_module_default["summaryContent"],
             children: summary
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV10("div", {
+      /* @__PURE__ */ jsxDEV11("div", {
         class: Collapsible_module_default["content"],
         children
       }, undefined, false, undefined, this)
@@ -1420,7 +1437,7 @@ var OverlayRoot_module_default = {
 };
 
 // src/polly-ui/OverlayRoot.tsx
-import { jsxDEV as jsxDEV11 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV12 } from "preact/jsx-dev-runtime";
 function OverlayRoot() {
   const ref = useRef3(null);
   useEffect3(() => {
@@ -1439,7 +1456,7 @@ function OverlayRoot() {
       release?.();
     };
   }, []);
-  return /* @__PURE__ */ jsxDEV11("div", {
+  return /* @__PURE__ */ jsxDEV12("div", {
     ref,
     class: OverlayRoot_module_default["root"],
     "data-polly-ui": true,
@@ -1451,7 +1468,7 @@ function getOverlayRootNode() {
 }
 
 // src/polly-ui/Modal.tsx
-import { jsxDEV as jsxDEV12 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV13 } from "preact/jsx-dev-runtime";
 var Ctx = createContext(null);
 function useModal() {
   const ctx = useContext(Ctx);
@@ -1493,9 +1510,9 @@ function Root2({ when, onClose, children, "aria-label": ariaLabel }) {
     onClose?.();
   };
   const ctx = { id, titleId, descId, close };
-  const content = /* @__PURE__ */ jsxDEV12(Ctx.Provider, {
+  const content = /* @__PURE__ */ jsxDEV13(Ctx.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsxDEV12(Layout, {
+    children: /* @__PURE__ */ jsxDEV13(Layout, {
       elementRef: mountRef,
       alignItems: "center",
       justifyItems: "center",
@@ -1517,7 +1534,7 @@ function Root2({ when, onClose, children, "aria-label": ariaLabel }) {
 }
 function Backdrop() {
   const { close } = useModal();
-  return /* @__PURE__ */ jsxDEV12("div", {
+  return /* @__PURE__ */ jsxDEV13("div", {
     class: Modal_module_default["backdrop"],
     "data-polly-modal-backdrop": true,
     onClick: close,
@@ -1526,7 +1543,7 @@ function Backdrop() {
 }
 function Content({ children, className, style }) {
   const cls = className ? `${Modal_module_default["surface"]} ${className}` : Modal_module_default["surface"];
-  return /* @__PURE__ */ jsxDEV12(Surface, {
+  return /* @__PURE__ */ jsxDEV13(Surface, {
     variant: "raised",
     radius: "lg",
     shadow: "lg",
@@ -1538,7 +1555,7 @@ function Content({ children, className, style }) {
   }, undefined, false, undefined, this);
 }
 function Header2({ children }) {
-  return /* @__PURE__ */ jsxDEV12("header", {
+  return /* @__PURE__ */ jsxDEV13("header", {
     class: Modal_module_default["header"],
     "data-polly-modal-header": true,
     children
@@ -1546,7 +1563,7 @@ function Header2({ children }) {
 }
 function Title({ children }) {
   const { titleId } = useModal();
-  return /* @__PURE__ */ jsxDEV12("h2", {
+  return /* @__PURE__ */ jsxDEV13("h2", {
     id: titleId,
     class: Modal_module_default["title"],
     "data-polly-modal-title": true,
@@ -1555,7 +1572,7 @@ function Title({ children }) {
 }
 function Body2({ children }) {
   const { descId } = useModal();
-  return /* @__PURE__ */ jsxDEV12("div", {
+  return /* @__PURE__ */ jsxDEV13("div", {
     id: descId,
     class: Modal_module_default["body"],
     "data-polly-modal-body": true,
@@ -1563,7 +1580,7 @@ function Body2({ children }) {
   }, undefined, false, undefined, this);
 }
 function Footer2({ children }) {
-  return /* @__PURE__ */ jsxDEV12("footer", {
+  return /* @__PURE__ */ jsxDEV13("footer", {
     class: Modal_module_default["footer"],
     "data-polly-modal-footer": true,
     children
@@ -1572,7 +1589,7 @@ function Footer2({ children }) {
 function Close({ children, action }) {
   const { close } = useModal();
   if (action) {
-    return /* @__PURE__ */ jsxDEV12("button", {
+    return /* @__PURE__ */ jsxDEV13("button", {
       type: "button",
       class: Modal_module_default["close"],
       "data-polly-ui": true,
@@ -1582,7 +1599,7 @@ function Close({ children, action }) {
       children
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV12("button", {
+  return /* @__PURE__ */ jsxDEV13("button", {
     type: "button",
     class: Modal_module_default["close"],
     "data-polly-ui": true,
@@ -1604,7 +1621,7 @@ var Modal = {
 };
 
 // src/polly-ui/ConfirmDialog.tsx
-import { jsxDEV as jsxDEV13 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV14 } from "preact/jsx-dev-runtime";
 var pending = signal2(null);
 var isOpen = signal2(false);
 var nextId = 0;
@@ -1635,30 +1652,30 @@ function Host() {
   const current = pending.value;
   if (!current)
     return null;
-  return /* @__PURE__ */ jsxDEV13(Modal.Root, {
+  return /* @__PURE__ */ jsxDEV14(Modal.Root, {
     when: isOpen,
     onClose: () => close(false),
     children: [
-      /* @__PURE__ */ jsxDEV13(Modal.Backdrop, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV13(Modal.Content, {
+      /* @__PURE__ */ jsxDEV14(Modal.Backdrop, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV14(Modal.Content, {
         children: [
-          /* @__PURE__ */ jsxDEV13(Modal.Header, {
-            children: /* @__PURE__ */ jsxDEV13(Modal.Title, {
+          /* @__PURE__ */ jsxDEV14(Modal.Header, {
+            children: /* @__PURE__ */ jsxDEV14(Modal.Title, {
               children: current.title
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          current.body ? /* @__PURE__ */ jsxDEV13(Modal.Body, {
+          current.body ? /* @__PURE__ */ jsxDEV14(Modal.Body, {
             children: current.body
           }, undefined, false, undefined, this) : null,
-          /* @__PURE__ */ jsxDEV13(Modal.Footer, {
-            children: /* @__PURE__ */ jsxDEV13(Layout, {
+          /* @__PURE__ */ jsxDEV14(Modal.Footer, {
+            children: /* @__PURE__ */ jsxDEV14(Layout, {
               columns: "auto auto",
               gap: "var(--polly-space-sm)",
               justifyContent: "end",
               className: ConfirmDialog_module_default["actions"],
               "data-polly-confirm-actions": true,
               children: [
-                /* @__PURE__ */ jsxDEV13("button", {
+                /* @__PURE__ */ jsxDEV14("button", {
                   type: "button",
                   class: ConfirmDialog_module_default["cancel"],
                   "data-polly-ui": true,
@@ -1667,7 +1684,7 @@ function Host() {
                   onClick: () => close(false),
                   children: current.cancelLabel ?? "Cancel"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV13("button", {
+                /* @__PURE__ */ jsxDEV14("button", {
                   type: "button",
                   class: current.danger ? ConfirmDialog_module_default["confirmDanger"] : ConfirmDialog_module_default["confirm"],
                   "data-polly-ui": true,
@@ -1693,7 +1710,7 @@ var FileInput_module_default = {
 };
 
 // src/polly-ui/FileInput.tsx
-import { jsxDEV as jsxDEV14 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV15 } from "preact/jsx-dev-runtime";
 function FileInput(props) {
   const { onFiles, label = "Choose file", accept, multiple, disabled, className, id } = props;
   const handleChange = (e) => {
@@ -1706,13 +1723,13 @@ function FileInput(props) {
     parts.push(FileInput_module_default["disabled"]);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV14("label", {
+  return /* @__PURE__ */ jsxDEV15("label", {
     id,
     class: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
     "data-polly-file-input": true,
     children: [
-      /* @__PURE__ */ jsxDEV14("input", {
+      /* @__PURE__ */ jsxDEV15("input", {
         type: "file",
         class: FileInput_module_default["native"],
         accept,
@@ -1720,7 +1737,7 @@ function FileInput(props) {
         disabled,
         onChange: handleChange
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV14("span", {
+      /* @__PURE__ */ jsxDEV15("span", {
         children: label
       }, undefined, false, undefined, this)
     ]
@@ -1746,7 +1763,7 @@ var Link_module_default = {
 };
 
 // src/polly-ui/Link.tsx
-import { jsxDEV as jsxDEV15 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV16 } from "preact/jsx-dev-runtime";
 function Link(props) {
   const { children, href, external, download, subtle, className, id } = props;
   const parts = [Link_module_default["link"]];
@@ -1754,7 +1771,7 @@ function Link(props) {
     parts.push(Link_module_default["subtle"]);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV15("a", {
+  return /* @__PURE__ */ jsxDEV16("a", {
     ...collectPassthrough(props),
     id,
     class: parts.filter(Boolean).join(" "),
@@ -1774,7 +1791,7 @@ var Output_module_default = {
 };
 
 // src/polly-ui/Output.tsx
-import { jsxDEV as jsxDEV16 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV17 } from "preact/jsx-dev-runtime";
 function Output(props) {
   const { children, scroll, tabIndex, className, id } = props;
   const parts = [Output_module_default["output"]];
@@ -1782,7 +1799,7 @@ function Output(props) {
     parts.push(Output_module_default["scroll"]);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV16("pre", {
+  return /* @__PURE__ */ jsxDEV17("pre", {
     ...collectPassthrough(props),
     id,
     class: parts.filter(Boolean).join(" "),
@@ -1794,7 +1811,7 @@ function Output(props) {
 }
 // src/polly-ui/Select.tsx
 import { useComputed, useSignal as useSignal2 } from "@preact/signals";
-import { jsxDEV as jsxDEV17 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV18 } from "preact/jsx-dev-runtime";
 var MULTI_SELECT_LABEL_THRESHOLD = 2;
 function formatSelected(options, selected, multiSelect) {
   if (selected.size === 0)
@@ -1857,38 +1874,23 @@ function Select(props) {
   if (wide)
     triggerParts.push(Select_module_default["triggerWide"] ?? "");
   const triggerClass = triggerParts.filter(Boolean).join(" ");
-  const triggerContent = /* @__PURE__ */ jsxDEV17(Layout, {
-    inline: true,
-    columns: "1fr auto",
-    gap: "var(--polly-space-sm)",
-    alignItems: "center",
-    maxInlineSize: "100%",
-    children: [
-      /* @__PURE__ */ jsxDEV17("span", {
-        class: Select_module_default["triggerLabel"],
-        "data-polly-select-label": true,
-        children: displayText.value
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV17("span", {
-        class: Select_module_default["caret"],
-        "aria-hidden": "true"
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+  const triggerContent = /* @__PURE__ */ jsxDEV18(SelectTrigger, {
+    label: displayText.value
+  }, undefined, false, undefined, this);
   const parts = [Select_module_default["select"] ?? ""];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV17("div", {
+  return /* @__PURE__ */ jsxDEV18("div", {
     id,
     class: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
     "data-polly-select": true,
     children: [
-      label !== undefined && /* @__PURE__ */ jsxDEV17("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV18("span", {
         class: Select_module_default["label"],
         children: label
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV17(Dropdown, {
+      /* @__PURE__ */ jsxDEV18(Dropdown, {
         isOpen,
         trigger: triggerContent,
         triggerClassName: triggerClass,
@@ -1896,19 +1898,19 @@ function Select(props) {
         triggerTitle: displayText.value,
         multiSelect,
         children: [
-          multiSelect && /* @__PURE__ */ jsxDEV17("div", {
+          multiSelect && /* @__PURE__ */ jsxDEV18("div", {
             class: Select_module_default["actions"],
-            children: /* @__PURE__ */ jsxDEV17(Layout, {
+            children: /* @__PURE__ */ jsxDEV18(Layout, {
               columns: "1fr 1fr",
               gap: "var(--polly-space-xs)",
               children: [
-                /* @__PURE__ */ jsxDEV17("button", {
+                /* @__PURE__ */ jsxDEV18("button", {
                   type: "button",
                   class: Select_module_default["actionBtn"],
                   onClick: handleSelectAll,
                   children: "Select All"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV17("button", {
+                /* @__PURE__ */ jsxDEV18("button", {
                   type: "button",
                   class: Select_module_default["actionBtn"],
                   onClick: handleClear,
@@ -1917,35 +1919,35 @@ function Select(props) {
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          !multiSelect && clearable && /* @__PURE__ */ jsxDEV17("button", {
+          !multiSelect && clearable && /* @__PURE__ */ jsxDEV18("button", {
             type: "button",
             role: "option",
             "aria-selected": isEmpty.value ? "true" : "false",
             class: isEmpty.value ? `${Select_module_default["option"]} ${Select_module_default["optionSelected"]}` : Select_module_default["option"],
             "data-polly-select-clear": true,
             onClick: handleClearOption,
-            children: /* @__PURE__ */ jsxDEV17("span", {
+            children: /* @__PURE__ */ jsxDEV18("span", {
               children: placeholder
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
           options.map((opt) => {
             const isSelected = selected.value.has(opt.value);
             const optClass = isSelected ? `${Select_module_default["option"]} ${Select_module_default["optionSelected"]}` : Select_module_default["option"];
-            return /* @__PURE__ */ jsxDEV17("button", {
+            return /* @__PURE__ */ jsxDEV18("button", {
               type: "button",
               role: "option",
               "aria-selected": isSelected ? "true" : "false",
               class: optClass,
               onClick: () => handleOptionClick(opt.value),
               children: [
-                multiSelect && /* @__PURE__ */ jsxDEV17("input", {
+                multiSelect && /* @__PURE__ */ jsxDEV18("input", {
                   type: "checkbox",
                   class: Select_module_default["optionCheck"],
                   checked: isSelected,
                   tabIndex: -1,
                   readOnly: true
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV17("span", {
+                /* @__PURE__ */ jsxDEV18("span", {
                   children: opt.label
                 }, undefined, false, undefined, this)
               ]
@@ -1965,7 +1967,7 @@ var Skeleton_module_default = {
 };
 
 // src/polly-ui/Skeleton.tsx
-import { jsxDEV as jsxDEV18 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV19 } from "preact/jsx-dev-runtime";
 function resolveSize(value) {
   if (value === undefined)
     return;
@@ -1998,7 +2000,7 @@ function Skeleton(props) {
     parts.push(vClass);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV18("span", {
+  return /* @__PURE__ */ jsxDEV19("span", {
     class: parts.join(" "),
     style,
     "data-polly-ui": true,
@@ -2014,19 +2016,19 @@ var Tabs_module_default = {
 };
 
 // src/polly-ui/Tabs.tsx
-import { jsxDEV as jsxDEV19 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV20 } from "preact/jsx-dev-runtime";
 function Tabs(props) {
   const { tabs, activeTab, action, className, id } = props;
   const parts = [Tabs_module_default["tabs"] ?? ""];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV19("nav", {
+  return /* @__PURE__ */ jsxDEV20("nav", {
     id,
     class: parts.filter(Boolean).join(" "),
     "aria-label": props["aria-label"],
     "data-polly-ui": true,
     "data-polly-tabs": true,
-    children: /* @__PURE__ */ jsxDEV19(Layout, {
+    children: /* @__PURE__ */ jsxDEV20(Layout, {
       columns: `repeat(${tabs.length}, auto)`,
       gap: "0",
       alignItems: "end",
@@ -2034,7 +2036,7 @@ function Tabs(props) {
       children: tabs.map((tab) => {
         const isActive = activeTab === tab.id;
         const tabClass = isActive ? `${Tabs_module_default["tab"]} ${Tabs_module_default["active"]}` : Tabs_module_default["tab"];
-        return /* @__PURE__ */ jsxDEV19("button", {
+        return /* @__PURE__ */ jsxDEV20("button", {
           type: "button",
           class: tabClass,
           disabled: tab.disabled,
@@ -2140,7 +2142,7 @@ var TextInput_module_default = {
 };
 
 // src/polly-ui/TextInput.tsx
-import { jsxDEV as jsxDEV20 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV21 } from "preact/jsx-dev-runtime";
 function isSignal2(v) {
   return typeof v === "object" && v !== null && "value" in v && "peek" in v;
 }
@@ -2168,7 +2170,7 @@ function TextInput(props) {
       props.value.value = e.currentTarget.value;
     }
   };
-  const control = variant === "multi" ? /* @__PURE__ */ jsxDEV20("textarea", {
+  const control = variant === "multi" ? /* @__PURE__ */ jsxDEV21("textarea", {
     ...a11y,
     class: className,
     title: props.title,
@@ -2178,7 +2180,7 @@ function TextInput(props) {
     value: stringValue,
     defaultValue,
     onInput
-  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV20("input", {
+  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV21("input", {
     ...a11y,
     type: props.inputType ?? "text",
     class: className,
@@ -2194,14 +2196,14 @@ function TextInput(props) {
   }, undefined, false, undefined, this);
   if (!hasError)
     return control;
-  return /* @__PURE__ */ jsxDEV20(Layout, {
+  return /* @__PURE__ */ jsxDEV21(Layout, {
     gap: "var(--polly-space-xs)",
     className: TextInput_module_default["field"],
     "data-polly-ui": true,
     "data-polly-field": true,
     children: [
       control,
-      /* @__PURE__ */ jsxDEV20("span", {
+      /* @__PURE__ */ jsxDEV21("span", {
         id: errorId,
         role: "alert",
         class: TextInput_module_default["error"],
@@ -2254,7 +2256,7 @@ var Toast_module_default = {
 };
 
 // src/polly-ui/Toast.tsx
-import { jsxDEV as jsxDEV21 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV22 } from "preact/jsx-dev-runtime";
 function Viewport(props) {
   const autoDismissMs = props.autoDismissMs ?? 5000;
   const [portalNode, setPortalNode] = useState3(null);
@@ -2276,14 +2278,14 @@ function Viewport(props) {
   }, [paused, entries, autoDismissMs]);
   if (!portalNode)
     return null;
-  const content = /* @__PURE__ */ jsxDEV21(Layout, {
+  const content = /* @__PURE__ */ jsxDEV22(Layout, {
     gap: "var(--polly-space-sm)",
     className: `${Toast_module_default["viewport"]} ${props.className ?? ""}`.trim(),
     "data-polly-ui": true,
     "data-polly-toast-viewport": true,
     onMouseEnter: () => setPaused(true),
     onMouseLeave: () => setPaused(false),
-    children: entries.map((entry) => /* @__PURE__ */ jsxDEV21(ToastItem, {
+    children: entries.map((entry) => /* @__PURE__ */ jsxDEV22(ToastItem, {
       entry
     }, entry.id, false, undefined, this))
   }, undefined, false, undefined, this);
@@ -2291,7 +2293,7 @@ function Viewport(props) {
 }
 function ToastItem({ entry }) {
   const liveness = entry.severity === "error" ? "assertive" : "polite";
-  return /* @__PURE__ */ jsxDEV21(Surface, {
+  return /* @__PURE__ */ jsxDEV22(Surface, {
     variant: "raised",
     padding: "var(--polly-space-md) var(--polly-space-lg)",
     className: Toast_module_default["item"],
@@ -2300,16 +2302,16 @@ function ToastItem({ entry }) {
     "data-severity": entry.severity,
     role: entry.severity === "error" ? "alert" : "status",
     "aria-live": liveness,
-    children: /* @__PURE__ */ jsxDEV21(Layout, {
+    children: /* @__PURE__ */ jsxDEV22(Layout, {
       columns: "1fr auto",
       gap: "var(--polly-space-md)",
       alignItems: "center",
       children: [
-        /* @__PURE__ */ jsxDEV21("span", {
+        /* @__PURE__ */ jsxDEV22("span", {
           class: Toast_module_default["message"],
           children: entry.message
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV21("button", {
+        /* @__PURE__ */ jsxDEV22("button", {
           type: "button",
           class: Toast_module_default["close"],
           "data-polly-ui": true,
@@ -2337,7 +2339,7 @@ var Toggle_module_default = {
 };
 
 // src/polly-ui/Toggle.tsx
-import { jsxDEV as jsxDEV22 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV23 } from "preact/jsx-dev-runtime";
 function Toggle(props) {
   const { checked = false, disabled = false, label, name, className, id } = props;
   const parts = [Toggle_module_default["toggle"]];
@@ -2345,7 +2347,7 @@ function Toggle(props) {
     parts.push(Toggle_module_default["disabled"]);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV22(Layout, {
+  return /* @__PURE__ */ jsxDEV23(Layout, {
     as: "label",
     inline: true,
     columns: "auto auto",
@@ -2355,7 +2357,7 @@ function Toggle(props) {
     "data-polly-ui": true,
     "data-polly-toggle": true,
     children: [
-      /* @__PURE__ */ jsxDEV22("input", {
+      /* @__PURE__ */ jsxDEV23("input", {
         id,
         type: "checkbox",
         role: "switch",
@@ -2365,13 +2367,13 @@ function Toggle(props) {
         checked,
         disabled
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV22("span", {
+      /* @__PURE__ */ jsxDEV23("span", {
         class: checked ? `${Toggle_module_default["track"]} ${Toggle_module_default["trackChecked"]}` : Toggle_module_default["track"],
-        children: /* @__PURE__ */ jsxDEV22("span", {
+        children: /* @__PURE__ */ jsxDEV23("span", {
           class: checked ? `${Toggle_module_default["thumb"]} ${Toggle_module_default["thumbChecked"]}` : Toggle_module_default["thumb"]
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      label !== undefined && /* @__PURE__ */ jsxDEV22("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV23("span", {
         class: Toggle_module_default["label"],
         children: label
       }, undefined, false, undefined, this)
@@ -2410,4 +2412,4 @@ export {
   getOverlayRootNode
 };
 
-//# debugId=E3BB994F404F3CB764756E2164756E21
+//# debugId=EE704C83CAA1B4AA64756E2164756E21