@apliteni/apliteni-ui 0.90.0 → 0.92.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.90.0",
+  "version": "0.92.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.js

@@ -433,6 +433,7 @@ import {
   useRef as useRef3,
   useState as useState2
 } from "react";
+import { transitionMs } from "@apliteni/apliteni-ui";
 var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary:first-of-type';
 function tabbable(el) {
   const tabindex = el.getAttribute("tabindex");
@@ -453,17 +454,6 @@ var dismissOnScrim = (onClose) => (e) => {
   onClose();
 };
 var useIsoLayoutEffect = typeof document === "undefined" ? useEffect2 : useLayoutEffect3;
-function transitionMs(el) {
-  const cs = getComputedStyle(el);
-  const times = (list) => list.split(",").map((t) => {
-    const n = Number.parseFloat(t);
-    if (!Number.isFinite(n)) return 0;
-    return t.trim().endsWith("ms") ? n : n * 1e3;
-  });
-  const durations = times(cs.transitionDuration);
-  const delays = times(cs.transitionDelay);
-  return Math.max(0, ...durations.map((d, i) => d + delays[i % delays.length]));
-}
 var DialogScope = createContext(null);
 var stack = [];
 var leaving = /* @__PURE__ */ new Set();
@@ -945,7 +935,7 @@ function rowId(uid, groups, item) {
 }
 
 // src/DataTable.tsx
-import { useEffect as useEffect5, useId as useId7, useMemo as useMemo2, useRef as useRef9, useState as useState5 } from "react";
+import { useMemo as useMemo2, useState as useState5 } from "react";
 import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
 
 // src/Pagination.tsx
@@ -1209,31 +1199,6 @@ function DataTable({
   hasMore = false
 }) {
   const scrollable = stickyHeader || pinnedIdentity;
-  const scrollId = useId7();
-  const scrollRegion = useRef9(null);
-  const [columnScroll, setColumnScroll] = useState5({ overflow: false, start: true, end: false });
-  const measureColumns = () => {
-    const region = scrollRegion.current;
-    if (region) setColumnScroll({
-      overflow: region.scrollWidth > region.clientWidth + 1,
-      start: region.scrollLeft <= 1,
-      end: region.scrollLeft + region.clientWidth >= region.scrollWidth - 1
-    });
-  };
-  useEffect5(() => {
-    if (!scrollable) return;
-    const region = scrollRegion.current;
-    if (!region) return;
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measureColumns);
-    observer?.observe(region);
-    if (region.firstElementChild) observer?.observe(region.firstElementChild);
-    measureColumns();
-    return () => observer?.disconnect();
-  }, [scrollable, columns, rows]);
-  const scrollColumns = (direction) => {
-    const region = scrollRegion.current;
-    if (region) region.scrollBy({ left: direction * region.clientWidth / 2, behavior: "instant" });
-  };
   const [localSort, setLocalSort] = useState5(
     { key: columns.find((c) => c.sortable)?.key, dir: -1 }
   );
@@ -1286,20 +1251,13 @@ function DataTable({
   );
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
   return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-    scrollable && columnScroll.overflow && /* @__PURE__ */ jsxs13("div", { className: "ui-card__row", role: "group", "aria-label": `${scrollLabel} columns`, children: [
-      /* @__PURE__ */ jsx17(Button, { size: "sm", icon: "arrowLeft", "aria-controls": scrollId, disabled: columnScroll.start, onClick: () => scrollColumns(-1), children: "Previous columns" }),
-      /* @__PURE__ */ jsx17(Button, { size: "sm", iconRight: "arrowRight", "aria-controls": scrollId, disabled: columnScroll.end, onClick: () => scrollColumns(1), children: "More columns" })
-    ] }),
     /* @__PURE__ */ jsx17(
       "div",
       {
-        id: scrollId,
-        ref: scrollRegion,
-        onScroll: measureColumns,
-        className: stickyHeader || pinnedIdentity ? "ui-table-scroll" : void 0,
-        role: stickyHeader || pinnedIdentity ? "region" : void 0,
-        "aria-label": stickyHeader || pinnedIdentity ? scrollLabel : void 0,
-        tabIndex: stickyHeader || pinnedIdentity ? 0 : void 0,
+        className: scrollable ? "ui-table-scroll" : void 0,
+        role: scrollable ? "region" : void 0,
+        "aria-label": scrollable ? scrollLabel : void 0,
+        tabIndex: scrollable ? 0 : void 0,
         children: /* @__PURE__ */ jsxs13(
           "table",
           {
@@ -1452,9 +1410,9 @@ function Denied({
 // src/DatePicker.tsx
 import {
   useCallback as useCallback2,
-  useEffect as useEffect6,
+  useEffect as useEffect5,
   useMemo as useMemo3,
-  useRef as useRef10,
+  useRef as useRef9,
   useState as useState6
 } from "react";
 import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -1467,7 +1425,7 @@ var DAY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
 var PHONE_MAX = 560;
 function usePhone() {
   const [phone, setPhone] = useState6(false);
-  useEffect6(() => {
+  useEffect5(() => {
     const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX}px)`);
     if (!query) return;
     const read = () => setPhone(query.matches);
@@ -1562,9 +1520,9 @@ function DatePicker({
   const picksRange = mode === "range" || mode === "day-range";
   const phone = usePhone();
   const asSheet = sheet ?? phone;
-  const root = useRef10(null);
-  const trigger = useRef10(null);
-  const grid = useRef10(null);
+  const root = useRef9(null);
+  const trigger = useRef9(null);
+  const grid = useRef9(null);
   const [selfOpen, setSelfOpen] = useState6(defaultOpen);
   const open = openProp ?? selfOpen;
   const [selfValue, setSelfValue] = useState6(defaultValue);
@@ -1601,19 +1559,19 @@ function DatePicker({
   }, [today, grain]);
   const anchor = toIndex(picked, grain) ?? toIndex(picksRange ? span.start ?? span.end : null, grain) ?? todayIndex;
   const [cursor, setCursor] = useState6(() => clamp(anchor, lo, hi));
-  const land = useRef10(false);
+  const land = useRef9(false);
   const setOpen = useCallback2((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
-  const close = useRef10(setOpen);
+  const close = useRef9(setOpen);
   useIsoLayoutEffect(() => {
     close.current = setOpen;
   });
-  useEffect6(() => {
+  useEffect5(() => {
     if (open) setCursor(clamp(anchor, lo, hi));
   }, [open]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (!open || asSheet) return;
     const doc = root.current?.ownerDocument ?? document;
     const onClick = (e) => {
@@ -1923,13 +1881,24 @@ function DatePicker({
 import {
   Fragment as Fragment4,
   useCallback as useCallback3,
-  useEffect as useEffect7,
-  useId as useId8,
-  useRef as useRef11,
+  useEffect as useEffect6,
+  useId as useId7,
+  useRef as useRef10,
   useState as useState7
 } from "react";
-import { icon as icon3, dropdownMatch, dropdownFiltering } from "@apliteni/apliteni-ui";
+import {
+  icon as icon3,
+  dropdownMatch,
+  dropdownFiltering,
+  filterPanelFit,
+  transitionMs as transitionMs2
+} from "@apliteni/apliteni-ui";
 import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var EXIT_SLACK_MS2 = 50;
+var inPanel = (node) => {
+  const el = node?.nodeType === 1 ? node : node?.parentElement ?? null;
+  return !!el?.closest("[data-dropdown-panel]");
+};
 var cx6 = (...a) => a.filter(Boolean).join(" ");
 var isRow = (it) => Boolean(it) && it !== "---" && !it.separator;
 var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx20(
@@ -1986,22 +1955,100 @@ function Dropdown({
   const [pick, setPick] = useState7(null);
   const [query, setQuery] = useState7(() => search && search !== true ? search.query || "" : "");
   const [activeKey, setActiveKey] = useState7(null);
-  const root = useRef11(null);
-  const panel = useRef11(null);
-  const trigger = useRef11(null);
-  const field = useRef11(null);
-  const landOn = useRef11(null);
-  const at = useRef11("");
-  const auto = useId8().replace(/:/g, "");
+  const root = useRef10(null);
+  const panel = useRef10(null);
+  const trigger = useRef10(null);
+  const field = useRef10(null);
+  const landOn = useRef10(null);
+  const at = useRef10("");
+  const auto = useId7().replace(/:/g, "");
   const uid = id ?? auto;
   const setOpen = useCallback3((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
-  const close = useRef11(setOpen);
+  const close = useRef10(setOpen);
   useIsoLayoutEffect(() => {
     close.current = setOpen;
   });
+  useIsoLayoutEffect(() => {
+    const el = panel.current;
+    if (!el || !open) return;
+    const fit = () => {
+      const got = filterPanelFit(root.current);
+      if (!got) return;
+      let moved = false;
+      for (const prop of ["room", "shift", "floor"]) {
+        const name2 = `--ui-filter-panel-${prop}`;
+        const next = `${got[prop]}px`;
+        if (el.style.getPropertyValue(name2) === next) continue;
+        el.style.setProperty(name2, next);
+        moved = true;
+      }
+      if (!moved) return;
+      if (!el.style.minWidth) return;
+      el.style.minWidth = "";
+      if (el.offsetWidth) el.style.minWidth = `${el.offsetWidth}px`;
+    };
+    fit();
+    const view = root.current?.ownerDocument?.defaultView;
+    const row2 = root.current?.closest(".ui-filter-bar__chip")?.closest(".ui-filter-bar");
+    if (!row2 || !view) return;
+    const stop = [];
+    let ro = null;
+    if (typeof view.ResizeObserver === "function") {
+      ro = new view.ResizeObserver(() => fit());
+      ro.observe(row2);
+      for (const kid of Array.from(row2.children)) ro.observe(kid);
+      stop.push(() => ro?.disconnect());
+    } else {
+      view.addEventListener("resize", fit);
+      stop.push(() => view.removeEventListener("resize", fit));
+    }
+    if (typeof view.MutationObserver === "function") {
+      const mo = new view.MutationObserver((records) => {
+        if (records.every((m) => inPanel(m.target))) return;
+        if (ro && records.some((m) => m.type === "childList")) {
+          for (const kid of Array.from(row2.children)) ro.observe(kid);
+        }
+        fit();
+      });
+      mo.observe(row2, { subtree: true, childList: true, attributes: true, characterData: true });
+      stop.push(() => mo.disconnect());
+    }
+    return () => {
+      stop.forEach((off) => off());
+    };
+  }, [open]);
+  const opened = useRef10(false);
+  useIsoLayoutEffect(() => {
+    const el = panel.current;
+    if (open) {
+      opened.current = true;
+      return;
+    }
+    if (!opened.current || !el || !root.current?.closest(".ui-filter-bar__chip")) return;
+    el.classList.add("is-closing");
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      el.classList.remove("is-closing");
+      el.style.minWidth = "";
+      for (const prop of ["room", "shift", "floor"]) el.style.removeProperty(`--ui-filter-panel-${prop}`);
+    };
+    const onEnd = (e) => {
+      if (e.target === el && e.propertyName === "opacity") finish();
+    };
+    el.addEventListener("transitionend", onEnd);
+    const timer = setTimeout(finish, transitionMs2(el) + EXIT_SLACK_MS2);
+    return () => {
+      done = true;
+      el.removeEventListener("transitionend", onEnd);
+      clearTimeout(timer);
+      el.classList.remove("is-closing");
+    };
+  }, [open]);
   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);
@@ -2012,7 +2059,7 @@ function Dropdown({
   const given = rows.find((it) => it.selected);
   const givenKey = given ? keyOf(given) : null;
   const pickedKey = pick && pick.against === givenKey ? pick.key : null;
-  useEffect7(() => {
+  useEffect6(() => {
     if (pick && pick.against !== givenKey) setPick(null);
   }, [givenKey, pick]);
   const picked = pickedKey != null ? rows.find((it) => keyOf(it) === pickedKey) : void 0;
@@ -2026,7 +2073,7 @@ function Dropdown({
   const rowIds = /* @__PURE__ */ new Map();
   rows.forEach((it, i) => rowIds.set(it, `${uid}-opt-${i}`));
   const listId = `${uid}-list`;
-  useEffect7(() => {
+  useEffect6(() => {
     if (!open) return;
     const mine = () => close.current(false);
     for (const other of [...openNow]) other();
@@ -2035,7 +2082,7 @@ function Dropdown({
       openNow.delete(mine);
     };
   }, [open]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!open) return;
     const doc = root.current?.ownerDocument ?? document;
     const onClick = (e) => {
@@ -2056,7 +2103,12 @@ function Dropdown({
   useIsoLayoutEffect(() => {
     const want = landOn.current;
     landOn.current = null;
-    if (!open) return;
+    if (!open) {
+      if (panel.current?.style && root.current?.closest(".ui-filter-bar") && !root.current.closest(".ui-filter-bar__chip")) {
+        panel.current.style.minWidth = "";
+      }
+      return;
+    }
     if (sx) {
       setQuery("");
       const enabled = rows.filter((it) => !it.disabled);
@@ -2411,12 +2463,12 @@ function Segmented({ options, value, onChange, label, appearance = "pill", disab
 }
 
 // src/FilterBar.tsx
-import { useRef as useRef12, useState as useState8 } from "react";
-import { filterChipText, filterChipName, filterChipUnset, focusNextStop } from "@apliteni/apliteni-ui";
+import { useRef as useRef11, useState as useState8 } from "react";
+import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from "@apliteni/apliteni-ui";
 import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters", disabled = false, busy = false, onRemove, onClear, onChange }) {
-  const bar = useRef12(null);
-  const focused = useRef12(null);
+  const bar = useRef11(null);
+  const focused = useRef11(null);
   const [opened, setOpened] = useState8({});
   const blocked = disabled || busy;
   useIsoLayoutEffect(() => {
@@ -2459,7 +2511,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters
               /* @__PURE__ */ jsx24(
                 Dropdown,
                 {
-                  items: filter.items,
+                  items: filterChipItems(filter),
                   variant: "select",
                   ariaLabel: filterChipName(filter),
                   triggerContent: /* @__PURE__ */ jsx24("span", { className: filterChipUnset(filter) ? "ui-dropdown__value is-placeholder" : "ui-dropdown__value", children: filterChipText(filter) }),
@@ -2522,13 +2574,13 @@ function DrawerSection({ title, headingLevel = 3, className, children, ...rest }
 }
 
 // src/Snippet.tsx
-import { useEffect as useEffect8, useRef as useRef13, useState as useState9 } from "react";
+import { useEffect as useEffect7, useRef as useRef12, useState as useState9 } from "react";
 import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", children, copy = true, reveal = false, copyLabel = "Copy code" }) {
   const [status, setStatus] = useState9("idle");
-  const request = useRef13(0);
-  const timer = useRef13(void 0);
-  useEffect8(() => {
+  const request = useRef12(0);
+  const timer = useRef12(void 0);
+  useEffect7(() => {
     setStatus("idle");
     return () => {
       request.current++;
@@ -2571,15 +2623,15 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
 }
 
 // src/Tabs.tsx
-import { useEffect as useEffect9, useId as useId9, useRef as useRef14 } from "react";
+import { useEffect as useEffect8, useId as useId8, useRef as useRef13 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
 import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
-  const id = useId9();
-  const previous = useRef14(value);
-  const activePanel = useRef14(null);
-  const buttons = useRef14([]);
-  useEffect9(() => {
+  const id = useId8();
+  const previous = useRef13(value);
+  const activePanel = useRef13(null);
+  const buttons = useRef13([]);
+  useEffect8(() => {
     if (previous.current !== value) playEntrance(activePanel.current);
     previous.current = value;
   }, [value]);
@@ -2648,14 +2700,14 @@ function Tabs({ items, value, onChange, label }) {
 }
 
 // src/Timeline.tsx
-import { useEffect as useEffect10, useRef as useRef15 } from "react";
+import { useEffect as useEffect9, useRef as useRef14 } from "react";
 import { playEntrance as playEntrance2, prefersReducedMotion } from "@apliteni/apliteni-ui/motion";
 import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var kindIcons = { person: "user", rule: "bolt", reversal: "refresh" };
 function Timeline({ events, className, ...rest }) {
-  const previousIds = useRef15(new Set(events.map((event) => event.id)));
-  const rows = useRef15(/* @__PURE__ */ new Map());
-  useEffect10(() => {
+  const previousIds = useRef14(new Set(events.map((event) => event.id)));
+  const rows = useRef14(/* @__PURE__ */ new Map());
+  useEffect9(() => {
     if (previousIds.current.size > 0 && !prefersReducedMotion()) {
       for (const event of events) {
         if (previousIds.current.has(event.id)) continue;
@@ -2698,7 +2750,7 @@ function Timeline({ events, className, ...rest }) {
 }
 
 // src/Field.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect11, useId as useId10, useRef as useRef16, useState as useState10 } from "react";
+import { forwardRef as forwardRef6, useEffect as useEffect10, useId as useId9, useRef as useRef15, useState as useState10 } from "react";
 import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
 import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function messages(id, hint, error) {
@@ -2727,12 +2779,12 @@ function wiring(id, hint, error) {
   return { id, "aria-describedby": messages(id, hint, error), "aria-invalid": error ? true : void 0 };
 }
 function Field({ id: suppliedId, label, hint, error, required, children }) {
-  const generatedId = useId10();
+  const generatedId = useId9();
   const id = suppliedId ?? generatedId;
   return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: children({ ...wiring(id, hint, error), required }) });
 }
 var TextField = forwardRef6(function TextField2({ label, hint, error, required, type = "text", unit, icon: glyph, className = "", ...props }, ref) {
-  const id = useId10();
+  const id = useId9();
   const hasUnit = type === "number" && !!unit;
   const describedBy = [messages(id, hint, error), hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
   const control = /* @__PURE__ */ jsx29(
@@ -2759,7 +2811,7 @@ var TextField = forwardRef6(function TextField2({ label, hint, error, required,
   ] }) : control });
 });
 function TextArea({ label, hint, error, required, className = "", ...props }) {
-  const id = useId10();
+  const id = useId9();
   return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx29(
     "textarea",
     {
@@ -2772,7 +2824,7 @@ function TextArea({ label, hint, error, required, className = "", ...props }) {
   ) });
 }
 function SelectField({ label, hint, error, required, className = "", children, ...props }) {
-  const id = useId10();
+  const id = useId9();
   return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx29(
     "select",
     {
@@ -2785,11 +2837,11 @@ function SelectField({ label, hint, error, required, className = "", children, .
   ) });
 }
 function FileField({ label, hint, error, required, disabled, onFileChange, className = "", ...props }) {
-  const id = useId10();
-  const input = useRef16(null);
+  const id = useId9();
+  const input = useRef15(null);
   const [file, setFile] = useState10(null);
   const [dragging, setDragging] = useState10(false);
-  useEffect11(() => {
+  useEffect10(() => {
     const form = input.current?.form;
     const reset = () => {
       setFile(null);
@@ -2848,7 +2900,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 }
 
 // src/FileDrop.tsx
-import { useRef as useRef17, useState as useState11 } from "react";
+import { useRef as useRef16, useState as useState11 } from "react";
 import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var MARKS = {
   uploading: "clock",
@@ -2882,7 +2934,7 @@ function FileDrop({
   children,
   className
 }) {
-  const input = useRef17(null);
+  const input = useRef16(null);
   const [over, setOver] = useState11(false);
   const status = file?.status ?? "uploading";
   const word = status === "error" ? file?.error ?? WORDS.error : file?.state ?? WORDS[status];
@@ -3017,7 +3069,7 @@ var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...p
 });
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState12 } from "react";
+import { createContext as createContext2, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect4, useRef as useRef17, useState as useState12 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var Context = createContext2(null);
@@ -3028,10 +3080,10 @@ function useToast() {
   return push;
 }
 function Notice({ notice, remove }) {
-  const root = useRef18(null);
+  const root = useRef17(null);
   const [leaving2, setLeaving] = useState12(false);
-  const dismissed = useRef18(false);
-  const remaining = useRef18(5e3);
+  const dismissed = useRef17(false);
+  const remaining = useRef17(5e3);
   const [hovered, setHovered] = useState12(false);
   const [focused, setFocused] = useState12(false);
   const paused = hovered || focused;
@@ -3042,7 +3094,7 @@ function Notice({ notice, remove }) {
     if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) remove();
     else setLeaving(true);
   }, [remove]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (leaving2) {
       const element = root.current;
       const finish = (event) => {
@@ -3056,7 +3108,7 @@ function Notice({ notice, remove }) {
       };
     }
   }, [leaving2, remove]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (leaving2 || notice.action || paused) return;
     const started = Date.now();
     const timer = setTimeout(dismiss, remaining.current);
@@ -3134,8 +3186,8 @@ function usePublishedReach(stack2, count) {
 }
 function Toast({ children }) {
   const [entries, setEntries] = useState12([]);
-  const nextId = useRef18(0);
-  const stack2 = useRef18(null);
+  const nextId = useRef17(0);
+  const stack2 = useRef17(null);
   const push = useCallback4((notice) => {
     const id = nextId.current++;
     const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
@@ -3152,22 +3204,22 @@ function Toast({ children }) {
 }
 
 // src/AppShell.tsx
-import { useEffect as useEffect14, useId as useId12, useState as useState14 } from "react";
+import { useEffect as useEffect13, useId as useId11, useState as useState14 } from "react";
 import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName } from "@apliteni/apliteni-ui";
 
 // src/SidebarNav.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect13, useId as useId11, useState as useState13 } from "react";
+import { forwardRef as forwardRef8, useEffect as useEffect12, useId as useId10, useState as useState13 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
 import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
 function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
-  const uid = useId11();
+  const uid = useId10();
   const group = !sub && !!item.items?.length;
   const childActive = group && item.items.some((child) => child.id === active);
   const [expanded, setExpanded] = useState13();
   const open = expanded ?? item.defaultOpen ?? childActive;
   const [entering, setEntering] = useState13(false);
-  useEffect13(() => {
+  useEffect12(() => {
     if (!entering) return;
     const timer = setTimeout(() => setEntering(false), ENTRANCE_FALLBACK_MS);
     return () => clearTimeout(timer);
@@ -3218,7 +3270,7 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   return /* @__PURE__ */ jsx33("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx33("a", { ...props }) });
 }
 function Section({ section, ...props }) {
-  const uid = useId11();
+  const uid = useId10();
   return /* @__PURE__ */ jsxs28("div", { className: "ui-nav__section", children: [
     section.label && /* @__PURE__ */ jsx33("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
     /* @__PURE__ */ jsx33("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx33(Row, { item, ...props }, item.id)) })
@@ -3274,21 +3326,21 @@ function AppShell({
   palette,
   renderLink
 }) {
-  const uid = useId12();
+  const uid = useId11();
   const [collapsed, setCollapsed] = useState14(defaultCollapsed);
   const [search, setSearch] = useState14(false);
   const [more, setMore] = useState14(false);
   const [theme, setTheme] = useState14("dark");
   const current = path(pathname);
   const active = sections.filter((section) => current === path(section.href) || path(section.href) !== "/" && current.startsWith(`${path(section.href)}/`)).sort((a, b) => path(b.href).length - path(a.href).length)[0];
-  useEffect14(() => {
+  useEffect13(() => {
     setCollapsed(railCollapsed() ?? defaultCollapsed);
   }, [defaultCollapsed]);
-  useEffect14(() => {
+  useEffect13(() => {
     setMore(false);
     setSearch(false);
   }, [pathname]);
-  useEffect14(() => {
+  useEffect13(() => {
     const root = document.documentElement;
     const sync2 = () => setTheme(root.getAttribute("data-theme") === "light" ? "light" : "dark");
     sync2();
@@ -3296,7 +3348,7 @@ function AppShell({
     observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
     return () => observer.disconnect();
   }, []);
-  useEffect14(() => {
+  useEffect13(() => {
     const hotkey = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return;
       const target = event.target;
@@ -3523,7 +3575,7 @@ function ThemeToggle({ labelled = false }) {
 }
 
 // src/Success.tsx
-import { forwardRef as forwardRef9, useEffect as useEffect15, useRef as useRef19, useState as useState15 } from "react";
+import { forwardRef as forwardRef9, useEffect as useEffect14, useRef as useRef18, useState as useState15 } from "react";
 import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
   const circled = variant === "circled";
@@ -3571,11 +3623,11 @@ var pieces = [
 ];
 function Countdown({ seconds, label = "Redirecting", onDone }) {
   const [remaining, setRemaining] = useState15(seconds);
-  const callback = useRef19(onDone);
-  useEffect15(() => {
+  const callback = useRef18(onDone);
+  useEffect14(() => {
     callback.current = onDone;
   }, [onDone]);
-  useEffect15(() => {
+  useEffect14(() => {
     let count = seconds;
     const timer = setInterval(() => {
       count -= 1;

package/src/components/dropdown.js

@@ -16,6 +16,8 @@ export { dropdownMatch, dropdownFiltering } from '../logic/dropdown.js';
 //   wireDropdown(container);   // or let wireTopbar() do it
 import { esc, icon } from './index.js';
 import { safeUrl } from '../html.js';
+// The fade's own length, read off the stylesheet rather than copied. why: src/motion.js
+import { transitionMs } from '../motion.js';
 const cx = (...a) => a.filter(Boolean).join(' ');
 
 // A trailing status badge. `badge` is the text shown, in the case it is written
@@ -325,6 +327,215 @@ function ddResetSearch(dd, panel, search) {
   if (panel.offsetWidth) panel.style.minWidth = `${panel.offsetWidth}px`;
 }
 
+/* The kit's menu floor, the one `.ui-dropdown__panel` writes. The stylesheets
+ * carry the same number; stories/filter-bar-fit.test.js reads all of them and
+ * fails when one drifts. why: src/styles/dropdown.css */
+export const DD_MENU_FLOOR = 240;
+
+/**
+ * Where a filter chip's menu may sit. #484 bounds the panel to its trigger, so a
+ * chip printing its value alone (#536) left a 48px menu breaking words
+ * mid-letter — #549. An OPEN panel takes the floor instead and slides along the
+ * row when the room on the side it opens from is short; shut, it keeps the
+ * trigger's width, which is why #467 needs no measuring at all.
+ *
+ * A panel is anchored at one edge of its dropdown — its inline end when it
+ * carries `is-end` — so room is measured from that edge and the slide goes the
+ * other way. Measuring an end-anchored panel forwards put one off the page.
+ * why: docs/specification.md#a-filter-row-holds-its-panels
+ *
+ * @param {Element} dd a `.ui-dropdown` that may be inside a filter row
+ * @param {number} [floor] the width to reach for
+ * @returns {{room: number, shift: number, floor: number, end: boolean}|null}
+ */
+export function filterPanelFit(dd, floor = DD_MENU_FLOOR) {
+  /* A chip's menu, not any menu in a filter row: the slide below is measured from
+   * the trigger's offset along the row, so a panel anchored to the row itself is
+   * not this function's subject and must size itself. why: src/styles/filter-bar.css */
+  const chip = typeof dd?.closest === 'function' ? dd.closest('.ui-filter-bar__chip') : null;
+  const bar = chip ? chip.closest('.ui-filter-bar') : null;
+  if (!bar || typeof bar.getBoundingClientRect !== 'function') return null;
+  const row = bar.getBoundingClientRect();
+  const box = dd.getBoundingClientRect();
+  const panel = typeof dd.querySelector === 'function' ? dd.querySelector('.ui-dropdown__panel') : null;
+  const end = !!panel?.classList?.contains('is-end');
+  // A row narrower than the floor decides the width; nothing may leave the row.
+  const want = Math.min(floor, row.width);
+  const ahead = end
+    ? Math.max(0, box.right - row.left)    // an end-anchored panel grows backwards
+    : Math.max(0, row.right - box.left);
+  const slack = end
+    ? Math.max(0, row.right - box.right)   // …and slides towards the row's end
+    : Math.max(0, box.left - row.left);
+  const shift = Math.min(slack, Math.max(0, want - ahead));
+  return { room: ahead + shift, shift, floor: want, end };
+}
+
+/** Write the fit onto the panel, and say whether any of the three numbers moved.
+ *  All three, because the stylesheet reads all three; it falls back to the
+ *  trigger's width when they are unset, so a panel opened before this runs is
+ *  bounded rather than unbounded.
+ *
+ *  A number that has not changed is not written again, which is what stops the
+ *  observers below from answering their own writes: a fit landing on the same
+ *  three numbers mutates nothing, so it reports nothing. */
+function ddWriteFit(panel, fit) {
+  let moved = false;
+  for (const prop of ['room', 'shift', 'floor']) {
+    const name = `--ui-filter-panel-${prop}`;
+    const next = `${fit[prop]}px`;
+    if (panel.style.getPropertyValue(name) === next) continue;
+    panel.style.setProperty(name, next);
+    moved = true;
+  }
+  return moved;
+}
+
+/** Fit a panel just opened, or leave it alone outside a filter row. */
+function ddFitFilterPanel(dd, panel) {
+  const fit = filterPanelFit(dd);
+  if (!fit || !panel?.style) return false;
+  return ddWriteFit(panel, fit);
+}
+
+/** Measure an open menu again where its row now puts it. The fit it was opened
+ *  with can describe a row that no longer exists — a menu opened at 1280 and left
+ *  open at 390 kept a 1102px room and stood 11px off the page — or a place in that
+ *  row the chip has since left. A search panel's inline `min-width` was read at
+ *  the old width too, and inline beats the sheet, so it is read again off the
+ *  newly bounded box; only when the fit moved, because re-reading it is itself a
+ *  write.
+ *  why: docs/specification.md#a-filter-row-holds-its-panels */
+function ddRefitFilterPanel(dd, panel) {
+  const fit = panel?.style ? filterPanelFit(dd) : null;
+  if (!fit || !ddWriteFit(panel, fit)) return;
+  if (!panel.style.minWidth) return;
+  panel.style.minWidth = '';
+  if (panel.offsetWidth) panel.style.minWidth = `${panel.offsetWidth}px`;
+}
+
+/** The row this chip's menu is fitted to, or null outside one. */
+function ddRowOf(dd) {
+  return dd?.closest?.('.ui-filter-bar__chip')?.closest('.ui-filter-bar') || null;
+}
+
+/** Is this node inside some dropdown panel? The fit writes to a panel and to
+ *  nothing else, so a change inside one is never news — and a panel is
+ *  `position: absolute`, so nothing in it can move a chip along its row. Any
+ *  panel, not only the one being fitted: two open menus in one row would
+ *  otherwise answer each other a mutation at a time.
+ *  why: docs/specification.md#a-filter-row-holds-its-panels */
+function ddOurs(node) {
+  const el = node?.nodeType === 1 ? node : node?.parentElement;
+  return !!el?.closest?.('[data-dropdown-panel]');
+}
+
+/**
+ * Watch what the fit is measured from, and fit the menu again when it changes.
+ *
+ * Two inputs, two watchers. The row's width is one, observed rather than taken
+ * from `resize`, which fires before an animating row has settled. Where the chip
+ * sits along the row is the other, and it moves while the row keeps both of its
+ * dimensions: re-labelling the chip in front of an open menu at 390px slid this
+ * one 27.97px and took the menu 27.97px out of its row. So the boxes laid out in
+ * the row are observed too — a chip is moved by the size of the ones in front of
+ * it — and the mutation that moved it is watched for the frame before any of it
+ * is laid out.
+ *
+ * Why those two cover the arithmetic, and the one case they do not:
+ * why: docs/specification.md#a-filter-row-holds-its-panels
+ */
+function ddWatchRow(dd, panel) {
+  ddUnwatchRow(dd);
+  const row = ddRowOf(dd);
+  const view = dd.ownerDocument?.defaultView;
+  if (!row) return;
+  const refit = () => { if (dd.classList.contains('open')) ddRefitFilterPanel(dd, panel); };
+  if (typeof view?.ResizeObserver === 'function') {
+    // observe() reports each current box at once, which the fit was just written
+    // from, so the first round writes nothing.
+    const ro = new view.ResizeObserver(refit);
+    ro.observe(row);
+    for (const kid of row.children) ro.observe(kid);
+    dd.__ddRowFit = ro;
+  }
+  if (typeof view?.MutationObserver !== 'function') return;
+  const mo = new view.MutationObserver((records) => {
+    if (records.every((m) => ddOurs(m.target))) return;
+    // A chip added or removed brings a box the observer above is not watching yet.
+    if (dd.__ddRowFit && records.some((m) => m.type === 'childList')) {
+      for (const kid of row.children) dd.__ddRowFit.observe(kid);
+    }
+    refit();
+  });
+  /* characterData as well as the two structural kinds: a chip's printed value
+     replaced is a text node changed, with no child list and no attribute moving
+     with it — which is what a React re-render of that value arrives as too.
+     Attributes, because a class is how a chip changes shape; subtree, because the
+     text that sets a chip's width is inside it. */
+  mo.observe(row, { subtree: true, childList: true, attributes: true, characterData: true });
+  dd.__ddRowMo = mo;
+}
+
+function ddUnwatchRow(dd) {
+  dd.__ddRowFit?.disconnect();
+  dd.__ddRowFit = null;
+  dd.__ddRowMo?.disconnect();
+  dd.__ddRowMo = null;
+}
+
+/* A few frames past the sheet's own end, so the timer never cuts the fade's last
+ * frame. The number the dialogs' exit uses. */
+const DD_EXIT_SLACK_MS = 50;
+
+/**
+ * Hold a closing chip menu's open geometry until its fade has finished.
+ *
+ * `.open` stops matching in the frame the menu closes; the fade does not — the
+ * panel transitions opacity over --dur-med. Dropping the width there left a 240px
+ * menu painted as a 48px column of single letters: #549 on the way out. The timer
+ * is the way out of a transitionend that never comes.
+ * why: src/styles/filter-bar.css
+ */
+function ddHoldClose(dd, panel) {
+  ddCancelClose(dd, panel);
+  panel.classList.add('is-closing');
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    dd.__ddClosing = null;
+    panel.classList.remove('is-closing');
+    panel.style.minWidth = '';
+    for (const prop of ['room', 'shift', 'floor']) {
+      panel.style.removeProperty(`--ui-filter-panel-${prop}`);
+    }
+  };
+  // Only the panel's own fade: a row's background transition bubbles here too.
+  const onEnd = (e) => { if (e.target === panel && e.propertyName === 'opacity') stop(); };
+  const timer = setTimeout(() => stop(), transitionMs(panel) + DD_EXIT_SLACK_MS);
+  function stop() {
+    panel.removeEventListener('transitionend', onEnd);
+    clearTimeout(timer);
+    finish();
+  }
+  panel.addEventListener('transitionend', onEnd);
+  // Re-opened mid-fade: the wait is abandoned, so it cannot clear a fit the new
+  // open has already written.
+  dd.__ddClosing = () => {
+    done = true;
+    dd.__ddClosing = null;
+    panel.removeEventListener('transitionend', onEnd);
+    clearTimeout(timer);
+    panel.classList.remove('is-closing');
+  };
+}
+
+function ddCancelClose(dd, panel) {
+  if (dd.__ddClosing) dd.__ddClosing();
+  else panel?.classList?.remove('is-closing');
+}
+
 // `auto` is the only direction the wiring decides; `up` and the default are the
 // panel's own class, set once at render. Flip only when below is too tight AND
 // above is roomier, so a panel that fits nowhere still opens the way it says.
@@ -373,7 +584,17 @@ function sweepOrphanPanels(host) {
 function closeDropdown(dd) {
   if (!dd.classList.contains('open')) return;
   dd.classList.remove('open');
-  ddPanelOf(dd)?.classList.remove('is-open');
+  const panel = ddPanelOf(dd);
+  panel?.classList.remove('is-open');
+  ddUnwatchRow(dd);
+  /* A search panel carries the width it was opened at as an inline `min-width`,
+   * and inline beats any sheet. Inside a filter row that leaves a SHUT panel wider
+   * than its trigger, which is #467. Cleared here, and ddResetSearch() writes it
+   * again on the next open — except for a chip's menu, which gives the pin and the
+   * fit back at the END of its fade, both being its open geometry. A portalled
+   * panel is never fitted, so it has none to hold. why: ddHoldClose() */
+  if (panel?.style && !dd.__ddPanel && ddRowOf(dd)) ddHoldClose(dd, panel);
+  else if (panel?.style && dd.closest?.('.ui-filter-bar')) panel.style.minWidth = '';
   dd.querySelector('[data-dropdown-trigger]')?.setAttribute('aria-expanded', 'false');
 }
 
@@ -396,12 +617,21 @@ function openDropdown(dd, focusIdx) {
   closeAllDropdowns(dd);
   const panel = ddPanelOf(dd);
   const search = ddSearchOf(dd);
-  if (panel && search) ddResetSearch(dd, panel, search);
   if (panel) {
+    // An earlier close may still be holding its geometry; this open owns it now.
+    ddCancelClose(dd, panel);
     ddResolveDirection(dd, panel);
     if (dd.__ddPanel) { positionPortalPanel(dd, panel); panel.classList.add('is-open'); }
+    else { ddFitFilterPanel(dd, panel); ddWatchRow(dd, panel); }
   }
   dd.classList.add('open');
+  /* After `open`, and after the fit: ddResetSearch() pins the width it reads off
+   * the panel, and the rule that widens a filter menu only applies once the
+   * panel is open. Reading first pinned 50px inline, which beats any stylesheet
+   * — a searchable chip in a filter row kept the 74px menu #549 reported, while
+   * React, whose effects already ran in this order, gave 240px for the same
+   * markup. why: src/styles/filter-bar.css */
+  if (panel && search) ddResetSearch(dd, panel, search);
   dd.querySelector('[data-dropdown-trigger]')?.setAttribute('aria-expanded', 'true');
   // With search, focus goes to the field however the panel was opened, and
   // the selected row (or the first) is the one Enter would pick.
@@ -451,10 +681,21 @@ function ddListen(doc) {
       if (dd.classList.contains('open') && dd.__ddPanel) positionPortalPanel(dd, dd.__ddPanel);
     }
   };
+  /* The fallback re-fit, for a view with no ResizeObserver. Not taken as well where
+   * ddWatchRow() is watching: a `resize` event is the worse measurement of the two.
+   * why: docs/specification.md#a-filter-row-holds-its-panels */
+  const refit = () => {
+    for (const dd of ddLive()) {
+      if (dd.classList.contains('open') && !dd.__ddPanel && !dd.__ddRowFit) {
+        ddRefitFilterPanel(dd, ddPanelOf(dd));
+      }
+    }
+  };
   const view = doc.defaultView;
   if (!view) return;
   view.addEventListener('scroll', reposition, true);
   view.addEventListener('resize', reposition);
+  view.addEventListener('resize', refit);
 }
 
 export function wireDropdown(root = document) {
@@ -489,6 +730,15 @@ export function wireDropdown(root = document) {
       }
     }
 
+    // A panel rendered already-open never passes through openDropdown(), so its
+    // fit has to be taken here too — otherwise a story or a server-rendered bar
+    // keeps the fallback width and #549 survives in exactly the place a
+    // default-open menu makes most visible.
+    if (panel && !dd.__ddPanel && dd.classList.contains('open')) {
+      ddFitFilterPanel(dd, panel);
+      ddWatchRow(dd, panel);
+    }
+
     trigger.addEventListener('click', (e) => {
       e.stopPropagation();
       if (dd.classList.contains('open')) closeDropdown(dd);

package/src/components/filter-bar.js

@@ -1,13 +1,13 @@
 import { button, esc } from './index.js';
 import { dropdown, wireDropdown } from './dropdown.js';
-import { filterChipText, filterChipName, filterChipUnset, focusNextStop } from '../logic/filter-bar.js';
+import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from '../logic/filter-bar.js';
 
 export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all filters', disabled = false, busy = false } = {}) {
   return `<fieldset class="ui-filter-bar" data-filter-bar${disabled || busy ? ' disabled' : ''}${busy ? ' aria-busy="true"' : ''}>`
     + `<legend class="ui-filter-bar__legend">${esc(label)}</legend>`
     + filters.map(filter => `<fieldset class="ui-filter-bar__chip" data-filter-id="${esc(filter.id)}"${filter.disabled ? ' disabled' : ''}>`
       + `<legend class="ui-filter-bar__legend">${esc(filter.label)}</legend>`
-      + dropdown({ items: filter.items || [], variant: 'select',
+      + dropdown({ items: filterChipItems(filter), variant: 'select',
         // The chip prints one line; the field's name reaches a reader through the
         // trigger's name and the chip's own legend. why: docs/specification.md#dense-financial-tables
         triggerContent: `<span class="${filterChipUnset(filter) ? 'ui-dropdown__value is-placeholder' : 'ui-dropdown__value'}">${esc(filterChipText(filter))}</span>`,

package/src/index.d.ts

@@ -12,6 +12,12 @@ export declare function filterChipName(filter?: { label?: string; value?: string
 export declare function filterChipUnset(filter?: { value?: string }): boolean;
 export declare function nextFocusStop(host: Element | null | undefined): HTMLElement | null;
 export declare function focusNextStop(host: Element | null | undefined): HTMLElement | null;
+/** The chip's items with the chip's own `value` marked `selected`, so the line the chip
+ *  prints and the row its menu marks cannot disagree. A row is matched by `value`, or by
+ *  `label` where it has none. Every row's flag is written, so a chip that is unset or
+ *  whose value is in no row marks nothing rather than leaving a `selected` the caller
+ *  set standing. The caller's array and objects are not written to. */
+export declare function filterChipItems<T>(filter?: { value?: string; items?: T[] }): T[];
 export declare function segmentedNextIndex(key: string, index: number, length: number): number | null;
 export declare function icon(name: string, className?: string): string;
 export declare function snippet(opts?: Record<string, unknown>): string;
@@ -28,6 +34,18 @@ export declare function wireDropdown(root?: Document | Element): void;
 /** The kit's own match, asked rather than re-implemented by <Dropdown>. */
 export declare function dropdownMatch(label: unknown, query: unknown): boolean;
 export declare function dropdownFiltering(query: unknown): boolean;
+/** The kit's menu floor, the width `.ui-dropdown__panel` writes. */
+export declare const DD_MENU_FLOOR: number;
+/** Where a filter chip's open menu can sit: the room from the edge it is
+ *  anchored at to the far side of its row once slid, how far it had to slide,
+ *  the width it reached for, and whether it is anchored at its inline end.
+ *  `null` unless the dropdown is inside a `.ui-filter-bar__chip`: the slide is a
+ *  chip's offset along its row, so a panel anchored to the row itself is not this
+ *  function's subject and sizes itself. why: docs/library.md */
+export declare function filterPanelFit(
+  dd: Element | null | undefined,
+  floor?: number,
+): { room: number; shift: number; floor: number; end: boolean } | null;
 export declare function backLink(opts?: Record<string, unknown>): string;
 export declare function statBand(opts?: Record<string, unknown>): string;
 export declare function commandPalette(opts?: Record<string, unknown>): string;

package/src/index.js

@@ -30,7 +30,7 @@ export * from './components/filter-bar.js';
 export { dropdownMatch, dropdownFiltering } from './logic/dropdown.js';
 export { SCORE, rankGroups, rankCommands, scoreCommand, paletteHotkey } from './logic/command-palette.js';
 export { segmentedNextIndex } from './logic/segmented.js';
-export { filterChipText, filterChipName, filterChipUnset, nextFocusStop, focusNextStop } from './logic/filter-bar.js';
+export { filterChipText, filterChipName, filterChipUnset, filterChipItems, nextFocusStop, focusNextStop } from './logic/filter-bar.js';
 export { PAGE_SIZES, DEFAULT_PAGE_SIZE } from './logic/pagination.js';
 export { calloutIcons } from './logic/callout.js';
 export { formatNumericValue, formatDeltaValue } from './logic/table-values.js';

package/src/logic/filter-bar.js

@@ -103,3 +103,23 @@ export function focusNextStop(host) {
   }
   return null;
 }
+
+/** The chip's menu with the chip's own value marked, so the line the chip prints
+ *  and the row the menu marks cannot disagree. A row is identified the way the
+ *  dropdown identifies it when it reports a pick: by `value`, or by `label` where
+ *  it carries none.
+ *
+ *  Every row's flag is written, not only the chosen one's, so a chip with nothing
+ *  chosen or a value in no row marks no row. Handing those items back as the
+ *  consumer wrote them left whatever they had marked standing — a menu checking
+ *  `All`, `aria-selected="true"` on it, under a chip printing `Asia`. The
+ *  consumer's own array and objects are not written to. #550
+ *  why: docs/specification.md#a-filter-row-holds-its-panels */
+export function filterChipItems(filter = {}) {
+  const items = filter.items || [];
+  const chosen = text(filter.value);
+  const row = (it) => !!it && it !== '---' && !it.separator;
+  const key = (it) => text(it.value != null ? it.value : it.label);
+  const inForce = !filterChipUnset(filter) && items.some((it) => row(it) && key(it) === chosen);
+  return items.map((it) => (row(it) ? { ...it, selected: inForce && key(it) === chosen } : it));
+}

package/src/motion.d.ts

@@ -4,3 +4,5 @@ export declare function initReveal(root?: Document | Element): IntersectionObser
 export declare const ENTRANCE_FALLBACK_MS: number;
 export declare function playEntrance(element: Element | null, className?: string): void;
 export declare function replay(element: HTMLElement | null): void;
+/** How long the stylesheet says this element's transition lasts, in ms; 0 off-DOM. */
+export declare function transitionMs(element: Element | null | undefined): number;

package/src/motion.js

@@ -100,6 +100,33 @@ export function playEntrance(el, className = 'is-entering') {
   entering.set(el, () => done());
 }
 
+/**
+ * How long the stylesheet says this element's transition lasts — the longest
+ * duration plus its own delay, in ms, and 0 off-DOM or for no element at all.
+ *
+ * What a backstop timer beside a `transitionend` listener is sized from, so the
+ * duration stays the sheet's rather than a copy of --dur-med. The event does not
+ * come for a transition that did not run, and jsdom never fires it at all.
+ */
+export function transitionMs(el) {
+  // getComputedStyle throws a TypeError for a non-element, and the view below
+  // falls back to the global window, so a missing ref took its caller down.
+  if (el?.nodeType !== 1) return 0;
+  const view = el.ownerDocument?.defaultView
+    || (typeof window === 'undefined' ? null : window);
+  const cs = view?.getComputedStyle?.(el);
+  if (!cs) return 0;
+  // A delay list shorter than the duration list repeats, as the spec says.
+  const times = (list) => String(list || '').split(',').map((t) => {
+    const n = Number.parseFloat(t);
+    if (!Number.isFinite(n)) return 0;
+    return t.trim().endsWith('ms') ? n : n * 1000;
+  });
+  const durations = times(cs.transitionDuration);
+  const delays = times(cs.transitionDelay);
+  return Math.max(0, ...durations.map((d, i) => d + delays[i % delays.length]));
+}
+
 /** Restart the CSS animation on an element (for a "replay" control). */
 export function replay(el) {
   if (!el || !el.style) return;

package/src/styles/filter-bar.css

@@ -12,16 +12,9 @@
    take. `:enabled` leaves a disabled chip its own ink. why: guidelines/labels-and-titles.md */
 .ui-filter-bar button:enabled .ui-dropdown__value.is-placeholder { /* muted-ink: placeholder — a filter chip with nothing chosen */ color: var(--muted); }
 
-/* A chip's panel is as wide as the chip's trigger, never the 240px floor
-   .ui-dropdown__panel gives a standalone dropdown. A panel is positioned at its
-   trigger's inline start, so on a narrow row a later chip put its panel past the
-   screen — shut as well as open, a `visibility: hidden` box still being laid out.
-   The percentage resolves against .ui-dropdown, the panel's containing block,
-   which is the trigger's width because the trigger is its one in-flow child.
-   `overflow-wrap` keeps that a bound rather than a clip: a panel is
-   `overflow: visible`, so a value with no break opportunity would run out of it
-   and off the page. It inherits, reaching an option's label and description.
-   why: docs/specification.md#a-filter-row-holds-its-panels */
+/* Shut, a panel is the trigger's width, never the 240px floor a standalone
+   dropdown gets: it is laid out while hidden, so a wider one widened the page
+   (#467). why: docs/specification.md#a-filter-row-holds-its-panels */
 .ui-filter-bar .ui-dropdown__panel { min-width: 100%; max-width: 100%; overflow-wrap: anywhere; }
 /* The clear action takes the kit's bordered skin minus its fill: words belong on
    the page, not on a grey block, in any state — Artur, round r28. Rest stays at
@@ -39,3 +32,55 @@
    measures on every ground. The edge stays the kit's --disabled-border. */
 .ui-filter-bar [data-filter-clear] button:disabled,
 .ui-filter-bar [data-filter-clear] button[aria-disabled="true"] { /* muted-ink: state — the clear action is off and its words sit on the page */ color: var(--disabled-ink-bare); }
+
+/* Open, a chip's menu takes the kit's menu floor, measured and slid by
+   filterPanelFit(); `is-closing` holds that geometry through the fade. #549
+   why: docs/specification.md#a-filter-row-holds-its-panels */
+.ui-filter-bar__chip .ui-dropdown.open .ui-dropdown__panel,
+.ui-filter-bar__chip .ui-dropdown__panel.is-closing {
+  min-width: min(var(--ui-filter-panel-floor, 240px), var(--ui-filter-panel-room, 100%));
+  max-width: var(--ui-filter-panel-room, 100%);
+  margin-inline-start: calc(-1 * var(--ui-filter-panel-shift, 0px));
+}
+/* An end-aligned panel is pinned by its right edge, so the slide pushes it. */
+.ui-filter-bar__chip .ui-dropdown.open .ui-dropdown__panel.is-end,
+.ui-filter-bar__chip .ui-dropdown__panel.is-end.is-closing {
+  margin-inline-start: 0;
+  margin-inline-end: calc(-1 * var(--ui-filter-panel-shift, 0px));
+}
+
+/* A 16px tick and an 11px gap do not fit the 48px trigger a chip printing `All`
+   gives its SHUT panel, and overflow-wrap cannot break a mark; the clip is what
+   shrinks the glyph and not just its box.
+
+   Shut is the whole of it. Written for every panel in a chip, this reached the
+   open menu too and left 9.8px of the check in a 240px menu — a chevron, not a
+   tick. Open the menu is at the floor with room for the mark, and `is-closing`
+   holds the open geometry through the fade, so it is open for this as well. #550
+   why: docs/specification.md#a-filter-row-holds-its-panels */
+.ui-filter-bar__chip .ui-dropdown:not(.open) .ui-dropdown__panel:not(.is-closing) .ui-dropdown__tick {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* The chosen value takes --glow-purple, the wash .ui-nav--tabs.is-pill gives the
+   tab you are on, and keeps the kit's 16px check. The wash is a 1.2:1 tint, so the
+   check is what identifies the state under WCAG 1.4.1; Apple, Material, Carbon,
+   Primer and Radix all tick a chosen menu row. #549
+   why: docs/specification.md#a-filter-row-holds-its-panels */
+.ui-filter-bar .ui-dropdown__item.is-selected { background: var(--glow-purple); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
+/* Kit-wide a chosen label steps down to --text, which left the row in force the
+   faintest in the panel. Under the wash it holds --strong. */
+.ui-filter-bar .ui-dropdown__item.is-selected .ui-dropdown__label { color: var(--strong); }
+/* The keyboard cursor and focus each set an opaque --surface, which would take the
+   wash off; restated here so the guarantee is one declaration a reader and
+   filter-selected-mark.test.js can both find, and each still reads by its own paint.
+   why: guidelines/accessibility-floor.md#measurable-pairs */
+.ui-filter-bar .ui-dropdown__item.is-selected:focus-visible,
+.ui-filter-bar .ui-dropdown__item.is-selected.is-active { background: var(--glow-purple); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
+/* Hover's other paint is a 1px edge, 1.06:1 on the wash, which left the row in force
+   the one row a pointer got no answer from. Selection is a background highlight, so
+   hover deepens it: 9% more accent, the step .ui-table--zebra gives a hovered row.
+   why: docs/specification.md#a-filter-row-holds-its-panels */
+.ui-filter-bar .ui-dropdown__item.is-selected:hover { background: color-mix(in srgb, var(--glow-purple), var(--accent) 9%); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }

package/src/styles/topbar.css

@@ -191,7 +191,7 @@
    src/styles/dropdown.css:176 `.ui-dropdown__item:hover`.
    why: docs/specification.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
-/* The row is a keyboard stop: src/components/dropdown.js:554
+/* The row is a keyboard stop: src/components/dropdown.js:804
    `items[next < 0 ? 0 : next]?.focus()` moves focus onto a `[data-dd-item]` with
    the arrow keys, and this is one. It takes the ring on its own 10px radius, the
    same way `.amenu a` above does. #482 */