@aiquants/menu-bar 1.19.1 → 1.20.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+## Unreleased
+
+### 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

@@ -195,7 +195,7 @@ interface LinkProps {
 
 The package ships **two CSS artifacts** — pick the one that matches your host.
 
-- **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):
+- **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):
 
   ```css
   /* app tailwind.css */
@@ -207,6 +207,8 @@ 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.
@@ -225,7 +227,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 +237,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 a coarse pointer either: 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 +247,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 +264,28 @@ 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:
+
+```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;
+  }
+}
+```
+
+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.
+
 ## 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`.