@apliteni/apliteni-ui 0.33.1 → 0.34.0

package/react/dist/index.js

@@ -20,7 +20,7 @@ var cx = (...a) => a.filter(Boolean).join(" ");
 function Button({
   variant = "secondary",
   size = "md",
-  icon: icon3,
+  icon: icon4,
   iconRight,
   iconOnly,
   block,
@@ -38,7 +38,7 @@ function Button({
     iconOnly && "ui-btn--icon"
   );
   const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
-  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon3;
+  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon4;
   const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
   return /* @__PURE__ */ jsxs(
     "button",
@@ -51,7 +51,7 @@ function Button({
       ...rest,
       ...named,
       children: [
-        icon3 && /* @__PURE__ */ jsx2(Icon, { name: icon3 }),
+        icon4 && /* @__PURE__ */ jsx2(Icon, { name: icon4 }),
         !iconOnly && children != null && /* @__PURE__ */ jsx2("span", { children }),
         iconRight && /* @__PURE__ */ jsx2(Icon, { name: iconRight }),
         busy && /* @__PURE__ */ jsxs("span", { className: "ui-btn__bars", children: [
@@ -87,8 +87,8 @@ function Card({ title, sub, level = 2, children }) {
 import { useId } from "react";
 import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var GLYPH = { up: "arrowUp", down: "arrowDown", flat: "minus" };
-var directionOf = (text) => {
-  const t = text.trim();
+var directionOf = (text2) => {
+  const t = text2.trim();
   return /^[-−–(]/.test(t) ? "down" : /^\+/.test(t) ? "up" : "flat";
 };
 var hasChange = (d) => !!d && d.value != null && d.value !== "";
@@ -683,10 +683,10 @@ function Pagination({
       was.focus();
       return;
     }
-    const strip = [...nav.current.querySelectorAll(".ui-pager__step")];
-    const from2 = strip.indexOf(was);
-    for (let d = 1; d < strip.length; d += 1) {
-      const near = [strip[from2 - d], strip[from2 + d]].find((el) => el && !el.disabled);
+    const strip2 = [...nav.current.querySelectorAll(".ui-pager__step")];
+    const from2 = strip2.indexOf(was);
+    for (let d = 1; d < strip2.length; d += 1) {
+      const near = [strip2[from2 - d], strip2[from2 + d]].find((el) => el && !el.disabled);
       if (near) {
         near.focus();
         return;
@@ -1024,12 +1024,12 @@ function Denied({
   title = "You don\u2019t have access",
   sub,
   need,
-  icon: icon3 = "lock",
+  icon: icon4 = "lock",
   className,
   children
 }) {
   return /* @__PURE__ */ jsxs9("div", { className: cx4("ui-denied", className), children: [
-    /* @__PURE__ */ jsx11("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx11(Icon, { name: icon3 }) }),
+    /* @__PURE__ */ jsx11("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx11(Icon, { name: icon4 }) }),
     /* @__PURE__ */ jsx11("div", { className: "ui-denied__title", children: title }),
     sub && /* @__PURE__ */ jsx11("div", { className: "ui-denied__sub", children: sub }),
     need && /* @__PURE__ */ jsxs9("div", { className: "ui-denied__need", children: [
@@ -1040,10 +1040,440 @@ function Denied({
   ] });
 }
 
+// src/Dropdown.tsx
+import {
+  Fragment as Fragment3,
+  useCallback as useCallback2,
+  useEffect as useEffect4,
+  useId as useId5,
+  useRef as useRef6,
+  useState as useState5
+} from "react";
+import { icon as icon3, dropdownMatch, dropdownFiltering } from "@apliteni/apliteni-ui";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var cx5 = (...a) => a.filter(Boolean).join(" ");
+var isRow = (it) => Boolean(it) && it !== "---" && !it.separator;
+var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx12(
+  "span",
+  {
+    className,
+    "aria-hidden": hidden ? "true" : void 0,
+    dangerouslySetInnerHTML: { __html: icon3(name) }
+  }
+);
+function RowBadge({ badge }) {
+  const text2 = typeof badge === "string" ? badge : badge.text;
+  const given = typeof badge === "string" ? "" : badge.tone || "";
+  const tone = given || (/^live$/i.test(String(text2)) ? "live" : "neutral");
+  return /* @__PURE__ */ jsx12("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
+}
+var keyOf = (it) => it.value != null ? `v:${it.value}` : `l:${it.label}`;
+var itemsIn = (panel) => Array.from(panel?.querySelectorAll("[data-dd-item]") ?? []).filter((el) => el.getAttribute("aria-disabled") !== "true" && !el.hidden);
+var openNow = /* @__PURE__ */ new Set();
+var composing = (e) => e.isComposing || e.keyCode === 229;
+var SEARCH_DEFAULTS = {
+  placeholder: "Search",
+  empty: "No match for \u201C{q}\u201D",
+  hint: "Check the spelling, or try fewer letters."
+};
+function Dropdown({
+  label,
+  value,
+  placeholder = "Select\u2026",
+  variant,
+  items,
+  sections,
+  header,
+  footer,
+  triggerContent,
+  triggerClass = "",
+  chevron = true,
+  align = "start",
+  direction = "down",
+  scroll = false,
+  search = false,
+  ariaLabel,
+  id,
+  panelClass = "",
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  onSelect,
+  row
+}) {
+  const [selfOpen, setSelfOpen] = useState5(defaultOpen);
+  const open = openProp ?? selfOpen;
+  const [pick, setPick] = useState5(null);
+  const [query, setQuery] = useState5(() => search && search !== true ? search.query || "" : "");
+  const [activeKey, setActiveKey] = useState5(null);
+  const root = useRef6(null);
+  const panel = useRef6(null);
+  const trigger = useRef6(null);
+  const field = useRef6(null);
+  const landOn = useRef6(null);
+  const at = useRef6("");
+  const auto = useId5().replace(/:/g, "");
+  const uid = id ?? auto;
+  const setOpen = useCallback2((next) => {
+    if (openProp === void 0) setSelfOpen(next);
+    onOpenChange?.(next);
+  }, [openProp, onOpenChange]);
+  const close = useRef6(setOpen);
+  useIsoLayoutEffect(() => {
+    close.current = setOpen;
+  });
+  const sx = search ? { ...SEARCH_DEFAULTS, ...strip(search === true ? {} : search) } : null;
+  const entries = sections?.length ? sections.flatMap((s) => s.items || []) : items || [];
+  const rows = entries.filter(isRow);
+  const isSelect = variant === "select" || variant == null && rows.some((it) => it.selected || it.value != null);
+  const listRole = isSelect ? "listbox" : "menu";
+  const asOption = isSelect || Boolean(sx);
+  const name = ariaLabel || (label ? String(label).replace(/:\s*$/, "") : "") || "Options";
+  const given = rows.find((it) => it.selected);
+  const givenKey = given ? keyOf(given) : null;
+  const pickedKey = pick && pick.against === givenKey ? pick.key : null;
+  useEffect4(() => {
+    if (pick && pick.against !== givenKey) setPick(null);
+  }, [givenKey, pick]);
+  const picked = pickedKey != null ? rows.find((it) => keyOf(it) === pickedKey) : void 0;
+  const shown = value != null ? value : isSelect ? picked?.label ?? given?.label : null;
+  const selectedOf = (it) => pickedKey != null ? it.disabled ? !!it.selected : keyOf(it) === pickedKey : !!it.selected;
+  const hiddenBy = (it) => Boolean(sx) && !dropdownMatch(it.label, query);
+  const filtering = Boolean(sx) && dropdownFiltering(query);
+  const visible = rows.filter((it) => !hiddenBy(it));
+  const ring = visible.filter((it) => !it.disabled);
+  const active = ring.find((it) => keyOf(it) === activeKey) ?? ring[0];
+  const rowIds = /* @__PURE__ */ new Map();
+  rows.forEach((it, i) => rowIds.set(it, `${uid}-opt-${i}`));
+  const listId = `${uid}-list`;
+  useEffect4(() => {
+    if (!open) return;
+    const mine = () => close.current(false);
+    for (const other of [...openNow]) other();
+    openNow.add(mine);
+    return () => {
+      openNow.delete(mine);
+    };
+  }, [open]);
+  useEffect4(() => {
+    if (!open) return;
+    const doc = root.current?.ownerDocument ?? document;
+    const onClick = (e) => {
+      if (!root.current?.contains(e.target)) close.current(false);
+    };
+    const onKey2 = (e) => {
+      if (e.key !== "Escape" || composing(e)) return;
+      close.current(false);
+      trigger.current?.focus();
+    };
+    doc.addEventListener("click", onClick);
+    doc.addEventListener("keydown", onKey2);
+    return () => {
+      doc.removeEventListener("click", onClick);
+      doc.removeEventListener("keydown", onKey2);
+    };
+  }, [open]);
+  useIsoLayoutEffect(() => {
+    const want = landOn.current;
+    landOn.current = null;
+    if (!open) return;
+    if (sx) {
+      setQuery("");
+      const enabled = rows.filter((it) => !it.disabled);
+      const start = enabled.find(selectedOf) ?? enabled[0];
+      setActiveKey(start ? keyOf(start) : null);
+      if (panel.current) {
+        panel.current.style.minWidth = "";
+        if (panel.current.offsetWidth) panel.current.style.minWidth = `${panel.current.offsetWidth}px`;
+      }
+      field.current?.focus();
+      return;
+    }
+    if (want == null) return;
+    const els = itemsIn(panel.current);
+    if (!els.length) return;
+    const sel = els.findIndex((el) => el.getAttribute("aria-selected") === "true");
+    const to = want === "selected" ? sel >= 0 ? sel : 0 : want;
+    (els[to] || els[0]).focus();
+  }, [open]);
+  useIsoLayoutEffect(() => {
+    if (!sx || !open || !active) return;
+    const el = panel.current?.querySelector("[data-dd-item].is-active");
+    const list = el?.closest(".ui-dropdown__list");
+    if (!el || !list || !list.clientHeight) return;
+    const top = el.offsetTop - list.offsetTop;
+    if (top < list.scrollTop) list.scrollTop = top;
+    else if (top + el.offsetHeight > list.scrollTop + list.clientHeight) {
+      list.scrollTop = top + el.offsetHeight - list.clientHeight;
+    }
+  });
+  const choose = (item, e) => {
+    if (item.disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (isSelect) setPick({ key: keyOf(item), against: givenKey });
+    onSelect?.(item.value, item);
+    setOpen(false);
+    trigger.current?.focus();
+  };
+  const onKeyDown = (e) => {
+    const onTrigger = e.target === trigger.current;
+    const onField = e.target === field.current;
+    if (onField && composing(e)) return;
+    if (sx && open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!ring.length) return;
+        const i = active ? ring.indexOf(active) : -1;
+        const next = e.key === "ArrowDown" ? (i + 1) % ring.length : i <= 0 ? ring.length - 1 : i - 1;
+        setActiveKey(keyOf(ring[next]));
+        return;
+      }
+      if (onField && e.key === "Enter") {
+        e.preventDefault();
+        panel.current?.querySelector("[data-dd-item].is-active")?.click();
+        return;
+      }
+      if (onField && (e.key === "Home" || e.key === "End")) return;
+    }
+    if ((e.key === "ArrowDown" || e.key === "ArrowUp") && (onTrigger || open)) {
+      e.preventDefault();
+      if (!open) {
+        landOn.current = e.key === "ArrowDown" ? 0 : "selected";
+        setOpen(true);
+        return;
+      }
+      const els = itemsIn(panel.current);
+      if (!els.length) return;
+      const i = els.indexOf(document.activeElement);
+      const next = e.key === "ArrowDown" ? (i + 1) % els.length : (i - 1 + els.length) % els.length;
+      els[next < 0 ? 0 : next]?.focus();
+    } else if (e.key === "Home" && open) {
+      e.preventDefault();
+      itemsIn(panel.current)[0]?.focus();
+    } else if (e.key === "End" && open) {
+      e.preventDefault();
+      const els = itemsIn(panel.current);
+      els[els.length - 1]?.focus();
+    } else if ((e.key === "Enter" || e.key === " ") && open && e.target.matches?.("[data-dd-item]")) {
+      e.preventDefault();
+      e.target.click();
+    } else if (e.key === "Escape" && open) {
+      e.preventDefault();
+      e.stopPropagation();
+      setOpen(false);
+      trigger.current?.focus();
+    } else if (e.key === "Tab" && open) {
+      setOpen(false);
+    }
+  };
+  const onMouseMove = (e) => {
+    if (!sx) return;
+    const here = `${e.clientX},${e.clientY}`;
+    if (here === at.current) return;
+    at.current = here;
+    const el = e.target.closest?.("[data-dd-item]");
+    if (!el || el.getAttribute("aria-disabled") === "true" || el.classList.contains("is-active")) return;
+    const item = rows.find((it) => rowIds.get(it) === el.id);
+    if (item) setActiveKey(keyOf(item));
+  };
+  function renderRow(entry, key) {
+    if (!isRow(entry)) {
+      return /* @__PURE__ */ jsx12("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
+    }
+    const disabled = !!entry.disabled;
+    const selected = selectedOf(entry);
+    const asLink = !!entry.href && !disabled && !asOption;
+    const props = {
+      className: cx5(
+        "ui-dropdown__item",
+        selected && "is-selected",
+        disabled && "is-disabled",
+        entry.danger && "is-danger",
+        Boolean(sx) && open && entry === active && "is-active"
+      ),
+      "data-dd-item": "",
+      role: asOption ? "option" : "menuitem",
+      tabIndex: -1,
+      ...entry.value != null ? { "data-value": String(entry.value) } : null,
+      ...asOption ? { "aria-selected": selected } : null,
+      ...disabled ? { "aria-disabled": true } : null,
+      ...asLink ? { href: entry.href, ...entry.target ? { target: entry.target } : null } : null,
+      ...sx ? { id: rowIds.get(entry), hidden: hiddenBy(entry) || void 0 } : null,
+      onClick: (e) => choose(entry, e),
+      children: /* @__PURE__ */ jsxs10(Fragment4, { children: [
+        entry.icon && /* @__PURE__ */ jsx12(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
+        /* @__PURE__ */ jsxs10("span", { className: "ui-dropdown__main", children: [
+          /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__label", children: entry.label }),
+          entry.description && /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__desc", children: entry.description })
+        ] }),
+        entry.badge ? /* @__PURE__ */ jsx12(RowBadge, { badge: entry.badge }) : null,
+        asOption && /* @__PURE__ */ jsx12(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
+      ] })
+    };
+    if (row) return /* @__PURE__ */ jsx12(Fragment3, { children: row(entry, props) }, key);
+    const Tag = asLink ? "a" : "div";
+    return /* @__PURE__ */ jsx12(Tag, { ...props }, key);
+  }
+  const body = sections?.length ? sections.map((section, si) => {
+    const gone = filtering && !(section.items || []).some((it) => isRow(it) && !hiddenBy(it));
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: "ui-dropdown__section",
+        role: "group",
+        "aria-label": section.label || void 0,
+        hidden: gone || void 0,
+        children: [
+          section.label && /* @__PURE__ */ jsx12("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
+          (section.items || []).map((entry, i) => renderRow(entry, `s${si}-${i}`))
+        ]
+      },
+      section.label ?? `s${si}`
+    );
+  }) : (items || []).map((entry, i) => renderRow(entry, `i${i}`));
+  const cap = scroll && scroll !== true ? { maxHeight: typeof scroll === "number" ? `${scroll}px` : scroll } : void 0;
+  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
+    /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__none-hint", children: sx.hint })
+  ] }) : null;
+  return /* @__PURE__ */ jsxs10("div", { className: cx5("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
+    /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        type: "button",
+        className: cx5("ui-dropdown__trigger", triggerClass),
+        "data-dropdown-trigger": "",
+        "aria-haspopup": sx ? "dialog" : listRole,
+        "aria-expanded": open,
+        "aria-label": ariaLabel && triggerContent != null ? ariaLabel : void 0,
+        ref: trigger,
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen(!open);
+        },
+        children: [
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            label && /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__pre", children: label }),
+            /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__value", children: shown != null ? shown : placeholder })
+          ] }),
+          chevron && /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: cx5(
+          "ui-dropdown__panel",
+          align === "end" && "is-end",
+          direction === "up" && "is-up",
+          Boolean(scroll) && !sx && "is-scroll",
+          Boolean(sx) && "ui-dropdown__panel--search",
+          panelClass
+        ),
+        "data-dropdown-panel": "",
+        role: sx ? "dialog" : listRole,
+        "aria-label": sx ? name : ariaLabel,
+        style: sx ? void 0 : cap,
+        ref: panel,
+        onClick: (e) => e.stopPropagation(),
+        onMouseMove,
+        children: [
+          header,
+          sx ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            /* @__PURE__ */ jsxs10("div", { className: "ui-dropdown__search", children: [
+              /* @__PURE__ */ jsx12(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
+              /* @__PURE__ */ jsx12(
+                "input",
+                {
+                  className: "ui-dropdown__search-input",
+                  type: "text",
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-expanded": true,
+                  "aria-controls": listId,
+                  "aria-label": sx.label || `Search ${name}`,
+                  "aria-activedescendant": open && active ? rowIds.get(active) : void 0,
+                  placeholder: sx.placeholder,
+                  autoComplete: "off",
+                  spellCheck: false,
+                  "data-dd-search": "",
+                  value: query,
+                  ref: field,
+                  onChange: (e) => {
+                    setQuery(e.target.value);
+                    setActiveKey(null);
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx12("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
+            /* @__PURE__ */ jsx12(
+              "div",
+              {
+                className: "ui-dropdown__none",
+                role: "status",
+                "data-dd-none": "",
+                "data-dd-empty": sx.empty,
+                "data-dd-hint": sx.hint,
+                children: none
+              }
+            )
+          ] }) : body,
+          footer
+        ]
+      }
+    )
+  ] });
+}
+function strip(o) {
+  return Object.fromEntries(
+    Object.entries(o).filter(([, v]) => v != null && v !== "")
+  );
+}
+
+// src/BackLink.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var BARE = "Back";
+var SCRIPTED = /^javascript:/i;
+var LEADING = /^[\u0000-\u0020]+/;
+var TAB_OR_NEWLINE = /[\t\n\r]/g;
+var SAID = /^back\s+to(?:\s+|$)/i;
+var text = (v) => typeof v === "string" || typeof v === "number" ? String(v).trim() : "";
+function BackLink({
+  href,
+  label,
+  as,
+  className,
+  ...rest
+}) {
+  const to = text(href);
+  if (!to || SCRIPTED.test(to.replace(LEADING, "").replace(TAB_OR_NEWLINE, ""))) return null;
+  const name = text(label).replace(SAID, "");
+  const bare = !name || name.toLowerCase() === BARE.toLowerCase();
+  const Tag = as ?? "a";
+  return /* @__PURE__ */ jsxs11(
+    Tag,
+    {
+      className: ["ui-back", className].filter(Boolean).join(" "),
+      href: to,
+      "aria-label": bare ? void 0 : `${BARE} to ${name}`,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx13(Icon, { name: "chevronLeft" }),
+        /* @__PURE__ */ jsx13("span", { className: "ui-back__label", children: bare ? BARE : name })
+      ]
+    }
+  );
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
 export {
+  BackLink,
   Badge,
   BusyRegion,
   Button,
@@ -1053,6 +1483,7 @@ export {
   DataTable,
   Denied,
   Drawer,
+  Dropdown,
   Icon,
   Modal,
   PAGE_SIZES,

package/src/components/dropdown.js

@@ -63,7 +63,8 @@ function ddBody({ items, sections }, listbox, sx) {
   if (sections && sections.length) {
     return sections.map((s) => {
       const head = s.label ? `<div class="ui-dropdown__group" role="presentation">${esc(s.label)}</div>` : '';
-      const gone = sx && ddFiltering(sx.q) && !(s.items || []).some((it) => ddIsRow(it) && ddMatch(it.label, sx.q));
+      const gone = sx && dropdownFiltering(sx.q)
+        && !(s.items || []).some((it) => ddIsRow(it) && dropdownMatch(it.label, sx.q));
       return `<div class="ui-dropdown__section" role="group"${s.label ? ` aria-label="${esc(s.label)}"` : ''}${gone ? ' hidden' : ''}>${head}${(s.items || []).map(one).join('')}</div>`;
     }).join('');
   }
@@ -73,15 +74,26 @@ function ddBody({ items, sections }, listbox, sx) {
 // ---- Search --------------------------------------------------------------
 // The match is a substring of the label, anywhere in it, ignoring case and
 // accents; rows keep their order. The factory and the wiring both ask
-// ddMatch(), so a preset query and a typed one hide the same rows.
+// dropdownMatch(), so a preset query and a typed one hide the same rows.
 // why: docs/specification.md#a-dropdown-with-a-search-field
 // NFD takes the mark off é or ö; ł, ø, đ and the rest are letters of their own
 // with nothing to take off, so they are mapped by hand.
 const FOLD = { ł: 'l', ø: 'o', đ: 'd', ð: 'd', ß: 'ss', æ: 'ae', œ: 'oe', ı: 'i', þ: 'th' };
 const fold = (s) => String(s == null ? '' : s).normalize('NFD').replace(/\p{M}/gu, '').toLowerCase()
   .replace(/[łøđðßæœıþ]/g, (c) => FOLD[c]);
-const ddFiltering = (q) => fold(q).trim() !== '';
-const ddMatch = (label, q) => fold(label).includes(fold(q).trim());
+
+/**
+ * Is this query narrowing anything? A query of spaces, or of marks with no letter
+ * under them, is not — it leaves every row showing, and the separators with them.
+ *
+ * Public because a second implementation of this dropdown cannot write its own: the
+ * React <Dropdown> asks these two, the way <CommandPalette> asks rankGroups(), so a
+ * list a server rendered and the same list after a keystroke hide the same rows.
+ */
+export const dropdownFiltering = (query) => fold(query).trim() !== '';
+
+/** Does `label` match `query`? A substring, anywhere, ignoring case and accents. */
+export const dropdownMatch = (label, query) => fold(label).includes(fold(query).trim());
 const ddIsRow = (it) => it && it !== '---' && !it.separator;
 
 let _ddSeq = 0;
@@ -100,8 +112,8 @@ function ddSearchContext(search, id) {
 }
 
 function ddRowExt(it, sx) {
-  if (!ddIsRow(it)) return { filtering: ddFiltering(sx.q) };
-  return { id: `${sx.base}-opt-${sx.n++}`, hidden: !ddMatch(it.label, sx.q) };
+  if (!ddIsRow(it)) return { filtering: dropdownFiltering(sx.q) };
+  return { id: `${sx.base}-opt-${sx.n++}`, hidden: !dropdownMatch(it.label, sx.q) };
 }
 
 // The no-match state. A function replacer, so a `$&` typed into the field is
@@ -118,7 +130,7 @@ function ddSearchBody({ items, sections }, sx, name, scroll) {
   const listId = `${sx.base}-list`;
   const rows = ddBody({ items, sections }, true, sx);
   const flat = (sections ? sections.flatMap((s) => s.items || []) : (items || [])).filter(ddIsRow);
-  const shown = flat.some((it) => ddMatch(it.label, sx.q));
+  const shown = flat.some((it) => dropdownMatch(it.label, sx.q));
   const cap = scroll && scroll !== true ? ` style="max-height:${typeof scroll === 'number' ? scroll + 'px' : esc(scroll)}"` : '';
   const input = [
     'class="ui-dropdown__search-input"', 'type="text"', 'role="combobox"',
@@ -131,7 +143,7 @@ function ddSearchBody({ items, sections }, sx, name, scroll) {
     + `<span class="ui-dropdown__search-ic" aria-hidden="true">${icon('search')}</span><input ${input}></div>`
     + `<div class="ui-dropdown__list" role="listbox" id="${esc(listId)}" aria-label="${esc(name)}"${cap}>${rows}</div>`
     + `<div class="ui-dropdown__none" role="status" data-dd-none data-dd-empty="${esc(sx.empty)}" data-dd-hint="${esc(sx.hint)}">`
-    + `${shown || !ddFiltering(sx.q) ? '' : ddNone(sx.empty, sx.hint, sx.q)}</div>`;
+    + `${shown || !dropdownFiltering(sx.q) ? '' : ddNone(sx.empty, sx.hint, sx.q)}</div>`;
 }
 
 /**
@@ -144,8 +156,10 @@ function ddSearchBody({ items, sections }, sx, name, scroll) {
  * @param {string} [o.variant]     'select' (listbox) | 'menu' (inferred from items)
  * @param {Array}  [o.items]       [{ label, value?, description?, icon?, badge?, selected?, disabled?, href?, danger? }]
  * @param {Array}  [o.sections]    [{ label, items }] — grouped alternative to items
- * @param {string} [o.header]      raw HTML pinned to the top of the panel
- * @param {string} [o.footer]      raw HTML pinned to the bottom of the panel
+ * @param {string} [o.foot]        content for a pinned block at the panel's bottom edge,
+ *   drawn as `.ui-dropdown__foot` — raw HTML, so escape your own text
+ * @param {string} [o.header]      raw HTML pinned to the top of the panel, unwrapped
+ * @param {string} [o.footer]      raw HTML pinned to the bottom of the panel, unwrapped
  * @param {string} [o.align]       'start' (default) | 'end' — the edge the panel hugs
  * @param {string} [o.direction]   'down' (default) | 'up' | 'auto' — the way it opens
  * @param {boolean} [o.portal]     mount the panel on <body>, for a clipping or sticky ancestor
@@ -158,7 +172,7 @@ function ddSearchBody({ items, sections }, sx, name, scroll) {
  */
 export function dropdown({
   label, value, placeholder = 'Select…', variant, items, sections,
-  header = '', footer = '', triggerContent, triggerClass = '', chevron = true,
+  foot = '', header = '', footer = '', triggerContent, triggerClass = '', chevron = true,
   align = 'start', direction = 'down', portal = false,
   scroll = false, open = false, ariaLabel, id, panelClass = '', search = false,
 } = {}) {
@@ -202,6 +216,11 @@ export function dropdown({
     scroll && scroll !== true && !sx ? `style="max-height:${typeof scroll === 'number' ? scroll + 'px' : esc(scroll)}"` : '',
   ].filter(Boolean).join(' ');
 
+  // The block the sheet bleeds to the panel's bottom edge. It sits OUTSIDE the
+  // unwrapped `footer`, because the block that bleeds is the one that has to
+  // touch the edge. why: docs/specification.md#the-dropdown-panel
+  const footBlock = foot ? `<div class="ui-dropdown__foot">${foot}</div>` : '';
+
   const ddAttrs = 'data-dropdown'
     + (isSelect ? ' data-dropdown-select' : '')
     + (direction === 'auto' ? ' data-dropdown-direction="auto"' : '')
@@ -209,7 +228,9 @@ export function dropdown({
 
   return `<div class="${cx('ui-dropdown', open && 'open')}" ${ddAttrs}${id ? ` id="${esc(id)}"` : ''}>` +
     `<button ${triggerAttrs}>${trig}${chevron ? '<span class="ui-dropdown__chevron" aria-hidden="true"></span>' : ''}</button>` +
-    `<div ${panelAttrs}>${header}${sx ? ddSearchBody({ items, sections }, sx, name, scroll) : ddBody({ items, sections }, isSelect)}${footer}</div>` +
+    `<div ${panelAttrs}>${header}`
+      + `${sx ? ddSearchBody({ items, sections }, sx, name, scroll) : ddBody({ items, sections }, isSelect)}`
+      + `${footer}${footBlock}</div>` +
     `</div>`;
 }
 
@@ -294,14 +315,14 @@ function ddFilter(dd) {
   const q = search.value;
   let shown = 0;
   panel.querySelectorAll('[data-dd-item]').forEach((row) => {
-    row.hidden = !ddMatch((row.querySelector('.ui-dropdown__label') || row).textContent, q);
+    row.hidden = !dropdownMatch((row.querySelector('.ui-dropdown__label') || row).textContent, q);
     if (!row.hidden) shown += 1;
   });
-  panel.querySelectorAll('.ui-dropdown__sep').forEach((el) => { el.hidden = ddFiltering(q); });
+  panel.querySelectorAll('.ui-dropdown__sep').forEach((el) => { el.hidden = dropdownFiltering(q); });
   panel.querySelectorAll('.ui-dropdown__section').forEach((el) => { el.hidden = !el.querySelector('[data-dd-item]:not([hidden])'); });
   const none = panel.querySelector('[data-dd-none]');
   if (none) {
-    none.innerHTML = shown || !ddFiltering(q) ? ''
+    none.innerHTML = shown || !dropdownFiltering(q) ? ''
       : ddNone(none.getAttribute('data-dd-empty') || '', none.getAttribute('data-dd-hint') || '', q);
   }
   ddSetActive(dd, ddItemsOf(dd)[0] || null);