@aiquants/menu-bar 1.21.0 → 1.22.1

package/CHANGELOG.md

@@ -1,6 +1,65 @@
 # Changelog
 
-## Unreleased
+## 1.22.1 (2026-10-29)
+
+### Changed
+
+- **The two links of `SessionInfo` (Profile and Google) are placed side by side.** In place of stacking them vertically in full-width rows (which consumed unnecessary vertical space), the links are arranged in two columns (`grid-cols-2`). With their text at the `caption` step (11px, `CAPTION_TEXT_CLASS_NAME`), the 6-character Japanese label 「プロフィール」 (66 to 67.3px) fits in one line within the 96px button (71px usable width), while maintaining the minimum 44 × 44px target size (WCAG 2.5.5). The card's vertical height is reduced by 50px (3.125rem).
+- **The short-viewport scroll threshold is updated to 17.8125rem (285px).** With the more compact `SessionInfo` card height (reduced from 10.375rem + 3px to 7.25rem + 3px), the threshold for scrolling the whole drawer as one is lowered to 17.8125rem (header 8.25rem + 4px, footer 3.5rem + 1px, 2 rows of the list 5.75rem).
+- `engines` declares pnpm `>=8.0.0` in place of npm.
+
+### Documentation
+
+- Installation shows `pnpm add` only.
+
+## 1.22.0 (2026-10-26)
+
+### Changed
+
+- **The drawer's controls and list rows draw their text at the `body` step (13px).** The footer's pin, theme and
+  sign-out buttons (11px), the theme button's icon (12px), the two links of `SessionInfo` (11px), the list's top-level
+  links and group headings (12px below a 40rem viewport) and the links inside a group (12px) now draw
+  `var(--aqmb-font-size-body, 0.8125rem)` (13px at the default root font size) on a
+  `var(--aqmb-line-height-body, 1.25rem)` (20px) line. From a 40rem viewport up, the top-level links and group headings
+  keep `text-sm` (14px).
+- **The "Google Account" label of `SessionInfo` is at the `caption` step (11px).** It draws
+  `var(--aqmb-font-size-caption, 0.6875rem)` on a `var(--aqmb-line-height-caption, 1.25rem)` line instead of 10px, so
+  its line grows from 12.5px to 20px and the avatar row from 32px to 38px.
+- **The two links of `SessionInfo` are stacked.** At 13px, 「プロフィール」 (about 78 to 80px) no longer fits the 71px
+  that a 96px link beside the other one leaves for its label, so each link is a row as wide as the card (198px in the
+  drawer's header) and at least 2.75rem (44px) tall. The card grows from 113px to 169px, and the drawer's list area
+  shrinks by as much.
+- **Text sizes and line heights are in rem and follow page zoom and the root font-size setting.** The hand-written px
+  sizes (`text-[11px]`, `text-[10px]`) are gone. The package reads `--aqmb-font-size-body`, `--aqmb-line-height-body`,
+  `--aqmb-font-size-caption` and `--aqmb-line-height-caption` without declaring them, so a host can bind them on
+  `:root` to its own type scale (README, "Text Size").
+- **On a short viewport the whole drawer scrolls as one.** The drawer is never taller than the viewport. At a
+  viewport height of 20.9375rem or less (335px at the default font size: the signed-in `SessionInfo` header, the footer and two
+  rows of the list), the header, the list and the footer scroll together, so the footer stays reachable at high zoom
+  (360 × 225 CSS px, a 1440 × 900 window at 400 %). On taller viewports the header and the footer stay in place and only
+  the list scrolls, as before. The list's region and scroll container take their layout from the new component
+  classes `.aiquants-menu-list-region` and `.aiquants-menu-list-scroller` instead of utilities.
+- **Long labels wrap instead of being cut off.** A label of the list longer than its row (a top-level link, a group
+  heading or a link inside a group) wraps onto more lines, even inside an unbreakable word, and its row grows past
+  2.75rem; the wrapper of a group's links no longer clips them (its `contain: content` and `white-space: nowrap` are
+  removed). The sign-out label wraps inside its button, which grows taller, when a root font size above the default
+  leaves it too little width; the footer's buttons have a minimum height of 2.75rem instead of a fixed one.
+- **`SessionInfo` cuts no text to an ellipsis.** The user's name and the labels of the two links wrap onto more lines,
+  even inside an unbreakable word (`overflow-wrap: anywhere` on `.aiquants-session-card`), instead of being truncated,
+  and the card grows taller. The name loses its `title`, which only revealed a truncated name. At the default 16px root
+  every text stays on one line.
+- **The footer row wraps.** When a large root font size no longer fits the pin, theme and sign-out buttons beside one
+  another in the 240px drawer (above a root of about 23px; at the 200 % text-size setting, a 32px root, the pin and
+  theme buttons share the first line and the sign-out button takes the second), the row wraps, with its gap as the row
+  gap, instead of overflowing sideways, and every button keeps at least 2.75rem. The sign-out button no longer shrinks
+  below its content (`min-width: 0` is removed). At the default root the row stays one line.
+- **No control transitions every property any more.** The theme button, the `SessionInfo` card and its links, and
+  the submenu pin buttons transitioned every property (`transition-all`, `transition: all`), so right after a change of
+  the root font size their rem padding and minimum sizes moved for 0.15–0.3 s before settling. The theme button, the card
+  and the pin buttons now transition their colours only, and the links their colours and their press scale
+  (`transition`).
+
+## 1.21.0 (2026-10-25)
 
 ### Changed
 

package/README.md

