@fairfox/polly 0.73.1 → 0.74.1

package/dist/src/polly-ui/ActionSelect.d.ts

@@ -9,9 +9,11 @@
  * <ActionInput> and <ActionForm>, with no synthetic signal or bridging
  * `effect` required.
  *
- * Composes <Dropdown> for the menu. The trigger is a plain <span> (not a
- * nested <button>) so the Dropdown's own button is the single
- * interactive element. A disabled ActionSelect renders as static text.
+ * Composes <Dropdown> for the menu. The trigger styling is applied
+ * directly to Dropdown's own <button> via `triggerClassName`, so the
+ * visible box and the interactive element are one and the same node —
+ * no styled <span> nested inside an unstyled <button>. A disabled
+ * ActionSelect renders as static text without a caret.
  */
 import type { JSX } from "preact";
 import { type PassthroughAttrs } from "./internal/passthrough.ts";
@@ -30,6 +32,8 @@ export type ActionSelectProps = PassthroughAttrs & {
     /** Trigger text shown when `value` matches no option. Default: "Select…". */
     placeholder?: string;
     disabled?: boolean;
+    /** Apply a comfortable minimum width to the trigger. Default: sizes to content. */
+    wide?: boolean;
     className?: string;
     id?: string;
 };

package/dist/src/polly-ui/Dropdown.d.ts

@@ -24,6 +24,15 @@ export type DropdownProps = {
     align?: "left" | "right";
     multiSelect?: boolean;
     className?: string;
+    /**
+     * Class applied to the trigger <button> in place of Dropdown's own
+     * default. Lets a composing component (Select, ActionSelect) style
+     * the single interactive element directly, with no styled node
+     * nested inside the button.
+     */
+    triggerClassName?: string;
+    /** Disables the trigger <button>. */
+    triggerDisabled?: boolean;
     id?: string;
 };
 export declare function Dropdown(props: DropdownProps): JSX.Element;

package/dist/src/polly-ui/Select.d.ts

@@ -20,6 +20,8 @@ export type SelectProps<T = string> = {
     placeholder?: string;
     multiSelect?: boolean;
     disabled?: boolean;
+    /** Apply a comfortable minimum width to the trigger. Default: sizes to content. */
+    wide?: boolean;
     className?: string;
     id?: string;
 };

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

@@ -156,7 +156,9 @@
   }
 
   .trigger_daofbw {
-    display: inline-block;
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--polly-space-sm);
     padding: var(--polly-space-sm) var(--polly-space-md);
     border: var(--polly-border-width-default) solid var(--polly-border);
     border-radius: var(--polly-radius-sm);
@@ -166,15 +168,37 @@
     color: var(--polly-text);
     text-align: left;
     cursor: pointer;
