@broberg/app-shell 0.22.0 → 0.22.2

package/README.md

@@ -187,6 +187,15 @@ right-aligned before the chevron — «Type …… All ›», testid `<prefix>-a
 The focus ring now shows only for keyboard use: after a mouse open the first item has focus but no ring; opening
 with Enter from a keyboard-focused anchor, or any key in the menu, shows it. ↑↓/Enter/Escape are unchanged.
 
+**0.22.1** — a long `value` no longer clips the label (F092.33, scout #2830): the value gives way first and
+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

@@ -158,6 +158,7 @@ button.bas-group__label:hover { color: var(--bas-group-label-color, var(--fg-mut
 /* F092.32 — sized as tokens (scout's measurement of Claude Desktop at 1×). Not
    declared here, only read with a fallback, so an app's :root value wins. */
 .bas-rowmenu {
+  min-width: var(--bas-menu-min-width, 240px); max-width: min(var(--bas-menu-max-width, 320px), calc(100vw - 16px)); box-sizing: border-box;
   z-index: 70; padding: var(--bas-menu-padding, 6px); outline: none; border-radius: var(--bas-menu-radius, 14px); background: var(--bg-card);
   border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
 }
@@ -169,7 +170,8 @@ button.bas-group__label:hover { color: var(--bas-group-label-color, var(--fg-mut
 /* Focus ring for keyboard use only; a mouse open shows the highlight alone. */
 .bas-rowmenu__item:focus, .bas-rowmenu__back:focus { outline: none; }
 .bas-rowmenu.is-kbd .bas-rowmenu__item:focus, .bas-rowmenu.is-kbd .bas-rowmenu__back:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
-.bas-rowmenu__value { flex: none; color: var(--fg-muted); }
+/* F092.33 — the value gives way first; the label only once the value is gone. */
+.bas-rowmenu__value { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); }
 .bas-rowmenu__sep { height: 1px; margin: 6px 4px; background: var(--border); }
 .bas-rowmenu__back { color: var(--fg-muted); font-weight: 500; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 4px; }
 .bas-rowmenu__item.is-active, .bas-rowmenu__item:hover, .bas-rowmenu__back:hover { background: var(--hover); }
@@ -177,7 +179,7 @@ button.bas-group__label:hover { color: var(--bas-group-label-color, var(--fg-mut
 .bas-rowmenu__item.is-danger { color: var(--danger); }
 .bas-rowmenu__item.is-armed { background: var(--danger-soft, var(--hover)); font-weight: 500; }
 .bas-rowmenu__icon { display: inline-flex; color: var(--fg-subtle); }
-.bas-rowmenu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bas-rowmenu__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .bas-rowmenu__kbd { font-family: var(--font-mono, ui-monospace, monospace); font-size: calc(11px * var(--bas-font-scale, 1)); color: var(--fg-subtle); }
 .bas-rowmenu__form { display: flex; gap: 6px; padding: 4px; }
 .bas-rowmenu__input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: calc(var(--bas-radius) - 2px); background: var(--bg-sunk); color: var(--fg); font: inherit; font-size: calc(13px * var(--bas-font-scale, 1)); }
@@ -342,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 {
@@ -549,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

@@ -578,7 +578,7 @@ function ItemActionsMenu(props) {
   hooks.useLayoutEffect(() => {
     const r = props.anchor.getBoundingClientRect();
     const vw = window.innerWidth, vh = window.innerHeight, m = 8;
-    const w = Math.min(240, vw - 2 * m);
+    const w = Math.min(Math.max(240, menu.current?.offsetWidth ?? 0), vw - 2 * m);
     const h = menu.current?.offsetHeight ?? 0;
     const start = props.placement === "up-start";
     const left = Math.max(m, Math.min(start ? r.left : r.right - w, vw - w - m));
@@ -586,7 +586,7 @@ function ItemActionsMenu(props) {
     const fitsAbove = r.top - 4 - h >= m;
     const below = start ? !fitsAbove : props.placement === "down" || fitsBelow || !fitsAbove;
     const top = below ? Math.min(r.bottom + 4, vh - m - h) : r.top - 4 - h;
-    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${w}px` });
+    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px` });
   }, [stack.length]);
   hooks.useLayoutEffect(() => {
     if (!pos) return;
@@ -670,7 +670,7 @@ function ItemActionsMenu(props) {
       tabIndex: -1,
       "aria-label": view.kind === "list" && view.title ? view.title : props.label,
       "data-testid": `${pre}-menu`,
-      style: pos ?? { position: "fixed", visibility: "hidden" },
+      style: pos ?? { position: "fixed", left: "0px", top: "0px", visibility: "hidden" },
       onKeyDown,
       children: [
         stack.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", class: "bas-rowmenu__back", "data-testid": `${pre}-back`, "aria-label": t.back, onClick: back, children: [
@@ -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
   ] });
 }