From 0ccf5b857f35162f76ddc67ea81424fc4e00c4ee Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sun, 9 Aug 2026 13:42:50 +0530
Subject: [PATCH 1/3] fix(ui): build the cn conflict table on first use, not at
 import

The GROUPS table spread `...borderGroups()` at module scope, which is a real
top-level call, so the elision analyser read lib/utils.ts as client-effecting.
Every page or layout reaching `cn` on a component-free path then shipped whole
instead of being elided, and `cn` is reached by essentially every kit helper,
so this cost page elision in every app that runs `webjsui init`.

Memoising the table behind a function keeps the same literal and the same
output (12,100 pairs and 242,000 triples over the sync test's 110-token
battery, zero mismatches) while leaving nothing to run at module load.

The blog copy carries the same change: it is the second of the two hand-synced
sources, and examples/blog/app/ui-demo/page.ts shipped whole for this reason.
---
 examples/blog/lib/utils/cn.ts              | 195 +++++++++++----------
 packages/ui/packages/registry/lib/utils.ts | 195 +++++++++++----------
 2 files changed, 202 insertions(+), 188 deletions(-)

diff --git a/examples/blog/lib/utils/cn.ts b/examples/blog/lib/utils/cn.ts
index d9eccc0ce..59ced4ea1 100644
--- a/examples/blog/lib/utils/cn.ts
+++ b/examples/blog/lib/utils/cn.ts
@@ -50,99 +50,106 @@ function walk(value: ClassValue, out: string[]): void {
 // IMPORTANT: text-size (text-sm, text-xs, text-base, text-lg, …) and
 // text-color (text-primary, text-foreground, …) are DIFFERENT properties
 // and must be in different groups. Same for bg-size vs bg-color etc.
-const GROUPS: Array<[RegExp, string]> = [
-  [/^p-/, 'p'], [/^px-/, 'px'], [/^py-/, 'py'], [/^pt-/, 'pt'], [/^pr-/, 'pr'], [/^pb-/, 'pb'], [/^pl-/, 'pl'],
-  [/^m-/, 'm'], [/^mx-/, 'mx'], [/^my-/, 'my'], [/^mt-/, 'mt'], [/^mr-/, 'mr'], [/^mb-/, 'mb'], [/^ml-/, 'ml'],
-  [/^w-/, 'w'], [/^h-/, 'h'], [/^size-/, 'size'],
-  // A `bg-[url(…)]` / `bg-[linear-gradient(…)]` background image is classified
-  // by its FUNCTION, since it carries no type hint to classify it by. The
-  // hinted forms are handled centrally, in `hintedGroup`.
-  [/^bg-\[(url\(|linear-gradient|radial-gradient|conic-gradient)/, 'bg-image'],
-  [/^bg-(linear|gradient|conic|radial|none)/, 'bg-image'],
-  [/^bg-(no-repeat|repeat|repeat-x|repeat-y|repeat-round|repeat-space)$/, 'bg-repeat'],
-  [/^bg-(fixed|local|scroll)$/, 'bg-attach'],
-  [/^bg-(auto|cover|contain)$/, 'bg-size'],
-  [/^bg-size-/, 'bg-size'],
-  // Two entries rather than one alternation: the first covers the live v4
-  // compounds (`bg-top-left`), the second the bare keywords plus the v4.1
-  // deprecated reversed compounds (`bg-left-top`), which tailwind-merge still
-  // carries. An unmatched `bg-*` token falls into the colour catch-all below and
-  // evicts a real colour, so admitting a dead spelling is the safe direction.
-  [/^bg-(top|bottom)(-(left|right))?$/, 'bg-position'],
-  [/^bg-(left|right|center)(-(top|bottom))?$/, 'bg-position'],
-  [/^bg-position-/, 'bg-position'],
-  // Clip, origin, and blend mode are three more properties under the same
-  // prefix. Each sat in `bg-color` before, so `bg-clip-text` evicted a real
-  // background colour (the gradient-text idiom lost its clip silently).
-  [/^bg-clip-(border|padding|content|text)$/, 'bg-clip'],
-  [/^bg-origin-(border|padding|content)$/, 'bg-origin'],
-  [/^bg-blend-(normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity)$/, 'bg-blend'],
-  [/^bg-/, 'bg-color'],
-  // text-shadow is its own property, and its size scale and its colour are two
-  // properties again. All three entries precede the text- patterns below, which
-  // is what keeps a `text-shadow-*` token out of `text-size` and `text-color`.
-  [/^text-shadow(-(2xs|xs|sm|md|lg|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'text-shadow'],
-  [/^text-shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'text-shadow'],
-  [/^text-shadow-/, 'text-shadow-color'],
-  // Font size: explicit list of Tailwind size scale.
-  [/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/, 'text-size'],
-  // Alignment, wrapping, and overflow are three more properties under the same
-  // prefix. Each was previously excluded from text-color by a lookahead and then
-  // matched nothing at all, so two alignments never collapsed.
-  [/^text-(left|center|right|justify|start|end)$/, 'text-align'],
-  [/^text-(wrap|nowrap|balance|pretty)$/, 'text-wrap'],
-  [/^text-(ellipsis|clip)$/, 'text-overflow'],
-  // Text color: anything else under the prefix. The specific groups above are
-  // the whole carve-out, so no negative lookahead is needed here as well.
-  [/^text-/, 'text-color'],
-  // Border sub-properties that are neither a width nor a colour. These come
-  // FIRST so the width / colour classifier below never sees them.
-  [/^border-(collapse|separate)$/, 'border-collapse'],
-  [/^border-spacing(-[xy])?-/, 'border-spacing'],
-  [/^border-(solid|dashed|dotted|double|hidden|none)$/, 'border-style'],
-  ...borderGroups(),
-  [/^rounded(-[a-z]+)?$/, 'rounded'],
-  [/^rounded-/, 'rounded'],
-  [/^opacity-/, 'opacity'],
-  [/^font-(thin|light|normal|medium|semibold|bold|black|extralight|extrabold)$/, 'font-weight'],
-  // Box-shadow SIZE and box-shadow COLOUR are two properties (`box-shadow` and
-  // `--tw-shadow-color`), so they need two groups. `shadow-none` is a size,
-  // `shadow-inherit` / `shadow-initial` are colours, and Tailwind accepts an
-  // alpha modifier on a size as well as on a colour, so `shadow-lg/25` has to
-  // stay on the size side. An unhinted arbitrary value is a SIZE when it opens
-  // with `inset`, a sign, a dot, or a digit (a shadow offset list) and also
-  // when it is a bare `var()` or the `(--x)` variable shorthand: Tailwind
-  // itself resolves an ambiguous arbitrary shadow to `box-shadow` unless the
-  // value is provably a colour, and `shadow-[var(--shadow-glow)]` is the normal
-  // way to write a design-token shadow. This is the one place the
-  // `borderGroups()` convention inverts, because a bare `border-[var(--x)]` is
-  // far more often a colour while a bare `shadow-[var(--x)]` is far more often
-  // a shadow. The size entries must precede the colour catch-all, or every
-  // size lands in the colour group and the bug inverts rather than being fixed.
-  [/^shadow(-(2xs|xs|sm|md|lg|xl|2xl|inner|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'shadow'],
-  [/^shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'shadow'],
-  // A bare name the size scale does not list reads as a colour, because
-  // `shadow-primary` is overwhelmingly more common than a `@theme`-extended
-  // `--shadow-card`. A project that adds a custom shadow NAME is the residual
-  // gap, and the docs say so rather than claiming the split is total.
-  [/^shadow-/, 'shadow-color'],
-  [/^z-/, 'z'],
-  // A bare `flex` / `grid` is a DISPLAY value, not a member of the flex / grid
-  // sub-property groups below, so it must never dedupe against them: an element
-  // can be both a flex container and a flex child (`class="flex flex-1"`), and
-  // collapsing the two silently drops `display:flex`. It still belongs to a
-  // group of its own, alongside every other display keyword, so a repeated one
-  // collapses and `cn('hidden', open && 'flex')` resolves to one display.
-  [/^(inline-block|inline-flex|inline-grid|inline-table|inline|block|flex|grid|flow-root|contents|hidden|list-item|table-caption|table-cell|table-column-group|table-column|table-footer-group|table-header-group|table-row-group|table-row|table)$/, 'display'],
-  // Each sub-utility below gets the group of the real CSS property it sets, so
-  // none of them collapses against the display value or against each other.
-  [/^flex-(row|row-reverse|col|col-reverse)$/, 'flex-direction'],
-  [/^flex-(wrap|wrap-reverse|nowrap)$/, 'flex-wrap'],
-  [/^flex-(\d+|auto|initial|none|\[[^\]]*\])$/, 'flex'],
-  [/^grid-cols-/, 'grid-cols'],
-  [/^grid-rows-/, 'grid-rows'],
-  [/^grid-flow-/, 'grid-flow'],
-];
+// Built on FIRST USE, not at module load. A module-scope `...borderGroups()`
+// spread is a real top-level call, so the elision analyser reads this module as
+// client-effecting and every page that reaches `cn` on a component-free path
+// ships whole instead of being elided (#1320).
+let _groups: Array<[RegExp, string]> | undefined;
+function GROUPS(): Array<[RegExp, string]> {
+  return (_groups ??= [
+    [/^p-/, 'p'], [/^px-/, 'px'], [/^py-/, 'py'], [/^pt-/, 'pt'], [/^pr-/, 'pr'], [/^pb-/, 'pb'], [/^pl-/, 'pl'],
+    [/^m-/, 'm'], [/^mx-/, 'mx'], [/^my-/, 'my'], [/^mt-/, 'mt'], [/^mr-/, 'mr'], [/^mb-/, 'mb'], [/^ml-/, 'ml'],
+    [/^w-/, 'w'], [/^h-/, 'h'], [/^size-/, 'size'],
+    // A `bg-[url(…)]` / `bg-[linear-gradient(…)]` background image is classified
+    // by its FUNCTION, since it carries no type hint to classify it by. The
+    // hinted forms are handled centrally, in `hintedGroup`.
+    [/^bg-\[(url\(|linear-gradient|radial-gradient|conic-gradient)/, 'bg-image'],
+    [/^bg-(linear|gradient|conic|radial|none)/, 'bg-image'],
+    [/^bg-(no-repeat|repeat|repeat-x|repeat-y|repeat-round|repeat-space)$/, 'bg-repeat'],
+    [/^bg-(fixed|local|scroll)$/, 'bg-attach'],
+    [/^bg-(auto|cover|contain)$/, 'bg-size'],
+    [/^bg-size-/, 'bg-size'],
+    // Two entries rather than one alternation: the first covers the live v4
+    // compounds (`bg-top-left`), the second the bare keywords plus the v4.1
+    // deprecated reversed compounds (`bg-left-top`), which tailwind-merge still
+    // carries. An unmatched `bg-*` token falls into the colour catch-all below and
+    // evicts a real colour, so admitting a dead spelling is the safe direction.
+    [/^bg-(top|bottom)(-(left|right))?$/, 'bg-position'],
+    [/^bg-(left|right|center)(-(top|bottom))?$/, 'bg-position'],
+    [/^bg-position-/, 'bg-position'],
+    // Clip, origin, and blend mode are three more properties under the same
+    // prefix. Each sat in `bg-color` before, so `bg-clip-text` evicted a real
+    // background colour (the gradient-text idiom lost its clip silently).
+    [/^bg-clip-(border|padding|content|text)$/, 'bg-clip'],
+    [/^bg-origin-(border|padding|content)$/, 'bg-origin'],
+    [/^bg-blend-(normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity)$/, 'bg-blend'],
+    [/^bg-/, 'bg-color'],
+    // text-shadow is its own property, and its size scale and its colour are two
+    // properties again. All three entries precede the text- patterns below, which
+    // is what keeps a `text-shadow-*` token out of `text-size` and `text-color`.
+    [/^text-shadow(-(2xs|xs|sm|md|lg|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'text-shadow'],
+    [/^text-shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'text-shadow'],
+    [/^text-shadow-/, 'text-shadow-color'],
+    // Font size: explicit list of Tailwind size scale.
+    [/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/, 'text-size'],
+    // Alignment, wrapping, and overflow are three more properties under the same
+    // prefix. Each was previously excluded from text-color by a lookahead and then
+    // matched nothing at all, so two alignments never collapsed.
+    [/^text-(left|center|right|justify|start|end)$/, 'text-align'],
+    [/^text-(wrap|nowrap|balance|pretty)$/, 'text-wrap'],
+    [/^text-(ellipsis|clip)$/, 'text-overflow'],
+    // Text color: anything else under the prefix. The specific groups above are
+    // the whole carve-out, so no negative lookahead is needed here as well.
+    [/^text-/, 'text-color'],
+    // Border sub-properties that are neither a width nor a colour. These come
+    // FIRST so the width / colour classifier below never sees them.
+    [/^border-(collapse|separate)$/, 'border-collapse'],
+    [/^border-spacing(-[xy])?-/, 'border-spacing'],
+    [/^border-(solid|dashed|dotted|double|hidden|none)$/, 'border-style'],
+    ...borderGroups(),
+    [/^rounded(-[a-z]+)?$/, 'rounded'],
+    [/^rounded-/, 'rounded'],
+    [/^opacity-/, 'opacity'],
+    [/^font-(thin|light|normal|medium|semibold|bold|black|extralight|extrabold)$/, 'font-weight'],
+    // Box-shadow SIZE and box-shadow COLOUR are two properties (`box-shadow` and
+    // `--tw-shadow-color`), so they need two groups. `shadow-none` is a size,
+    // `shadow-inherit` / `shadow-initial` are colours, and Tailwind accepts an
+    // alpha modifier on a size as well as on a colour, so `shadow-lg/25` has to
+    // stay on the size side. An unhinted arbitrary value is a SIZE when it opens
+    // with `inset`, a sign, a dot, or a digit (a shadow offset list) and also
+    // when it is a bare `var()` or the `(--x)` variable shorthand: Tailwind
+    // itself resolves an ambiguous arbitrary shadow to `box-shadow` unless the
+    // value is provably a colour, and `shadow-[var(--shadow-glow)]` is the normal
+    // way to write a design-token shadow. This is the one place the
+    // `borderGroups()` convention inverts, because a bare `border-[var(--x)]` is
+    // far more often a colour while a bare `shadow-[var(--x)]` is far more often
+    // a shadow. The size entries must precede the colour catch-all, or every
+    // size lands in the colour group and the bug inverts rather than being fixed.
+    [/^shadow(-(2xs|xs|sm|md|lg|xl|2xl|inner|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'shadow'],
+    [/^shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'shadow'],
+    // A bare name the size scale does not list reads as a colour, because
+    // `shadow-primary` is overwhelmingly more common than a `@theme`-extended
+    // `--shadow-card`. A project that adds a custom shadow NAME is the residual
+    // gap, and the docs say so rather than claiming the split is total.
+    [/^shadow-/, 'shadow-color'],
+    [/^z-/, 'z'],
+    // A bare `flex` / `grid` is a DISPLAY value, not a member of the flex / grid
+    // sub-property groups below, so it must never dedupe against them: an element
+    // can be both a flex container and a flex child (`class="flex flex-1"`), and
+    // collapsing the two silently drops `display:flex`. It still belongs to a
+    // group of its own, alongside every other display keyword, so a repeated one
+    // collapses and `cn('hidden', open && 'flex')` resolves to one display.
+    [/^(inline-block|inline-flex|inline-grid|inline-table|inline|block|flex|grid|flow-root|contents|hidden|list-item|table-caption|table-cell|table-column-group|table-column|table-footer-group|table-header-group|table-row-group|table-row|table)$/, 'display'],
+    // Each sub-utility below gets the group of the real CSS property it sets, so
+    // none of them collapses against the display value or against each other.
+    [/^flex-(row|row-reverse|col|col-reverse)$/, 'flex-direction'],
+    [/^flex-(wrap|wrap-reverse|nowrap)$/, 'flex-wrap'],
+    [/^flex-(\d+|auto|initial|none|\[[^\]]*\])$/, 'flex'],
+    [/^grid-cols-/, 'grid-cols'],
+    [/^grid-rows-/, 'grid-rows'],
+    [/^grid-flow-/, 'grid-flow'],
+  ]);
+}
 
 /**
  * Border WIDTH and border COLOUR share the `border-` prefix but are different
@@ -280,7 +287,7 @@ function dedupeUtilities(input: string): string {
     const hinted = hintedGroup(bare);
     let gk: string | null = hinted ?? null;
     if (hinted === undefined || hinted === null) {
-      for (const [re, g] of GROUPS) {
+      for (const [re, g] of GROUPS()) {
         if (re.test(bare)) { gk = g; break; }
       }
     }
diff --git a/packages/ui/packages/registry/lib/utils.ts b/packages/ui/packages/registry/lib/utils.ts
index f4fa05477..2e210634e 100644
--- a/packages/ui/packages/registry/lib/utils.ts
+++ b/packages/ui/packages/registry/lib/utils.ts
@@ -50,99 +50,106 @@ function walk(value: ClassValue, out: string[]): void {
 // IMPORTANT: text-size (text-sm, text-xs, text-base, text-lg, …) and
 // text-color (text-primary, text-foreground, …) are DIFFERENT properties
 // and must be in different groups. Same for bg-size vs bg-color etc.
-const GROUPS: Array<[RegExp, string]> = [
-  [/^p-/, 'p'], [/^px-/, 'px'], [/^py-/, 'py'], [/^pt-/, 'pt'], [/^pr-/, 'pr'], [/^pb-/, 'pb'], [/^pl-/, 'pl'],
-  [/^m-/, 'm'], [/^mx-/, 'mx'], [/^my-/, 'my'], [/^mt-/, 'mt'], [/^mr-/, 'mr'], [/^mb-/, 'mb'], [/^ml-/, 'ml'],
-  [/^w-/, 'w'], [/^h-/, 'h'], [/^size-/, 'size'],
-  // A `bg-[url(…)]` / `bg-[linear-gradient(…)]` background image is classified
-  // by its FUNCTION, since it carries no type hint to classify it by. The
-  // hinted forms are handled centrally, in `hintedGroup`.
-  [/^bg-\[(url\(|linear-gradient|radial-gradient|conic-gradient)/, 'bg-image'],
-  [/^bg-(linear|gradient|conic|radial|none)/, 'bg-image'],
-  [/^bg-(no-repeat|repeat|repeat-x|repeat-y|repeat-round|repeat-space)$/, 'bg-repeat'],
-  [/^bg-(fixed|local|scroll)$/, 'bg-attach'],
-  [/^bg-(auto|cover|contain)$/, 'bg-size'],
-  [/^bg-size-/, 'bg-size'],
-  // Two entries rather than one alternation: the first covers the live v4
-  // compounds (`bg-top-left`), the second the bare keywords plus the v4.1
-  // deprecated reversed compounds (`bg-left-top`), which tailwind-merge still
-  // carries. An unmatched `bg-*` token falls into the colour catch-all below and
-  // evicts a real colour, so admitting a dead spelling is the safe direction.
-  [/^bg-(top|bottom)(-(left|right))?$/, 'bg-position'],
-  [/^bg-(left|right|center)(-(top|bottom))?$/, 'bg-position'],
-  [/^bg-position-/, 'bg-position'],
-  // Clip, origin, and blend mode are three more properties under the same
-  // prefix. Each sat in `bg-color` before, so `bg-clip-text` evicted a real
-  // background colour (the gradient-text idiom lost its clip silently).
-  [/^bg-clip-(border|padding|content|text)$/, 'bg-clip'],
-  [/^bg-origin-(border|padding|content)$/, 'bg-origin'],
-  [/^bg-blend-(normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity)$/, 'bg-blend'],
-  [/^bg-/, 'bg-color'],
-  // text-shadow is its own property, and its size scale and its colour are two
-  // properties again. All three entries precede the text- patterns below, which
-  // is what keeps a `text-shadow-*` token out of `text-size` and `text-color`.
-  [/^text-shadow(-(2xs|xs|sm|md|lg|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'text-shadow'],
-  [/^text-shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'text-shadow'],
-  [/^text-shadow-/, 'text-shadow-color'],
-  // Font size: explicit list of Tailwind size scale.
-  [/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/, 'text-size'],
-  // Alignment, wrapping, and overflow are three more properties under the same
-  // prefix. Each was previously excluded from text-color by a lookahead and then
-  // matched nothing at all, so two alignments never collapsed.
-  [/^text-(left|center|right|justify|start|end)$/, 'text-align'],
-  [/^text-(wrap|nowrap|balance|pretty)$/, 'text-wrap'],
-  [/^text-(ellipsis|clip)$/, 'text-overflow'],
-  // Text color: anything else under the prefix. The specific groups above are
-  // the whole carve-out, so no negative lookahead is needed here as well.
-  [/^text-/, 'text-color'],
-  // Border sub-properties that are neither a width nor a colour. These come
-  // FIRST so the width / colour classifier below never sees them.
-  [/^border-(collapse|separate)$/, 'border-collapse'],
-  [/^border-spacing(-[xy])?-/, 'border-spacing'],
-  [/^border-(solid|dashed|dotted|double|hidden|none)$/, 'border-style'],
-  ...borderGroups(),
-  [/^rounded(-[a-z]+)?$/, 'rounded'],
-  [/^rounded-/, 'rounded'],
-  [/^opacity-/, 'opacity'],
-  [/^font-(thin|light|normal|medium|semibold|bold|black|extralight|extrabold)$/, 'font-weight'],
-  // Box-shadow SIZE and box-shadow COLOUR are two properties (`box-shadow` and
-  // `--tw-shadow-color`), so they need two groups. `shadow-none` is a size,
-  // `shadow-inherit` / `shadow-initial` are colours, and Tailwind accepts an
-  // alpha modifier on a size as well as on a colour, so `shadow-lg/25` has to
-  // stay on the size side. An unhinted arbitrary value is a SIZE when it opens
-  // with `inset`, a sign, a dot, or a digit (a shadow offset list) and also
-  // when it is a bare `var()` or the `(--x)` variable shorthand: Tailwind
-  // itself resolves an ambiguous arbitrary shadow to `box-shadow` unless the
-  // value is provably a colour, and `shadow-[var(--shadow-glow)]` is the normal
-  // way to write a design-token shadow. This is the one place the
-  // `borderGroups()` convention inverts, because a bare `border-[var(--x)]` is
-  // far more often a colour while a bare `shadow-[var(--x)]` is far more often
-  // a shadow. The size entries must precede the colour catch-all, or every
-  // size lands in the colour group and the bug inverts rather than being fixed.
-  [/^shadow(-(2xs|xs|sm|md|lg|xl|2xl|inner|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'shadow'],
-  [/^shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'shadow'],
-  // A bare name the size scale does not list reads as a colour, because
-  // `shadow-primary` is overwhelmingly more common than a `@theme`-extended
-  // `--shadow-card`. A project that adds a custom shadow NAME is the residual
-  // gap, and the docs say so rather than claiming the split is total.
-  [/^shadow-/, 'shadow-color'],
-  [/^z-/, 'z'],
-  // A bare `flex` / `grid` is a DISPLAY value, not a member of the flex / grid
-  // sub-property groups below, so it must never dedupe against them: an element
-  // can be both a flex container and a flex child (`class="flex flex-1"`), and
-  // collapsing the two silently drops `display:flex`. It still belongs to a
-  // group of its own, alongside every other display keyword, so a repeated one
-  // collapses and `cn('hidden', open && 'flex')` resolves to one display.
-  [/^(inline-block|inline-flex|inline-grid|inline-table|inline|block|flex|grid|flow-root|contents|hidden|list-item|table-caption|table-cell|table-column-group|table-column|table-footer-group|table-header-group|table-row-group|table-row|table)$/, 'display'],
-  // Each sub-utility below gets the group of the real CSS property it sets, so
-  // none of them collapses against the display value or against each other.
-  [/^flex-(row|row-reverse|col|col-reverse)$/, 'flex-direction'],
-  [/^flex-(wrap|wrap-reverse|nowrap)$/, 'flex-wrap'],
-  [/^flex-(\d+|auto|initial|none|\[[^\]]*\])$/, 'flex'],
-  [/^grid-cols-/, 'grid-cols'],
-  [/^grid-rows-/, 'grid-rows'],
-  [/^grid-flow-/, 'grid-flow'],
-];
+// Built on FIRST USE, not at module load. A module-scope `...borderGroups()`
+// spread is a real top-level call, so the elision analyser reads this module as
+// client-effecting and every page that reaches `cn` on a component-free path
+// ships whole instead of being elided (#1320).
+let _groups: Array<[RegExp, string]> | undefined;
+function GROUPS(): Array<[RegExp, string]> {
+  return (_groups ??= [
+    [/^p-/, 'p'], [/^px-/, 'px'], [/^py-/, 'py'], [/^pt-/, 'pt'], [/^pr-/, 'pr'], [/^pb-/, 'pb'], [/^pl-/, 'pl'],
+    [/^m-/, 'm'], [/^mx-/, 'mx'], [/^my-/, 'my'], [/^mt-/, 'mt'], [/^mr-/, 'mr'], [/^mb-/, 'mb'], [/^ml-/, 'ml'],
+    [/^w-/, 'w'], [/^h-/, 'h'], [/^size-/, 'size'],
+    // A `bg-[url(…)]` / `bg-[linear-gradient(…)]` background image is classified
+    // by its FUNCTION, since it carries no type hint to classify it by. The
+    // hinted forms are handled centrally, in `hintedGroup`.
+    [/^bg-\[(url\(|linear-gradient|radial-gradient|conic-gradient)/, 'bg-image'],
+    [/^bg-(linear|gradient|conic|radial|none)/, 'bg-image'],
+    [/^bg-(no-repeat|repeat|repeat-x|repeat-y|repeat-round|repeat-space)$/, 'bg-repeat'],
+    [/^bg-(fixed|local|scroll)$/, 'bg-attach'],
+    [/^bg-(auto|cover|contain)$/, 'bg-size'],
+    [/^bg-size-/, 'bg-size'],
+    // Two entries rather than one alternation: the first covers the live v4
+    // compounds (`bg-top-left`), the second the bare keywords plus the v4.1
+    // deprecated reversed compounds (`bg-left-top`), which tailwind-merge still
+    // carries. An unmatched `bg-*` token falls into the colour catch-all below and
+    // evicts a real colour, so admitting a dead spelling is the safe direction.
+    [/^bg-(top|bottom)(-(left|right))?$/, 'bg-position'],
+    [/^bg-(left|right|center)(-(top|bottom))?$/, 'bg-position'],
+    [/^bg-position-/, 'bg-position'],
+    // Clip, origin, and blend mode are three more properties under the same
+    // prefix. Each sat in `bg-color` before, so `bg-clip-text` evicted a real
+    // background colour (the gradient-text idiom lost its clip silently).
+    [/^bg-clip-(border|padding|content|text)$/, 'bg-clip'],
+    [/^bg-origin-(border|padding|content)$/, 'bg-origin'],
+    [/^bg-blend-(normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity)$/, 'bg-blend'],
+    [/^bg-/, 'bg-color'],
+    // text-shadow is its own property, and its size scale and its colour are two
+    // properties again. All three entries precede the text- patterns below, which
+    // is what keeps a `text-shadow-*` token out of `text-size` and `text-color`.
+    [/^text-shadow(-(2xs|xs|sm|md|lg|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'text-shadow'],
+    [/^text-shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'text-shadow'],
+    [/^text-shadow-/, 'text-shadow-color'],
+    // Font size: explicit list of Tailwind size scale.
+    [/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/, 'text-size'],
+    // Alignment, wrapping, and overflow are three more properties under the same
+    // prefix. Each was previously excluded from text-color by a lookahead and then
+    // matched nothing at all, so two alignments never collapsed.
+    [/^text-(left|center|right|justify|start|end)$/, 'text-align'],
+    [/^text-(wrap|nowrap|balance|pretty)$/, 'text-wrap'],
+    [/^text-(ellipsis|clip)$/, 'text-overflow'],
+    // Text color: anything else under the prefix. The specific groups above are
+    // the whole carve-out, so no negative lookahead is needed here as well.
+    [/^text-/, 'text-color'],
+    // Border sub-properties that are neither a width nor a colour. These come
+    // FIRST so the width / colour classifier below never sees them.
+    [/^border-(collapse|separate)$/, 'border-collapse'],
+    [/^border-spacing(-[xy])?-/, 'border-spacing'],
+    [/^border-(solid|dashed|dotted|double|hidden|none)$/, 'border-style'],
+    ...borderGroups(),
+    [/^rounded(-[a-z]+)?$/, 'rounded'],
+    [/^rounded-/, 'rounded'],
+    [/^opacity-/, 'opacity'],
+    [/^font-(thin|light|normal|medium|semibold|bold|black|extralight|extrabold)$/, 'font-weight'],
+    // Box-shadow SIZE and box-shadow COLOUR are two properties (`box-shadow` and
+    // `--tw-shadow-color`), so they need two groups. `shadow-none` is a size,
+    // `shadow-inherit` / `shadow-initial` are colours, and Tailwind accepts an
+    // alpha modifier on a size as well as on a colour, so `shadow-lg/25` has to
+    // stay on the size side. An unhinted arbitrary value is a SIZE when it opens
+    // with `inset`, a sign, a dot, or a digit (a shadow offset list) and also
+    // when it is a bare `var()` or the `(--x)` variable shorthand: Tailwind
+    // itself resolves an ambiguous arbitrary shadow to `box-shadow` unless the
+    // value is provably a colour, and `shadow-[var(--shadow-glow)]` is the normal
+    // way to write a design-token shadow. This is the one place the
+    // `borderGroups()` convention inverts, because a bare `border-[var(--x)]` is
+    // far more often a colour while a bare `shadow-[var(--x)]` is far more often
+    // a shadow. The size entries must precede the colour catch-all, or every
+    // size lands in the colour group and the bug inverts rather than being fixed.
+    [/^shadow(-(2xs|xs|sm|md|lg|xl|2xl|inner|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'shadow'],
+    [/^shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'shadow'],
+    // A bare name the size scale does not list reads as a colour, because
+    // `shadow-primary` is overwhelmingly more common than a `@theme`-extended
+    // `--shadow-card`. A project that adds a custom shadow NAME is the residual
+    // gap, and the docs say so rather than claiming the split is total.
+    [/^shadow-/, 'shadow-color'],
+    [/^z-/, 'z'],
+    // A bare `flex` / `grid` is a DISPLAY value, not a member of the flex / grid
+    // sub-property groups below, so it must never dedupe against them: an element
+    // can be both a flex container and a flex child (`class="flex flex-1"`), and
+    // collapsing the two silently drops `display:flex`. It still belongs to a
+    // group of its own, alongside every other display keyword, so a repeated one
+    // collapses and `cn('hidden', open && 'flex')` resolves to one display.
+    [/^(inline-block|inline-flex|inline-grid|inline-table|inline|block|flex|grid|flow-root|contents|hidden|list-item|table-caption|table-cell|table-column-group|table-column|table-footer-group|table-header-group|table-row-group|table-row|table)$/, 'display'],
+    // Each sub-utility below gets the group of the real CSS property it sets, so
+    // none of them collapses against the display value or against each other.
+    [/^flex-(row|row-reverse|col|col-reverse)$/, 'flex-direction'],
+    [/^flex-(wrap|wrap-reverse|nowrap)$/, 'flex-wrap'],
+    [/^flex-(\d+|auto|initial|none|\[[^\]]*\])$/, 'flex'],
+    [/^grid-cols-/, 'grid-cols'],
+    [/^grid-rows-/, 'grid-rows'],
+    [/^grid-flow-/, 'grid-flow'],
+  ]);
+}
 
 /**
  * Border WIDTH and border COLOUR share the `border-` prefix but are different
@@ -283,7 +290,7 @@ function dedupeUtilities(input: string): string {
     const hinted = hintedGroup(bare);
     let gk: string | null = hinted ?? null;
     if (hinted === undefined || hinted === null) {
-      for (const [re, g] of GROUPS) {
+      for (const [re, g] of GROUPS()) {
         if (re.test(bare)) { gk = g; break; }
       }
     }

From 4b3ae0b5026fc84d63de0bda17e3f425f3f6eb11 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sun, 9 Aug 2026 13:48:47 +0530
Subject: [PATCH 2/3] fix(ui): ship the native-select option colours in the
 theme, not from JS

native-select.ts injected its <option> / <optgroup> colour rule from module
scope, guarded by a `typeof document` check. That made the module both a
top-level call and a browser-global reference, so the elision analyser pinned
every page rendering a <select>, and it was a progressive-enhancement
regression on its own terms: the rule exists to stop dark-mode options going
invisible, and injecting it from JavaScript leaves the bug visible with
JavaScript off and for one frame before hydration.

The CSS is four static, selector-only lines, so it belongs in the stylesheet
the kit already manages. It goes in the theme block's `@layer base`, outside
the `:root` and `.dark` blocks `mergeThemeCss` rewrites, so all seven base
colours carry it with no per-colour edit, and being layered makes it strictly
more overridable than the unlayered injected <style> was.

`installNativeSelectStyles` is removed rather than left as a no-op. It had no
callers, and the kit is copy-on-add, so an existing app keeps its own copy and
a re-adder takes the new file whole.

An app that already ran `init` does NOT get the rule: `ensureTheme` returns
early on its marker, so no command rewrites an existing theme block. Its
<option> colours revert to the browser default until it re-runs `init` or adds
the rule by hand. That gap is why checkbox and radio-group keep their
injections, since theirs are the only source of the checkmark and the dot.

The marketing site gets the rule by hand in its own input.css, beside the other
kit rule it reproduces, because it never runs `webjs ui init`.

`hasModuleScopeSideEffect` is exported so the purity guard calls the real
predicate rather than re-implementing its depth-0 scan, which would drift the
moment the analyser changes.
---
 .agents/skills/webjs/references/ui-kit.md     | 11 +++
 packages/server/src/component-elision.js      |  2 +-
 packages/ui/AGENTS.md                         | 34 ++++++-
 .../registry/components/native-select.ts      | 76 ++++----------
 .../ui/packages/registry/themes/index.css     | 13 +++
 packages/ui/test/base-colors.test.js          | 29 ++++++
 packages/ui/test/cn-helper.test.js            | 28 ++++++
 .../browser/ui-native-select.test.js          | 99 +++++++++++++++++++
 packages/ui/test/utils-purity.test.js         | 60 +++++++++++
 .../scaffolds/scaffold-ui-integration.test.js | 67 ++++++++++++-
 website/public/input.css                      | 12 +++
 11 files changed, 368 insertions(+), 63 deletions(-)
 create mode 100644 packages/ui/test/components/browser/ui-native-select.test.js

diff --git a/.agents/skills/webjs/references/ui-kit.md b/.agents/skills/webjs/references/ui-kit.md
index 3b50cffaa..11ef388cd 100644
--- a/.agents/skills/webjs/references/ui-kit.md
+++ b/.agents/skills/webjs/references/ui-kit.md
@@ -72,5 +72,16 @@ dropdown-menu, hover-card, sonner, tabs, tooltip, plus toggle and toggle-group
   the tokens are missing (re-run `npx webjsdev ui init` or let `add` self-heal them).
 - Custom elements are display-only-safe at SSR and hydrate in the browser, the
   standard WebJs component model (`references/components.md`).
+- A registry module does no work at module scope, so importing `cn` or any
+  Tier-1 helper never pins a page to the browser (#1320). A page whose only
+  client-facing imports are class helpers still elides. If you EDIT your copy of
+  one, keep it that way: a module-scope call or a `document` reference reads as
+  client work, and the page ships whole from then on. `npx webjsdev elision`
+  names the blocker when it happens.
+- `native-select`'s `<option>` colours ride the design tokens, not the module.
+  An app with no theme block gets the browser default `<option>` colours along
+  with everything else unstyled, fixed the same way (re-run `init`, or let `add`
+  plant the block). An app whose block predates the rule keeps the default until
+  the rule is added by hand, because `init` never rewrites an existing block.
 
 Full per-package reference lives in the installed `@webjsdev/ui/AGENTS.md`.
diff --git a/packages/server/src/component-elision.js b/packages/server/src/component-elision.js
index 696797c64..03f4a77ad 100644
--- a/packages/server/src/component-elision.js
+++ b/packages/server/src/component-elision.js
@@ -318,7 +318,7 @@ const PURE_DATA_CONSTRUCTORS = new Set([
   'BigInt64Array', 'BigUint64Array',
 ]);
 
-function hasModuleScopeSideEffect(src, literals) {
+export function hasModuleScopeSideEffect(src, literals) {
   let redacted = src;
   if (!literals) {
     const r = redactToPlaceholders(src);
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
index 42d7ed239..ad86f35d1 100644
--- a/packages/ui/AGENTS.md
+++ b/packages/ui/AGENTS.md
@@ -166,7 +166,7 @@ tracked source, the standard shadcn "you own it" pattern.
 | 1a | `checkbox` | `checkboxClass`, native `<input type="checkbox">` with SVG check on `:checked`. REQUIRES `data-slot="checkbox"` on the input for the check to render. |
 | 1a | `radio-group` | `radioGroupClass`, `radioClass`, native `<input type="radio">`. REQUIRES `data-slot="radio"` on the input for the dot to render. |
 | 1a | `switch` | `switchInputClass`, `switchTrackClass({ size })`, hidden native checkbox + visible track |
-| 1a | `native-select` | `nativeSelectWrapperClass`, `nativeSelectClass`, `nativeSelectIconClass`, `nativeSelectOptionClass`, `nativeSelectOptGroupClass` |
+| 1a | `native-select` | `nativeSelectWrapperClass`, `nativeSelectClass`, `nativeSelectIconClass`, `nativeSelectOptionClass`, `nativeSelectOptGroupClass`. The `<option>` / `<optgroup>` colours come from the theme block's `select option, select optgroup` rule, NOT from importing the module (#1320), so they are in the first paint and hold with JavaScript off. |
 | 1a | `avatar` | `avatarClass`, `avatarImageClass`, `avatarFallbackClass`, `avatarBadgeClass`, `avatarGroupClass`, `avatarGroupCountClass` |
 | 1a | `separator` | `separatorClass({ orientation })` |
 | 1a | `skeleton` | `skeletonClass` |
@@ -263,7 +263,8 @@ obligations:
 - `pagination` / `breadcrumb`: a labelled `<nav>`, `aria-current="page"`, and hidden separators / icon-only control names.
 - `progress`: an `aria-label` (the native element supplies the role + value).
 - **form controls** (`input` / `textarea` / `native-select` / `checkbox` / `radio-group` / `switch`): a real `<label for>` (or a wrapping `<label>`) is the accessible name, and a `placeholder` is not one. On failure, `aria-invalid="true"` plus an `aria-describedby` pointing at error text that EXISTS on the page. A standalone switch needs `aria-label`, since its visible track is a `<span>` and the real input is `sr-only`. Group radios by a shared `name` and NAME the group (`aria-labelledby` on the `role="radiogroup"`, or `<fieldset>` + `<legend>`).
-- **`checkbox` / `radio-group` also need `data-slot`** on the input (`data-slot="checkbox"` / `data-slot="radio"`). The injected stylesheet keys the checkmark and the radio dot on it, and neither class carries a fallback fill, so without it the checked state reads as colour alone (WCAG 1.4.1). Source tests assert the examples keep the pairing.
+- **`checkbox` / `radio-group` also need `data-slot`** on the input (`data-slot="checkbox"` / `data-slot="radio"`). The injected stylesheet keys the checkmark and the radio dot on it, and neither class carries a fallback fill, so without it the checked state reads as colour alone (WCAG 1.4.1). Source tests assert the examples keep the pairing. Those two are the last stylesheets the kit still injects from JavaScript, so their indicators are the one part of the kit that needs JavaScript to render.
+- **`native-select`'s `<option>` colours come from the theme block**, not from importing the module (#1320). A bare `<option>` paints transparent over the browser popup, so in dark mode the unselected options disappear, and the `select option, select optgroup` rule in `@layer base` forces Canvas / CanvasText back. An app whose theme block predates that rule keeps the browser default until it re-runs `init` or adds the rule by hand, since `ensureTheme` never rewrites an existing block. It is two ELEMENT selectors (specificity 0,0,2) with no wrapper requirement, so a bare `<select class=${nativeSelectClass()}>` is covered and any single class overrides it.
 - `popover`: the biggest Tier-1 obligation, because the panel is a bare `<div popover>` with no role and no name. Supply `role="dialog"` + `aria-labelledby` to the `popoverTitleClass()` heading, `aria-haspopup="dialog"` + a `toggle`-event-synced `aria-expanded` on the trigger, and prefer `popover` (auto) over `popover="manual"` so the platform still gives you light-dismiss, Escape, and focus restoration.
 - `card`: use a REAL heading for `cardTitleClass()`, at the level the surrounding document wants, and never wrap a whole card in one `<a>`.
 - `kbd`: a symbol-only key (`⌘`) needs a spoken name, but NOT via `aria-label` on the `<kbd>`: that maps to `role=generic`, where a name is prohibited and ignored. Hide the glyph (`aria-hidden`) and put the spoken form in an `sr-only` sibling. For a chord, wrap the group in `role="img"` + `aria-label`, which supports a name AND makes children presentational, so it is announced once.
@@ -451,6 +452,35 @@ names mechanically:
 - All `.ts` files in `components/` export named functions. No default exports.
 - Use `cn()` from `'../lib/utils.ts'` to merge a helper's output with
   user-supplied classes when needed: `<button class=${cn(buttonClass(), 'rounded-full')}>`.
+- **A registry module does NO work at module scope.** Not a call, not a `new`,
+  not a `document` reference. The elision analyser reads any of those as client
+  work, so the module pins every page that reaches it on a component-free path,
+  and a Tier-1 helper registers no element, so the path-aware carve-out (#963)
+  cannot save it. Because `cn` sits under essentially every helper, one such
+  line costs page elision in every app that runs `webjsui init`. Two shapes
+  caused it (#1320). A `...borderGroups()` spread inside a module-scope table is
+  a real top-level call, fixed by memoising the table behind a function
+  (`let _groups; function GROUPS() { return (_groups ??= [...]) }`). An
+  `if (typeof document !== 'undefined') installFooStyles()` stylesheet
+  injection is both a call and a browser-global reference, fixed by putting the
+  CSS in the theme block instead, which also puts it in the first paint and
+  makes it work with JavaScript off. `packages/ui/test/utils-purity.test.js`
+  pins the flagged set as an EQUALITY, so a new offender fails immediately and
+  the remaining entries can only be removed deliberately.
+- **The kit is copy-on-add, so fixing the registry does not fix an app.** An
+  existing app holds its own copy of every component and of `lib/utils/cn.ts`,
+  and `npx @webjsdev/ui diff` is the discovery channel for the drift. The theme
+  block is worse: `ensureTheme` keys the whole block on its `@webjsdev/ui theme`
+  marker and returns early when it is present, so a later `add`, and even
+  `init --overwrite` (whose overwrite flag reaches only `writeLibUtils`), leaves
+  an existing block exactly as it was. An app that already ran `init` therefore
+  does NOT receive a rule added to the theme, and the only routes are editing
+  its stylesheet by hand or deleting the marker line and re-running `init`. A
+  freshly scaffolded app is fine, since `webjs create` copies `themes/index.css`
+  verbatim. Weigh that gap before moving CSS into the theme block: for the
+  native `<option>` colours the app degrades to the browser default, which is a
+  worse read rather than a broken control, and that asymmetry is why the
+  checkbox and radio-group injections were left where they are.
 - **A `cn()` conflict group is one CSS PROPERTY, never one class prefix.**
   Utilities that merely share a prefix must land in different groups, or the
   merger silently drops one of them. Two defects came from getting this wrong:
diff --git a/packages/ui/packages/registry/components/native-select.ts b/packages/ui/packages/registry/components/native-select.ts
index d909421a1..311d44d88 100644
--- a/packages/ui/packages/registry/components/native-select.ts
+++ b/packages/ui/packages/registry/components/native-select.ts
@@ -9,14 +9,16 @@
  *   NativeSelect wrapper     → nativeSelectWrapperClass()
  *   NativeSelect chevron     → nativeSelectIconClass()
  *   NativeSelect option      → bare <option> (or nativeSelectOptionClass()
- *                              for explicit overrides; the installed
+ *                              for explicit overrides, since the theme
  *                              stylesheet sets Canvas / CanvasText on
  *                              every <option> automatically)
  *
- * Importing this module installs a stylesheet that forces Canvas /
- * CanvasText on every <option> inside the wrapper so the dropdown reads
- * in both light and dark themes regardless of OS preference; advanced
- * overrides use `nativeSelectOptionClass()` / `nativeSelectOptGroupClass()`.
+ * The theme stylesheet forces Canvas / CanvasText on every <option> so the
+ * dropdown reads in both light and dark themes regardless of OS preference.
+ * It arrives with the design tokens (`npx @webjsdev/ui init`, or `add`, which
+ * writes the block when it is missing), so it is in the first paint and works
+ * with JavaScript off. Advanced overrides use `nativeSelectOptionClass()` and
+ * `nativeSelectOptGroupClass()`.
  *
  * Design tokens used: --input, --background, --primary, --primary-foreground,
  * --muted-foreground, --ring, --destructive.
@@ -58,61 +60,17 @@ import { cn } from '../lib/utils.ts';
 
 export type NativeSelectSize = 'default' | 'sm';
 
-// Auto-apply Canvas/CanvasText to every <option> on the page. Without
-// this, an <option> with no explicit bg paints transparent on top of
-// the browser-popup background; in dark mode (when color-scheme: dark
-// is set on <html>) Chrome's popup is dark, the option's transparent
-// bg lets the popup colour through, and the inherited text colour
-// from the <select> matches that dark popup: the option disappears,
-// only the focused/selected one stays visible because the browser
-// overlays its own highlight on it.
+// The <option> / <optgroup> colour rule is NOT injected from here. It lives in
+// the theme stylesheet the kit installs, so it is in the first paint, works
+// with JavaScript off, and does not make this module client-effecting (a
+// module-scope call pins every page that imports it, #1320). See the
+// `select option, select optgroup` rule in the theme block.
 //
-// Original selector required the option to be inside a
-// `.group/native-select` wrapper, on the assumption every user would
-// follow the documented Usage block above. But it's easy to write a
-// bare <select class=${nativeSelectClass()}> without the wrapper
-// (legitimate when you don't need the chevron icon: the popover and
-// hover-card docs examples both do this), in which case the rule
-// never matched and the dropdown reverted to invisible-options.
-// Broadening to `select option, select optgroup` makes the fix work
-// everywhere the user has imported native-select, with no required
-// wrapper. The Canvas/CanvasText pair is a safe default: they ARE
-// the system colours the browser would have painted anyway when no
-// rule applied; we just stop relying on inheritance to pull through.
-// Selector specificity is 0,0,2 (two elements), so any user who
-// genuinely needs custom <option> colours can override with a single
-// class anywhere in their cascade (e.g. `.my-select option { ... }`
-// at 0,1,2 wins).
-//
-// `nativeSelectOptionClass()` and `nativeSelectOptGroupClass()` stay
-// exported for users who want to opt into the same colours via the
-// class helper instead of the global rule. They emit the same
-// `bg-[Canvas] text-[CanvasText]` Tailwind utilities: redundant if
-// this stylesheet is installed, but harmless and matches the broader
-// shadcn convention of "every part has a class helper".
-const STYLES = `
-select option,
-select optgroup {
-  background-color: Canvas;
-  color: CanvasText;
-}
-`;
-
-let installed = false;
-export function installNativeSelectStyles(): void {
-  if (installed || typeof document === 'undefined') return;
-  if (document.getElementById('ui-native-select-styles')) {
-    installed = true;
-    return;
-  }
-  const style = document.createElement('style');
-  style.id = 'ui-native-select-styles';
-  style.textContent = STYLES;
-  document.head.appendChild(style);
-  installed = true;
-}
-
-if (typeof document !== 'undefined') installNativeSelectStyles();
+// `nativeSelectOptionClass()` and `nativeSelectOptGroupClass()` stay exported
+// for users who want to opt into the same colours via a class helper. They
+// emit the same `bg-[Canvas] text-[CanvasText]` utilities: redundant when the
+// theme block is present, harmless, and they match the broader shadcn
+// convention that every part has a class helper.
 
 export const nativeSelectWrapperClass = (): string =>
   'group/native-select relative w-fit has-[select:disabled]:opacity-50';
diff --git a/packages/ui/packages/registry/themes/index.css b/packages/ui/packages/registry/themes/index.css
index e368f6f48..36e852519 100644
--- a/packages/ui/packages/registry/themes/index.css
+++ b/packages/ui/packages/registry/themes/index.css
@@ -149,4 +149,17 @@
     outline: 2px solid color-mix(in oklab, var(--color-ring) 50%, transparent);
     outline-offset: 2px;
   }
+  /* Native <select> options paint transparent over the browser popup when no
+     rule applies, so in dark mode Chrome's dark popup plus the inherited text
+     colour makes every unselected option disappear. Canvas / CanvasText are
+     the system colours the browser would have painted anyway, so this stops
+     relying on inheritance to pull them through. Two ELEMENT selectors
+     (specificity 0,0,2) and no wrapper requirement on purpose: a bare
+     <select class=${nativeSelectClass()}> with no wrapper is legitimate, and
+     any single class overrides this. */
+  select option,
+  select optgroup {
+    background-color: Canvas;
+    color: CanvasText;
+  }
 }
diff --git a/packages/ui/test/base-colors.test.js b/packages/ui/test/base-colors.test.js
index 4270e714b..348076572 100644
--- a/packages/ui/test/base-colors.test.js
+++ b/packages/ui/test/base-colors.test.js
@@ -87,3 +87,32 @@ test('mergeThemeCss preserves @theme block, custom variants, keyframes, @layer',
   assert.match(merged, /@keyframes accordion-down/);
   assert.match(merged, /@layer base/);
 });
+
+// The <option> colour rule moved out of `native-select.ts`'s module-scope style
+// injection and into the theme block (#1320), so it must survive the per-colour
+// synthesis. `mergeThemeCss` only rewrites variable VALUES inside `:root` and
+// `.dark`, so a rule in `@layer base` should flow through untouched, and that
+// is exactly the property worth pinning.
+test('the <option> colour rule ships in every base colour, inside @layer base (#1320)', { skip }, async () => {
+  const { mergeThemeCss, BASE_COLORS, BASE_OVERRIDES } = await import(BASE_COLORS_PATH);
+  const neutral = readFileSync(NEUTRAL_CSS_PATH, 'utf8');
+  for (const name of BASE_COLORS) {
+    const css = name === 'neutral' ? neutral : mergeThemeCss(neutral, BASE_OVERRIDES[name]);
+    const open = css.indexOf('@layer base {');
+    assert.ok(open !== -1, `${name}: no @layer base block`);
+    // Slice to the block's closing brace so placement is asserted, not just
+    // presence: an unlayered copy of the rule would beat every layered one and
+    // silently take the override path away from a Tailwind utility.
+    let depth = 0;
+    let end = -1;
+    for (let i = css.indexOf('{', open); i < css.length; i++) {
+      if (css[i] === '{') depth++;
+      else if (css[i] === '}' && --depth === 0) { end = i; break; }
+    }
+    assert.ok(end !== -1, `${name}: unbalanced @layer base block`);
+    const layer = css.slice(open, end);
+    assert.match(layer, /select option,\s*\n\s*select optgroup \{/, name);
+    assert.match(layer, /background-color: Canvas;/, name);
+    assert.match(layer, /color: CanvasText;/, name);
+  }
+});
diff --git a/packages/ui/test/cn-helper.test.js b/packages/ui/test/cn-helper.test.js
index 2f81b7aab..9c506c735 100644
--- a/packages/ui/test/cn-helper.test.js
+++ b/packages/ui/test/cn-helper.test.js
@@ -423,3 +423,31 @@ test('Base and defineElement are no longer exported (removed in #819)', async ()
   assert.equal(utils.Base, undefined, 'Base was removed');
   assert.equal(utils.defineElement, undefined, 'defineElement was removed');
 });
+
+// The conflict table is built on FIRST CALL rather than at module load (#1320),
+// so the order-dependent behaviour is worth pinning explicitly: a memo that
+// rebuilt per call, or one that captured a half-built table, would show up here
+// as a directional case flipping.
+test('cn: directional conflicts survive the memoised table (#1320)', () => {
+  for (const [args, expected] of [
+    [['px-4', 'py-2', 'p-0'], 'p-0'],                              // shorthand subsumes both axes
+    [['p-2', 'px-4'], 'p-2 px-4'],                                 // an axis only refines: both survive
+    [['p-2', 'px-4', 'p-0'], 'p-0'],
+    [['w-8', 'h-9', 'size-4'], 'size-4'],                          // size vs width/height
+    [['border-2', 'border-primary'], 'border-2 border-primary'],   // width vs colour
+    [['border-border', 'border-accent'], 'border-accent'],         // later colour wins
+    [['flex', 'flex-1'], 'flex flex-1'],                           // display vs grow
+    [['text-sm', 'text-primary'], 'text-sm text-primary'],         // size vs colour
+    [['bg-clip-text', 'bg-primary'], 'bg-clip-text bg-primary'],
+  ]) {
+    assert.equal(cn(...args), expected, JSON.stringify(args));
+  }
+});
+
+test('cn: the memoised table is built once (#1320)', () => {
+  // `??=` is what makes the table build once, and it is also what keeps the
+  // module free of module-scope work, so pin the shape as well as the result.
+  assert.match(readFileSync(UTILS_SRC, 'utf8'), /_groups \?\?= \[/);
+  assert.equal(cn('p-2', 'px-4'), cn('p-2', 'px-4'));
+  assert.equal(cn('border-border', 'border-accent'), cn('border-border', 'border-accent'));
+});
diff --git a/packages/ui/test/components/browser/ui-native-select.test.js b/packages/ui/test/components/browser/ui-native-select.test.js
new file mode 100644
index 000000000..ef4d049dc
--- /dev/null
+++ b/packages/ui/test/components/browser/ui-native-select.test.js
@@ -0,0 +1,99 @@
+/**
+ * Browser tests for the native-select <option> colour rule (#1320).
+ *
+ * The rule used to be injected from `native-select.ts` at module scope, which
+ * made the module client-effecting and pinned every page that imported it. It
+ * now lives in the theme stylesheet the kit installs, so two things need
+ * proving in a real browser: importing the module injects nothing, and the CSS
+ * that replaced the injection actually paints the options.
+ *
+ * The rule text here is pinned against `themes/index.css` by the node test in
+ * `packages/ui/test/base-colors.test.js`, so a drift between the two shows up
+ * there rather than silently making this test assert an obsolete rule.
+ */
+import { html } from '../../../../core/src/html.js';
+import { render } from '../../../../core/src/render-client.js';
+
+import { assert } from '../../../../../test/browser-assert.js';
+
+const COMPONENTS_DIR = '/packages/ui/packages/registry/components';
+
+const tick = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+
+async function mount(tpl) {
+  const root = document.createElement('div');
+  document.body.appendChild(root);
+  render(tpl, root);
+  await tick();
+  return root;
+}
+
+suite('ui native-select', () => {
+  let mod;
+  let styleCountBeforeImport;
+  let themeStyle;
+
+  suiteSetup(async () => {
+    styleCountBeforeImport = document.head.querySelectorAll('style').length;
+    mod = await import(`${COMPONENTS_DIR}/native-select.ts`);
+    await tick();
+  });
+
+  suiteTeardown(() => {
+    themeStyle?.remove();
+    document.documentElement.removeAttribute('data-theme');
+    document.documentElement.style.colorScheme = '';
+  });
+
+  test('importing the module injects no stylesheet', () => {
+    // The regression that matters: this fails against the pre-#1320 module,
+    // which appended a <style id="ui-native-select-styles"> on import.
+    assert.equal(document.getElementById('ui-native-select-styles'), null);
+    assert.equal(document.head.querySelectorAll('style').length, styleCountBeforeImport);
+    assert.equal(mod.installNativeSelectStyles, undefined, 'the injector is gone');
+  });
+
+  test('the theme rule paints options, wrapped and bare, in both themes', async () => {
+    // Stand in for the theme block the kit writes, which this test environment
+    // has no `webjs ui init` to install.
+    themeStyle = document.createElement('style');
+    themeStyle.textContent = `
+      select option,
+      select optgroup {
+        background-color: Canvas;
+        color: CanvasText;
+      }
+    `;
+    document.head.appendChild(themeStyle);
+
+    const root = await mount(html`
+      <div class=${mod.nativeSelectWrapperClass()}>
+        <select id="wrapped" class=${mod.nativeSelectClass()}>
+          <optgroup label="Plans"><option value="a">A</option></optgroup>
+        </select>
+      </div>
+      <select id="bare" class=${mod.nativeSelectClass()}>
+        <option value="b">B</option>
+      </select>
+    `);
+
+    // The bare case is the one the original wrapper-scoped selector missed, so
+    // both are asserted. Transparent is precisely the bug: an <option> with no
+    // background lets the browser's dark popup through and disappears.
+    for (const theme of ['light', 'dark']) {
+      document.documentElement.setAttribute('data-theme', theme);
+      document.documentElement.style.colorScheme = theme;
+      await tick();
+      for (const id of ['wrapped', 'bare']) {
+        const option = root.querySelector(`#${id} option`);
+        const style = getComputedStyle(option);
+        assert.notEqual(style.backgroundColor, 'rgba(0, 0, 0, 0)', `${id} @ ${theme}: transparent option`);
+        assert.notEqual(style.backgroundColor, style.color, `${id} @ ${theme}: option text matches its background`);
+      }
+      const optgroup = root.querySelector('#wrapped optgroup');
+      assert.notEqual(getComputedStyle(optgroup).backgroundColor, 'rgba(0, 0, 0, 0)', `optgroup @ ${theme}`);
+    }
+
+    root.remove();
+  });
+});
diff --git a/packages/ui/test/utils-purity.test.js b/packages/ui/test/utils-purity.test.js
index 28a356e91..dd0bae438 100644
--- a/packages/ui/test/utils-purity.test.js
+++ b/packages/ui/test/utils-purity.test.js
@@ -3,6 +3,7 @@ import assert from 'node:assert/strict';
 import { readFileSync, existsSync, readdirSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { dirname, join } from 'node:path';
+import { hasModuleScopeSideEffect } from '../../server/src/component-elision.js';
 
 // Guards the #819 split: importing `cn` must NOT pin a page to the browser, so
 // the registry `lib/utils.ts` (copied to a scaffold's `lib/utils/cn.ts`) must
@@ -41,3 +42,62 @@ test('no registry component imports onBeforeCache from ../lib/utils.ts (#819)',
     );
   }
 });
+
+// A registry module must do NO work at module scope: not a call, not a `new`,
+// not a `document` reference. The elision analyser reads any of those as client
+// work, so the module pins every page reaching it on a component-free path, and
+// a Tier-1 helper registers no element, so the path-aware carve-out (#963)
+// cannot save it. Measured: a synthetic app went from 2 of 3 route modules
+// shipping whole to 0 once `lib/utils.ts` and `native-select.ts` were cleaned
+// (#1320). Calling the framework's own predicate rather than re-implementing
+// its depth-0 scan is deliberate: a copy would drift the moment the analyser
+// changes, and then this guard would be asserting a rule nothing enforces.
+//
+// This list may only SHRINK. Every entry names why it is still on it.
+const KNOWN_FLAGGED = [
+  // ANALYSER PRECISION GAP, not module-scope work. An arrow function with an
+  // EXPRESSION body puts its call at brace depth 0, so `export const f = ():
+  // string => cn(...)` reads to the predicate as a top-level call. Fixing that
+  // means either teaching the analyser about arrow bodies or wrapping pure
+  // helpers in braces to dodge a scanner limitation. Neither is #1320's job.
+  'components/pagination.ts', // `=> cn(buttonClass(...))`
+  'components/progress.ts', // `=> [ ... ].join(' ')`
+  'components/sonner.ts', // `=> makeToast(...)`
+  'components/tabs.ts', // `=> s.replace(...)`
+  // REAL module-scope style injection, the same defect #1320 fixed in
+  // native-select. NOT moved with it, because their injected CSS is the ONLY
+  // source of the checkmark and the radio dot, `ensureTheme` never rewrites an
+  // existing theme block, and an already-initialised app would therefore lose
+  // the indicator entirely (a WCAG 1.4.1 failure, not a cosmetic one). Moving
+  // these needs a theme-block upgrade path in `ensureTheme` first. Native
+  // select's equivalent gap only degrades <option> legibility back to the
+  // browser default, which is why it could move and these cannot.
+  'components/checkbox.ts', // `if (typeof document !== 'undefined') installCheckboxStyles();`
+  'components/radio-group.ts', // `if (typeof document !== 'undefined') installRadioStyles();`
+].sort();
+
+test('registry modules do no module-scope work (#1320)', () => {
+  const flagged = [];
+  for (const sub of ['lib', 'components']) {
+    for (const name of readdirSync(join(REG, sub)).filter((n) => n.endsWith('.ts'))) {
+      const src = readFileSync(join(REG, sub, name), 'utf8');
+      if (hasModuleScopeSideEffect(src)) flagged.push(`${sub}/${name}`);
+    }
+  }
+  // Pinned-set EQUALITY, not a subset: a new module doing module-scope work
+  // fails immediately, and removing an entry without editing this list fails
+  // too, so the list can only ever shrink deliberately.
+  assert.deepEqual(flagged.sort(), KNOWN_FLAGGED);
+});
+
+test('lib/utils.ts and native-select.ts do no module-scope work (#1320)', () => {
+  for (const rel of ['lib/utils.ts', 'components/native-select.ts']) {
+    assert.equal(hasModuleScopeSideEffect(readFileSync(join(REG, rel), 'utf8')), false, rel);
+  }
+});
+
+test('native-select injects no stylesheet (#1320)', () => {
+  const code = stripComments(readFileSync(join(REG, 'components', 'native-select.ts'), 'utf8'));
+  assert.ok(!/\bdocument\b/.test(code), 'native-select.ts must not reference document');
+  assert.ok(!/installNativeSelectStyles/.test(code), 'the injector is gone');
+});
diff --git a/test/scaffolds/scaffold-ui-integration.test.js b/test/scaffolds/scaffold-ui-integration.test.js
index f43f45a01..10c223f04 100644
--- a/test/scaffolds/scaffold-ui-integration.test.js
+++ b/test/scaffolds/scaffold-ui-integration.test.js
@@ -7,13 +7,15 @@
  */
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { mkdtemp, rm, readFile, stat } from 'node:fs/promises';
+import { mkdtemp, rm, readFile, stat, writeFile, mkdir } from 'node:fs/promises';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import { tmpdir } from 'node:os';
 
 import { scaffoldApp } from '../../packages/cli/lib/create.js';
 import { DEFAULT_ALIASES, DEFAULT_TAILWIND_CSS } from '../../packages/ui/src/commands/init.js';
+import { add } from '../../packages/ui/src/commands/add.js';
+import { analyzeAppElision } from '../../packages/server/src/elision-report.js';
 
 async function tempCwd() {
   return mkdtemp(join(tmpdir(), 'webjs-scaffold-ui-'));
@@ -147,3 +149,66 @@ test('lib/utils/cn.ts ships the pure cn() helper; onBeforeCache is in lib/utils/
     await rm(cwd, { recursive: true, force: true });
   }
 });
+
+test('kit helpers do not pin a page to the browser (#1320)', async () => {
+  // The end-to-end property #1320 is about: a page whose only client-facing
+  // imports are Tier-1 class helpers must still be elided. Both defects that
+  // broke it were module-scope work (`...borderGroups()` in cn.ts, a stylesheet
+  // injection in native-select.ts), and either one made this page ship whole.
+  //
+  // Asserted on the elision REPORT rather than on byte size: size moves with
+  // every unrelated kit change, so it would be a maintenance tax carrying no
+  // extra signal.
+  const cwd = await tempCwd();
+  try {
+    await scaffoldApp('demo', cwd, { template: 'full-stack' });
+    const appDir = join(cwd, 'demo');
+
+    // Local-first registry resolution, so no network. `--no-deps` skips the npm
+    // install the app does not need to be analysed.
+    await add.parseAsync(
+      ['button', 'card', 'input', 'native-select', '--cwd', appDir, '--overwrite', '--yes', '--no-deps'],
+      { from: 'user' },
+    );
+
+    await mkdir(join(appDir, 'app', 'kit'), { recursive: true });
+    await writeFile(join(appDir, 'app', 'kit', 'page.ts'), [
+      `import { html } from '@webjsdev/core';`,
+      `import { buttonClass } from '#components/ui/button.ts';`,
+      `import { cardClass } from '#components/ui/card.ts';`,
+      `import { inputClass } from '#components/ui/input.ts';`,
+      `import { nativeSelectClass, nativeSelectWrapperClass } from '#components/ui/native-select.ts';`,
+      ``,
+      `export default function Kit() {`,
+      `  return html\`<div class=\${cardClass()}>`,
+      `    <input class=\${inputClass()} name="q">`,
+      `    <div class=\${nativeSelectWrapperClass()}>`,
+      `      <select class=\${nativeSelectClass()} name="plan"><option value="a">A</option></select>`,
+      `    </div>`,
+      `    <button class=\${buttonClass()}>Go</button>`,
+      `  </div>\`;`,
+      `}`,
+    ].join('\n'));
+
+    const report = await analyzeAppElision(appDir);
+    assert.ok(report.analysed, `elision analysis ran (skipped: ${report.skipped})`);
+
+    const kit = report.routeModules.find((r) => r.file === join('app', 'kit', 'page.ts'));
+    assert.ok(kit, 'the kit page has a verdict');
+    // It imports only Tier-1 helpers, which register no element, so there is
+    // nothing for it to carry into the browser.
+    assert.equal(kit.verdict, 'inert', `kit page ships, blocked by ${kit.blocker}`);
+
+    // And no OTHER route module is pinned by the two modules this fixed, which
+    // is the assertion that fails if either regression comes back anywhere in
+    // the scaffold.
+    const pinned = report.routeModules.filter(
+      (r) => r.verdict === 'shipped'
+        && (r.blocker?.endsWith(join('lib', 'utils', 'cn.ts'))
+          || r.blocker?.endsWith(join('components', 'ui', 'native-select.ts'))),
+    );
+    assert.deepEqual(pinned, [], 'no route module is pinned by cn.ts or native-select.ts');
+  } finally {
+    await rm(cwd, { recursive: true, force: true });
+  }
+});
diff --git a/website/public/input.css b/website/public/input.css
index a52653954..1f39fe4f3 100644
--- a/website/public/input.css
+++ b/website/public/input.css
@@ -188,6 +188,18 @@
      Tailwind color utility on the element still wins (utilities are layered
      after base regardless of specificity). */
   .ui-preview, .ui-preview * { border-color: var(--border); }
+  /* Same reason: another rule the kit's theme block carries and this site never
+     receives, because it writes its own stylesheet instead of running
+     `webjs ui init`. A native <option> paints transparent over the browser
+     popup when no rule applies, so in dark mode the /ui/native-select preview's
+     options disappear. Canvas / CanvasText are the system colours the browser
+     would have painted anyway. Two ELEMENT selectors (specificity 0,0,2) and no
+     wrapper requirement, matching the kit rule exactly. */
+  select option,
+  select optgroup {
+    background-color: Canvas;
+    color: CanvasText;
+  }
 }
 
 /*

From c55e8a43adc690838eb07b4c615486fe7cb6af9f Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sun, 9 Aug 2026 14:01:16 +0530
Subject: [PATCH 3/3] docs(ui): correct two claims about which kit modules pin
 a page

The skill reference promised that importing any Tier-1 helper never pins a
page, which the PR's own pinned-set test contradicts: checkbox, radio-group,
pagination and progress are Tier-1 and all six flagged modules still ship
their importing page. Name them instead, and say the analyser-precision four
cost the same elision as the two real injections.

The AGENTS.md line calling checkbox and radio-group the last JavaScript-injected
stylesheets was wrong too: dialog and alert-dialog inject one from a lifecycle
hook. They are Tier-2 and need JavaScript regardless, which is the distinction
the sentence was reaching for.
---
 .agents/skills/webjs/references/ui-kit.md | 16 ++++++++++------
 packages/ui/AGENTS.md                     |  9 +++++++--
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/.agents/skills/webjs/references/ui-kit.md b/.agents/skills/webjs/references/ui-kit.md
index 11ef388cd..08a13e621 100644
--- a/.agents/skills/webjs/references/ui-kit.md
+++ b/.agents/skills/webjs/references/ui-kit.md
@@ -72,12 +72,16 @@ dropdown-menu, hover-card, sonner, tabs, tooltip, plus toggle and toggle-group
   the tokens are missing (re-run `npx webjsdev ui init` or let `add` self-heal them).
 - Custom elements are display-only-safe at SSR and hydrate in the browser, the
   standard WebJs component model (`references/components.md`).
-- A registry module does no work at module scope, so importing `cn` or any
-  Tier-1 helper never pins a page to the browser (#1320). A page whose only
-  client-facing imports are class helpers still elides. If you EDIT your copy of
-  one, keep it that way: a module-scope call or a `document` reference reads as
-  client work, and the page ships whole from then on. `npx webjsdev elision`
-  names the blocker when it happens.
+- A registry module should do no work at module scope, because the elision
+  analyser reads a module-scope call or a `document` reference as client work
+  and then the page that imports it ships whole (#1320). `cn` itself is clean,
+  so importing it never pins a page. Six modules still trip the analyser and DO
+  pin an importing page: `checkbox`, `radio-group`, `pagination`, `progress`,
+  `sonner`, `tabs`. The first two inject a stylesheet for real; the other four
+  are an analyser precision gap (an arrow with an expression body puts its call
+  at brace depth 0). Either way the page ships, so treat the list as fact rather
+  than as a technicality. Keep your own copies clean when you edit them, and run
+  `npx webjsdev elision`, which names the blocker whenever a page ships.
 - `native-select`'s `<option>` colours ride the design tokens, not the module.
   An app with no theme block gets the browser default `<option>` colours along
   with everything else unstyled, fixed the same way (re-run `init`, or let `add`
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
index ad86f35d1..630fbaa19 100644
--- a/packages/ui/AGENTS.md
+++ b/packages/ui/AGENTS.md
@@ -263,7 +263,7 @@ obligations:
 - `pagination` / `breadcrumb`: a labelled `<nav>`, `aria-current="page"`, and hidden separators / icon-only control names.
 - `progress`: an `aria-label` (the native element supplies the role + value).
 - **form controls** (`input` / `textarea` / `native-select` / `checkbox` / `radio-group` / `switch`): a real `<label for>` (or a wrapping `<label>`) is the accessible name, and a `placeholder` is not one. On failure, `aria-invalid="true"` plus an `aria-describedby` pointing at error text that EXISTS on the page. A standalone switch needs `aria-label`, since its visible track is a `<span>` and the real input is `sr-only`. Group radios by a shared `name` and NAME the group (`aria-labelledby` on the `role="radiogroup"`, or `<fieldset>` + `<legend>`).
-- **`checkbox` / `radio-group` also need `data-slot`** on the input (`data-slot="checkbox"` / `data-slot="radio"`). The injected stylesheet keys the checkmark and the radio dot on it, and neither class carries a fallback fill, so without it the checked state reads as colour alone (WCAG 1.4.1). Source tests assert the examples keep the pairing. Those two are the last stylesheets the kit still injects from JavaScript, so their indicators are the one part of the kit that needs JavaScript to render.
+- **`checkbox` / `radio-group` also need `data-slot`** on the input (`data-slot="checkbox"` / `data-slot="radio"`). The injected stylesheet keys the checkmark and the radio dot on it, and neither class carries a fallback fill, so without it the checked state reads as colour alone (WCAG 1.4.1). Source tests assert the examples keep the pairing. These two are the only Tier-1 parts whose appearance needs JavaScript, because they are the only ones whose stylesheet is injected rather than shipped in the theme block. `dialog` and `alert-dialog` inject one too, but from a lifecycle hook on a Tier-2 element that needs JavaScript regardless.
 - **`native-select`'s `<option>` colours come from the theme block**, not from importing the module (#1320). A bare `<option>` paints transparent over the browser popup, so in dark mode the unselected options disappear, and the `select option, select optgroup` rule in `@layer base` forces Canvas / CanvasText back. An app whose theme block predates that rule keeps the browser default until it re-runs `init` or adds the rule by hand, since `ensureTheme` never rewrites an existing block. It is two ELEMENT selectors (specificity 0,0,2) with no wrapper requirement, so a bare `<select class=${nativeSelectClass()}>` is covered and any single class overrides it.
 - `popover`: the biggest Tier-1 obligation, because the panel is a bare `<div popover>` with no role and no name. Supply `role="dialog"` + `aria-labelledby` to the `popoverTitleClass()` heading, `aria-haspopup="dialog"` + a `toggle`-event-synced `aria-expanded` on the trigger, and prefer `popover` (auto) over `popover="manual"` so the platform still gives you light-dismiss, Escape, and focus restoration.
 - `card`: use a REAL heading for `cardTitleClass()`, at the level the surrounding document wants, and never wrap a whole card in one `<a>`.
@@ -466,7 +466,12 @@ names mechanically:
   CSS in the theme block instead, which also puts it in the first paint and
   makes it work with JavaScript off. `packages/ui/test/utils-purity.test.js`
   pins the flagged set as an EQUALITY, so a new offender fails immediately and
-  the remaining entries can only be removed deliberately.
+  the remaining entries can only be removed deliberately. Six are still on that
+  list and DO pin an importing page today: `checkbox` and `radio-group` inject a
+  stylesheet for real, and `pagination`, `progress`, `sonner` and `tabs` are an
+  analyser precision gap, since an arrow with an expression body puts its call
+  at brace depth 0 and reads as a top-level statement. The page ships either
+  way, so do not treat the second group as harmless.
 - **The kit is copy-on-add, so fixing the registry does not fix an app.** An
   existing app holds its own copy of every component and of `lib/utils/cn.ts`,
   and `npx @webjsdev/ui diff` is the discovery channel for the drift. The theme