+    max-width: 100%;
+  }
+
+  .trigger_daofbw:disabled, .trigger_daofbw[aria-disabled="true"] {
+    opacity: var(--polly-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .triggerWide_daofbw {
+    min-width: 140px;
+  }
+
+  .triggerLabel_daofbw {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    min-width: 140px;
+    flex: auto;
+    min-width: 0;
   }
 
-  .trigger_daofbw:disabled {
-    opacity: var(--polly-opacity-disabled);
-    cursor: not-allowed;
+  .caret_daofbw {
+    color: var(--polly-text-muted);
+    pointer-events: none;
+    flex: none;
+  }
+
+  .caret_daofbw:before {
+    content: "▾";
+    display: block;
+    font-size: var(--polly-text-xs);
+    line-height: 1;
   }
 
   .placeholder_daofbw {

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

@@ -394,7 +394,17 @@ var dropdownCounter = 0;
 var MENU_GAP = 4;
 var VIEWPORT_PADDING = 8;
 function Dropdown(props) {
-  const { isOpen, trigger, children, align = "left", multiSelect = false, className, id } = props;
+  const {
+    isOpen,
+    trigger,
+    children,
+    align = "left",
+    multiSelect = false,
+    className,
+    triggerClassName,
+    triggerDisabled = false,
+    id
+  } = props;
   const menuRef = useRef2(null);
   const triggerRef = useRef2(null);
   const idRef = useRef2(`polly-dropdown-${++dropdownCounter}`);
@@ -507,7 +517,8 @@ function Dropdown(props) {
       /* @__PURE__ */ jsxDEV3("button", {
         ref: triggerRef,
         type: "button",
-        class: Dropdown_module_default["trigger"],
+        class: triggerClassName ?? Dropdown_module_default["trigger"] ?? "",
+        disabled: triggerDisabled,
         children: trigger
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV3("div", {
@@ -536,6 +547,9 @@ var Select_module_default = {
   select: "select_daofbw",
   label: "label_daofbw",
   trigger: "trigger_daofbw",
+  triggerWide: "triggerWide_daofbw",
+  triggerLabel: "triggerLabel_daofbw",
+  caret: "caret_daofbw",
   placeholder: "placeholder_daofbw",
   actions: "actions_daofbw",
   actionBtn: "actionBtn_daofbw",
@@ -545,7 +559,7 @@ var Select_module_default = {
 };
 
 // src/polly-ui/ActionSelect.tsx
-import { jsxDEV as jsxDEV4 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV4, Fragment } from "preact/jsx-dev-runtime";
 function labelFor(options, value) {
   for (const opt of options) {
     if (opt.value === value)
@@ -562,6 +576,7 @@ function ActionSelect(props) {
     label,
     placeholder = "Select…",
     disabled = false,
+    wide = false,
     className,
     id
   } = props;
@@ -575,7 +590,12 @@ function ActionSelect(props) {
       return;
     dispatchAction(action, { ...actionData ?? {}, value: next });
   };
-  const triggerClass = isEmpty ? `${Select_module_default["trigger"]} ${Select_module_default["placeholder"]}` : Select_module_default["trigger"];
+  const triggerParts = [Select_module_default["trigger"] ?? ""];
+  if (isEmpty)
+    triggerParts.push(Select_module_default["placeholder"] ?? "");
+  if (wide)
+    triggerParts.push(Select_module_default["triggerWide"] ?? "");
+  const triggerClass = triggerParts.filter(Boolean).join(" ");
   const parts = [Select_module_default["select"] ?? ""];
   if (className)
     parts.push(className);
@@ -594,13 +614,25 @@ function ActionSelect(props) {
       disabled ? /* @__PURE__ */ jsxDEV4("span", {
         class: triggerClass,
         "aria-disabled": "true",
-        children: displayText
+        children: /* @__PURE__ */ jsxDEV4("span", {
+          class: Select_module_default["triggerLabel"],
+          children: displayText
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4(Dropdown, {
         isOpen,
-        trigger: /* @__PURE__ */ jsxDEV4("span", {
-          class: triggerClass,
-          children: displayText
-        }, undefined, false, undefined, this),
+        triggerClassName: triggerClass,
+        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),
         children: options.map((opt) => {
           const isSelected = opt.value === value;
           const optClass = isSelected ? `${Select_module_default["option"]} ${Select_module_default["optionSelected"]}` : Select_module_default["option"];
@@ -1624,7 +1656,7 @@ function Host() {
 var ConfirmDialog = { Host, confirm };
 // src/polly-ui/Select.tsx
 import { useComputed, useSignal as useSignal2 } from "@preact/signals";
-import { jsxDEV as jsxDEV14 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV14, Fragment as Fragment2 } from "preact/jsx-dev-runtime";
 function formatSelected(options, selected) {
   if (selected.size === 0)
     return "";
@@ -1643,6 +1675,7 @@ function Select(props) {
     placeholder = "Select…",
     multiSelect = false,
     disabled = false,
+    wide = false,
     className,
     id
   } = props;
@@ -1671,13 +1704,24 @@ function Select(props) {
   const handleClear = () => {
     selected.value = new Set;
   };
-  const triggerClass = isEmpty.value ? `${Select_module_default["trigger"]} ${Select_module_default["placeholder"]}` : Select_module_default["trigger"];
-  const triggerButton = /* @__PURE__ */ jsxDEV14("button", {
-    type: "button",
-    class: triggerClass,
-    disabled,
-    children: displayText.value
-  }, undefined, false, undefined, this);
+  const triggerParts = [Select_module_default["trigger"] ?? ""];
+  if (isEmpty.value)
+    triggerParts.push(Select_module_default["placeholder"] ?? "");
+  if (wide)
+    triggerParts.push(Select_module_default["triggerWide"] ?? "");
+  const triggerClass = triggerParts.filter(Boolean).join(" ");
+  const triggerContent = /* @__PURE__ */ jsxDEV14(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxDEV14("span", {
+        class: Select_module_default["triggerLabel"],
+        children: displayText.value
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV14("span", {
+        class: Select_module_default["caret"],
+        "aria-hidden": "true"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
   const parts = [Select_module_default["select"] ?? ""];
   if (className)
     parts.push(className);
@@ -1693,7 +1737,9 @@ function Select(props) {
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV14(Dropdown, {
         isOpen: isOpen2,
-        trigger: triggerButton,
+        trigger: triggerContent,
+        triggerClassName: triggerClass,
+        triggerDisabled: disabled,
         multiSelect,
         children: [
           multiSelect && /* @__PURE__ */ jsxDEV14("div", {
@@ -2153,4 +2199,4 @@ export {
   ActionForm
 };
 
-//# debugId=1CBD05449C07223E64756E2164756E21
+//# debugId=D646BF0B09E9BEC064756E2164756E21