@helloimjolopez-pathway/pathway-components 0.11.1 → 0.12.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

@@ -703,7 +703,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}

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