@aiquants/menu-bar 1.20.0 → 1.22.0

package/CHANGELOG.md

@@ -2,6 +2,70 @@
 
 ## Unreleased
 
+### 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,
+  WCAG 2.5.5), so the drawer has one layout on every device. The compact sizes a fine pointer had are removed: 1.75rem
+  footer buttons, list links and group headings the size of their text in rows with block padding, pin buttons the size
+  of their 13px icon, and `SessionInfo` links one line of text tall. The rows have no block padding, so a row is exactly
+  its target. A host that sized anything to the old desktop drawer sees taller rows and a taller footer.
+- **Tailwind hosts no longer need Tailwind CSS v4.1.** The drawer carries no `pointer-coarse:` utilities any more, so
+  any Tailwind CSS v4 build generates all of its classes.
+- **The switch's box stays the host's decision, under every pointer.** `--aqmb-switch-target-size` keeps its default
+  `0px` and the package never raises it on its own: set it to at least 44px where your band holds the box. The README's
+  example now sets 48px in a 56px band without a media query. Nothing in the package stays coarse-only.
+
+## 1.20.0 (2026-10-24)
+
 ### Added
 
 - **`--aqmb-switch-target-size` sets the minimum side T of the switch's box (default `0px`).** The box you press is

package/README.md

@@ -195,7 +195,7 @@ interface LinkProps {
 
 The package ships **two CSS artifacts** — pick the one that matches your host.
 
-- **Tailwind v4 host** (Tailwind CSS v4.1 or later) — import the components-only build into the `components` layer, and let your own Tailwind build generate the JSX utility classes by scanning the package's built JavaScript (the published package ships `dist`, not `src`; the class names stay intact in the bundle):
+- **Tailwind v4 host** — import the components-only build into the `components` layer, and let your own Tailwind build generate the JSX utility classes by scanning the package's built JavaScript (the published package ships `dist`, not `src`; the class names stay intact in the bundle):
 
   ```css
   /* app tailwind.css */
@@ -207,8 +207,6 @@ The package ships **two CSS artifacts** — pick the one that matches your host.
 
   The `@custom-variant` line makes the menu bar's `dark:` utilities follow the `theme` prop: the menu bar's root carries `.dark` while `theme` is `'dark'`. With Tailwind's default `dark` variant (`prefers-color-scheme`), they follow the OS setting instead. The variant applies to your whole build, so your own `dark:` utilities then key off a `.dark` ancestor as well.
 
-  The drawer's sizes under a coarse pointer (see the end of "Menu Switch Custom Properties") are `pointer-coarse:` utilities, a variant Tailwind CSS v4.1 introduced. A v4.0 build drops those classes without an error, and the drawer's controls then keep their fine-pointer sizes on touch screens.
-
   `menu-bar.css` (Artifact A) carries only the hand-written `.aiquants-*` component classes and the package's own `:root` variables — no Tailwind theme variables, no Tailwind utilities, no preflight — so it drops into `layer(components)` safely.
   Its `:root` rule declares menu-bar's runtime variable `--aiquants-menu-pinned-width` (which the component sets inline at runtime) and the defaults of the menu switch custom properties (`--aqmb-switch-*`, see below).
   Do **not** also `@import` the standalone build in a Tailwind host: it re-emits the same utilities your build produces, and two concatenated builds cannot reproduce the single-build canonical order (base → variants), so base/variant cascade winners flip.
@@ -238,7 +236,7 @@ The open/close switch is a square box with four bars that turn into a cross whil
 | `--aqmb-switch-bottom` | `auto` | `bottom` of the switch |
 | `--aqmb-switch-z-index` | `calc(infinity)` | `z-index` of the switch. The default computes to the largest integer the browser supports (2147483647 in Chromium), which keeps the switch above the drawer (`z-index` 2147483642) and the backdrop (2147483640) |
 | `--aqmb-switch-size` | `27px` | Side S of the switch's drawing; every length of the drawing derives from it |
-| `--aqmb-switch-target-size` | `0px` | Minimum side T of the box you press: the box is B = max(S, T), and the drawing keeps its size, centred across the box by an inline padding of (B − S) / 2. The default leaves B = S. The package never raises it on its own, under a coarse pointer either: only you know whether a larger box fits the band around the switch |
+| `--aqmb-switch-target-size` | `0px` | Minimum side T of the box you press: the box is B = max(S, T), and the drawing keeps its size, centred across the box by an inline padding of (B − S) / 2. The default leaves B = S. The package never raises it on its own, under any pointer: only you know whether a larger box fits the band around the switch |
 | `--aqmb-switch-caption-display` | `block` | `display` of the caption; `none` hides it |
 
 The `z-index` default is `calc(infinity)` rather than a number because Lightning CSS, which Tailwind v4 builds pass stylesheets through, writes the numbers of custom-property values and `var()` fallbacks with 6 significant digits: `2147483647` would reach the browser as `2147480000`, below the drawer. An override in a stylesheet that also goes through Lightning CSS is rounded the same way when it has 7 or more significant digits. A small value such as `50` is kept as written, and stacks the switch below the drawer and the backdrop.
@@ -264,27 +262,48 @@ Example — fit the switch into a 32px header bar (4px + 24px line box + 4px):
 
 The box sits on the bar's 24px line box, and the focus ring (0 to 32px from the top) stays inside the bar. Adjust `--aqmb-switch-right` to align it horizontally.
 
-Example — a 44px target on touch screens (WCAG 2.5.5, AAA). Under a coarse pointer, set the target size to at least 44px where your band allows it, and grow the band to hold the box. A 32px bar built as 4px + line box + 4px on a 4px lattice keeps its height on that lattice when the line box becomes the smallest multiple of 8px that is at least 44px, 48px, so the band becomes 4px + 48px + 4px = 56px:
+Example — a 44px target (WCAG 2.5.5, AAA), the same under every pointer. Set the target size to at least 44px where your band allows it, and grow the band to hold the box. A 32px bar built as 4px + line box + 4px on a 4px lattice keeps its height on that lattice when the line box becomes the smallest multiple of 8px that is at least 44px, 48px, so the band becomes 4px + 48px + 4px = 56px:
 
 ```css
 :root {
   --aqmb-switch-size: 24px;
   --aqmb-switch-caption-display: none;
   --aqmb-switch-top: 4px;
-  --aqmb-switch-target-size: 24px;
-}
-
-@media (pointer: coarse) {
-  :root {
-    --aqmb-switch-target-size: 48px;
-  }
+  --aqmb-switch-target-size: 48px;
 }
 ```
 
 The drawing stays 24px and the box becomes 48 × 48 with 12px of inline padding, at 4px from the top; its focus ring spans 0 to 56px, exactly the band. Anything you lay out beside the switch should reserve the box B rather than the drawing S (for example `max(var(--aqmb-switch-size), var(--aqmb-switch-target-size))`).
 
-Under a coarse pointer 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 then fills its row), the group headings and their pin buttons, and the links of `SessionInfo`.
-With a fine pointer they are sized by their content: the footer's buttons are 1.75rem tall; a list link is its text, in a row with 0.25rem of block padding (0.125rem inside a group); a group heading is its text with 0.25rem of block padding, and its pin button a 13px icon with 0.15rem of padding; a `SessionInfo` link is one line of 11px text with 0.25rem of block 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
 
@@ -481,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`.
@@ -515,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