@cplieger/web-terminal-ui 5.0.1 → 5.0.2

package/css/10-primitives.css

@@ -42,6 +42,33 @@
   background: var(--text-active);
 }
 
+/* ===== Hover gating: any-hover, never hover =====
+   Every gated hover rule in this package uses @media (any-hover: hover). Do not
+   write @media (hover: hover) here.
+
+   What the gate is for: a bare touchscreen fires no pointer-leave, so a tapped
+   control keeps its :hover wash until the next tap somewhere else. What went
+   wrong: `hover` and `pointer` describe only the PRIMARY input, and iPadOS
+   reports hover: none / pointer: coarse whether or not a Magic Keyboard trackpad
+   is attached. So (hover: hover) is false on every touch-primary device,
+   INCLUDING the ones driving a real pointer.
+
+   For the coarse-only controls that made the gate not a tradeoff but a deletion,
+   and it shipped that way: .wt-tab-kb renders only under @media (pointer: coarse)
+   (30-tabs.css) and the whole .wt-switcher subtree only under (pointer: coarse)
+   plus .wt-narrow (31-switcher.css). Pairing either with (hover: hover) makes the
+   two conditions complementary, so the hover rule was unreachable on every device
+   that exists. Measured against the deployed bundle at iPad width: the keyboard
+   button is a visible 44x44 while a forced :hover leaves its background at
+   rgba(0, 0, 0, 0), where the ungated .wt-tab-new beside it resolves to
+   --tab-active-bg.
+
+   `any-hover` asks the question the gate meant to ask — can ANY attached device
+   hover — so a bare iPhone/iPad still answers none (no wash, nothing to stick)
+   while a trackpad or Pencil answers hover and brings a real pointer-leave with
+   it. Same defect class as Tailwind's hoverOnlyWhenSupported
+   (tailwindlabs/tailwindcss#11109). */
+
 /* Keyboard-focus ring for every chrome control (all interactive chrome is a
    real <button>: tabs, +, keyboard, switcher rows, menu items, the FAB).
    :focus-visible only — a tap/click never shows the ring (the UA heuristic),
@@ -147,7 +174,7 @@
   font-weight: 600;
 }
 
-@media (hover: hover) {
+@media (any-hover: hover) {
   :where(.wt-root) .wt-fatal-reload:hover {
     background: color-mix(in oklch, var(--accent), var(--text) 12%);
   }

package/css/30-tabs.css

@@ -158,11 +158,12 @@
    vocabulary and stays themeable through one token. It is a rung subtler than the
    inactive chip's 15%/25% because it starts from an already-lifted fill.
 
-   Hover is gated to real hover pointers. Tapping an INACTIVE chip makes it
-   active, so a touchscreen's sticky :hover leaves with the class; tapping the
-   ACTIVE chip changes nothing, so an ungated hover would stay lit until the next
-   tap somewhere else. Touch feedback there is :active, which is correct. */
-@media (hover: hover) {
+   Hover is gated (see the any-hover note in 10-primitives.css). Tapping an
+   INACTIVE chip makes it active, so a touchscreen's sticky :hover leaves with the
+   class; tapping the ACTIVE chip changes nothing, so an ungated hover would stay
+   lit until the next tap somewhere else. Touch feedback there is :active, which is
+   correct. */
+@media (any-hover: hover) {
   :where(.wt-root) .wt-tab-active:hover {
     background: color-mix(in oklch, var(--tab-active-bg), var(--tab-active-fg) 12%);
   }
@@ -382,13 +383,15 @@
 
 /* Hover wash, matching every other bar control (.wt-tab-new, the switcher's
    buttons) — without it this was the one control in the chrome that gave no
-   pointer feedback at all. Gated to real hover pointers because the button only
-   SHOWS on a coarse pointer (the iPad strip): a plain touchscreen has no
-   pointer-leave, so :hover would stick after a tap and the wash would linger;
-   the feedback there is :active, from .wt-btn. Before .wt-active / .wt-armed so
-   those toggled fills win on a hovered button (equal specificity, source order
-   decides). */
-@media (hover: hover) {
+   pointer feedback at all. Gated on any-hover, NOT hover: this button renders only
+   under (pointer: coarse) below, and a touch-primary device reports hover: none
+   even with a trackpad attached, so a (hover: hover) gate here made the wash
+   unreachable on every device rather than restricting it to hovering ones (the
+   note in 10-primitives.css has the measurement). On a bare touchscreen any-hover
+   is none, so the feedback there is still :active, from .wt-btn. Before
+   .wt-active / .wt-armed so those toggled fills win on a hovered button (equal
+   specificity, source order decides). */
+@media (any-hover: hover) {
   :where(.wt-root) .wt-tab-kb:hover {
     background: var(--tab-hover-bg);
   }

package/css/31-switcher.css

@@ -148,7 +148,7 @@
   color: color-mix(in oklch, var(--text) 55%, transparent);
 }
 
-@media (hover: hover) {
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-current-close:hover {
     color: var(--text);
   }
@@ -216,10 +216,11 @@
   overflow: hidden;
 }
 
-/* Hover wash like the switch and "+" buttons beside it; gated to real hover
-   pointers for the same reason they are (a sticky :hover after a tap). Before
-   .wt-active / .wt-armed so those fills win on a hovered button. */
-@media (hover: hover) {
+/* Hover wash like the switch and "+" buttons beside it; gated on any-hover for
+   the same reason they are (see the note in 10-primitives.css — this whole
+   subtree renders only on a coarse pointer, where hover: hover is always false).
+   Before .wt-active / .wt-armed so those fills win on a hovered button. */
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-kb:hover {
     background: var(--tab-hover-bg);
   }
@@ -292,7 +293,7 @@
   pointer-events: none;
 }
 
-@media (hover: hover) {
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-switch:hover {
     background: var(--tab-hover-bg);
   }
@@ -320,15 +321,17 @@
 }
 
 /* Mobile "+": the primary action, carried in the accent colour so it reads as
-   permanent and prominent. Hover fill is gated to real hover pointers: on touch,
-   :hover sticks after a tap (no pointer-leave), so the purple would linger — the
-   press feedback there comes from :active, which clears on release. */
+   permanent and prominent. Hover fill is gated on any-hover (see the note in
+   10-primitives.css): on a bare touchscreen any-hover is none, so the purple
+   cannot linger after a tap and the press feedback comes from :active; a trackpad
+   or Pencil reports hover and gets the wash, which a (hover: hover) gate denied it.
+   */
 :where(.wt-root) .wt-switcher-new {
   flex: none;
   color: var(--accent);
 }
 
-@media (hover: hover) {
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-new:hover {
     background: var(--tab-hover-bg);
   }
@@ -418,7 +421,7 @@
   overflow: hidden;
 }
 
-@media (hover: hover) {
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-row-select:hover {
     background: color-mix(in oklch, var(--tab-bg), var(--text) 15%);
   }
@@ -458,10 +461,13 @@
   color: color-mix(in oklch, var(--text) 55%, transparent);
 }
 
-/* Hover only on real hover pointers: on touch, :hover sticks after a tap, so
-   when closing a tab shifts the list under the finger the newly-under close
-   would latch white. Touch feedback comes from the surrounding row's :active. */
-@media (hover: hover) {
+/* Hover gated on any-hover (see the note in 10-primitives.css): on a bare
+   touchscreen any-hover is none, so when closing a tab shifts the list under the
+   finger the newly-under close cannot latch white, and the feedback comes from the
+   surrounding row's :active. A trackpad or Pencil reports hover and gets the
+   brighten, which a (hover: hover) gate denied it — this subtree only ever renders
+   on a coarse-primary device. */
+@media (any-hover: hover) {
   :where(.wt-root) .wt-switcher-row-close:hover {
     color: var(--text);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "type": "module",
   "description": "Reference touch-first browser UI for @cplieger/web-terminal-engine: a composable kernel + feature modules (tabs, activity monitor, mobile toolbar, context menu, IME, predictive echo, viewport handling) and CSS. One createTerminal() call.",
   "license": "GPL-3.0-or-later",