@fairfox/polly 0.88.1 → 0.89.1

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

@@ -1,76 +1,3 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  if (mod && typeof mod === "object" || typeof mod === "function") {
-    for (let key of __getOwnPropNames(mod))
-      if (!__hasOwnProp.call(to, key))
-        __defProp(to, key, {
-          get: __accessProp.bind(mod, key),
-          enumerable: true
-        });
-  }
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
 // src/polly-ui/ActionForm.module.css
 var ActionForm_module_default = {
   form: "form_oqTahQ"
@@ -321,6 +248,10 @@ function Layout(props) {
     className,
     onClick,
     onKeyDown,
+    onKeyUp,
+    onMouseEnter,
+    onMouseLeave,
+    elementRef,
     role,
     tabIndex,
     id
@@ -385,6 +316,10 @@ function Layout(props) {
     style,
     onClick,
     onKeyDown,
+    onKeyUp,
+    onMouseEnter,
+    onMouseLeave,
+    ref: elementRef,
     role,
     tabIndex,
     "aria-label": props["aria-label"],
@@ -435,11 +370,11 @@ function Dropdown(props) {
   }, [popoverId, isOpen]);
   useEffect2(() => {
     const menu = menuRef.current;
-    const trigger2 = triggerRef.current;
-    if (!menu || !trigger2)
+    const trigger = triggerRef.current;
+    if (!menu || !trigger)
       return;
     const positionMenu = () => {
-      const t = trigger2.getBoundingClientRect();
+      const t = trigger.getBoundingClientRect();
       const prevDisplay = menu.style.display;
       menu.style.maxHeight = "";
       menu.style.display = "block";
@@ -448,7 +383,7 @@ function Dropdown(props) {
       menu.style.display = prevDisplay;
       const viewportWidth = document.documentElement.clientWidth;
       const viewportHeight = document.documentElement.clientHeight;
-      const isRtl = getComputedStyle(trigger2).direction === "rtl" || document.documentElement.dir === "rtl";
+      const isRtl = getComputedStyle(trigger).direction === "rtl" || document.documentElement.dir === "rtl";
       const physicalRight = isRtl && align === "left" || align === "right";
       let left = physicalRight ? t.right - menuWidth : t.left;
       const maxLeft = Math.max(VIEWPORT_PADDING, viewportWidth - menuWidth - VIEWPORT_PADDING);
@@ -570,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)
@@ -611,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(" "),
@@ -619,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);
@@ -675,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"];
@@ -695,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(" "),
@@ -718,13 +670,14 @@ var Button_module_default = {
   btnLarge: "btnLarge_c4HKfA",
   btnCircle: "btnCircle_c4HKfA",
   btnFullWidth: "btnFullWidth_c4HKfA",
+  btnFlush: "btnFlush_c4HKfA",
   btnBounded: "btnBounded_c4HKfA",
   icon: "icon_c4HKfA",
   label: "label_c4HKfA"
 };
 
 // src/polly-ui/Button.tsx
-import { jsxDEV as jsxDEV6, Fragment as Fragment2 } 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"];
@@ -760,6 +713,7 @@ function Button(props) {
     fullWidth = false,
     circle = false,
     bounded = false,
+    flush = false,
     className,
     title,
     icon,
@@ -781,16 +735,22 @@ function Button(props) {
     parts.push(Button_module_default["btnFullWidth"] ?? "");
   if (bounded)
     parts.push(Button_module_default["btnBounded"] ?? "");
+  if (flush)
+    parts.push(Button_module_default["btnFlush"] ?? "");
   if (className)
     parts.push(className);
   const buttonClass = parts.filter(Boolean).join(" ");
-  const content = /* @__PURE__ */ jsxDEV6(Fragment2, {
+  const content = icon === undefined ? label : /* @__PURE__ */ jsxDEV7(Layout, {
+    inline: true,
+    columns: "auto auto",
+    gap: "var(--polly-space-sm)",
+    alignItems: "center",
     children: [
-      icon !== undefined && /* @__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)
@@ -809,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,
@@ -827,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,
@@ -871,6 +831,7 @@ var variantDefaults = {
     border: "default"
   },
   bubble: {
+    background: "var(--polly-surface-bubble)",
     radius: "md",
     border: "default",
     padding: "var(--polly-space-sm) var(--polly-space-md)"
@@ -1054,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,
@@ -1072,7 +1033,7 @@ function Header(props) {
     borderSides = "block-end",
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxDEV7(Surface, {
+  return /* @__PURE__ */ jsxDEV8(Surface, {
     padding,
     border,
     borderSides,
@@ -1083,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,
@@ -1097,7 +1058,7 @@ function Footer(props) {
     borderSides = "block-start",
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxDEV7(Surface, {
+  return /* @__PURE__ */ jsxDEV8(Surface, {
     padding,
     border,
     borderSides,
@@ -1116,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;
 }
@@ -1133,12 +1094,17 @@ function Checkbox(props) {
     parts.push(Checkbox_module_default["disabled"] ?? "");
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV8("label", {
-    class: parts.filter(Boolean).join(" "),
+  return /* @__PURE__ */ jsxDEV9(Layout, {
+    as: "label",
+    inline: true,
+    columns: "auto auto",
+    gap: "var(--polly-space-sm)",
+    alignItems: "center",
+    className: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
     "data-polly-checkbox": true,
     children: [
-      /* @__PURE__ */ jsxDEV8("input", {
+      /* @__PURE__ */ jsxDEV9("input", {
         id,
         type: "checkbox",
         class: Checkbox_module_default["input"],
@@ -1148,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)
@@ -1199,21 +1165,21 @@ 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);
   if (block) {
-    const parts2 = [Code_module_default["block"]];
+    const parts = [Code_module_default["block"]];
     if (className)
-      parts2.push(className);
-    return /* @__PURE__ */ jsxDEV9("pre", {
+      parts.push(className);
+    return /* @__PURE__ */ jsxDEV10("pre", {
       ...passthrough,
       id,
-      class: parts2.filter(Boolean).join(" "),
+      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);
@@ -1221,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(" "),
@@ -1234,11 +1200,13 @@ function Code(props) {
 var Collapsible_module_default = {
   collapsible: "collapsible_sEhnPw",
   summary: "summary_sEhnPw",
+  marker: "marker_sEhnPw",
+  summaryContent: "summaryContent_sEhnPw",
   content: "content_sEhnPw"
 };
 
 // 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",
@@ -1274,19 +1242,32 @@ 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("summary", {
-        class: Collapsible_module_default["summary"],
+      /* @__PURE__ */ jsxDEV11(Layout, {
+        as: "summary",
+        columns: "auto 1fr",
+        gap: "var(--polly-space-sm)",
+        alignItems: "center",
+        className: Collapsible_module_default["summary"],
         onKeyUp: handleSummaryKeyUp,
-        children: summary
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV10("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV11("span", {
+            class: Collapsible_module_default["marker"],
+            "aria-hidden": "true"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("span", {
+            class: Collapsible_module_default["summaryContent"],
+            children: summary
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
         class: Collapsible_module_default["content"],
         children
       }, undefined, false, undefined, this)
@@ -1456,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(() => {
@@ -1475,7 +1456,7 @@ function OverlayRoot() {
       release?.();
     };
   }, []);
-  return /* @__PURE__ */ jsxDEV11("div", {
+  return /* @__PURE__ */ jsxDEV12("div", {
     ref,
     class: OverlayRoot_module_default["root"],
     "data-polly-ui": true,
@@ -1487,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);
@@ -1529,11 +1510,14 @@ 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("div", {
-      ref: mountRef,
-      class: Modal_module_default["container"],
+    children: /* @__PURE__ */ jsxDEV13(Layout, {
+      elementRef: mountRef,
+      alignItems: "center",
+      justifyItems: "center",
+      height: "100%",
+      className: Modal_module_default["container"],
       "data-polly-ui": true,
       "data-polly-modal-content": true,
       "data-overlay-id": id,
@@ -1550,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,
@@ -1559,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",
@@ -1571,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
@@ -1579,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,
@@ -1588,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,
@@ -1596,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
@@ -1605,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,
@@ -1615,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,
@@ -1637,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;
@@ -1668,27 +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("div", {
-              class: ConfirmDialog_module_default["actions"],
+          /* @__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,
@@ -1697,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,
@@ -1723,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) => {
@@ -1736,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,
@@ -1750,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)
     ]
@@ -1776,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"]];
@@ -1784,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(" "),
@@ -1804,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"]];
@@ -1812,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(" "),
@@ -1824,7 +1811,7 @@ function Output(props) {
 }
 // src/polly-ui/Select.tsx
 import { useComputed, useSignal as useSignal2 } from "@preact/signals";
-import { jsxDEV as jsxDEV17, Fragment as Fragment3 } 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)
@@ -1852,7 +1839,7 @@ function Select(props) {
     className,
     id
   } = props;
-  const isOpen2 = useSignal2(false);
+  const isOpen = useSignal2(false);
   const displayText = useComputed(() => {
     const text = formatSelected(options, selected.value, multiSelect);
     return text.length > 0 ? text : placeholder;
@@ -1868,7 +1855,7 @@ function Select(props) {
       selected.value = next;
     } else {
       selected.value = new Set([value]);
-      isOpen2.value = false;
+      isOpen.value = false;
     }
   };
   const handleSelectAll = () => {
@@ -1879,7 +1866,7 @@ function Select(props) {
   };
   const handleClearOption = () => {
     selected.value = new Set;
-    isOpen2.value = false;
+    isOpen.value = false;
   };
   const triggerParts = [Select_module_default["trigger"] ?? ""];
   if (isEmpty.value)
@@ -1887,52 +1874,43 @@ function Select(props) {
   if (wide)
     triggerParts.push(Select_module_default["triggerWide"] ?? "");
   const triggerClass = triggerParts.filter(Boolean).join(" ");
-  const triggerContent = /* @__PURE__ */ jsxDEV17(Fragment3, {
-    children: [
-      /* @__PURE__ */ jsxDEV17("span", {
-        class: Select_module_default["triggerLabel"],
-        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, {
-        isOpen: isOpen2,
+      /* @__PURE__ */ jsxDEV18(Dropdown, {
+        isOpen,
         trigger: triggerContent,
         triggerClassName: triggerClass,
         triggerDisabled: disabled,
         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,
@@ -1941,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)
               ]
@@ -1989,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;
@@ -2022,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,
@@ -2038,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",
@@ -2058,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,
@@ -2164,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;
 }
@@ -2192,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,
@@ -2202,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,
@@ -2218,13 +2196,14 @@ function TextInput(props) {
   }, undefined, false, undefined, this);
   if (!hasError)
     return control;
-  return /* @__PURE__ */ jsxDEV20("div", {
-    class: TextInput_module_default["field"],
+  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"],
@@ -2277,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);
@@ -2299,13 +2278,14 @@ function Viewport(props) {
   }, [paused, entries, autoDismissMs]);
   if (!portalNode)
     return null;
-  const content = /* @__PURE__ */ jsxDEV21("div", {
-    class: `${Toast_module_default["viewport"]} ${props.className ?? ""}`.trim(),
+  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);
@@ -2313,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"],
@@ -2322,23 +2302,28 @@ function ToastItem({ entry }) {
     "data-severity": entry.severity,
     role: entry.severity === "error" ? "alert" : "status",
     "aria-live": liveness,
-    children: [
-      /* @__PURE__ */ jsxDEV21("span", {
-        class: Toast_module_default["message"],
-        children: entry.message
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV21("button", {
-        type: "button",
-        class: Toast_module_default["close"],
-        "data-polly-ui": true,
-        "data-polly-interactive": true,
-        "data-polly-toast-close": true,
-        onClick: () => clearError(entry.id),
-        "aria-label": "Dismiss",
-        children: "×"
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+    children: /* @__PURE__ */ jsxDEV22(Layout, {
+      columns: "1fr auto",
+      gap: "var(--polly-space-md)",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ jsxDEV22("span", {
+          class: Toast_module_default["message"],
+          children: entry.message
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV22("button", {
+          type: "button",
+          class: Toast_module_default["close"],
+          "data-polly-ui": true,
+          "data-polly-interactive": true,
+          "data-polly-toast-close": true,
+          onClick: () => clearError(entry.id),
+          "aria-label": "Dismiss",
+          children: "×"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 var Toast = { Viewport };
 // src/polly-ui/Toggle.module.css
@@ -2354,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"]];
@@ -2362,12 +2347,17 @@ function Toggle(props) {
     parts.push(Toggle_module_default["disabled"]);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV22("label", {
-    class: parts.join(" "),
+  return /* @__PURE__ */ jsxDEV23(Layout, {
+    as: "label",
+    inline: true,
+    columns: "auto auto",
+    gap: "var(--polly-space-sm)",
+    alignItems: "center",
+    className: parts.join(" "),
     "data-polly-ui": true,
     "data-polly-toggle": true,
     children: [
-      /* @__PURE__ */ jsxDEV22("input", {
+      /* @__PURE__ */ jsxDEV23("input", {
         id,
         type: "checkbox",
         role: "switch",
@@ -2377,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)
@@ -2422,4 +2412,4 @@ export {
   getOverlayRootNode
 };
 
-//# debugId=658A56B7B40F7FD364756E2164756E21
+//# debugId=EE704C83CAA1B4AA64756E2164756E21