@aiquants/menu-bar 1.19.1 → 1.21.0

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+# Changelog
+
+## Unreleased
+
+### 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
+  B = max(S, T), where S is `--aqmb-switch-size`; the drawing keeps the side S and stands centred across the box (an
+  inline padding of (B − S) / 2), and the caption's column stands centred in the box when it fits. With the default the
+  box is the drawing, exactly as before, so a host that sets nothing sees no change, also under a coarse pointer: the
+  package never raises T on its own, since the band around the switch belongs to the host. To meet WCAG 2.5.5 (AAA) on
+  touch screens, set T to at least 44px under `@media (pointer: coarse)` where the band holds the box (the README shows
+  a 56px band holding a 48px box), and derive anything laid out beside the switch from the box
+  `max(var(--aqmb-switch-size), var(--aqmb-switch-target-size))` rather than from S.
+
+### Changed
+
+- **The drawer's controls are 44px targets under a coarse pointer.** Under `@media (pointer: coarse)` the footer's pin,
+  theme and sign-out buttons, every link of the menu list (which then 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). The rows lose their block padding there, so a row is exactly its target. With a fine pointer every size stays
+  as it was. Tailwind hosts generate these `pointer-coarse:` utilities from the package's `dist` like the others (they
+  need Tailwind CSS v4.1 or later); the standalone stylesheet carries them.

package/README.md

@@ -225,7 +225,7 @@ In both setups the component classes sit in the `components` layer and the utili
 
 ## Menu Switch Custom Properties
 
-The open/close switch is a square box with four bars that turn into a cross while the drawer is open, over a "menu" / "close" caption. Its whole drawing lives in the package stylesheet, and it carries no utility classes, so every custom property below takes effect. The defaults are declared on `:root`; override them on `:root` (or any ancestor of the menu bar).
+The open/close switch is a square box with four bars that turn into a cross while the drawer is open, over a "menu" / "close" caption. The drawing has the side S; the box you press has the side B = max(S, T), where T is a target size you may set, with the drawing centred across it. Its whole drawing lives in the package stylesheet, and it carries no utility classes, so every custom property below takes effect. The defaults are declared on `:root`; override them on `:root` (or any ancestor of the menu bar).
 
 | Property | Default | Effect |
 | --- | --- | --- |
@@ -235,7 +235,8 @@ The open/close switch is a square box with four bars that turn into a cross whil
 | `--aqmb-switch-left` | `auto` | `left` of the switch |
 | `--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 square box; every length of the drawing derives from it |
+| `--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 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.
@@ -244,8 +245,8 @@ How the drawing follows S:
 
 - The bars are S/9 thick, at 0, 2S/9, 4S/9 and 6S/9 of a stack 7S/9 high. While open, the outer bars become 32S/27 wide and 4S/27 thick and cross at ±45°; the inner bars fade out.
 - The caption's top edge is S/2 + 0.5rem below the top of the stack.
-- With the caption shown (the default) and S below 48px (at a 16px root font size), the column of bars and caption is taller than the box: it starts at the box's top and the caption hangs below the box.
-- With `--aqmb-switch-caption-display: none`, the bars are centred in the box and nothing is drawn above or below it. The cross can still extend slightly past the box's right edge, as it does in the default drawing.
+- The column of bars and caption is S/2 + 1.5rem tall. With the caption shown (the default) and a box B below that (B = S below 48px at a 16px root font size), the column is taller than the box: it starts at the box's top and the caption hangs below the box. In a box that holds it (the default S = 27px in a 44px box, for one), the column stands centred in the box.
+- With `--aqmb-switch-caption-display: none`, the bars are centred in the box (their stack starts (B − 7S/9) / 2 below its top) and nothing is drawn above or below it. The cross can still extend slightly past the box's right edge, as it does in the default drawing.
 - The default `27px` gives 3px bars spaced 6px apart, a 32px × 4px cross, and a caption 21.5px below the top of the box.
 - The switch draws in black, and in white on the dark theme and while the drawer is open. Its keyboard focus ring is a 2px outline in the same colour at a 2px offset, so it occupies 4px around the box.
 
@@ -261,6 +262,21 @@ 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 (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: 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 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`.
+
 ## 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`.