@helloimjolopez-pathway/pathway-components 0.12.0 → 0.14.0

package/components/popover-menu/popover-menu.jsx

@@ -60,6 +60,7 @@ import { Spinner } from "../spinner/spinner.jsx";
 import { Badge } from "../badge/badge.jsx";
 import { Avatar, initialsFrom } from "../avatar/avatar.jsx";
 import { Button } from "../button/button.jsx";
+import { Tooltip } from "../tooltip/tooltip.jsx";
 
 // ─── TOKEN HELPERS ────────────────────────────────────────────────────────────
 // SC = semantic-color (themes/*.css), SL = semantic-layout-units (layout.css),
@@ -191,6 +192,12 @@ export const TYPE = {
   header:  { fontSize: ST("font-size-xs"), lineHeight: ST("line-height-xs-single"), fontWeight: ST("weight-semibold"), letterSpacing: ST("letter-spacing-wide") },
 };
 
+/* The BottomSheet's tokens and measurements (bottom-sheet.jsx T and L), named
+   here rather than imported because BottomSheet imports this module. */
+const SHEET_T = { surface: SC("fill-surface-elevated"), overlay: SC("scrim-subtle"), handle: SC("fill-static-neutral-strong") };
+const SHEET_L = { radius: SL("cornerradius-xlarge"), pillRadius: SL("cornerradius-full"),
+  maxWidth: 640, topClearance: 56, handleZone: 20, pillWidth: 32, pillHeight: 4 };
+
 const ITEM = ".pw-menu-item";
 const live = (s) => `${ITEM}:not([data-disabled]):is(${s})`;
 const HOVER = "[data-hovered],[data-focused],[data-open],[data-force=Hover],[data-force=Focus]";
