@leta-io/components 0.5.0 → 0.5.2

package/dist/index.d.ts

@@ -1527,8 +1527,10 @@ interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
      * dropdown (the overlay itself is a separate component); for `global-client`
      * it optionally navigates to the client home. When omitted, the
      * `global-client` root renders as a non-interactive label (matching Figma).
+     * Receives the click event: anchor a switcher to `e.currentTarget` (Safari does
+     * not focus buttons on click, so `document.activeElement` is unreliable).
      */
-    onClientClick?: () => void;
+    onClientClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**
  * Breadcrumbs — a horizontal trail showing the user's location in a hierarchy,
@@ -4941,8 +4943,12 @@ interface TopBarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'
     };
     /** Fired when the notification bell is clicked. */
     onNotificationsClick?: () => void;
-    /** Fired when the User-Menu is clicked. */
-    onUserMenuClick?: () => void;
+    /**
+     * Fired when the User-Menu is clicked, with the click event — anchor the menu to
+     * `e.currentTarget`, not `document.activeElement` (Safari doesn't focus buttons
+     * on click, so `activeElement` is `<body>` and the menu lands at 0,0).
+     */
+    onUserMenuClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Show the global search field in the centre of the bar (Figma 2026-10-06 — it
      * moved here from the Side Bar). Default `true`.

package/dist/index.js

