@aiquants/menu-bar 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## 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

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,20 @@ 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`.
 
 ## Theming