@helloimjolopez-pathway/pathway-components 0.11.1 → 0.13.0

package/components/badge/badge.jsx

@@ -160,6 +160,7 @@ const transition = `background ${T.duration} ${T.easing}, color ${T.duration} ${
  * @param {string}  size             Small | Medium | Large
  * @param {string}  badgeStyle       Outline & Fill | Fill | Outline | Naked
  * @param {string}  leadingIcon      Material Symbols ligature; omitted means no icon
+ * @param {string}  selectedIcon     Interactive On: the icon in place of the leading icon (Figma "Check" swap); default "check"
  * @param {boolean} showTrailingIcon Interactive only: the drill chevron
  * @param {boolean} selected         Interactive, controlled
  * @param {boolean} defaultSelected  Interactive, uncontrolled
@@ -179,6 +180,7 @@ export function Badge({
   size = "Small",
   badgeStyle = "Outline & Fill",
   leadingIcon,
+  selectedIcon = "check",
   trailingIcon,
   showTrailingIcon = false,
   selected,
@@ -298,7 +300,7 @@ export function Badge({
   const fg = disabled ? C("foreground-action-disabled") : on ? a.on.text : a.off.text[st];
   const stroke = disabled || on || !painted.stroke ? null : a.off.stroke[st];
   const drill = !!href || showTrailingIcon;
-  const lead = on ? "check" : leadingIcon;
+  const lead = on ? selectedIcon : leadingIcon;
   const Tag = href ? "a" : "button";
   const handlers = {
     onMouseEnter: () => !disabled && setHovered(true),

package/components/bottom-sheet/bottom-sheet.jsx

@@ -19,11 +19,11 @@
  *       BottomSheet.Header         40018716:5340: min height Touch Target/AA,
  *                                  pad 8 / 2 / 4 / 2 (XTight, XXXXTight,
  *                                  XXXTight, XXXXTight), gap XXTight
- *         Back (Show Back)         Action Icon Size=Base, `arrow_back`
+ *         Back (Show Back)         Action Icon Size=Medium, `arrow_back`
  *         Container.Title          pad left Padding/Base
  *           Title                  Heading/Local/Base/Semibold,
  *                                  Foreground/Static/Neutral/Strong
- *         Close                    Action Icon Size=Base, `close`
+ *         Close                    Action Icon Size=Medium, `close`
  *     Body (slot)                  pad 0 / XTight / XTight, gap XXTight,
  *                                  scrolls when taller than the space left
  *     Footer (Show Footer)         BottomSheet.Footer 40018716:5354: top border
@@ -160,14 +160,14 @@ export function BottomSheetHeader({ title, titleId, titleRef, showBack = false,
       display: "flex", alignItems: "center", gap: L.headerGap, minHeight: L.headerMinH, boxSizing: "border-box",
       padding: `${L.headerPadTop} ${L.headerPadX} ${L.headerPadBottom}`,
     }}>
-      {showBack && <ActionIcon name="arrow_back" size="Base" label={backLabel} onClick={onBack} />}
+      {showBack && <ActionIcon name="arrow_back" size="Medium" label={backLabel} onClick={onBack} />}
       <div style={{ flex: 1, minWidth: 0, paddingLeft: L.titleInset }}>
         <h2 id={titleId} ref={titleRef} tabIndex={-1} style={{
           margin: 0, outline: "none", color: T.title, ...TYPE.title,
           overflowWrap: "anywhere", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden",
         }}>{title}</h2>
       </div>
-      <ActionIcon name="close" size="Base" label={closeLabel} onClick={onClose} />
+      <ActionIcon name="close" size="Medium" label={closeLabel} onClick={onClose} />
     </div>
   );
 }

package/components/icon/action-icon.jsx

@@ -1,43 +1,42 @@
 /**
  * ActionIcon: the icon-only control Pathway puts in a header or a toolbar.
  *
- * SOURCE OF TRUTH: Figma set `Action Icon` 40006794:19891, on the
- * `↳ ❇️ Action Icon` page. Nine variants on two axes, read and MEASURED
- * 2026-10-07. Used 30 times inside the Widget set and twice inside KPI Tiles,
- * which makes it the most-nested component in this part of the system and the
- * one whose absence from Code Connect mattered most.
+ * SOURCE OF TRUTH: Figma set `Action.Icon` 40006794:19891, on the
+ * `↳ ❇️ Action Icon` page. Fifteen variants on two axes, State (Rest / Hover /
+ * Pressed / Disabled / Focused) x Size (Small / Medium / Large), 2026-11-11. Used 30 times
+ * inside the Widget set and twice inside KPI Tiles.
  *
  * MEASURED, per Size. The box is the target, `Container.Icon` is the state
  * layer, and the glyph is the frame size an `<Icon>` takes:
  *
- *   Size    box     Container.Icon   glyph
- *   Small   36x36        24x24 r=8     12
- *   Base    44x44        28x28 r=8     14
- *   Large   48x48        32x32 r=8     16
+ *   Size     box, Touch Target token              Container.Icon   glyph
+ *   Small    36x36  Accessibility/Touch Target/Desktop Only   24x24 r=8   14
+ *   Medium   44x44  Accessibility/Touch Target/AA             28x28 r=8   16
+ *   Large    48x48  Accessibility/Touch Target/AAA            32x32 r=8   20
  *
- * STATE TOKENS, read off all six state variants 2026-10-08.
+ * STATE TOKENS, read off all nine variants.
  *
  * The state layer's fill:
- *   Default    none
+ *   Rest       none. Figma's Rest variants carry no Container.Icon at all
  *   Hover      `Fill/Action/Primary/Subtle/Hover`
  *   Pressed    `Fill/Action/Primary/Subtle/Pressed`
  *
  * The glyph's colour:
- *   Default    `Foreground/Action/Secondary/Rest`
+ *   Rest       `Foreground/Action/Secondary/Rest`
  *   Hover      `Foreground/Action/Secondary/Hover`
  *   Pressed    `Foreground/Action/Secondary/Pressed`
  *
- * `State` is Default / Hover / Pressed and is runtime, never a prop.
+ * The glyph on Disabled: `Foreground/Action/Disabled`, no layer fill, no hover
+ * or press. It keeps `aria-disabled` rather than the native attribute, so Tab
+ * still reaches it and its name is still read.
+ * Focused (keyboard only): Rest, plus the focus ring around the state layer:
+ * `Stroke/FocusRing/Base` at `FocusRing/Width`, hugging the layer (no gap).
+ *
+ * `State` (Rest / Hover / Pressed / Disabled / Focused) is runtime; only
+ * Disabled is a prop, `disabled`, because it is the one a consumer decides.
  * `Icon` is an INSTANCE_SWAP, which in code is the `name` prop: any Material
  * Symbols ligature.
  *
- * THE COMPONENT ITSELF BINDS NO FILL, in any of the nine variants, and the
- * glyph's fill is unbound too so it inherits. That is why this takes its
- * resting colour from `color` on the button and lets the glyph inherit it: the
- * design expresses "whatever the surrounding context is" rather than a fixed
- * icon colour, and a hard-coded one would break the Widget header, the KPI
- * tile and a dark toolbar all differently.
- *
  * WHY IT LIVES HERE rather than in widget.jsx, where it used to. It was a
  * private helper inside the Widget, so the Figma component had nothing
  * importable to point at and the KPI Tile could not reuse it. The Widget now
@@ -52,21 +51,18 @@ injectFocusRing();
 const C = (n) => `var(--semantic-color-${n})`;
 const U = (n) => `var(--semantic-layout-units-${n})`;
 const M = (n) => `var(--motion-${n})`;
+const CL = (n) => `var(--contextual-layout-units-${n})`;
 
-/* Read off the Action Icon set, every variant, 2026-10-12. `box` is the button,
-   `layer` is the state-layer frame the hover and pressed fills go on, `glyph` is
-   the nested Material Symbols instance.
-
-   THE GLYPHS WERE EVERY ONE 2px TOO SMALL. This read 12 / 14 / 16, which is the
-   sequence one step down from the real one, so every action icon in the system
-   rendered small inside a correctly sized target: the Widget header's 16px
-   ellipsis drew at 14. The three state-layer sizes were right, which is why it
-   survived a measurement pass that compared targets and layers and never looked
-   at the glyph. Figma's nested instance is 14 at Small, 16 at Base, 18 at Large. */
+/* Per Size, read off every variant on 2026-11-11. `box` is the button, bound in
+   Figma to the Touch Target tokens; `layer` is the state-layer frame the hover
+   and pressed fills go on; `glyph` is the nested Material Symbols instance. The
+   numbers are kept beside the tokens for the stories and for anything that has
+   to do arithmetic with the box. Large's glyph is 20, not the 18 it was. */
+const TT = (n) => `var(--semantic-layout-units-accessibility-touch-target-${n})`;
 export const ACTION_ICON_SIZES = {
-  Small: { box: 36, layer: 24, glyph: 14 },
-  Base:  { box: 44, layer: 28, glyph: 16 },
-  Large: { box: 48, layer: 32, glyph: 18 },
+  Small:  { box: 36, boxW: TT("desktop-only-width"), boxH: TT("desktop-only-height"), layer: 24, glyph: 14 },
+  Medium: { box: 44, boxW: TT("aa-width"),           boxH: TT("aa-height"),           layer: 28, glyph: 16 },
+  Large:  { box: 48, boxW: TT("aaa-width"),          boxH: TT("aaa-height"),          layer: 32, glyph: 20 },
 };
 
 export const T = {
@@ -81,11 +77,15 @@ export const T = {
      the hover state is the only thing the layer is for. */
   layerHover: C("fill-action-primary-subtle-hover"),
   layerPress: C("fill-action-primary-subtle-pressed"),
+  disabled:   C("foreground-action-disabled"),
+  focusOutline: `${CL("focusring-width")} solid ${C("stroke-focusring-base")}`,
 };
 
 /**
  * @param {string} name   Material Symbols ligature, Figma's `Icon` swap.
- * @param {"Small"|"Base"|"Large"} size  Figma's Size axis.
+ * @param {"Small"|"Medium"|"Large"} size  Figma's Size axis, same words.
+ *                        Small is Desktop Only (36): dense desktop surfaces
+ *                        only. Medium meets AA (44). Large meets AAA (48).
  * @param {string} label  Required: an icon-only control with no accessible
  *                        name is unusable, so this is not optional.
  * @param {0|1} fill      FILL axis. The Widget header is FILL 0.
@@ -99,6 +99,11 @@ export const T = {
  *                        dark Secondary glyph, which is right on a light page and
  *                        wrong on the navy TopNav. SideNav.Control (40007082:7703)
  *                        binds the Ghost ladder instead.
+ * @param {boolean} disabled  Figma's Disabled state. aria-disabled, never the
+ *                        native attribute: it stays in the tab order.
+ * @param {"hover"|"pressed"|"focused"} forceState  Stories and demos only: draws
+ *                        a state without the pointer or keyboard, so the state
+ *                        matrix can show every variant Figma has at once.
  */
 export function ActionIcon({
   name,
@@ -107,26 +112,29 @@ export function ActionIcon({
   fill = 0,
   color,
   states,
+  forceState,
+  disabled = false,
   onClick,
-  disabled,
   className = "",
   style,
   ...rest
 }) {
   const noMotion = useReducedMotion();
-  const [hov, setHov] = useState(false);
-  const [press, setPress] = useState(false);
+  const [hovRaw, setHov] = useState(false);
+  const [pressRaw, setPress] = useState(false);
+  const hov = !disabled && (hovRaw || forceState === "hover");
+  const press = !disabled && (pressRaw || forceState === "pressed");
   const s = ACTION_ICON_SIZES[size] || ACTION_ICON_SIZES.Small;
   const st = { ...T, ...states };
-  const fg = disabled ? T.rest : press ? st.pressed : hov ? st.hover : (color || T.rest);
+  const fg = disabled ? T.disabled : press ? st.pressed : hov ? st.hover : (color || T.rest);
 
   return (
     <button
       type="button"
       aria-label={label}
       title={label}
-      disabled={disabled}
-      onClick={onClick}
+      aria-disabled={disabled || undefined}
+      onClick={disabled ? undefined : onClick}
       onMouseEnter={() => setHov(true)}
       onMouseLeave={() => { setHov(false); setPress(false); }}
       onMouseDown={() => setPress(true)}
@@ -136,10 +144,9 @@ export function ActionIcon({
       data-size={size}
       style={{
         display: "inline-flex", alignItems: "center", justifyContent: "center",
-        width: s.box, height: s.box, flexShrink: 0, boxSizing: "border-box",
-        background: "transparent", border: "none", padding: 0,
-        cursor: disabled ? "default" : "pointer",
-        opacity: disabled ? 0.5 : 1,
+        width: s.boxW, height: s.boxH, flexShrink: 0, boxSizing: "border-box",
+        background: "transparent", border: "none", padding: 0, outline: "none",
+        cursor: disabled ? "not-allowed" : "pointer",
         color: fg,
         ...style,
       }}
@@ -153,7 +160,12 @@ export function ActionIcon({
         display: "inline-flex", alignItems: "center", justifyContent: "center",
         width: s.layer, height: s.layer, borderRadius: U("cornerradius-base"),
         background: press ? st.layerPress : hov ? st.layerHover : "transparent",
-        transition: noMotion ? "none" : `background ${M("duration-2")} ${M("easing-standard")}`,
+        /* Focused sits AROUND THE STATE LAYER, not the target: Jo, 2026-11-11.
+           Keyboard focus draws it through FOCUS_RING_LAYER (hugging the layer,
+           no gap); forceState draws the same ring for stories and demos. */
+        outline: !disabled && forceState === "focused" ? T.focusOutline : undefined,
+        outlineOffset: !disabled && forceState === "focused" ? 0 : undefined,
+        transition: noMotion ? "none" : `background ${M("duration-2")} ${M("easing-standard")}, outline ${M("duration-2")} ${M("easing-standard")}`,
       }}>
         <Icon name={name} size={s.glyph} fill={fill} style={{
           transition: noMotion ? "none" : `color ${M("duration-2")} ${M("easing-standard")}`,

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,26 @@ ${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}}
 
+/* smallScreen="sheet" (G4, pending the overlay family decision): below 768 the
+   panel opens as a bottom sheet from the BottomSheet tokens, the way the
+   approved demo draws it. 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);
+    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 +354,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 ─────────────────────────────────────────────────────────────────
 
@@ -379,6 +409,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 +469,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 && (
@@ -634,6 +690,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 {"float"|"sheet"} smallScreen  Below 768: float from the trigger (default), or open as a bottom sheet. Pending decision G4
  */
 export function PopoverMenu({
   type = "icon",
@@ -657,6 +714,7 @@ export function PopoverMenu({
   footer,
   emptyState,
   searchable = false,
+  smallScreen = "float",
   maxHeight,
   className = "",
   style,
@@ -703,7 +761,7 @@ export function PopoverMenu({
   } else if (type === "avatar") {
     trigger = <button type="button" className="pw-menu-trigger__avatar" {...triggerProps} aria-label={label}>{initials}</button>;
   } else if (iconStyle === "action") {
-    trigger = <ActionIcon name={icon} size="Base" label={label} {...triggerProps} />;
+    trigger = <ActionIcon name={icon} size="Medium" label={label} {...triggerProps} />;
   } else {
     trigger = (
       <button type="button" className="pw-menu-trigger__icon" {...triggerProps} aria-label={label} title={label}
@@ -736,7 +794,8 @@ 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}>
+        <Popover className="pw-menu-panel" offset={L.offset} data-searchable={searchable || undefined}
+          data-small-screen={smallScreen === "sheet" ? "sheet" : undefined}>
           {list}
         </Popover>
       </Provider>

package/components/top-nav/top-nav.jsx

@@ -221,7 +221,7 @@ export const L = {
   chevronGlyph: 12,
   modChevronBox: 20,
   orgChevronBox: 24,
-  // Action Icon Size=Base: 16 glyph in a 28 Container.Icon. The glyph was 14,
+  // Action Icon Size=Medium: 16 glyph in a 28 Container.Icon. The glyph was 14,
   // which also put it below the icon font's smallest optical size.
   actionIconBox: 28, actionIconGlyph: 16,
   // Figma's Action Icon is 44, not the bar's 48. It is the one control on the
@@ -336,7 +336,7 @@ export const DEFAULT_MODULES = MODULES.map((id) => ({ id, label: MODULE_LABELS[i
  * TopNav.Actions, Figma 40007082:7313. A SLOT (Figma property "Slot.Actions"),
  * not a fixed pair of bells: a product puts whatever action icons it needs in
  * it, one bell, or a bell, a cog and a help icon. Each item renders as Figma's
- * nested Action Icon at Size=Base.
+ * nested Action Icon at Size=Medium.
  *
  *   actions  Array<{ icon, label, onClick }>. `icon` is a Material Symbols
  *            ligature, `label` the accessible name. Defaults to the two
@@ -346,7 +346,7 @@ export const DEFAULT_MODULES = MODULES.map((id) => ({ id, label: MODULE_LABELS[i
  * ("More actions"), which is what Figma's mobile variant shows. One action on
  * its own stays as itself.
  *
- * Action Icon Size=Base, read 2026-10-30 and 2026-11-02:
+ * Action Icon Size=Medium, read 2026-10-30 and 2026-11-02:
  *   target           accessibility-touch-target-aa (44)
  *   Container.Icon   28, cornerradius-base: rest none, hover
  *                    Fill/Action/Ghost/Hover, pressed Fill/Action/Ghost/Pressed