@@ -206,6 +213,9 @@ const CSS = `
   background:${T.panel};border:${L.panelBorder} solid ${T.panelBorder};border-radius:${L.panelRadius};box-shadow:${L.shadow};
   font-family:${ST("family-brand")},sans-serif}
 .pw-menu-panel[data-searchable]{height:${L.searchHeight}px}
+/* React Aria stacks the panel at 100000 inline; a truncated label's Tooltip
+   (portalled to the body at 1000) has to sit above it. */
+body:has(.pw-menu-panel) .pw-tooltip{z-index:100001}
 .pw-menu-panel[data-entering]{animation:pw-menu-in ${M("duration-4")} ${M("easing-decelerate")} both}
 .pw-menu-panel[data-placement=top][data-entering]{animation-name:pw-menu-in-up}
 .pw-menu-panel[data-exiting]{animation:pw-menu-out ${M("duration-2")} ${M("easing-standard")} both}
@@ -304,7 +314,25 @@ ${ITEM}:is([data-selected],[data-current]) .pw-menu-item__stripe{background:${T.
   border:0;border-radius:${L.itemRadius};background:${T.avatarFill};color:${T.avatarText};font-size:${ST("font-size-xxs")};font-weight:${ST("weight-semibold")}}
 .pw-menu-trigger :is(.pw-menu-trigger__icon,.pw-menu-trigger__button,.pw-menu-trigger__avatar):focus-visible{outline:${L.focusWidth} solid ${T.focusRing}}
 
+/* Below 768 the panel opens as a bottom sheet from the BottomSheet tokens, the
+   way the approved demo draws it (smallScreen="float" keeps it floating). The scrim is a spread shadow, so a press outside
+   still reaches the page and closes the menu. */
+@media (max-width: 767px){
+  .pw-menu-panel[data-small-screen=sheet]{position:fixed !important;top:auto !important;bottom:0 !important;left:0 !important;right:0 !important;
+    width:auto;max-width:${SHEET_L.maxWidth}px;margin:0 auto;max-height:calc(var(--visual-viewport-height,100vh) - ${SHEET_L.topClearance}px) !important;
+    padding-top:${SHEET_L.handleZone}px;padding-bottom:env(safe-area-inset-bottom,0);
+    background:${SHEET_T.surface};border-bottom:0;border-radius:${SHEET_L.radius} ${SHEET_L.radius} 0 0;box-shadow:0 0 0 100vmax ${SHEET_T.overlay}}
+  .pw-menu-panel[data-small-screen=sheet]::before{content:"";position:absolute;top:${(SHEET_L.handleZone - SHEET_L.pillHeight) / 2}px;left:50%;
+    width:${SHEET_L.pillWidth}px;height:${SHEET_L.pillHeight}px;margin-left:-${SHEET_L.pillWidth / 2}px;border-radius:${SHEET_L.pillRadius};background:${SHEET_T.handle}}
+  .pw-menu-panel[data-small-screen=sheet][data-entering],.pw-menu-panel[data-small-screen=sheet][data-placement=top][data-entering]{animation:pw-menu-sheet-in ${M("duration-5")} ${M("easing-emphasized")} both}
+  .pw-menu-panel[data-small-screen=sheet][data-exiting]{animation:pw-menu-sheet-out ${M("duration-4")} ${M("easing-accelerate")} both}
+  @keyframes pw-menu-sheet-in{from{transform:translateY(100%)}to{transform:none}}
+  @keyframes pw-menu-sheet-out{from{transform:none}to{transform:translateY(100%)}}
+}
+
 @media (prefers-reduced-motion: reduce){
+  .pw-menu-panel[data-small-screen=sheet][data-entering],.pw-menu-panel[data-small-screen=sheet][data-placement=top][data-entering]{animation:pw-menu-fade ${M("duration-2")} ${M("easing-standard")} both}
+  .pw-menu-panel[data-small-screen=sheet][data-exiting]{animation:pw-menu-out ${M("duration-2")} ${M("easing-standard")} both}
   .pw-menu-panel[data-entering],.pw-menu-panel[data-placement=top][data-entering]{animation:pw-menu-fade ${M("duration-2")} ${M("easing-standard")} both}
   .pw-menu-panel[data-exiting]{animation:pw-menu-out ${M("duration-2")} ${M("easing-standard")} both}
   @keyframes pw-menu-fade{from{opacity:0}to{opacity:1}}
@@ -325,8 +353,9 @@ function useStyles() {
 
 /* Picks are seen before the panel goes: the row shows its new state for
    Duration/3, then the panel fades (approved demo). */
-const pickDelay = () => (typeof document !== "undefined"
-  && parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--motion-duration-3"))) || 200;
+const motionMs = (name, fallback) => (typeof document !== "undefined"
+  && parseFloat(getComputedStyle(document.documentElement).getPropertyValue(name))) || fallback;
+const pickDelay = () => motionMs("--motion-duration-3", 200);
 
 // ─── CONTEXTS ─────────────────────────────────────────────────────────────────
 
@@ -334,6 +363,9 @@ const pickDelay = () => (typeof document !== "undefined"
    Aria MenuItem in actions mode and a ListBoxItem in options mode. */
 const ModeContext = createContext("actions");
 
+/* How the root menu opens below 768, so a submenu opens the same way. */
+const SmallScreenContext = createContext("sheet");
+
 /**
  * Lets a host that is not a PopoverMenu close itself when an item is chosen,
  * the way a PopoverMenu does. BottomSheet provides it around its Body, so a
@@ -379,6 +411,32 @@ function Trailing({ trailing, hasSubmenu }) {
   return null;
 }
 
+/* A label cut off by the panel width shows the full text in the real Tooltip:
+   on hover after Duration/4, on keyboard focus at once (approved demo). The
+   item's accessible name already carries the full label, so the tooltip is
+   visual only and leaves the item's ARIA alone. */
+function ItemLabel({ label, s }) {
+  const ref = useRef(null);
+  const [cut, setCut] = useState(false);
+  const [hoverOpen, setHoverOpen] = useState(false);
+  const engaged = !!(s.isHovered || s.isFocusVisible);
+  useEffect(() => {
+    const el = ref.current;
+    setCut(!!el && el.scrollWidth > el.clientWidth + 1);
+  }, [engaged, label]);
+  useEffect(() => {
+    if (!s.isHovered) { setHoverOpen(false); return undefined; }
+    const t = setTimeout(() => setHoverOpen(true), motionMs("--motion-duration-4", 300));
+    return () => clearTimeout(t);
+  }, [s.isHovered]);
+  const open = cut && typeof label === "string" && (!!s.isFocusVisible || hoverOpen);
+  return (
+    <Tooltip content={typeof label === "string" ? label : undefined} open={open} manageAria={false} align="start">
+      <span ref={ref} className="pw-menu-item__label">{label}</span>
+    </Tooltip>
+  );
+}
+
 /* The one item anatomy: [stripe] [indicator + visual] [label, description or
    reason] [trailing]. The indicator is the real Checkbox or Radio, visual
    only: the item is the control and owns the role, the state and the target. */
@@ -413,10 +471,10 @@ function ItemContent({ p, s }) {
       <span className="pw-menu-item__text" data-inline={inline || undefined}>
         {p.badges && p.badges.length ? (
           <span className="pw-menu-item__label-row">
-            <span className="pw-menu-item__label">{p.label}</span>
+            <ItemLabel label={p.label} s={s} />
             {p.badges.map((b) => <Badge key={b.label} label={b.label} status={b.status || "Neutral"} size="Medium" badgeStyle="Outline & Fill" />)}
           </span>
-        ) : <span className="pw-menu-item__label">{p.label}</span>}
+        ) : <ItemLabel label={p.label} s={s} />}
         {inline ? <span className="pw-menu-item__desc">{p.inlineText}</span>
           : p.description ? <span className="pw-menu-item__desc">{p.description}</span> : null}
         {p.reason && (
@@ -499,10 +557,12 @@ export function PopoverMenuItem({
  */
 export function PopoverMenuSubmenu({ item, label, children, ...rest }) {
   useStyles();
+  const smallScreen = useContext(SmallScreenContext);
   return (
     <SubmenuTrigger {...rest}>
       {item}
-      <Popover className="pw-menu-panel" placement="end top" offset={-4}>
+      <Popover className="pw-menu-panel" placement="end top" offset={-4}
+        data-small-screen={smallScreen === "sheet" ? "sheet" : undefined}>
         <PopoverMenuList label={label}>{children}</PopoverMenuList>
       </Popover>
     </SubmenuTrigger>
@@ -634,6 +694,7 @@ export function PopoverMenuList({
  * @param {"none"|"single"|"multiple"} selectionMode, selectedKeys, onSelectionChange, onAction
  * @param {ReactNode} header, footer, emptyState  See PopoverMenuList
  * @param {boolean} searchable   The panel opens at the fixed 360 height and keeps it while the list filters
+ * @param {"sheet"|"float"} smallScreen  Below 768: open as a bottom sheet (default), or keep floating from the trigger
  */
 export function PopoverMenu({
   type = "icon",
@@ -657,6 +718,7 @@ export function PopoverMenu({
   footer,
   emptyState,
   searchable = false,
+  smallScreen = "sheet",
   maxHeight,
   className = "",
   style,
@@ -736,9 +798,12 @@ export function PopoverMenu({
         [RootMenuTriggerStateContext, state],
         [PopoverContext, { trigger: "MenuTrigger", triggerRef: wrap, placement: `bottom ${align}` }],
       ]}>
-        <Popover className="pw-menu-panel" offset={L.offset} data-searchable={searchable || undefined}>
-          {list}
-        </Popover>
+        <SmallScreenContext.Provider value={smallScreen}>
+          <Popover className="pw-menu-panel" offset={L.offset} data-searchable={searchable || undefined}
+            data-small-screen={smallScreen === "sheet" ? "sheet" : undefined}>
+            {list}
+          </Popover>
+        </SmallScreenContext.Provider>
       </Provider>
     </span>
   );

package/components/select/select.jsx

@@ -0,0 +1,449 @@
+/**
+ * Select, Pathway Design System
+ *
+ * Importable React component module. Source of truth for the Select
+ * implementation; the standalone demo (select.html), the Storybook stories and
+ * the <pathway-select> web component all consume this.
+ *
+ * The control people pick from to change what a table, list, dashboard or
+ * widget shows. Nothing it does is saved with a record. Three types:
+ *   Dropdown      opens the Popover Menu and shows the pick ("Status: Cleared")
+ *   Single click  one yes or no filter, a toggle button ("Overdue")
+ *   Opens panel   the entry to advanced filters; the page owns the panel and
+ *                 the Select shows On while any of its filters are applied
+ *
+ * A saved form value is Input, Type Select, not this.
+ *
+ * Spec:  components/select/select-spec.md
+ * Figma: https://www.figma.com/design/3sw45aVcngFAmpbP6cfrXP/?node-id=40006526-36975
+ */
+
+import React, { forwardRef, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { Tooltip } from "../tooltip/tooltip.jsx";
+import { Icon } from "../icon/icon.jsx";
+import { Button } from "../button/button.jsx";
+import { Avatar, initialsFrom } from "../avatar/avatar.jsx";
+import { PopoverMenu, PopoverMenuItem } from "../popover-menu/popover-menu.jsx";
+import { useReducedMotion } from "../_shared/use-reduced-motion.jsx";
+import { FOCUS_RING_LAYER, injectFocusRing } from "../_shared/focus-ring.js";
+
+// ─── TOKEN HELPERS ────────────────────────────────────────────────────────────
+// SC = semantic-color (themes/*.css), SL = semantic-layout-units (layout.css),
+// CL = contextual-layout-units (layout-contextual.css), ST = semantic-type
+// (type.css), M = motion (motion.css).
+const SC = (p) => `var(--semantic-color-${p})`;
+const SL = (p) => `var(--semantic-layout-units-${p})`;
+const CL = (p) => `var(--contextual-layout-units-${p})`;
+const ST = (p) => `var(--semantic-type-${p})`;
+const M = (p) => `var(--motion-${p})`;
+
+const ramp = (prefix) => ({ rest: SC(`${prefix}-rest`), hover: SC(`${prefix}-hover`), pressed: SC(`${prefix}-pressed`) });
+
+export const SELECT_TYPES = ["Dropdown", "Single click", "Opens panel"];
+
+// ─── COLOUR TOKENS ────────────────────────────────────────────────────────────
+// Read off Figma set 40006526:36975, spec §3.1 to §3.3. Off has no fill at rest.
+export const OFF = {
+  fill:   { rest: "transparent", hover: SC("fill-action-secondary-rest"), pressed: SC("fill-action-secondary-hover") },
+  stroke: { rest: SC("stroke-static-neutral-strong"), hover: SC("stroke-action-secondary-rest"), pressed: SC("stroke-action-secondary-hover") },
+  fg:     ramp("foreground-action-secondary"),
+};
+
+// On: the picked fill and the strong outline (D11, D12). The text is one token
+// in every state so a pick never shifts while the pointer moves over it.
+const ON_FG = SC("foreground-action-primary-on-subtle-pressed");
+export const ON = {
+  fill:   { rest: SC("fill-action-selection-selected"), hover: SC("fill-action-selection-hover"), pressed: SC("fill-action-selection-hover") },
+  stroke: ramp("stroke-action-primary-strong"),
+  fg:     { rest: ON_FG, hover: ON_FG, pressed: ON_FG },
+};
+
+export const DISABLED = {
+  fill:   SC("fill-action-disabled"),
+  stroke: SC("stroke-action-disabled"),
+  fg:     SC("foreground-action-disabled"),
+};
+
+export const PILL = {
+  fill:   SC("fill-surface-elevated"),
+  stroke: SC("stroke-action-primary-subtle-rest"),
+  fg:     ON_FG,
+};
+
+// ─── SHARED LAYOUT AND MOTION ─────────────────────────────────────────────────
+export const T = {
+  radius:       CL("field-cornerradius"),                    // the same corners as Input
+  border:       SL("borderwidth-base"),                      // heavier than Button's, so Select reads apart
+  pillBorder:   SL("borderwidth-thin"),
+  pillRadius:   SL("cornerradius-full"),
+  pillPadH:     SL("padding-xxtight"),
+  textGap:      SL("gap-xxtight"),                           // prefix, value and +N pill
+  touchW:       SL("accessibility-touch-target-aa-width"),   // 44
+  touchH:       SL("accessibility-touch-target-aa-height"),  // 44
+  // The ring is the control's own outline and takes the border's place
+  // (spec §3.6), as FOCUS_RING_REPLACE does for stylesheet-styled controls.
+  focusOutline: `${CL("focusring-width")} solid ${SC("stroke-focusring-base")}`,
+  colour:       `${M("duration-2")} ${M("easing-standard")}`,
+  chevron:      `transform ${M("duration-4")} ${M("easing-standard")}`,
+};
+
+const TEXT = (size, lineHeight, tracking) => ({
+  fontFamily:    ST("family-brand"),
+  fontSize:      ST(`font-size-${size}`),
+  lineHeight:    ST(`line-height-${lineHeight}`),
+  letterSpacing: ST(`letter-spacing-${tracking}`),
+});
+
+// ─── SIZE TABLE ───────────────────────────────────────────────────────────────
+// Heights, slots, glyphs and maximum widths are measurements (spec §4, CLAUDE.md
+// §5); padding, gaps and type are tokens. square is the icon only size: XS is 28
+// because its 16 slot plus XSmall padding makes 28, S and M take their height.
+export const SIZES = {
+  XS: { height: 30, square: 28, padH: CL("button-padding-xsmall-horizontal"), slotPad: SL("padding-xxxtight"), slot: 16, icon: 12, chevSlot: 16, chev: 16, valueMax: 140, labelMax: 168, ...TEXT("xs", "xs-single", "extraspacious"), pill: TEXT("xs", "xs-single", "extraspacious") },
+  S:  { height: 34, square: 34, padH: CL("button-padding-small-horizontal"),  slotPad: SL("padding-xxtight"),  slot: 22, icon: 14, chevSlot: 22, chev: 18, valueMax: 140, labelMax: 168, ...TEXT("s", "s-single", "spacious"),       pill: TEXT("xs", "xs-single", "extraspacious") },
+  M:  { height: 40, square: 40, padH: CL("button-padding-medium-horizontal"), slotPad: SL("padding-xxxtight"), slot: 24, icon: 16, chevSlot: 24, chev: 20, valueMax: 170, labelMax: 200, ...TEXT("r", "r-single", "wide"),           pill: TEXT("s", "s-single", "spacious") },
+};
+
+const W = { medium: ST("weight-medium"), semibold: ST("weight-semibold") };
+
+const isFocusVisible = (e) => { try { return e.target.matches(":focus-visible"); } catch { return true; } };
+
+// ─── Pieces ───────────────────────────────────────────────────────────────────
+const Slot = ({ size, children }) => (
+  <span aria-hidden="true" style={{ width: size, height: size, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{children}</span>
+);
+
+const cut = (max) => ({ display: "block", minWidth: 0, maxWidth: max, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" });
+
+/** The +N or applied count: never truncates (spec §7). */
+const CountPill = ({ sz, disabled, children, flush = false }) => (
+  <span aria-hidden="true" className="pw-select__count" style={{
+    flexShrink: 0, boxSizing: "border-box", display: "inline-flex", alignItems: "center",
+    marginLeft: flush ? 0 : T.textGap, paddingLeft: T.pillPadH, paddingRight: T.pillPadH,
+    borderRadius: T.pillRadius, border: `${T.pillBorder} solid ${disabled ? DISABLED.stroke : PILL.stroke}`,
+    background: disabled ? DISABLED.fill : PILL.fill, color: disabled ? DISABLED.fg : PILL.fg,
+    ...sz.pill, fontWeight: W.medium,
+  }}>{children}</span>
+);
+
+// ─── Trigger ──────────────────────────────────────────────────────────────────
+// The shared outer frame (touch area) and Container.Main for every type.
+const Trigger = forwardRef(function Trigger({
+  sz, on, disabled, forceState, square, width, children, tooltip, tooltipPurpose = "description", ...rest
+}, ref) {
+  const noMotion = useReducedMotion();
+  const [hover, setHover] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const open = rest["aria-expanded"] === true;
+
+  const look = on ? ON : OFF;
+  const state = disabled ? "disabled"
+    : forceState === "pressed" || pressed || open ? "pressed"
+    : forceState === "hover" || hover ? "hover"
+    : "rest";
+  const ring = !disabled && (forceState === "focused" || focused);
+
+  const main = {
+    display: "flex", alignItems: "center", justifyContent: square ? "center" : "flex-start",
+    boxSizing: "border-box", height: square ? sz.square : sz.height,
+    width: square ? sz.square : width, minWidth: 0,
+    paddingLeft: square ? 0 : sz.padH, paddingRight: square ? 0 : sz.padH,
+    borderRadius: T.radius,
+    background: disabled ? DISABLED.fill : look.fill[state],
+    color: disabled ? DISABLED.fg : look.fg[state],
+    // Inset so the stroke never adds width; while focused the ring replaces it.
+    boxShadow: ring ? "none" : `inset 0 0 0 ${T.border} ${disabled ? DISABLED.stroke : look.stroke[state]}`,
+    outline: ring ? T.focusOutline : "none",
+    outlineOffset: 0,
+    fontFamily: sz.fontFamily, fontSize: sz.fontSize, lineHeight: sz.lineHeight, letterSpacing: sz.letterSpacing,
+    fontWeight: W.medium, whiteSpace: "nowrap",
+    transition: noMotion ? "none" : `background-color ${T.colour}, color ${T.colour}, box-shadow ${T.colour}`,
+  };
+
+  const outer = {
+    position: "relative", zIndex: ring ? 1 : undefined,
+    display: "inline-flex", alignItems: "center", justifyContent: "center",
+    minHeight: T.touchH, minWidth: T.touchW, maxWidth: "100%",
+    padding: 0, margin: 0, border: 0, background: "transparent", outline: "none",
+    font: "inherit", color: "inherit", cursor: disabled ? "not-allowed" : "pointer",
+    WebkitTapHighlightColor: "transparent",
+  };
+
+  const { onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, onKeyDown, onKeyUp, ...pass } = rest;
+  const button = (
+    <button
+      ref={ref}
+      type="button"
+      disabled={disabled}
+      data-selected={on || undefined}
+      style={outer}
+      {...pass}
+      onPointerEnter={(e) => { setHover(true); onPointerEnter?.(e); }}
+      onPointerLeave={(e) => { setHover(false); setPressed(false); onPointerLeave?.(e); }}
+      onPointerDown={(e) => { setPressed(true); onPointerDown?.(e); }}
+      onPointerUp={(e) => { setPressed(false); onPointerUp?.(e); }}
+      onFocus={(e) => { setFocused(isFocusVisible(e)); onFocus?.(e); }}
+      onBlur={(e) => { setFocused(false); setPressed(false); onBlur?.(e); }}
+      onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") setPressed(true); onKeyDown?.(e); }}
+      onKeyUp={(e) => { setPressed(false); onKeyUp?.(e); }}
+    >
+      <span className="pw-select__main" style={main}>{children}</span>
+    </button>
+  );
+  // The Tooltip shows the full text when it is cut off, and the label on icon
+  // only. The button names itself, so the Tooltip adds no ARIA of its own.
+  return (
+    <Tooltip content={tooltip} purpose={tooltipPurpose} disabled={!tooltip || disabled || open} manageAria={false}>
+      {button}
+    </Tooltip>
+  );
+});
+
+// Is any marked text inside the node cut off? Measured after layout.
+function useCutOff(deps) {
+  const ref = useRef(null);
+  const [isCut, setCut] = useState(false);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const check = () => setCut([...node.querySelectorAll("[data-cut]")].some((n) => n.scrollWidth > n.clientWidth + 0.5));
+    check();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(check);
+    ro.observe(node);
+    return () => ro.disconnect();
+  }, deps); // eslint-disable-line react-hooks/exhaustive-deps
+  return [ref, isCut];
+}
+
+// ─── Single click ─────────────────────────────────────────────────────────────
+const SingleClick = forwardRef(function SingleClick({ sz, label, icon, showLabel, selected: selectedProp, defaultSelected = false, onSelectedChange, disabled, forceState, width, ...rest }, ref) {
+  const controlled = selectedProp !== undefined;
+  const [inner, setInner] = useState(defaultSelected);
+  const on = controlled ? selectedProp : inner;
+  const [boxRef, isCut] = useCutOff([label, showLabel, sz]);
+  const square = !showLabel;
+  const toggle = () => { if (disabled) return; const next = !on; if (!controlled) setInner(next); onSelectedChange?.(next); };
+  return (
+    <span ref={boxRef} style={{ display: "inline-flex", maxWidth: "100%" }}>
+      <Trigger ref={ref} sz={sz} on={on} disabled={disabled} forceState={forceState} square={square} width={width}
+        aria-pressed={on} aria-label={square ? label : undefined}
+        tooltip={square || isCut ? label : undefined} tooltipPurpose={square ? "label" : "description"}
+        onClick={toggle} {...rest}>
+        {icon && <Slot size={sz.slot}><Icon name={icon} size={sz.icon} fill={on ? 1 : 0} /></Slot>}
+        {showLabel && <span style={{ minWidth: 0, paddingLeft: sz.slotPad, paddingRight: sz.slotPad }}><span data-cut style={cut(sz.labelMax)}>{label}</span></span>}
+      </Trigger>
+    </span>
+  );
+});
+
+// ─── Opens panel ──────────────────────────────────────────────────────────────
+const OpensPanel = forwardRef(function OpensPanel({ sz, label = "Filters", icon, showLabel, count = 0, showCount = false, selected, onPress, isOpen = false, disabled, forceState, width, ...rest }, ref) {
+  const on = selected ?? count > 0;
+  const [boxRef, isCut] = useCutOff([label, showLabel, sz]);
+  const square = !showLabel;
+  const name = on ? `${label}, ${count} applied` : label;
+  return (
+    <span ref={boxRef} style={{ display: "inline-flex", maxWidth: "100%" }}>
+      <Trigger ref={ref} sz={sz} on={on} disabled={disabled} forceState={forceState} square={square && !(on && showCount)} width={width}
+        aria-haspopup="dialog" aria-expanded={isOpen} aria-label={name}
+        tooltip={square || isCut ? label : undefined} tooltipPurpose={square ? "label" : "description"}
+        onClick={() => { if (!disabled) onPress?.(); }} {...rest}>
+        {icon && <Slot size={sz.slot}><Icon name={icon} size={sz.icon} fill={on ? 1 : 0} /></Slot>}
+        {showLabel && <span style={{ minWidth: 0, paddingLeft: sz.slotPad, paddingRight: sz.slotPad }}><span data-cut style={cut(sz.labelMax)}>{label}</span></span>}
+        {/* The count follows the label slot with no extra gap (spec §4). */}
+        {on && showCount && <CountPill sz={sz} disabled={disabled} flush>{count}</CountPill>}
+      </Trigger>
+    </span>
+  );
+});
+
+// ─── Dropdown ─────────────────────────────────────────────────────────────────
+/**
+ * Text and name for the Dropdown (spec §5 and §13.2). The first option is the
+ * one it rests on: "All" with a label, the default without one.
+ */
+export function dropdownText({ label, options = [], mode = "single", value, showPrefix = true, restValue }) {
+  const rest = options[0];
+  const picks = mode === "multiple"
+    ? (Array.isArray(value) ? value : []).map((id) => options.find((o) => o.id === id)).filter((o) => o && o !== rest)
+    : [options.find((o) => o.id === value)].filter((o) => o && o !== rest);
+  const first = picks[0] || rest;
+  const shown = picks.length ? first.label : (restValue ?? (first ? first.label : ""));
+  const full = picks.length ? picks.map((o) => o.label).join(", ") : shown;
+  return {
+    on: picks.length > 0,
+    picks,
+    shown,
+    more: Math.max(0, picks.length - 1),
+    name: showPrefix ? `${label}: ${full}` : full,
+  };
+}
+
+// The leading slot's Avatar size per Select size: it fills the icon slot.
+const AVATAR_IN = { XS: "XXXS", S: "XXS", M: "XS" };
+
+const Dropdown = forwardRef(function Dropdown({
+  sz, size, label, options = [], mode = "single", value: valueProp, defaultValue, onChange,
+  showPrefix = true, showLeading = true, leading = "filter_list", disabled, forceState, width,
+  open: openProp, onOpenChange,
+  restValue,                   // Figma Rest Value: the text at rest when it differs from the first option ("From")
+  ...rest
+}, ref) {
+  const multiple = mode === "multiple";
+  const restOption = options[0];
+  const controlled = valueProp !== undefined;
+  const [inner, setInner] = useState(defaultValue ?? (multiple ? [] : restOption?.id));
+  const value = controlled ? valueProp : inner;
+  const [openInner, setOpenInner] = useState(false);
+  const open = openProp ?? openInner;
+  const noMotion = useReducedMotion();
+  const mainRef = useRef(null);
+
+  const commit = useCallback((next) => { if (!controlled) setInner(next); onChange?.(next); }, [controlled, onChange]);
+  const setOpen = useCallback((v) => { if (openProp === undefined) setOpenInner(v); onOpenChange?.(v); }, [openProp, onOpenChange]);
+
+  const t = dropdownText({ label, options, mode, value, showPrefix, restValue });
+  const [boxRef, isCut] = useCutOff([t.name, sz]);
+
+  const picked = multiple ? (t.picks.length ? t.picks.map((o) => o.id) : [restOption?.id]) : [value ?? restOption?.id];
+  const onSelectionChange = (keys) => {
+    const next = [...keys];
+    if (!multiple) { commit(next[0] ?? restOption?.id); return; }
+    const chose = next.filter((k) => !picked.includes(k));
+    commit(chose.includes(restOption?.id) ? [] : next.filter((k) => k !== restOption?.id));
+  };
+  const clear = () => { commit(multiple ? [] : restOption?.id); mainRef.current?.focus(); };
+
+  const typeAhead = (e) => {
+    if (disabled || multiple || open || e.key.length !== 1 || !/\S/.test(e.key) || e.metaKey || e.ctrlKey || e.altKey) return;
+    const k = e.key.toLowerCase();
+    const at = Math.max(0, options.findIndex((o) => o.id === value));
+    for (let i = 1; i <= options.length; i++) {
+      const o = options[(at + i) % options.length];
+      if (o && !o.disabled && o.label.toLowerCase().startsWith(k)) { commit(o.id); break; }
+    }
+  };
+
+  // Leading: the icon, or the first pick's avatar in its place (D18, D19).
+  // Avatar draws itself: photo, initials or icon is its own call at every size.
+  const avatarSize = AVATAR_IN[size] || "XXXS";
+  const person = t.picks.find((o) => o.avatar);
+  const lead = person
+    ? <Slot size={sz.slot}><Avatar size={avatarSize} name={person.avatar.name || person.label} src={person.avatar.src}
+        text={initialsFrom(person.avatar.name || person.label)} aria-hidden="true" /></Slot>
+    : showLeading && leading
+      ? <Slot size={sz.slot}>{typeof leading === "string" ? <Icon name={leading} size={sz.icon} /> : leading}</Slot>
+      : null;
+  // One pick: a dismiss takes the chevron's place (D20). Several picks keep the
+  // chevron; Clear all lives in the Menu footer (D22).
+  const showDismiss = !disabled && t.on && !multiple;
+  const showChevron = !showDismiss;
+
+  const renderTrigger = ({ title, onKeyDown, ...menuProps }) => (
+    <Trigger ref={(n) => { mainRef.current = n; if (typeof ref === "function") ref(n); else if (ref) ref.current = n; }}
+      sz={sz} on={t.on} disabled={disabled} forceState={forceState} width={width}
+      {...menuProps} aria-label={t.name} tooltip={isCut ? t.name : undefined}
+      onKeyDown={(e) => { onKeyDown?.(e); typeAhead(e); }} {...rest}>
+      {lead}
+      <span style={{ display: "flex", alignItems: "center", minWidth: 0, flex: "1 1 auto", paddingLeft: sz.slotPad, paddingRight: sz.slotPad }}>
+        {showPrefix && <span style={{ flexShrink: 0, marginRight: T.textGap }}>{label}:</span>}
+        <span data-cut style={{ ...cut(sz.valueMax), fontWeight: showPrefix ? W.semibold : W.medium }}>{t.shown}</span>
+        {t.more > 0 && <CountPill sz={sz} disabled={disabled}>+{t.more}</CountPill>}
+      </span>
+      {/* The dismiss button sits over this slot; the slot keeps the width steady. */}
+      {showDismiss && <Slot size={sz.chevSlot} />}
+      {showChevron && (
+        <Slot size={sz.chevSlot}>
+          <Icon name="arrow_drop_down" size={sz.chev} style={{ transform: open ? "rotate(180deg)" : "none", transition: noMotion ? "none" : T.chevron }} />
+        </Slot>
+      )}
+    </Trigger>
+  );
+
+  // Its own button, never inside the trigger: one press clears back to the
+  // rest value, then focus returns to the Select (spec §9).
+  // The dismiss is a 44 x 44 button over the chevron's slot; its ring goes on
+  // the drawn slot (FOCUS_RING_LAYER), and the Tooltip names it on hover and focus.
+  injectFocusRing();
+  const clearName = `Clear ${label || "filter"}`;
+  const dismiss = showDismiss && (
+    <Tooltip content={clearName} purpose="label" manageAria={false}>
+      <button type="button" aria-label={clearName} onClick={clear} className={`pw-select__clear ${FOCUS_RING_LAYER}`}
+        style={{
+          position: "absolute", top: "50%", transform: "translateY(-50%)",
+          right: `calc(${sz.padH} - ${(44 - sz.chevSlot) / 2}px)`,
+          width: T.touchW, height: T.touchH, display: "inline-flex", alignItems: "center", justifyContent: "center",
+          padding: 0, margin: 0, border: 0, background: "transparent", cursor: "pointer", color: ON.fg.rest, zIndex: 2,
+        }}>
+        <span data-pw-ring-target="" style={{ width: sz.chevSlot, height: sz.chevSlot, borderRadius: T.pillRadius, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
+          <Icon name="close" size={sz.icon} />
+        </span>
+      </button>
+    </Tooltip>
+  );
+
+  // Every row in a list takes the same parts so the labels line up: a person
+  // row takes their Avatar (24, the Menu's one-line size), and when any row
+  // has one, the rest option takes the Select's rest icon.
+  const anyAvatar = options.some((o) => o.avatar);
+  const rowLead = (o) => o.avatar ? { type: "avatar", size: "XS", name: o.avatar.name || o.label, src: o.avatar.src }
+    : o.leading ? o.leading
+    : anyAvatar && o === restOption && typeof leading === "string" ? leading
+    : undefined;
+
+  return (
+    <span ref={boxRef} style={{ position: "relative", display: "inline-flex", maxWidth: "100%" }}>
+      <PopoverMenu mode="options" label={label || t.name} align="start" smallScreen="sheet"
+        selectionMode={multiple ? "multiple" : "single"} selectedKeys={new Set(picked)} onSelectionChange={onSelectionChange}
+        open={disabled ? false : open} onOpenChange={setOpen} renderTrigger={renderTrigger}
+        footer={multiple && t.picks.length ? <Button size="S" buttonStyle="Outlined" type="Secondary" text="Clear all" onClick={() => commit([])} /> : undefined}>
+        {options.map((o) => (
+          <PopoverMenuItem key={o.id} id={o.id} label={o.label} disabled={o.disabled}
+            leading={rowLead(o)} indicator={multiple ? "checkbox" : "check"} />
+        ))}
+      </PopoverMenu>
+      {dismiss}
+    </span>
+  );
+});
+
+// ─── Select ───────────────────────────────────────────────────────────────────
+/**
+ * @param {"Dropdown"|"Single click"|"Opens panel"} type  Figma `Type`
+ * @param {"XS"|"S"|"M"} size      Figma `Size`; pick the size of the Buttons in the row
+ * @param {string}  label          the question ("Status"), the filter ("Overdue"), or "Filters"
+ * @param {boolean} disabled
+ * @param {number}  width          set it wider than its text; it never truncates below its maximum
+ * @param {"hover"|"pressed"|"focused"|null} forceState  visual only, for state matrices
+ *
+ * Dropdown:
+ * @param {Array<{id:string,label:string,leading?:string,avatar?:{name:string,src?:string},disabled?:boolean}>} options  the first is what it rests on (All, or the default)
+ * @param {"single"|"multiple"} mode
+ * @param {string|string[]} value / defaultValue   option id, or ids for multiple
+ * @param {Function} onChange       (value) => void
+ * @param {boolean} showPrefix      Figma `Show Prefix`; off is the no label kind ("All accounts")
+ * @param {boolean} showLeading     Figma `Show Leading`
+ * @param {string|React.ReactNode} leading  Figma `Leading`: a Material Symbols name or an Avatar
+ * @param {boolean} open / onOpenChange  controlled open state of its Popover Menu
+ *
+ * Single click:
+ * @param {string}  icon            Figma `Icon` / `Filled Icon`: FILL 0 Off, FILL 1 On
+ * @param {boolean} showLabel       Figma `Show Label`; off is icon only
+ * @param {boolean} selected / defaultSelected, onSelectedChange(selected)
+ *
+ * Opens panel:
+ * @param {number}  count           how many of its filters are applied; On while above 0
+ * @param {boolean} showCount       Figma `Show Count`
+ * @param {Function} onPress        open the page's dialog, drawer or sheet
+ * @param {boolean} isOpen          the panel is showing (aria-expanded)
+ */
+export const Select = forwardRef(function Select({ type = "Dropdown", size = "XS", showLabel = true, icon = "filter_alt", ...props }, ref) {
+  const sz = SIZES[size] || SIZES.XS;
+  if (type === "Single click") return <SingleClick ref={ref} sz={sz} icon={icon} showLabel={showLabel} {...props} />;
+  if (type === "Opens panel") return <OpensPanel ref={ref} sz={sz} icon={icon} showLabel={showLabel} {...props} />;
+  return <Dropdown ref={ref} sz={sz} size={size} {...props} />;
+});
+
+export default Select;