@broberg/app-shell 0.22.1 → 0.22.2

package/README.md

@@ -191,6 +191,11 @@ with Enter from a keyboard-focused anchor, or any key in the menu, shows it. ↑
 ellipses; the label only once the value is gone. The menu now sizes to its content between 240 and 320px
 (`--bas-menu-min-width` / `--bas-menu-max-width`, never wider than the viewport − 16px) instead of a fixed 240px.
 
+**0.22.2** — sidebar user menu (F092.34, scout #2855): when the menu is taller than the space above the button and
+scrolls, only the middle scrolls — the head (name/e-mail) and «Log ud» stay pinned in view. «Log ud» now sits in its
+own `.bas-menu__foot` block. The menu button shows a focus ring only for keyboard focus, also when the app has its
+own global `button:focus` outline.
+
 ## 0.11.1 — the palette list floats over the menu (F001.25)
 
 Christian 10/10: «Kunne denne ikke være en pop-over ting så dialogen ikke bliver

package/css/app-shell.css

@@ -344,6 +344,9 @@ button.bas-group__label:hover { color: var(--bas-group-label-color, var(--fg-mut
   transition: background var(--bas-dur) var(--bas-ease);
 }
 .bas-userbtn:hover, .bas-userbtn.is-open { background: var(--active); }
+/* F092.34 — a ring for keyboard focus only; beats an app's global button:focus rule by specificity. */
+.bas-userbtn:focus:not(:focus-visible) { outline: none; }
+.bas-userbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .bas-userbtn__name { font-size: calc(13px * var(--bas-font-scale, 1)); font-weight: 500; }
 .bas-avatar { border-radius: 50%; object-fit: cover; flex: none; }
 .bas-avatar--initials {
@@ -551,6 +554,9 @@ button.bas-group__label:hover { color: var(--bas-group-label-color, var(--fg-mut
 .bas-sidebar.is-railed .bas-userbtn.is-sidebar { justify-content: center; padding: 6px 0; }
 /* Positioned as position:fixed from the button by the component (the sidebar clips overflow). */
 .bas-menu.is-up { top: auto; right: auto; max-width: none; overflow-y: auto; }
+/* F092.34 — when the sidebar menu scrolls, only the middle does: the head and «Log ud» stay in view. */
+.bas-menu.is-up > .bas-menu__who { position: sticky; top: 0; z-index: 1; background: var(--bg-card); }
+.bas-menu.is-up > .bas-menu__foot { position: sticky; bottom: 0; z-index: 1; background: var(--bg-card); }
 .bas-menu__sub { font-size: calc(12px * var(--bas-font-scale, 1)); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* F092.27 — the organisation line (menu top only). */
 .bas-menu__org { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: calc(13px * var(--bas-font-scale, 1)); color: var(--fg-muted); min-width: 0; }

package/dist/preact.cjs

@@ -1484,13 +1484,16 @@ function UserMenu(p) {
           ] })
         ] }) })
       ] }) : null,
-      p.onSignOut ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sep" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", class: "bas-mi is-danger", role: "menuitem", "data-testid": "topbar-sign-out", disabled: busy, onClick: () => void signOut(), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconLogOut, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.signOut })
+      p.onSignOut ? (
+        // F092.34 — its own block, so the sidebar menu can pin it to the bottom while the middle scrolls.
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-menu__foot", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sep" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", class: "bas-mi is-danger", role: "menuitem", "data-testid": "topbar-sign-out", disabled: busy, onClick: () => void signOut(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconLogOut, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.signOut })
+          ] })
         ] })
-      ] }) : null
+      ) : null
     ] }) : null
   ] });
 }