jig-ui 0.26.2 → 0.27.0

package/examples/E-165.html

@@ -0,0 +1,15 @@
+<!-- E-165 · A link that opens a new tab for no reason -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;a href="https://acme.example"
+   target="_blank"
+   rel="noopener"&gt;GitHub&lt;/a&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">A tab the reader did not ask for, and nothing says it opened. Back no longer returns.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;a href="https://acme.example"&gt;
+  GitHub&lt;/a&gt;
+
+&lt;!-- in a half-filled form --&gt;
+&lt;a href="/terms.pdf"
+   target="_blank" rel="noopener"&gt;
+  Terms (opens in a new tab)&lt;/a&gt;</pre></div>
+</figure>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jig-ui",
-  "version": "0.26.2",
-  "description": "A design system for coding agents. 160 numbered UI rules, brand x mode design tokens, and an installer for Claude Code, Codex, Cursor and opencode.",
+  "version": "0.27.0",
+  "description": "A design system for coding agents. 161 numbered UI rules, brand x mode design tokens, and an installer for Claude Code, Codex, Cursor and opencode.",
   "license": "Apache-2.0",
   "type": "module",
   "bin": {
@@ -35,7 +35,9 @@
     "commander": "^12.1.0"
   },
   "devDependencies": {
+    "@tailwindcss/node": "4.3.3",
     "@types/node": "^22.0.0",
+    "tailwindcss": "4.3.3",
     "tsup": "^8.3.0",
     "tsx": "^4.23.15",
     "typescript": "^5.6.0",

package/rules/00-anti-patterns.md

@@ -366,7 +366,7 @@ Without `viewport-fit=cover`, the browser keeps the page inside the safe area on
 ### D-115 The page scrolls sideways on a phone
 ❌ At phone width the whole page is wider than the screen — a data table, a long URL, an image, a `width: 100vw` element or a fixed-width block pushes it out, and the reader can drag the page left and right
 ✅ At every width, nothing makes the page wider than the screen. Content that is genuinely wider — a data table, a code block — scrolls inside its own container with a visible edge (`E-62`), and the page itself never does. `editorial` goes further and allows no scrolling regions on mobile at all (`M-01`): there a code block wraps its long lines and a wide table stacks its rows (`L-01`, step 6).
-Judge it on a render, not in the source: at 360px, `document.documentElement.scrollWidth` must not be greater than `document.documentElement.clientWidth`. The usual causes are each one line to fix — `overflow-wrap: anywhere` on text the author does not control, `max-width: 100%` on media, `width: 100%` instead of `100vw` (which includes the scrollbar), and a wrapper with `overflow-x: auto` around anything tabular.
+Judge it on a render, not in the source: at 360px, `document.documentElement.scrollWidth` must not be greater than `document.documentElement.clientWidth`. The usual causes are each one line to fix — `overflow-wrap: anywhere` on text the author does not control, `max-width: 100%` on media, `width: 100%` instead of `100vw` (which includes the scrollbar), and a wrapper with `overflow-x: auto` around anything tabular. That wrapper also takes `position: relative`, or a visually hidden label inside it, positioned absolutely, lays itself out against the page and widens it.
 A page that scrolls sideways is not merely untidy. The reader's vertical swipes drift, the page slides half off the screen, and every line of text needs re-centring before it can be read.
 
 ## E. States and interaction
@@ -489,6 +489,12 @@ On multi-step forms put **"Back" as a tertiary button at the top left** — away
 A Menu button that does nothing looks finished in every screenshot. On a phone it is the only way to the rest of the site, so the reader who taps it and sees nothing change has nowhere to go. A button that opens the menu without `aria-expanded` is the same failure for a screen reader: it announces "Menu, button" before and after, and the reader never learns anything happened.
 `jig check` catches the hidden navigation with no recorded open state anywhere in the project. It cannot tell whether the button actually opens the menu — `critique` operates it on a render at 360px: tap it, and the links appear, `aria-expanded` changes, and the label or icon reads as close.
 
+### E-165 A link that opens a new tab for no reason
+❌ `target="_blank"` on an ordinary link (another site, an article, a source) because it leads away from the site
+✅ The same tab. Open a new tab only when leaving would lose something: the reader is in the middle of a task (a half-filled form, an unsaved edit, a checkout, a signed-in session), something is playing or running, or the link is a file read alongside the page, such as a PDF. When a link does open a new tab, say so: "(opens in a new tab)" in its accessible name, and an icon for sighted readers. Open it safely too (`K-128`).
+The reader can already open any link in a new tab, with Cmd or Ctrl-click or a long-press. Forcing it takes that choice away and breaks Back: the new tab has no history, and on a phone the page they came from is hidden among their other tabs. A tab that opens unannounced is also a change of context nobody asked for, and a screen reader user may not know they have left.
+`jig check` warns on a link that opens a new tab and never says so. Whether the reason is good, a task the reader would lose, is a judgment a `critique` makes on the page.
+
 ---
 
 ## F. Forms
@@ -556,8 +562,8 @@ Where people must *browse* to decide, split the list into two dependent fields
 ---
 
 ### F-113 Form text small enough to make the phone zoom
-❌ An input, select or textarea whose text is below 16px — including `operator`'s 14px `--text-body`, and `--text-caption` in every mode
-✅ At least 16px on touch screens. To keep a denser size on desktop, raise it only where it matters: `@media (pointer: coarse) { input, select, textarea { font-size: max(16px, var(--text-body)); } }`
+❌ An input, select or textarea whose text is below 16px — including `--text-caption` in every mode, a size written as `font: inherit` under a 14px body, and `operator`'s 14px `--text-body` where the tokens do not raise it on touch screens
+✅ At least 16px on touch screens. `operator`'s tokens raise `--text-body` to 16px under a coarse pointer, so a control set in the body size, or inheriting it, is safe there. To keep any other denser size on desktop, raise it only where it matters: `@media (pointer: coarse) { input, select, textarea { font-size: max(16px, var(--text-body)); } }`
 iOS Safari zooms the whole page when a field whose text is below 16px takes focus, and it does not zoom back out when the field loses it. The reader is left with a form wider than the screen, scrolling sideways to find the next field (`D-115`).
 Setting `maximum-scale=1` on the viewport to stop it is not the fix. That disables pinch zoom for everyone, which is an accessibility failure in its own right.
 
@@ -646,10 +652,11 @@ Deletion is a real answer and the easy one to miss, because the correction point
 Related: `E-33` (an interactive `div`), `B-17` (heading levels), `H-48` (native elements over scripted ones), `P-14` (navigation).
 
 ### H-117 A token name nothing declares
-❌ `font-family: var(--font-body)`, `padding: var(--space-lg)` — in a project whose token layer declares neither
+❌ `font-family: var(--font-body)`, `padding: var(--space-lg)` — in a project whose token layer declares neither. The same in a Tailwind class: `min-h-touch` with no `--spacing-touch` in the theme
 ✅ Use the names the token layer declares — `02-tokens.md` lists them, and the token files in the project are the source. If the value you need has no token, that is a finding to report or a value to delete (`H-47`), never a name to make up.
 The browser does not warn. A `var()` that cannot resolve makes its whole declaration invalid, so the property falls back to its initial value: the font becomes the browser default serif, padding becomes 0, the border disappears. The page still renders, the source still looks tokenised, and every file-based review passes it. In a live run three of four pages invented their token names this way and shipped mostly unstyled.
 `jig check` reads every custom property the project declares — the token layer, its own stylesheets, a Tailwind `@theme`, `style` attributes — and reports each reference to one that is not there. A reference with a fallback, `var(--x, 1rem)`, resolves, and is not reported.
+A Tailwind v4 class whose value nothing declares fails the same way with less trace: Tailwind generates no CSS for it, and says nothing, so no `var()` is ever written. `jig check` asks the project's own Tailwind which of the classes in its markup are utilities that generate nothing, and reports those. A class the project names and styles itself is left alone. Tailwind reads some values from a name that is not the token's own: a duration from `--transition-duration-*`, so `duration-fast` needs that name in the theme, not `--duration-fast`.
 
 ---
 

package/rules/01-modes.md

@@ -190,7 +190,7 @@ Attempting to vary these by mode is a category error:
 - **Accessibility floors.** Contrast, focus indication, target size, semantic markup. Identical in all three. `operator` being dense does not license a 24px tap target or a 3:1 body contrast.
 - **Brand identity.** Palette, typeface, logo, voice.
 - **State completeness.** Every mode renders loading, empty, error and disabled.
-- **The anti-pattern file.** All 129 rules in it apply everywhere.
+- **The anti-pattern file.** All 130 rules in it apply everywhere.
 
 ---
 

package/rules/02-tokens.md

@@ -355,7 +355,7 @@ Resist per-component tokens (`--button-bg`). They multiply fast and rarely earn
 
 Names align to Tailwind v4's theme namespaces. This is free for other frameworks — they are ordinary custom properties — and means most of them can be exposed as Tailwind utilities through an alias block, without any framework taking a dependency on Tailwind.
 
-**Most, not all.** Three of the namespaces below are Jig's own and have no utility behind them in Tailwind v4 — the **Utility** column says which. Aliasing one is accepted silently, emits the custom property, and generates no rule, so the class lands on the element and does nothing. That is the same silent failure this file warns about under [Optional: Tailwind utility classes](#optional-tailwind-utility-classes), reached from the other direction: there the alias is missing, here the alias is present and the utility does not exist.
+**Most, not all.** Two of the namespaces below are Jig's own and have no utility behind them in Tailwind v4 — the **Utility** column says which. One more has a utility under another name. Aliasing one is accepted silently, emits the custom property, and generates no rule, so the class lands on the element and does nothing. That is the same silent failure this file warns about under [Optional: Tailwind utility classes](#optional-tailwind-utility-classes), reached from the other direction: there the alias is missing, here the alias is present and the utility does not exist.
 
 | Namespace | Holds | Layer | Utility |
 | --- | --- | --- | --- |
@@ -370,13 +370,14 @@ Names align to Tailwind v4's theme namespaces. This is free for other frameworks
 | `--focus-ring-*` | Focus indicator geometry | brand — an accessibility floor, so not mode-negotiable | **no** |
 | `--shadow-*` | Elevation | brand | yes |
 | `--ease-*` | Motion easing | mode | yes |
-| `--duration-*` | Motion duration | mode | **no** |
+| `--duration-*` | Motion duration | mode | yes, as `--transition-duration-*`: `duration-fast` |
+| `--opacity-*` | Opacity of a disabled control | brand | yes |
 | `--size-*` | Control and row heights | mode | yes |
 | `--measure-*` | Line length caps | mode | **no** |
 
-`--duration-*` and `--ease-*` had one row between them and only one half of it works, which is why they are separated here.
+`--duration-*` and `--ease-*` had one row between them and work differently, which is why they are separated here. Tailwind reads a duration from `--transition-duration-*`, so the alias block names it that way, `--transition-duration-fast: var(--duration-fast)`; an alias under Jig's own name generates nothing. `jig init` asks the project's own Tailwind which aliases generate a utility, and `jig check` asks it which classes in the markup generate nothing (`H-117`).
 
-**Reading a `no` token from a class.** Use Tailwind's custom-property value form, which needs no alias and keeps the semantic name: `max-w-(--measure-prose)`, `duration-(--duration-fast)`, `outline-(--focus-ring-width)`. That satisfies `H-47` — the value is still the token — it simply does not route through `@theme`. The same form covers any token a mode file adds that has no namespace at all, such as the `--grid-*` values.
+**Reading a `no` token from a class.** Use Tailwind's custom-property value form, which needs no alias and keeps the semantic name: `max-w-(--measure-prose)`, `outline-(--focus-ring-width)`. That satisfies `H-47` — the value is still the token — it simply does not route through `@theme`. The same form covers any token a mode file adds that has no namespace at all, such as the `--grid-*` values.
 
 Verified by compiling one alias per namespace against `tailwindcss@4.3.3` and reading the output. Probe each namespace with a *distinct* token name if you re-check this: `text-*`, `border-*`, `outline-*` and `max-w-*` each read more than one namespace, so a shared suffix makes a colour alias look like proof that four other namespaces work.
 

package/rules/03-patterns.md

@@ -578,7 +578,11 @@ everything else follows from.
 5. **Content that is genuinely wider scrolls inside itself, except in
    `editorial` on a phone.** A code block, a wide table, a long identifier: its
    own container scrolls with a visible edge (`E-62`), keeps its type size, and
-   the page never scrolls sideways (`D-115`). `editorial` allows no scrolling
+   the page never scrolls sideways (`D-115`). The container is
+   `position: relative` as well as `overflow-x: auto`: text hidden for screen
+   readers in a cell is positioned absolutely, against the nearest positioned
+   ancestor, and without one it escapes the container and widens the page,
+   though nothing shows. `editorial` allows no scrolling
    region on mobile (`M-01`), so there each one reflows instead:
    - **A code block** keeps its line breaks and indents and wraps a long line
      (`white-space: pre-wrap`, `overflow-wrap: anywhere`). What is copied is

package/rules.index.json

@@ -787,6 +787,14 @@
     "since": "0.10.0",
     "detector": "menu-state"
   },
+  {
+    "id": "E-165",
+    "bucket": "hybrid",
+    "severity": "warning",
+    "since": "0.27.0",
+    "detector": "new-tab-link",
+    "pass": "code"
+  },
   {
     "id": "H-117",
     "bucket": "mechanical",

package/tokens/mode.operator.css

@@ -107,7 +107,13 @@
    compact) is above WCAG 2.2's 24px minimum for a mouse, and below the 48px a
    finger needs, so under a coarse pointer every row rises to the floor. A
    control inside a row never sets its own height to reach it: every row in a
-   table is one height, and here the tokens make that height the right one. */
+   table is one height, and here the tokens make that height the right one.
+   Body text rises to 16px with it: an input, select or textarea set in 14px
+   makes iOS zoom the page on focus (`F-113`), and a form control's text is
+   body text, set by this token or inherited from it. */
 @media (pointer: coarse) {
-  :root { --size-row: var(--size-touch-target); --size-row-compact: var(--size-touch-target); }
+  :root {
+    --size-row: var(--size-touch-target); --size-row-compact: var(--size-touch-target);
+    --text-body: 16px;
+  }
 }