@helloimjolopez-pathway/pathway-components 0.7.0 → 0.7.1

package/components/badge/badge.jsx

@@ -15,16 +15,17 @@
  * STATIC, v1 to v2. Three v1 values did not match Figma and now do:
  *   Outline & Fill stroke   v1 Subtle, Figma Strong (Neutral Bold, accents plain).
  *   Neutral Naked text      v1 Neutral/Bold, Figma Neutral/Base.
- *   Stroke placement        v1 drew a 1px border INSIDE the box, which made every
- *                           Static badge 2px taller than the set (24 not 22).
- *                           Figma strokes outside; a box-shadow does the same.
+ *   Stroke placement        Figma draws the stroke inside a frame that grows by the
+ *                           stroke width, so content keeps its padding to the
+ *                           border; the 1px box-shadow here renders the same edge.
  * Figma's default leading icon is the placeholder `error`; in code the icon is
  * passed explicitly, so existing call sites render exactly as before.
  *
  * DISMISSIBLE and INTERACTIVE, every size, with or without icons:
  *   outer frame    invisible, min width and height Accessibility/Touch Target/AA
  *                  (44). The pill keeps its size (20 / 22 / 22) inside it.
- *   Badge.Pill     fill, stroke (outside), CornerRadius/Large, focus ring.
+ *   Focus Ring     wraps Badge.Pill; FocusRing/Offset from the border, ring outside.
+ *   Badge.Pill     fill, stroke (inside its frame), CornerRadius/Large.
  *   Container.Main Padding/XXXTight left and right, Padding/XXXXTight top and
  *                  bottom, NO gap.
  *   Container.Label Padding/XXXTight left and right; Field Label to value
@@ -139,10 +140,11 @@ const outer = { display: "inline-flex", alignItems: "center", justifyContent: "c
   minWidth: T.touchW, minHeight: T.touchH, boxSizing: "border-box", padding: 0, margin: 0, border: 0,
   background: "transparent", font: "inherit", color: "inherit", textDecoration: "none", outline: "none" };
 const strokeShadow = (stroke) => (stroke ? `0 0 0 ${L.border} ${stroke}` : "none");
-/* Focus ring: FocusRing/Width of Stroke/FocusRing/Base, FocusRing/Offset outside the pill,
- * as an outline so the gap shows whatever surface the badge sits on. No white halo. */
-const focusRing = (focused) => (focused
-  ? { outline: `${T.ringWidth} solid ${T.ring}`, outlineOffset: T.ringOffset }
+/* Focus ring: FocusRing/Width of Stroke/FocusRing/Base, FocusRing/Offset from the pill's
+ * border, as an outline so the gap shows whatever surface the badge sits on. No white halo.
+ * The border is a 1px box-shadow outside the box, so the offset adds it when there is one. */
+const focusRing = (focused, stroke) => (focused
+  ? { outline: `${T.ringWidth} solid ${T.ring}`, outlineOffset: stroke ? `calc(${T.ringOffset} + ${L.border})` : T.ringOffset }
   : { outline: "none" });
 const transition = `background ${T.duration} ${T.easing}, color ${T.duration} ${T.easing}, box-shadow ${T.duration} ${T.easing}`;
 
@@ -250,7 +252,7 @@ export function Badge({
           ...pillBase,
           background: painted.fill ? C(fam.fill) : "transparent",
           color: C(badgeStyle === "Naked" && fam.textNaked ? fam.textNaked : fam.text),
-          boxShadow: strokeShadow(stroke), ...focusRing(focused),
+          boxShadow: strokeShadow(stroke), ...focusRing(focused, stroke),
         }}>
           {leadingIcon && ico(leadingIcon, 1)}
           <span className="pw-badge__label" style={{ ...textSlot, gap: T.fieldGap }}>
@@ -318,7 +320,7 @@ export function Badge({
       style={{ ...outer, cursor: disabled ? "not-allowed" : "pointer", ...style }}>
       <span className="pw-badge__pill" style={{
         ...pillBase, background: fill, color: fg,
-        boxShadow: strokeShadow(stroke), ...focusRing(focused),
+        boxShadow: strokeShadow(stroke), ...focusRing(focused, stroke),
       }}>
         {lead && ico(lead, on ? 0 : 1)}
         <span className="pw-badge__label" style={textSlot}><span style={{ ...cut, display: "block", maxWidth: spec.contentMax }}>{label}</span></span>