@@ -836,11 +836,17 @@ var BUTTON_STYLES = `
   }
   /* Plain underline spans the whole content row (icons + label), not just the
      text run \u2014 text-decoration:underline only underlines inline text, leaving
-     the flex-item icons un-underlined. A bottom border on the flex container
-     draws one continuous line under the leading icon, label, gap, and trailing
-     icon, matching Figma. currentColor tracks --leta-btn-text across states. */
+     the flex-item icons un-underlined. A 1px line painted across the bottom of
+     the flex container runs under the leading icon, label, gap and trailing
+     icon. It is painted INSIDE the box (Figma's Underline is a zero-height
+     vector at the bottom of the 20/16px box), so it adds no height: a
+     border-bottom made Medium 21 and Small 17 (fixed 2026-10-21).
+     currentColor tracks --leta-btn-text across states. */
   .leta-btn--plain.leta-btn--underline {
-    border-bottom: 1px solid currentColor;
+    background-image: linear-gradient(currentColor, currentColor);
+    background-size: 100% var(--stroke-xs);
+    background-position: 0 100%;
+    background-repeat: no-repeat;
   }
 `;
 function ensureStylesInjected2() {
@@ -4638,7 +4644,10 @@ var UserMenu = /* @__PURE__ */ React40.forwardRef(function UserMenu2({ name, ava
         border: "none",
         cursor: "pointer",
         backgroundColor: SURFACE2[eff],
-        boxShadow: `inset 0 0 0 var(--stroke-xs) ${BORDER2[eff]}`,
+        // Figma 2026-10-21: a 1px ring OUTSIDE the 68×40 pill (an outer spread, so
+        // the box doesn't grow). At Idle the ring matches the surface and is meant
+        // to be invisible; Hover/Pressed show it.
+        boxShadow: `0 0 0 var(--stroke-xs) ${BORDER2[eff]}`,
         ...style
       },
       onMouseEnter: (e) => {
@@ -7241,6 +7250,7 @@ var TopFilter = /* @__PURE__ */ React57.forwardRef(
     const pressed = forcedState ? forcedState === "pressed" : pressedLive;
     const split = advanced && !!onChevronClick;
     const stateSurface = pressed ? "var(--surface-neutral-top-filter-tab-pressed)" : hovered ? "var(--surface-neutral-top-filter-tab-hover)" : "var(--surface-neutral-top-filter-tab-idle)";
+    const selectedSurface = pressed || hovered ? stateSurface : "var(--surface-neutral-top-filter-tab-active)";
     const stateBorder = pressed ? "var(--border-neutral-top-filter-tab-pressed)" : hovered ? "var(--border-neutral-top-filter-tab-hover)" : "var(--border-neutral-top-filter-tab-idle)";
     const selectedRing = `inset 0 0 0 var(--stroke-sm) var(--border-secondary-top-filter-tab-active)`;
     const hoverHandlers = {
@@ -7288,11 +7298,9 @@ var TopFilter = /* @__PURE__ */ React57.forwardRef(
         height: 40,
         padding: "var(--padding-8px) var(--padding-12px)",
         borderRadius: "var(--rounding-lg)",
-        // Selection is carried by the 1.5px ring alone: Idle-Selected sits on the
-        // idle surface (Library 2026-10-18 — `Surface/neutral/top-filter-tab-active`
-        // was deleted; Advanced rebinds to idle, Basic still points at the deleted
-        // variable, reported as Figma hygiene).
-        backgroundColor: stateSurface,
+        // Selected → the 1.5px ring plus the selected surface (`top-filter-tab-active`
+        // at Idle-Selected; hover/pressed surfaces otherwise).
+        backgroundColor: selected ? selectedSurface : stateSurface,
         color: "var(--text-default-label)",
         // 1px unselected, 1.5px selected (all six of each in Figma).
         boxShadow: selected ? selectedRing : `inset 0 0 0 var(--stroke-xs) ${stateBorder}`,
@@ -7334,7 +7342,7 @@ var TopFilter = /* @__PURE__ */ React57.forwardRef(
       height: 40,
       padding: 0,
       borderRadius: "var(--rounding-lg)",
-      backgroundColor: selected ? stateSurface : "transparent",
+      backgroundColor: selected ? selectedSurface : "transparent",
       color: "var(--text-default-label)",
       border: "none",
       cursor: "pointer",
@@ -7966,8 +7974,7 @@ var PRESET = {
   // Added 2026-10-06 (Figma `Type=Calendar`, desktop). Figma reads "No Schedule";
   // sentence-cased like every other preset title (2026-10-02 ruling).
   "calendar": { illustration: "calendar", heading: "No schedule", description: "All schedules will be displayed here" },
-  // Added 2026-10-21 (Figma `Type=Recording`). Copy from the Desktop variant — the
-  // Mobile variant still carries the Comments copy (a copy-paste slip in the Library).
+  // Added 2026-10-21 (Figma `Type=Recording`, Desktop + Mobile — same copy in both).
   "recording": { illustration: "recordings", heading: "No recordings", description: "All recordings will be displayed here" }
 };
 var ILLUSTRATION_SIZE = 150;
@@ -12302,9 +12309,9 @@ var MapSearchInput = /* @__PURE__ */ React94.forwardRef(function MapSearchInput2
         boxSizing: "border-box",
         borderRadius: "var(--rounding-xl)",
         overflow: "hidden",
-        // Figma outlines only the Active Results card (Border/neutral/default, 1px);
-        // the other three states rely on the shadow alone.
-        boxShadow: state === "active-results" ? "inset 0 0 0 var(--stroke-xs) var(--border-neutral-default), var(--shadow-neutral-2)" : "var(--shadow-neutral-2)",
+        // Every open state draws a 1px Border/neutral/default outline (Figma,
+        // 2026-10-21 — it was Active Results only until the designer aligned them).
+        boxShadow: "inset 0 0 0 var(--stroke-xs) var(--border-neutral-default), var(--shadow-neutral-2)",
         backgroundColor: "var(--surface-neutral-bg-default)",
         ...style
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leta-io/components",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "LETA React component library",
   "repository": {
     "type": "git",
@@ -28,8 +28,8 @@
     "country-flag-icons": "^1.6.17",
     "leaflet": "^1.9.4",
     "lottie-web": "^5.12.2",
-    "@leta-io/icons": "0.5.0",
-    "@leta-io/design-tokens": "0.5.0"
+    "@leta-io/icons": "0.5.2",
+    "@leta-io/design-tokens": "0.5.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",