@fairfox/polly 0.77.3 → 0.79.0

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

@@ -5,6 +5,9 @@
  * from the `--polly-status-*` token family. The default variant uses
  * surface-sunken + muted text for a neutral pill. Consumers style
  * placement via className; the primitive owns size, shape, and colour.
+ *
+ * A badge is often an abbreviated or iconic status ("3", "●"); pass
+ * `title` to attach an explanatory hover tooltip ("3 peers connected").
  */
 import type { ComponentChildren, JSX } from "preact";
 export type BadgeVariant = "default" | "info" | "success" | "warning" | "danger";
@@ -13,5 +16,7 @@ export type BadgeProps = {
     variant?: BadgeVariant;
     className?: string;
     id?: string;
+    /** Native hover tooltip — explains an abbreviated or iconic badge. */
+    title?: string;
 };
 export declare function Badge(props: BadgeProps): JSX.Element;

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

@@ -7,9 +7,18 @@
  * size picks the padding + font scale (small/normal/large). Icon +
  * label are arranged with a nested inline <Layout>.
  *
+ * A text `label` is the accessible name. An icon-only button (icon, no
+ * label) has none, so the type REQUIRES `aria-label` there — an unnamed
+ * icon button won't compile. No build-time lint needed; the call site
+ * itself is the gate.
+ *
  * Action wiring is declared via data-* attributes consumed by the
  * global event delegator in @fairfox/polly/actions — Button does not
  * accept an onClick prop.
+ *
+ * Every button surfaces a native hover tooltip: an explicit `title`
+ * wins, else the visible text label, else the `aria-label` (so an
+ * icon-only button still gets one). Pass `title=""` to suppress it.
  */
 import type { ComponentChildren, JSX, VNode } from "preact";
 export type ButtonTier = "primary" | "secondary" | "tertiary";
@@ -29,10 +38,7 @@ type BaseButtonProps = {
     bounded?: boolean;
     className?: string;
     title?: string;
-    icon?: VNode;
-    label: ComponentChildren;
     "data-action"?: string;
-    "aria-label"?: string;
     /** Additional action-payload attributes the event delegator parses
      * into `ctx.data`. `data-action-tid="t-17"` becomes `{ tid: "t-17" }`,
      * `data-action-item-id="…"` becomes `{ itemId: "…" }`, and so on.
@@ -40,14 +46,33 @@ type BaseButtonProps = {
      * consumer cares about type-checks without a Button-side enumeration. */
     [actionDataAttr: `data-action-${string}`]: string | undefined;
 };