@@ -18,7 +18,7 @@ A React menu bar component with authentication support and theming for modern we
 ## Installation
 
 ```bash
-npm install @aiquants/menu-bar
+pnpm add @aiquants/menu-bar
 ```
 
 Peer dependencies: `react` and `react-dom` `^19.2.7`, and `react-router-dom` `^7.7.1`. The package's `engines` field asks for Node.js 18 or later.
@@ -277,6 +277,34 @@ The drawing stays 24px and the box becomes 48 × 48 with 12px of inline padding,
 
 Under every pointer (a mouse, a pen or a finger) the drawer's own controls are at least 2.75rem × 2.75rem (44 × 44 px at the default root font size): the footer's pin, theme and sign-out buttons, every link of the list (it fills its row, and the rows have no block padding of their own), the group headings and their pin buttons, and the links of `SessionInfo`.
 
+The drawer is never taller than the viewport. On a viewport at most 17.8125rem tall (285px at the default font size: the signed-in `SessionInfo` header, the footer and two rows of the list), the header, the list and the footer scroll together as one, so nothing is cut off or out of reach at high zoom (for example 360 × 225 CSS px, a 1440 × 900 window at 400 %); on taller viewports the header and the footer stay in place and only the list scrolls.
+The threshold is in rem, so it rises with the browser's default font-size setting as the drawer's parts do. With a header of your own that is taller than `SessionInfo`, the drawer still scrolls as a whole once the header and the footer alone no longer fit.
+
+## Text Size
+
+The drawer's controls and list rows draw their text on two steps of a type scale, each read from a custom property with the step's default as its fallback. The defaults are in rem, so the text follows page zoom and the browser's root font-size setting.
+
+| Custom property | Default | Text |
+| --- | --- | --- |
+| `--aqmb-font-size-body` | `0.8125rem` (13px at the default root font size) | The primary text of controls and rows: the footer's pin, theme and sign-out buttons, the list's links and group headings, and the links inside a group. From a viewport 40rem wide up, the list's top-level links and group headings use `text-sm` (0.875rem, 14px) instead |
+| `--aqmb-line-height-body` | `1.25rem` (20px) | The line of that text |
+| `--aqmb-font-size-caption` | `0.6875rem` (11px) | The links and supplementary "Google Account" label of `SessionInfo` |
+| `--aqmb-line-height-caption` | `1.25rem` (20px) | The line of that text |
+
+The package only reads these properties and never declares them, so a host can bind them on `:root`, for example to its own type scale:
+
+```css
+:root {
+  --aqmb-font-size-body: var(--host-font-size-body);
+  --aqmb-line-height-body: var(--host-line-height-body);
+  --aqmb-font-size-caption: var(--host-font-size-caption);
+  --aqmb-line-height-caption: var(--host-line-height-caption);
+}
+```
+
+The drawer stays 240px wide. At the default sizes the sign-out label (about 78px) fits on one line beside the two 44px buttons with about 5px to spare; with a larger body size, or a root font size above 16px, it wraps inside its button, which grows taller, and above a root of about 23px the footer row wraps and the button takes a line of its own.
+A label of the list longer than its row wraps the same way, even inside an unbreakable word, and its row grows past 2.75rem; the name and the links of `SessionInfo` wrap too, so no label is cut off.
+
 ## Theming
 
 The menu bar supports both light and dark themes. The hand-written styles are scoped with the `.aiquants-menu-bar` class; the utility classes and Tailwind theme variables of the standalone build are global (see "Styling (CSS)"). The root element carries the theme as a class: `.aiquants-menu-bar.light` or `.aiquants-menu-bar.dark`.
@@ -472,8 +500,8 @@ The main menu bar component that includes:
 
 A standalone session information component that displays:
 
-- The user's avatar (a default icon when `photo` is empty), display name and a "Google Account" label
-- Two links rendered through the customizable `LinkComponent` (default: `DefaultLink`, a plain `<a>`): a profile link to `/` and a link to `https://myaccount.google.com/`
+- The user's avatar (a default icon when `photo` is empty), display name and a "Google Account" label (at the caption step, see "Text Size"). The name and the label wrap, even inside an unbreakable word, rather than being cut to an ellipsis
+- Two links rendered through the customizable `LinkComponent` (default: `DefaultLink`, a plain `<a>`): a profile link to `/` and a link to `https://myaccount.google.com/`. They are stacked, each a row as wide as the card and at least 2.75rem tall (44px at the default root font size), its label at the body step, wrapping onto more lines (the link growing taller) when a large root font size leaves it too little width
 - A "please sign in" card ("ログインしてください") when `user` is `null`
 
 The card carries `data-aqmb-session-card` in both states. Sign-out is not part of `SessionInfo`: it is the drawer's sign-out button, which calls `onClickSignout`.
@@ -506,7 +534,9 @@ Hand-written component classes use the `.aiquants-` prefix (the modifiers are th
 
 - `.aiquants-menu-bar` - Main container (with the theme class `light` or `dark`)
 - `.aiquants-menu-switch` - Open/close switch (`.aiquants-menu-switch-bars`, `.aiquants-menu-switch-bar`, `.aiquants-menu-switch-caption`)
-- `.aiquants-menu-content` - Drawer
+- `.aiquants-menu-content` - Drawer (never taller than the viewport; it scrolls as a whole on a short one)
+- `.aiquants-menu-list-region` - The list's region between the drawer's header and footer
+- `.aiquants-menu-list-scroller` - The list's scroll container (`data-aqmb-menu-list`) on a tall viewport
 - `.aiquants-menu-list-item` - Menu item and group summary
 - `.aiquants-session-card` - Session information card