@aiquants/menu-bar 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -4,6 +4,53 @@
 
 ### 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. Below a
+  viewport height of 20.9375rem (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.
+- **Transitions animate colours only, never the layout.** 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
+
 - **The drawer's controls are 44px targets under every pointer.** With a mouse, a pen or a finger alike, the footer's
   pin, theme and sign-out buttons, every link of the menu list (which fills its row), the group headings and their pin
   buttons, and the links of `SessionInfo` are at least 2.75rem × 2.75rem (44 × 44px at the default root font size,

package/README.md

@@ -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 shorter than 20.9375rem (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 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 every control and row: the footer's pin, theme and sign-out buttons, the list's links and group headings, the links inside a group, and the links of `SessionInfo`. 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 supplementary "Google Account" label of `SessionInfo` |
+| `--aqmb-line-height-caption` | `1.25rem` (20px) | The line of that label |
+
+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