@brightspot/ui 5.0.2 → 5.0.3-css-bloat.0

package/docs/adr/0004-dynamic-icon-names-route-through-runtime-injectors.md

@@ -0,0 +1,50 @@
+---
+status: accepted
+---
+
+# Dynamic icon names route through runtime injectors, not per-name CSS
+
+Every Brightspot path that renders a Lucide icon whose name is **chosen at runtime** (editor selections via `@ToolUi.IconName`, plugin code calling `createNavAreaHeader(..., "chart-pie")`, Material-to-Lucide compat lookups for `data-icon-button-name` elements, ProseMirror toolbar buttons, the `<btu-icon symbol="…">` web component itself) resolves the name in **JavaScript** and applies the SVG via **inline CSS custom properties** on the host element. None of these paths reads the Preset's per-name `.btu-icon-via-mask-NAME` rules. Therefore the Preset's **Safelist** must not force-emit those per-name rules — doing so ships ~1.18 MB of `v5.css` that the browser fetches, parses, and never consults.
+
+## Why
+
+The icon Component Plugin (`tailwind-plugin-icon.ts`) generates 1,792 per-name rules — one per Lucide icon — each inlining the entire SVG as a URL-encoded data URL. Until this decision they were force-emitted to v5.css by two redundant safelist patterns (`/btu-icon-via-mask-.+/` and `/^btu-icon(-.*)?$/`). Measured: 2,638 emitted rules (postcss-rtl doubles the directional ones), 1,182,531 bytes, **24.9% of v5.css**.
+
+Every actual rendering path bypasses these rules:
+
+| Dynamic path | Resolution mechanism | CSS slot the SVG lands in |
+| --- | --- | --- |
+| `<btu-icon symbol="X">` (Nav-rail, content widgets) | `Icon.ts` calls `getIcon(name)`, inlines the SVG as Light-DOM markup with a `<mask>` `<defs>`, sets `style="--mask-url: url(#X)"` | `--mask-url` (highest-priority slot in the base rule's `var()` chain) |
+| `<button data-icon-button-name="X">` (Right-rail / IconButton) | `v5.ts:applyIconProperties` (an `onFind`-registered host injector) maps Material → Lucide, calls `getIcon(name)`, sets `style="--compat-icon-via-mask: url(…)"` | `--compat-icon-via-mask` (third slot in the base rule's `var()` chain) |
+| ProseMirror toolbar (RTE-blacklisted) | `resolveIconCompat.js` fires a `btu-resolve-icon` custom event that re-enters `applyIconProperties` from outside the RTE blacklist | same as above |
+| `@apply btu-icon-via-mask-NAME` in developer CSS | Tailwind's `@apply` resolver copies the rule body from the plugin's internal registry into the consumer's selector at build time | the consumer's own rule (per-name source rule is not required in output) |
+| `<i class="btu-icon-via-mask-NAME">` in scanned source | Tailwind's content scanner emits the per-name source rule | the per-name source rule itself (~6 names total today) |
+
+The base rule the runtime injectors target is unchanged:
+
+```css
+.btu-icon-via-mask {
+  mask: var(--mask-url, var(--icon-svg, var(--compat-icon-via-mask))) center / contain no-repeat;
+  …shared properties…
+}
+```
+
+The base rule survives any safelist edit that excludes only `btu-icon-via-mask-X` (X non-empty). The runtime injectors continue to work because they consume the **base** rule via inline custom properties — they never depended on the per-name rules.
+
+The remaining ~1,786 names exist in v5.css purely as safelist artifacts. They are dead bytes.
+
+## Consequences
+
+- The Preset's safelist explicitly excludes the per-name via-mask namespace. Concretely, no safelist pattern may match a class of the form `btu-icon-via-mask-X` for any X — enforced by a convention guard in `scripts/check-conventions.mjs` alongside the existing `no-foreign-btu-class` and `safelist-runtime-classes` rules.
+- The Component Plugin remains unchanged. It continues to register all 1,792 per-name rules into Tailwind's internal registry so that **Cross-multiplication** for `@apply btu-icon-via-mask-NAME` in developer CSS keeps working (Tailwind copies the rule body into the consumer regardless of whether the source class survives output purging).
+- The ~6 statically-discoverable raw-class names (`eye`, `eye-closed`, `file-text`, `sparkles`, `upload`, `zap` as of this writing) continue to emit per-name rules because Tailwind's content scanner finds them. New static-class names self-emit on first use; no maintenance step.
+- A new raw-class name added by a downstream consumer in **non-scanned content** (e.g. a hand-built `<i class="btu-icon-via-mask-some-name">` injected at runtime by JS or by a template engine Tailwind doesn't scan) will **not** render its mask, because no rule will match. The supported alternatives are:
+  - Use `<btu-icon symbol="some-name">` (preferred — already runtime-resolved).
+  - Use the `data-icon` / `data-icon-name` / `data-icon-button-name` pattern (handled by `applyIconProperties`).
+  - Add the class to `additional-tailwind-classes.txt` so Tailwind scans it.
+- A byte-budget regression test in `test/css-bloat/` asserts the aggregate size of per-name mask rules in v5.css stays under 20 KB — leaving headroom for the natural growth of statically-discoverable names while catching any reintroduction of force-emission.
+- This ADR is the load-bearing premise for the Lever #1 safelist change in [`../../plans/lever-1-icon-emission-prd.md`](../../plans/lever-1-icon-emission-prd.md). It is reachable through any of the runtime-injector files (`src/legacy/tool-ui/src/v5.ts`, `src/legacy/tool-ui/src/main/webapp/v4/dom/resolveIconCompat.js`, `src/components/icon/Icon.ts`, `src/LucideDynamicLoader.ts`).
+
+If a future requirement appears where dynamic icon names *must* render through the raw class form without scanning and without using `data-icon*` attributes, this ADR is the place to revisit. Two follow-up paths are sketched in the Lever #1 PRD's design discussion: (a) plugin refactor splitting shared behavior onto the base class so a library-side runtime scanner can complete the rule from inline style, and (b) per-element `<style>`-block injection. Neither is needed under the current consumer contract; both would be reopened only if the contract changed.
+
+See also: [ADR 0001](./0001-monolith-css-delivery.md) (the Monolith is the single CSS delivery vehicle), [ADR 0002](./0002-complete-component-preset.md) (the Preset registers the complete component set; safelist patterns govern which variants force-emit), [ADR 0003](./0003-plugin-selector-isolation.md) (cross-referencing plugin selectors are forbidden).

package/docs/adr/0005-rtl-conditional-overlay.md

@@ -0,0 +1,44 @@
+---
+status: accepted
+---
+
+# RTL ships as a conditional overlay, not doubled into the Monolith
+
+Brightspot resolves text direction as a per-user setting server-side (`Localization.isCurrentUserRtl()`), emitted once into the `<html dir>` attribute. The Tool UI **Monolith** (`v5.css`), however, ships **both** directions to **every** user: `postcss-rtl` doubles each directional rule into `[dir="ltr"]` and `[dir="rtl"]` halves (plus bare-`[dir]` scoping), so ~25% of the post-Lever-#1 bundle is direction-prefixed and roughly half of that is dead weight on any given page. We therefore **split direction out of the Monolith**: all users load a direction-neutral base `v5.css`; RTL users *additionally* load a small `[dir="rtl"]`-only overlay `v5-rtl.css`, gated by the same `Localization.isCurrentUserRtl()` call that drives `<html dir>`. This **refines [ADR 0001](./0001-monolith-css-delivery.md)**: the Monolith stays the single styling vehicle, but materializes as a base + conditional overlay pair rather than one doubled bundle.
+
+## How the split is produced
+
+The base and overlay are a **clean partition of the same source CSS**, produced by one paren-aware direction-filter run with opposite predicates:
+
+| Bundle | Pipeline | Keeps |
+| --- | --- | --- |
+| `v5.css` (base) | postcss **without** postcss-rtlcss, then **strip-`[dir=rtl]`** | every rule except `[dir="rtl"]`-scoped parts; physical properties stay at their LTR-default values, unscoped |
+| `v5-rtl.css` (overlay) | postcss **with** `postcss-rtlcss` `mode: 'override'`, then **keep-only-`[dir=rtl]`** (which also prunes the at-rule wrappers it empties) | only `[dir="rtl"]`-scoped rules — the mirrored overrides, the authored `[dir="rtl"]` rules, and Tailwind `rtl:`-variant output |
+
+`base ⊎ overlay` reconstructs correct rendering for both users with **no gap and no overlap**: an LTR user gets the base alone; an RTL user gets the base (LTR-default physical props) plus the overlay's `[dir="rtl"]` overrides, which win on specificity regardless of load order.
+
+The two filters are **one module, two predicates**, sharing a top-level comma splitter that respects `(`/`[` nesting — so `.a, [dir=rtl] .b { … }` is partitioned, not mangled.
+
+Each stage runs as an **isolated postcss pass** (postcss-rtlcss → filter → cssnano), not one chained pipeline: postcss-rtlcss must fully finish adding `[dir=rtl]` overrides before keep-rtl runs, and keep-rtl must finish before cssnano — otherwise cssnano's empty-discard races keep-rtl's rule removal and the emptied `@media`/`@container` wrappers survive (measured: ~46 KB of husks, ~32% of the overlay). The filter therefore prunes empty at-rules in its own `OnceExit` rather than relying on cssnano.
+
+## Why postcss-rtlcss `override` + keep-rtl (verified empirically)
+
+`postcss-rtlcss` v6 `mode: 'override'` was confirmed (2026-06-02, sandbox `/private/tmp/rtlcss-verify`) to emit **no** `[dir="ltr"]` halves and **no** bare-`[dir]` scaffolding — but it **keeps every unscoped original rule** alongside the `[dir="rtl"]` overrides. Override-alone is therefore not a lean overlay (it would carry a full copy of the base). The keep-rtl filter drops those originals, leaving the `[dir="rtl"]`-only overlay.
+
+Override mode also emits the explicit cascade-resets the overlay needs (e.g. `[dir="rtl"] .x { border-left: none; border-right: … }`). This is what makes it beat the considered alternatives:
+
+- **`mode: 'combined'`** — reproduces postcss-rtl's doubling (`[dir=ltr]` + `[dir=rtl]` halves). Rejected.
+- **`mode: 'diff'`** — emits flipped declarations **unscoped** (relying on load order, not specificity) and **silently drops authored `[dir="rtl"]` rules**. Rejected.
+- **"postcss-rtl extraction"** (filter postcss-rtl's doubled output down to its `[dir=rtl]` half) — the originally-feared fallback. Unnecessary, and *less correct*: postcss-rtl puts the cascade-resets in the `[dir=ltr]` half, so the extracted `[dir=rtl]` half would be missing them.
+- **Parallel model** (RTL users load `v5-rtl.css` *instead of* `v5.css`) — two large bundles, lower edge-cache hit rate, no free graceful degradation. Rejected in favor of the overlay.
+
+## Consequences
+
+- A **CI overlay-integrity assertion** guards the partition every build: the base must contain zero `[dir="rtl"]` rules; the overlay must be non-empty and contain only `[dir="rtl"]` rules (zero unscoped / `[dir="ltr"]` / bare-`[dir]`). This catches a strip-rtl leak into the base, a silently no-op'd postcss-rtlcss (empty overlay), and a keep-rtl leak of originals into the overlay — each diagnostically. Stronger than a bare "byte counts differ" check.
+- **Graceful degradation is free — and better than worst-case.** The base is built on CSS **logical properties**, which respond to the server-set `<html dir="rtl">` natively (no `[dir=rtl]` rules needed). So if a deployment is missing `v5-rtl.css`, an RTL user still gets **mostly-correct RTL** — only the physical-property elements (the overlay's job) stay unflipped — never a blank page or a fully-LTR layout. No runtime fallback logic. (Validated live 2026-06-02: at `dir=rtl` the base alone mirrored the bulk of the Dashboard and Content Edit pages; the overlay then corrected 16 and 46 physical-property elements respectively, including reversing the RTE toolbar.)
+- **Measured impact (2026-06-02, same shared compile, decimal MB):** LTR base 2.63 MB — **−12.8%** vs the 3.02 MB doubled build (which cross-checks against the shipped container artifact ≈ 3.01 MB); RTL base+overlay 2.73 MB — **−9.7%**; overlay **95 KB** (beats the ~130–140 KB projection after empty-wrapper pruning). The overlay's size is effectively a **proxy for physical-property debt** in the legacy CSS: it shrinks toward zero as source migrates from physical (`padding-left`) to logical (`padding-inline-start`) properties, at which point native `dir` handling would leave the overlay nearly empty.
+- The direction-filter is the **deep module** of Lever #2, golden-tested in both directions independent of the build orchestration.
+- **`v4.css` is out of scope** and keeps `postcss-rtl` until v4 is separately retired (it also has hand-authored `[dir='rtl']` Less rules that need their own audit).
+- The change surface is entirely Host-CMS-consumer-side (`build-css.mjs` + a conditional second `<link>` in `DariHtmlToolPageUtils`); the **Preset** is unchanged, so other `@brightspot/ui` consumers are insulated.
+
+See also: [ADR 0001](./0001-monolith-css-delivery.md) (Monolith as single delivery vehicle — refined here), and the full Lever #2 design this records the decision for: [`../../plans/lever-2-rtl-overlay-prd.md`](../../plans/lever-2-rtl-overlay-prd.md).

package/docs/adr/0006-editor-has-runtime-perf.md

@@ -0,0 +1,33 @@
+---
+status: accepted
+---
+
+# Editor-scoped `:has()` is the v5 runtime-perf hazard; reduce it
+
+The v5 CMS UI feels frozen during editing while v4 is smooth, on the same page/DOM/machine. The cause is **`:has()` selector invalidation**: v5's stylesheet authors ~782 distinct `:has()` selectors (993 occurrences) vs v4's 41, and the browser re-tests `:has()` on every DOM mutation and every change to a class/attribute used as a `:has()` argument — which the editor JS does constantly. Each such interaction costs **~250 ms in v5 vs ~0–2 ms in v4**; expanding a Subscriptions item makes it ~16× worse by bringing the `:has()`-dense `ContentForm` subtree live. **Decision: treat the editor-subtree `:has()` as a runtime-perf hazard and reduce the ~160 rules scoped to `.CIG`/`.RCIG`/`.EIG`/`ContentForm`** (rewrite to `:focus-within`, JS/server-toggled classes, `:where()`/sibling selectors), preserving the structural `display:none` hides. Full evidence and rewrite recipe: [`plans/v5-css-has-runtime-perf-investigation.md`](../../plans/v5-css-has-runtime-perf-investigation.md).
+
+## Considered options
+
+All measured via live A/B (v5 `jpencola` vs v4 `joe`, same page), median forced-reflow cost per post-expand interaction:
+
+- **Do nothing.** Stock v5 ≈ 507 ms/interaction (v4 ≈ 1 ms). **Rejected** — this is the reported "frozen" UX.
+- **Rewrite only `:has(:focus)` / `:has(.is-*)` (the dynamic patterns, 149 rules).** 507 ms → ~375 ms (**1.4×**). **Rejected** — necessary mechanism but far short; cost is the aggregate `:has()` count in scope, not one category.
+- **Remove all `:has()` (802 rules).** ~21 ms (**~25×**). **Rejected as the fix** — strips structural `display:none` hides and component styling system-wide; proves the lever but breaks layout/behavior.
+- **Reduce the ~160 editor-scoped `:has()` (`.CIG`/`.RCIG`/`.EIG`/`ContentForm`).** ~22 ms (**~25×**, = full benefit) while leaving the other 768 untouched. **Chosen** — 16 % of the rules recover ~96 % of the speed, on a bounded surface (the editor CSS files).
+
+## Consequences
+
+- The work is a **design-system `:has()` diet** in `src/legacy/tool-ui/src/` editor CSS (`ContentEdit.css`, `ContentInputGroup.css`, `ContentForm.css`, `RepeatableContentInputGroup/Selector.css`, `Widget.css`, …), not a one-line change. Behavior-sensitive: `:has(:focus)`→`:focus-within` is equivalent, but structural `:has(> child)` and `:has(.is-*)` rewrites must keep the same visual result (especially `display:none` hides) or layout regresses.
+- Distinct from byte-bloat work (ADR 0002 and the bloat investigation): reducing `:has()` also trims ~185 KB, but the **runtime** win comes specifically from cutting the editor-subtree `:has()` count — size reduction alone (e.g. icon emission) would not fix the jank.
+- `:has()` becomes a reviewable cost in the editor surface: new `:has()` in CIG/RCIG/ContentForm CSS should be justified or replaced with a class, since the cost scales with how many `:has()` cover an interacted subtree.
+- The lever was first proven via live in-container CSS surgery (the proxy); the shipped fix is the source rewrite below, rebuilt through the real compilers and re-measured on the same page.
+
+## Outcome (implemented 2026-06-02, branch `fix/v5-css-bloat`)
+
+Behavior-preserving rewrite of the 42 editor-scoped `:has()` source rules: `:has(:focus…)` → `:focus-within`; `:has(+ .CIG-row)` / error-border → `:not(:last-child)`; one inert `transition-delay` rule dropped; everything structural (`:has(> child)`, `:has(~ sibling)`, `:has(.is-*)`) → a runtime class set by a new self-contained module `src/legacy/tool-ui/src/editorHasCompat.ts` — an idempotent, debounced sweep (`querySelectorAll` + `classList.toggle`) driven by ready + the editor's `brightspot-content-state-change` event + a 120 ms `MutationObserver`, **not** Blink's per-mutation `:has()` re-test. (FormFilter marks `.is-filterResultAncestor` on result ancestors in JS, replacing `:has(.is-filterResult)`.)
+
+- **Built-Monolith count (PostCSS walk):** total `:has(` **993 → 765**; editor-scoped (`.CIG/.RCIG/.EIG/ContentForm`) **223 → 3**. The 3 residuals are the self-contradictory `RCIG-list:empty:has(ol,ul)` ContentForm placeholders (`:empty` + `:has(children)` → never match), absent from normal content-edit surfaces.
+- **Runtime verdict — human A/B, per the [microbenchmark pitfall](../../plans/v5-css-has-runtime-perf-investigation.md):** editor went from janky to "a lot better / acceptable." Synthetic forced-reflow probes do **not** reproduce the jank on Chrome 148 and must not be used to confirm it.
+- **Confirmed by Chrome DevTools *Selector stats* under real editor churn (sorted by invalidation count):** **no rewritten editor `:has()` appears** — `has-formContent` et al. are plain classes now, so they don't invalidate. The only editor-scoped `:has()` in the trace are the 3 inert ContentForm `:empty:has` residuals, at ~748 invalidations but **~0.1 ms each** (`:empty` + `:has(children)` bails instantly — confirmed harmless). The top invalidators are all sub-1.1 ms: `:hover`/`:focus-within` recalc (the pattern this rewrite adopts) and tiny-scope out-of-scope page-chrome `:has()` (calendar / preview / page-header). The per-interaction `:has()` invalidation storm is gone; cost is now ordinary recalc.
+- **Correctness:** for each runtime class, `querySelectorAll('.has-X')` equals the original `:has()` selector element-for-element — 11 classes confirmed EQUAL across Users / Blog Post / Dashboard, the `has-cig` setter and the live `MutationObserver` path confirmed by injection, no console errors. Found and fixed one gap during verification: `DashboardWidget`'s `form:has(.CIG)` → `form.has-cig` rewrite had no setter (added).
+- **Follow-up (out of scope, file separately):** the single most expensive selector in the trace, `.is-imagePreview:not(:has(.ImageEditor-groups.is-focus-active))` (~46 ms, 0 invalidations), is a pre-existing ImageEditor `:has()` outside the `.CIG/.RCIG/.EIG/ContentForm` scope; 7 ImageEditor-related `:has()` remain as a candidate next pass.

package/docs/components/ButtonGroup.md

@@ -65,21 +65,24 @@
 
 ### CSS Properties
 
-| Name                               | Default | Description                                                             |
-| ---------------------------------- | ------- | ----------------------------------------------------------------------- |
-| `--button-group-gap`               |         | Space between buttons when variant="spaced" (default: spacing.sm)       |
-| `--button-group-border-radius`     |         | Corner radius of outer edges when variant="connected" (default: 0.5rem) |
-| `--button-group-border-color`      |         | Internal divider color between connected buttons (default: gray-300)    |
-| `--button-group-selection-bg`      |         | Background of a toggled/selected child (default: primary-50)            |
-| `--button-group-selection-color`   |         | Text/icon color of a toggled/selected child (default: primary-700)      |
-| `--button-group-shimmer-highlight` |         | Highlight color of the selection shimmer effect (default: primary-200)  |
+| Name                               | Default | Description                                                                                                                                                                                                                               |
+| ---------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--button-group-gap`               |         | Space between buttons when variant="spaced" (default: spacing.sm)                                                                                                                                                                         |
+| `--button-group-border-radius`     |         | Corner radius of outer edges when variant="connected" (default: 0.5rem)                                                                                                                                                                   |
+| `--button-group-border-color`      |         | Internal divider color between connected buttons (default: gray-300)                                                                                                                                                                      |
+| `--button-group-selection-bg`      |         | Background of a toggled/selected child (default: child's --button-tint-subtle)                                                                                                                                                            |
+| `--button-group-selection-color`   |         | Text/icon color of a toggled/selected child (default: child's --button-tint-strong)                                                                                                                                                       |
+| `--button-group-shimmer-highlight` |         | Highlight color of the selection shimmer effect (default: child's --button-tint-highlight) Reads the following CSS custom properties from each child button (set by the button plugin per color variant — see tailwind-plugin-button.ts): |
+| `--button-tint-subtle`             |         | Subtle tint of the child button's color family (read-only here)                                                                                                                                                                           |
+| `--button-tint-strong`             |         | Strong tint of the child button's color family (read-only here)                                                                                                                                                                           |
+| `--button-tint-highlight`          |         | Highlight tint of the child button's color family (read-only here)                                                                                                                                                                        |
 
 ### Slots
 
-| Name  | Description                                                                                    |
-| ----- | ---------------------------------------------------------------------------------------------- |
-|       | One or more btu-button or btu-icon-button elements to display in the group                     |
-| `end` | Pushes the child to the end of the group via auto-margin (vertical: bottom, horizontal: right) |
+| Name  | Description                                                                                                                                                                                                                                                                                                          |
+| ----- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|       | One or more \`\<button class="btu-button …">\` or \`\<btu-icon-button>\` elements to display in the group. The \`connected\` variant rounds the outer corners on the real \`\<button>\`, so anchors styled as \`.btu-button\` slotted directly will not get rounded corners. Use \`\<button>\` for grouped controls. |
+| `end` | Pushes the child to the end of the group via auto-margin (vertical: bottom, horizontal: right)                                                                                                                                                                                                                       |
 
 <hr/>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "5.0.2",
+  "version": "5.0.3-css-bloat.0",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
@@ -25,6 +25,7 @@
     "storybook": "yarn cem && storybook dev -p 6006",
     "build-storybook": "yarn cem && storybook build -o ./dist/storybook",
     "test:storybook": "vitest --project=storybook",
+    "test:css-bloat": "vitest run --project=css-bloat",
     "check:conventions": "yarn cem && node scripts/check-conventions-all.mjs",
     "check:conventions:fast": "node scripts/check-conventions.mjs",
     "prepare": "husky && (cd src/legacy/tool-ui && yarn install)",
@@ -40,7 +41,6 @@
     "@storybook/addon-themes": "10.2.12",
     "@storybook/addon-vitest": "10.2.12",
     "@storybook/web-components-vite": "10.2.12",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "^24.10.0",
     "@types/postcss-import": "^14.0.3",
     "@types/uuid": "^8.3.0",
@@ -76,6 +76,7 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
     "broadcast-channel": "^4.13.0",
     "loglevel": "^1.8.0",
     "lucide-static": "0.508.0",
@@ -114,6 +115,6 @@
       "node scripts/generate-docs.mjs",
       "git add docs/components/"
     ],
-    "*": "yarn format"
+    "*": "prettier --write --ignore-unknown"
   }
 }

package/src/legacy/tool-ui/src/AIInline.css

@@ -78,7 +78,7 @@
 
   > button {
     all: unset;
-    @apply box-border block w-full cursor-pointer text-start;
+    @apply box-border blokk w-full cursor-pointer text-start;
 
     &:disabled,
     &.is-disabled {

package/src/legacy/tool-ui/src/Admin.css

@@ -188,7 +188,7 @@
   }
 
   .Admin-nav {
-    @apply overflow-auto border-r border-r-gray-200 [grid-area:nav];
+    @apply overflow-auto border-e border-e-gray-200 [grid-area:nav];
   }
 
   .Admin-main {
@@ -206,7 +206,7 @@
       @apply min-w-[--miller-columns-w] grow overflow-auto [grid-auto-rows:max-content];
 
       &:not(:first-child) {
-        @apply border-l border-solid border-gray-100;
+        @apply border-s border-solid border-gray-100;
       }
 
       h1.Widget-title {

package/src/legacy/tool-ui/src/Base.css

@@ -74,7 +74,7 @@ textarea,
 form {
   &.is-submitting {
     button.is-clicked {
-      @apply btu-button-disabled before:btu-loader before:block before:size-[1.2rem];
+      @apply btu-button-disabled before:btu-loader before:blokk before:size-[1.2rem];
     }
   }
 }

package/src/legacy/tool-ui/src/BulkUpload.css

@@ -32,7 +32,7 @@
   }
 
   .loaded & {
-    @apply block;
+    @apply blokk;
   }
 
   .loading & {

package/src/legacy/tool-ui/src/CIGCluster.css

@@ -1,5 +1,5 @@
 btu-cig-cluster {
-  @apply block flex-grow basis-full contain-layout contain-style;
+  @apply blokk flex-grow basis-full contain-layout contain-style;
 }
 
 btu-cig-cluster:state(btu-error) {

package/src/legacy/tool-ui/src/Card.css

@@ -11,7 +11,7 @@
 }
 
 .Card-media img {
-  @apply block h-auto w-full;
+  @apply blokk h-auto w-full;
 }
 
 /* Supply a max size because in some instances the image is not constrained by a wrapping element. */

package/src/legacy/tool-ui/src/CodeMirror.css

@@ -20,7 +20,7 @@
 }
 
 .CodeMirror-gutters {
-  @apply border-r-gray-300 bg-gray-50;
+  @apply border-e-gray-300 bg-gray-50;
 }
 
 .CodeMirror-linenumber {
@@ -36,11 +36,11 @@
 }
 
 .CodeMirror-cursor {
-  @apply border-l-[2px] border-l-primary-600;
+  @apply border-s-[2px] border-s-primary-600;
 }
 
 .CodeMirror div.CodeMirror-secondarycursor {
-  @apply border-l-gray-200;
+  @apply border-s-gray-200;
 }
 
 .cm-fat-cursor .CodeMirror-cursor {
@@ -56,7 +56,7 @@
 }
 
 .CodeMirror-ruler {
-  @apply border-l-gray-200;
+  @apply border-s-gray-200;
 }
 
 .cm-s-default .cm-header {

package/src/legacy/tool-ui/src/ColorInputSpectrum.css

@@ -29,7 +29,7 @@
 }
 
 .sp-preview-inner {
-  @apply absolute bottom-0 left-0 right-0 top-0 block h-5 w-5 rounded-full;
+  @apply absolute bottom-0 left-0 right-0 top-0 blokk h-5 w-5 rounded-full;
 }
 
 .sp-preview:not([data-placeholder^='#']) {
@@ -117,7 +117,7 @@
 }
 
 .sp-palette .sp-thumb-inner {
-  @apply block h-full w-full overflow-hidden rounded-full;
+  @apply blokk h-full w-full overflow-hidden rounded-full;
 }
 
 .sp-button-container {

package/src/legacy/tool-ui/src/ComboInput.css

@@ -78,7 +78,7 @@
         :not([data-create], [data-sublist])
       ) {
       .ComboInput-check {
-        @apply block scale-50 opacity-0 transition-[opacity_scale] duration-250 [transition-timing-function:theme(transitionTimingFunction[spring-stiff])] before:btu-icon before:btu-icon-check before:text-inherit;
+        @apply blokk scale-50 opacity-0 transition-[opacity_scale] duration-250 [transition-timing-function:theme(transitionTimingFunction[spring-stiff])] before:btu-icon before:btu-icon-check before:text-inherit;
       }
 
       &[aria-selected='true'] {
@@ -153,7 +153,7 @@ select {
 /***** "Create New" Options *****/
 /********************************/
 .ComboInput-option > a[data-create='true'] {
-  @apply btu-heading-6 block px-4 py-2 no-underline before:btu-icon before:btu-icon-plus before:me-2;
+  @apply btu-heading-6 blokk px-4 py-2 no-underline before:btu-icon before:btu-icon-plus before:me-2;
 }
 
 .ComboInput-option[data-create='true'],
@@ -195,7 +195,7 @@ select {
 
 .ComboInput-option-favorite:not(.is-unstarred)
   .ComboInput-option-favorite-icon {
-  @apply block size-4 bg-primary-800 [clip-path:theme(shape.starFilled)];
+  @apply blokk size-4 bg-primary-800 [clip-path:theme(shape.starFilled)];
 }
 
 /*****************************/

package/src/legacy/tool-ui/src/Compat.css

@@ -197,7 +197,7 @@
     @apply pointer-events-none;
 
     &:not(.Link) {
-      @apply btu-button-disabled before:btu-loader before:block before:size-[1.2rem];
+      @apply btu-button-disabled before:btu-loader before:blokk before:size-[1.2rem];
     }
   }
 }

package/src/legacy/tool-ui/src/ContentEdit.css

@@ -90,7 +90,7 @@
 }
 
 .ContentEdit-top + .Message {
-  @apply rounded-none border-b border-l-0 border-r-0 border-t-0 [grid-area:status] max-md:p-4 md:[grid-area:banner];
+  @apply rounded-none border-b border-s-0 border-e-0 border-t-0 [grid-area:status] max-md:p-4 md:[grid-area:banner];
 }
 
 .ContentEdit-top + .Message > .WorkInProgressRestoredMessage-actions a {
@@ -181,7 +181,7 @@
 }
 
 .contentForm-main {
-  @apply overflow-auto [grid-area:content] [scrollbar-gutter:stable] max-md:h-full md:overflow-y-auto md:overflow-x-hidden md:overscroll-none md:border-r md:[grid-area:left];
+  @apply overflow-auto [grid-area:content] [scrollbar-gutter:stable] max-md:h-full md:overflow-y-auto md:overflow-x-hidden md:overscroll-none md:border-e md:[grid-area:left];
 }
 
 .ContentEdit-main {
@@ -212,7 +212,7 @@
 }
 
 .ContentEdit-preview {
-  @apply visible relative bg-gray-100 transition-all @container/preview [transform:scaleX(.000001)] max-md:absolute max-md:bottom-[52px] max-md:z-[21] max-md:h-[calc(100dvh_-_52px)] max-md:w-full max-md:duration-700 md:origin-right md:border-r md:border-gray-200 md:[grid-area:preview];
+  @apply visible relative bg-gray-100 transition-all @container/preview [transform:scaleX(.000001)] max-md:absolute max-md:bottom-[52px] max-md:z-[21] max-md:h-[calc(100dvh_-_52px)] max-md:w-full max-md:duration-700 md:origin-right md:border-e md:border-gray-200 md:[grid-area:preview];
 
   iframe {
     @apply absolute left-0 top-0 h-[var(--PreviewFrame-height,_calc(100%_/_var(--PreviewFrame-scale)))] w-[var(--ContentEdit-previewFrameWidth,_1920px)] origin-top-left overflow-clip;
@@ -252,7 +252,7 @@
   }
 
   & .PreviewFrame-typeDisplay {
-    @apply relative block size-full overflow-y-auto overflow-x-hidden rounded-none rounded-t-2xl border border-b-0 border-gray-200;
+    @apply relative blokk size-full overflow-y-auto overflow-x-hidden rounded-none rounded-t-2xl border border-b-0 border-gray-200;
   }
 
   & .PreviewFrame-typeDisplay > iframe[name*='PreviewFrame'] {
@@ -357,13 +357,13 @@
       .PreviewFrame-typeControls [name='_previewPath'] + .ComboInput
     )
     .PreviewFrame-moreActions {
-    @apply @preview-lg/preview:block;
+    @apply @preview-lg/preview:blokk;
   }
 
   &
     .PreviewFrame.HasPreviewSelect:has(.PreviewFrame-previewToEditToggle)
     .PreviewFrame-moreActions {
-    @apply !block;
+    @apply !blokk;
   }
 
   & .PreviewFrame-typeDisplay {
@@ -409,7 +409,7 @@
 }
 
 .ContentEdit-toolbar {
-  @apply z-30 w-full bg-white px-4 py-2 [grid-area:bottom] max-md:flex max-md:flex-nowrap max-md:justify-evenly max-md:overflow-hidden max-md:overflow-x-auto max-md:border-t max-md:border-t-gray-200 md:z-10 md:block md:bg-gray-50 md:p-4 md:[grid-area:toolbar] md:[width:var(--ContentEdit-toolbarWidth)] md:[&_>_li]:mb-2;
+  @apply z-30 w-full bg-white px-4 py-2 [grid-area:bottom] max-md:flex max-md:flex-nowrap max-md:justify-evenly max-md:overflow-hidden max-md:overflow-x-auto max-md:border-t max-md:border-t-gray-200 md:z-10 md:blokk md:bg-gray-50 md:p-4 md:[grid-area:toolbar] md:[width:var(--ContentEdit-toolbarWidth)] md:[&_>_li]:mb-2;
 
   button {
     @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray;
@@ -458,7 +458,7 @@
 }
 
 .ContentEdit-right {
-  @apply hidden overflow-y-auto overflow-x-hidden bg-gray-50 [grid-area:content] max-md:absolute max-md:bottom-[52px] max-md:z-10 max-md:h-[calc(100dvh-52px)] max-md:w-full md:relative md:bottom-auto md:left-auto md:right-auto md:top-auto md:w-auto md:border-r md:border-solid md:[grid-area:right];
+  @apply hidden overflow-y-auto overflow-x-hidden bg-gray-50 [grid-area:content] max-md:absolute max-md:bottom-[52px] max-md:z-10 max-md:h-[calc(100dvh-52px)] max-md:w-full md:relative md:bottom-auto md:left-auto md:right-auto md:top-auto md:w-auto md:border-e md:border-solid md:[grid-area:right];
 
   &:has(.ContentEditDrawer-widget) {
     @apply top-auto;
@@ -590,7 +590,7 @@
 }
 
 .ContentEdit-right.is-visible {
-  @apply block;
+  @apply blokk;
 }
 
 .ContentEdit-overlayList,
@@ -617,12 +617,12 @@
 
   /* Content type */
   .ContentEdit-contentType--v5 {
-    @apply btu-badge-gray btu-badge-sm -order-2 block flex-1 truncate md:me-2 md:@6xl/page-header:inline;
+    @apply btu-badge-gray btu-badge-sm -order-2 blokk flex-1 truncate md:me-2 md:@6xl/page-header:inline;
   }
 
   /* Content status  */
   .ContentEdit-status--v5 {
-    @apply -order-2 block min-w-[unset] flex-1 truncate before:me-1.5 before:inline-block md:me-2;
+    @apply -order-2 blokk min-w-[unset] flex-1 truncate before:me-1.5 before:inline-block md:me-2;
   }
 }
 
@@ -747,7 +747,7 @@
   }
 
   .ContentEdit-overlay {
-    @apply btu-badge-gray btu-badge-sm relative block flex-1 truncate !pe-7 after:btu-icon after:btu-icon-chevron-down after:absolute after:right-2 after:top-[5px] after:btu-icon-xs;
+    @apply btu-badge-gray btu-badge-sm relative blokk flex-1 truncate !pe-7 after:btu-icon after:btu-icon-chevron-down after:absolute after:right-2 after:top-[5px] after:btu-icon-xs;
   }
 }
 

package/src/legacy/tool-ui/src/ContentEditDrawer.css

@@ -9,7 +9,7 @@
   @apply fixed scale-x-0 [content-visibility:hidden] md:[--nav-width:var(--pageNav-w)];
 
   &.is-open {
-    @apply bottom-[calc(var(--toolbar-h-mobile)_+_var(--offset))] left-[calc(var(--nav-width)_+_var(--offset))] z-20 origin-right scale-x-100 overflow-hidden border-r bg-gray-50 p-0 shadow-lg transition-transform duration-300 ease-out [content-visibility:auto] max-md:right-[--offset] md:bottom-[--offset] md:left-[calc(var(--nav-width)_+_var(--panel-width)_+_var(--offset))] md:right-[calc(var(--right-toolbar-w)_+_var(--offset))];
+    @apply bottom-[calc(var(--toolbar-h-mobile)_+_var(--offset))] left-[calc(var(--nav-width)_+_var(--offset))] z-20 origin-right scale-x-100 overflow-hidden border-e bg-gray-50 p-0 shadow-lg transition-transform duration-300 ease-out [content-visibility:auto] max-md:right-[--offset] md:bottom-[--offset] md:left-[calc(var(--nav-width)_+_var(--panel-width)_+_var(--offset))] md:right-[calc(var(--right-toolbar-w)_+_var(--offset))];
   }
 }
 
@@ -65,11 +65,11 @@
 /* Display spinner when filters are updated and frame is loading */
 .ContentEditDrawer-widget.is-loading {
   &::before {
-    @apply absolute inset-0 z-[2] block bg-gray-50 content-[''];
+    @apply absolute inset-0 z-[2] blokk bg-gray-50 content-[''];
   }
 
   &::after {
-    @apply btu-loader visible absolute left-1/2 top-1/2 z-[2] block size-[--loader-size] -translate-x-1/2 -translate-y-1/2;
+    @apply btu-loader visible absolute left-1/2 top-1/2 z-[2] blokk size-[--loader-size] -translate-x-1/2 -translate-y-1/2;
   }
 }
 
@@ -86,11 +86,11 @@
   }
 
   .ContentEditDrawer-widget-carousel-list-item-moreInfoButton.ContentSummary-info {
-    @apply absolute bottom-[30px] right-3 m-0 hidden touch-device:block;
+    @apply absolute bottom-[30px] right-3 m-0 hidden touch-device:blokk;
   }
 
   .ContentEditDrawer-widget-carousel-list-item-selectButton {
-    @apply absolute right-0 top-0 m-1 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:block before:rounded-[1px] before:bg-white hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;
+    @apply absolute right-0 top-0 m-1 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:blokk before:rounded-[1px] before:bg-white hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;
 
     &:checked {
       @apply border-primary-50 bg-primary-800 before:bg-primary-800 hover:border-primary-800 hover:bg-primary-800;
@@ -106,7 +106,7 @@
     }
 
     .ContentSummary-info {
-      @apply block;
+      @apply blokk;
     }
   }
 

package/src/legacy/tool-ui/src/ContentInputGroup.css

@@ -534,14 +534,10 @@
     }
   }
 
-  /* Single and Repeatable Content selector inputs in readonly mode.
-     Locking pointer events is handled element-by-element in the block above
-     (input, .ContentSelector-search, .ComboInput, etc.) — matching V4's
-     surgical approach — so the edit pencil stays clickable to view the
-     referenced object. Only border and text color belong here. */
+  /* Single and Repeatable Content selector inputs in readonly mode */
   .CIG-small:has(> .ContentSelector-select),
   .RCS-list > li {
-    @apply border-gray-300 text-gray-400;
+    @apply pointer-events-none border-gray-300 text-gray-400;
   }
 }
 
@@ -631,7 +627,7 @@
 }
 
 .CIG-small > .DateStringCalendarEmbedded .DateStringCalendarEmbedded-widget {
-  @apply block border-none;
+  @apply blokk border-none;
 
   .DateStringCalendarTime,
   /* Unset the horizontal borders which appear in these pseudo-elements */
@@ -674,9 +670,8 @@
 :is(.CIG-row.is-readOnly, .CIG.is-readOnly) .CIG-small:focus-within {
   @apply rounded-lg outline-dashed outline-[4px] outline-gray-300;
 
-  /* Remove default focus styles, except on elements that stay interactive in
-     read-only mode (e.g. the edit pencil, which opens the referenced object). */
-  :focus:not(.ImageEditor-editToggle, .filePreview > a, .ContentSelector-edit),
+  /* Remove default focus styles */
+  :focus:not(.ImageEditor-editToggle, .filePreview > a),
   .ProseMirrorContainer {
     @apply !border-transparent !ring-0;
   }

package/src/legacy/tool-ui/src/ContentReporting.css

@@ -42,11 +42,11 @@
 }
 
 .Widget-reports th.downloadData {
-  @apply w-[68px] border-l border-gray-200 text-[0];
+  @apply w-[68px] border-s border-gray-200 text-[0];
 }
 
 .Widget-reports td.downloadLink {
-  @apply border-l border-gray-200 px-4;
+  @apply border-s border-gray-200 px-4;
 }
 
 .Widget-reports td.downloadLink a {

package/src/legacy/tool-ui/src/ContentSelector.css

@@ -66,7 +66,7 @@ input[data-read-only='true'] ~ .ContentSelector-edit {
 
 .ContentSelector-select + .ComboInput,
 .RCS-item > .ComboInput {
-  @apply box-border max-h-[36px] !w-full min-w-0 rounded-r-none pe-2 touch-device:pe-3;
+  @apply box-border max-h-[36px] !w-full min-w-0 rounded-e-none pe-2 touch-device:pe-3;
 
   &:not([aria-expanded='true'], :focus-visible) {
     @apply border-transparent more-contrast:!border-transparent;
@@ -85,7 +85,7 @@ input[data-read-only='true'] ~ .ContentSelector-edit {
 /* Image preview not available - text only */
 input[data-previewable='true']:not([data-preview]) + .ContentSelector-search,
 input[data-previewable='true'][data-preview=''] + .ContentSelector-search {
-  @apply relative m-0 inline-block w-full truncate rounded-r-none border-solid py-2 pe-10 ps-4 text-sm font-normal text-gray-700 no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:before:btu-button-sm touch-device:before:btu-icon before:absolute before:right-2 before:top-1 touch-device:before:top-0;
+  @apply relative m-0 inline-block w-full truncate rounded-e-none border-solid py-2 pe-10 ps-4 text-sm font-normal text-gray-700 no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:before:btu-button-sm touch-device:before:btu-icon before:absolute before:right-2 before:top-1 touch-device:before:top-0;
 
   &.is-removing {
     @apply text-error-400 line-through;
@@ -151,7 +151,7 @@ input[data-previewable='true'][data-preview=''] + .ContentSelector-search {
   @apply flex-wrap;
 
   .ContentSelector-search {
-    @apply m-0 inline-block w-[calc(100%-6.75rem)] truncate rounded-r-none border-solid py-2 pe-9 ps-4 text-sm font-medium text-gray-700 before:!absolute before:right-1 before:top-1;
+    @apply m-0 inline-block w-[calc(100%-6.75rem)] truncate rounded-e-none border-solid py-2 pe-9 ps-4 text-sm font-medium text-gray-700 before:!absolute before:right-1 before:top-1;
   }
 
   .ContentSelector-clear {
@@ -166,7 +166,7 @@ input[data-previewable='true'][data-preview=''] + .ContentSelector-search {
     }
 
     .ImageEditor-focusToggle {
-      @apply after:border-b-0 after:border-l-0;
+      @apply after:border-b-0 after:border-s-0;
     }
 
     .ImageEditor-open {
@@ -174,7 +174,7 @@ input[data-previewable='true'][data-preview=''] + .ContentSelector-search {
     }
 
     .ImageEditor-editToggle {
-      @apply after:border-b-0 after:border-r-0;
+      @apply after:border-b-0 after:border-e-0;
     }
 
     .ComboInput {