-type ButtonAsButton = BaseButtonProps & {
+/**
+ * Content/accessibility dimension. A visible text `label` is the
+ * accessible name, so it makes `aria-label` optional. An icon-only
+ * button has no text to name it, so `aria-label` is REQUIRED — you
+ * cannot construct an unnamed icon button. (Button's hover title then
+ * falls back to that aria-label, so the same prop gives both the
+ * accessible name and the tooltip.)
+ */
+type LabelledContent = {
+    label: ComponentChildren;
+    icon?: VNode;
+    "aria-label"?: string;
+};
+type IconOnlyContent = {
+    icon: VNode;
+    label?: never;
+    "aria-label": string;
+};
+type ButtonContent = LabelledContent | IconOnlyContent;
+type ButtonElement = {
     href?: never;
     target?: never;
     rel?: never;
     download?: never;
     type?: "button" | "submit" | "reset";
 };
-type ButtonAsLink = BaseButtonProps & {
+type LinkElement = {
     href: string;
     target?: string;
     rel?: string;
@@ -56,6 +81,6 @@ type ButtonAsLink = BaseButtonProps & {
     download?: string;
     type?: never;
 };
-export type ButtonProps = ButtonAsButton | ButtonAsLink;
+export type ButtonProps = BaseButtonProps & ButtonContent & (ButtonElement | LinkElement);
 export declare function Button(props: ButtonProps): JSX.Element;
 export {};

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

@@ -35,6 +35,12 @@ export type DropdownProps = {
     triggerClassName?: string;
     /** Disables the trigger <button>. */
     triggerDisabled?: boolean;
+    /**
+     * Native hover tooltip on the trigger <button>. Select/ActionSelect
+     * pass the current selection so a truncated trigger still reveals its
+     * full value on hover.
+     */
+    triggerTitle?: string;
     id?: string;
 };
 export declare function Dropdown(props: DropdownProps): JSX.Element;

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

@@ -5,7 +5,9 @@
  * row for multi-select. The `selected` state is a Signal<Set<T>>;
  * single-select replaces the set, multi-select toggles membership.
  * Multi-select mode also shows Select All / Clear action buttons at
- * the top of the menu.
+ * the top of the menu. Single-select mode can opt into `clearable`,
+ * which prepends a placeholder-labelled option that returns the
+ * selection to empty — for "Any …" filter semantics.
  */
 import { type Signal } from "@preact/signals";
 import type { JSX } from "preact";
@@ -19,6 +21,14 @@ export type SelectProps<T = string> = {
     label?: string;
     placeholder?: string;
     multiSelect?: boolean;
+    /**
+     * Single-select only: prepend an option labelled with the placeholder
+     * that returns the selection to empty. Without it, picking an option
+     * is a trap — nothing in the list leads back to "any". Use it for
+     * optional filters ("Any stage"), not required form fields
+     * ("Select a team"). Ignored in multi-select, which has Clear.
+     */
+    clearable?: boolean;
     disabled?: boolean;
     /** Apply a comfortable minimum width to the trigger. Default: sizes to content. */
     wide?: boolean;

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

@@ -7,17 +7,47 @@
  * wired by the shared input-base, the stable `[data-polly-input]` hook
  * is applied for styling, and `invalid` flips `aria-invalid` and
  * `data-state="invalid"` for consumer selectors.
+ *
+ * `inputType` sets the native single-line input type — "text" (default),
+ * "email", "number", "date", and friends — so the browser supplies the
+ * right keyboard and validation. `min`/`max`/`step` apply to the
+ * single-line variant (e.g. numeric or date bounds) and keep filter
+ * fields from being unvalidated free text.
+ *
+ * `error`, when supplied, renders a message beneath the field, wraps the
+ * control in a labelled group, and auto-wires `aria-describedby` plus the
+ * invalid state — no manual id juggling. Without `error` the primitive
+ * stays a bare native element, exactly as before, so consumers that own
+ * their own surrounding structure are unaffected.
  */
 import type { Signal } from "@preact/signals";
 import type { JSX } from "preact";
 type Variant = "single" | "multi";
+/** Native single-line input types polly's filter/form fields use. */
+export type TextInputType = "text" | "email" | "url" | "tel" | "search" | "password" | "number" | "date" | "datetime-local" | "time" | "month" | "week";
 export type TextInputProps = {
     name: string;
     /** Signal<string> for controlled, string for uncontrolled default. */
     value?: Signal<string> | string;
     variant?: Variant;
+    /** Native input type for the single-line variant. Default: "text". */
+    inputType?: TextInputType;
+    /** Lower bound for the single-line variant (number/date types). */
+    min?: number | string;
+    /** Upper bound for the single-line variant (number/date types). */
+    max?: number | string;
+    /** Step granularity for the single-line variant (number/date types). */
+    step?: number | string;
     placeholder?: string;
+    /** Native hover tooltip — a hint beyond the placeholder/label. */
+    title?: string;
     invalid?: boolean;
+    /**
+     * Validation message rendered beneath the field. When present the
+     * primitive wraps the control, links the message via aria-describedby,
+     * and marks the field invalid. Omit it to keep a bare native element.
+     */
+    error?: string;
     required?: boolean;
     disabled?: boolean;
     readOnly?: boolean;

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

@@ -1033,6 +1033,16 @@
     resize: vertical;
     max-block-size: 40em;
   }
+
+  .field_ez4_Vg {
+    display: grid;
+    gap: var(--polly-space-xs);
+  }
+
+  .error_ez4_Vg {
+    font-size: var(--polly-text-sm);
+    color: var(--polly-danger);
+  }
 }
 
 /* src/polly-ui/Toast.module.css */

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

@@ -407,6 +407,7 @@ function Dropdown(props) {
     className,
     triggerClassName,
     triggerDisabled = false,
+    triggerTitle,
     id
   } = props;
   const menuRef = useRef2(null);
@@ -469,7 +470,7 @@ function Dropdown(props) {
       menu.style.top = `${top}px`;
     };
     const onBeforeToggle = (e) => {
-      if (e.newState === "open") {
+      if ("newState" in e && e.newState === "open") {
         positionMenu();
       }
     };
@@ -525,6 +526,7 @@ function Dropdown(props) {
         type: "button",
         class: triggerClassName ?? Dropdown_module_default["trigger"] ?? "",
         disabled: triggerDisabled,
+        title: triggerTitle,
         "data-open": isOpen.value ? "true" : "false",
         children: trigger
       }, undefined, false, undefined, this),
@@ -532,6 +534,7 @@ function Dropdown(props) {
         ref: menuRef,
         id: popoverId,
         role: "listbox",
+        "aria-multiselectable": multiSelect ? "true" : undefined,
         class: Dropdown_module_default["menu"] ?? "",
         "data-align": align,
         popover: "auto",
@@ -621,6 +624,7 @@ function ActionSelect(props) {
       disabled ? /* @__PURE__ */ jsxDEV4("span", {
         class: triggerClass,
         "aria-disabled": "true",
+        title: displayText,
         children: /* @__PURE__ */ jsxDEV4("span", {
           class: Select_module_default["triggerLabel"],
           children: displayText
@@ -628,6 +632,7 @@ function ActionSelect(props) {
       }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4(Dropdown, {
         isOpen,
         triggerClassName: triggerClass,
+        triggerTitle: displayText,
         trigger: /* @__PURE__ */ jsxDEV4(Fragment, {
           children: [
             /* @__PURE__ */ jsxDEV4("span", {
@@ -681,7 +686,7 @@ function variantClass(variant) {
   return;
 }
 function Badge(props) {
-  const { children, variant = "default", className, id } = props;
+  const { children, variant = "default", className, id, title } = props;
   const parts = [Badge_module_default["badge"]];
   const v = variantClass(variant);
   if (v)
@@ -690,6 +695,7 @@ function Badge(props) {
     parts.push(className);
   return /* @__PURE__ */ jsxDEV5("span", {
     id,
+    title,
     class: parts.join(" "),
     "data-polly-ui": true,
     "data-polly-badge": variant,
@@ -781,13 +787,14 @@ function Button(props) {
     alignItems: "center",
     children: [
       icon,
-      /* @__PURE__ */ jsxDEV6("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV6("span", {
         children: label
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this) : label;
   const dataAction = props["data-action"];
   const ariaLabel = props["aria-label"];
+  const resolvedTitle = title ?? (typeof label === "string" && label.length > 0 ? label : typeof ariaLabel === "string" ? ariaLabel : undefined);
   const actionDataAttrs = {};
   for (const key of Object.keys(props)) {
     if (key.startsWith("data-action-")) {
@@ -801,7 +808,7 @@ function Button(props) {
     return /* @__PURE__ */ jsxDEV6("a", {
       id,
       class: buttonClass,
-      title,
+      title: resolvedTitle,
       href: disabled ? undefined : props.href,
       target: "target" in props ? props.target : undefined,
       rel: "rel" in props ? props.rel : undefined,
@@ -819,7 +826,7 @@ function Button(props) {
   return /* @__PURE__ */ jsxDEV6("button", {
     id,
     class: buttonClass,
-    title,
+    title: resolvedTitle,
     type: resolvedType,
     disabled,
     "aria-label": ariaLabel,
@@ -1802,6 +1809,7 @@ function Select(props) {
     label,
     placeholder = "Select…",
     multiSelect = false,
+    clearable = false,
     disabled = false,
     wide = false,
     className,
@@ -1832,6 +1840,10 @@ function Select(props) {
   const handleClear = () => {
     selected.value = new Set;
   };
+  const handleClearOption = () => {
+    selected.value = new Set;
+    isOpen2.value = false;
+  };
   const triggerParts = [Select_module_default["trigger"] ?? ""];
   if (isEmpty.value)
     triggerParts.push(Select_module_default["placeholder"] ?? "");
@@ -1868,6 +1880,7 @@ function Select(props) {
         trigger: triggerContent,
         triggerClassName: triggerClass,
         triggerDisabled: disabled,
+        triggerTitle: displayText.value,
         multiSelect,
         children: [
           multiSelect && /* @__PURE__ */ jsxDEV17("div", {
@@ -1891,11 +1904,24 @@ function Select(props) {
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
+          !multiSelect && clearable && /* @__PURE__ */ jsxDEV17("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: 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", {
               type: "button",
+              role: "option",
+              "aria-selected": isSelected ? "true" : "false",
               class: optClass,
               onClick: () => handleOptionClick(opt.value),
               children: [
@@ -2070,6 +2096,9 @@ function Text(props) {
     "data-polly-text": tone
   }, children);
 }
+// src/polly-ui/TextInput.tsx
+import { useId as useId2 } from "preact/hooks";
+
 // src/polly-ui/internal/input-base.ts
 function buildInputA11y(props) {
   const attrs = {
@@ -2091,7 +2120,9 @@ function buildInputA11y(props) {
 
 // src/polly-ui/TextInput.module.css
 var TextInput_module_default = {
-  input: "input_ez4_Vg"
+  input: "input_ez4_Vg",
+  field: "field_ez4_Vg",
+  error: "error_ez4_Vg"
 };
 
 // src/polly-ui/TextInput.tsx
@@ -2101,12 +2132,15 @@ function isSignal2(v) {
 }
 function TextInput(props) {
   const variant = props.variant ?? "single";
+  const errorId = useId2();
+  const hasError = props.error !== undefined && props.error !== "";
+  const describedBy = [props.describedBy, hasError ? errorId : undefined].filter(Boolean).join(" ") || undefined;
   const a11y = buildInputA11y({
     name: props.name,
     id: props.id,
     required: props.required,
-    invalid: props.invalid,
-    describedBy: props.describedBy,
+    invalid: props.invalid || hasError,
+    describedBy,
     placeholder: props.placeholder,
     disabled: props.disabled,
     readOnly: props.readOnly
@@ -2115,36 +2149,51 @@ function TextInput(props) {
   const stringValue = controlled ? props.value.value : undefined;
   const defaultValue = controlled ? undefined : props.value ?? "";
   const className = props.className ? `${TextInput_module_default["input"]} ${props.className}` : TextInput_module_default["input"];
-  if (variant === "multi") {
-    return /* @__PURE__ */ jsxDEV20("textarea", {
-      ...a11y,
-      class: className,
-      "data-polly-input-variant": "multi",
-      rows: props.rows,
-      autoFocus: props.autoFocus,
-      value: stringValue,
-      defaultValue,
-      onInput: (e) => {
-        if (controlled) {
-          props.value.value = e.currentTarget.value;
-        }
-      }
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV20("input", {
+  const onInput = (e) => {
+    if (controlled) {
+      props.value.value = e.currentTarget.value;
+    }
+  };
+  const control = variant === "multi" ? /* @__PURE__ */ jsxDEV20("textarea", {
+    ...a11y,
+    class: className,
+    title: props.title,
+    "data-polly-input-variant": "multi",
+    rows: props.rows,
+    autoFocus: props.autoFocus,
+    value: stringValue,
+    defaultValue,
+    onInput
+  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV20("input", {
     ...a11y,
-    type: "text",
+    type: props.inputType ?? "text",
     class: className,
+    title: props.title,
     "data-polly-input-variant": "single",
+    min: props.min,
+    max: props.max,
+    step: props.step,
     autoFocus: props.autoFocus,
     value: stringValue,
     defaultValue,
-    onInput: (e) => {
-      if (controlled) {
-        props.value.value = e.currentTarget.value;
-      }
-    }
+    onInput
   }, undefined, false, undefined, this);
+  if (!hasError)
+    return control;
+  return /* @__PURE__ */ jsxDEV20("div", {
+    class: TextInput_module_default["field"],
+    "data-polly-ui": true,
+    "data-polly-field": true,
+    children: [
+      control,
+      /* @__PURE__ */ jsxDEV20("span", {
+        id: errorId,
+        role: "alert",
+        class: TextInput_module_default["error"],
+        children: props.error
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
 // src/polly-ui/Toast.tsx
 import { createPortal as createPortal2 } from "preact/compat";
@@ -2335,4 +2384,4 @@ export {
   ActionForm
 };
 
-//# debugId=E9957371E8115C1E64756E2164756E21
+//# debugId=0625A7B5727F691364756E2164756E21