@rebasepro/ui 0.19.2-canary.gef769df → 0.20.0

package/dist/src/index.css

@@ -166,7 +166,38 @@ html.dark {
     @apply text-3xl font-headers font-semibold tracking-display tabular-nums;
 }
 
-:focus-visible {
-    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:ring-offset-transparent
+/* The focus ring is drawn INSIDE the focused element, not around it.
+
+   An outset ring is a box-shadow painted beyond the border box, so any ancestor
+   that clips cuts it — a scroller, a truncating cell, a max-height collapse.
+   That is not a corner case: the drawer's navigation groups clip for their
+   collapse animation, and every row in them rendered a ring with three of its
+   four sides missing. Tabbing through the panel produced stray blue slivers
+   rather than an indicator. An inset ring is painted within the element's own
+   box, which is inside any clip rect the element is itself inside, so nothing
+   can cut it. Same 2px, same colour, same radius — 2px in rather than 2px out.
+
+   Written as an override of `--tw-ring-shadow` rather than as `inset-ring-2`
+   because that keeps one vocabulary for turning the ring off. Eleven call sites
+   already say `ring-0` / `focusedDisabled` to suppress it, and `inset-ring-*`
+   is a different variable that none of them would have silenced — every popover
+   and bare table input that had opted out would have got a ring back.
+   Not `outline` either: 65 call sites carry `outline-none` from the utilities
+   layer, which outranks anything a base-layer rule sets, and those controls
+   would have been left with no focus indicator at all.
+
+   A component that wants the ring OUTSIDE (Checkbox, Slider, Avatar — small
+   controls with room around them, where an inset ring would sit on the mark
+   itself) still says `focus-visible:ring-2` for itself; a utility outranks
+   this.
+
+   The pseudo-class is doubled on purpose — it is not a typo to tidy up. The
+   admin imports this sheet into `layer(base)`, where a utility wins whatever
+   the specificity, but the docs site imports it unlayered, and there the rule
+   competes with `.something:focus` on specificity alone. (0,2,0) is what the
+   rule had before this was written, and dropping to (0,1,0) would quietly hand
+   those ties to the other rule. */
+:focus-visible:focus-visible {
+    @apply outline-none ring-2 ring-primary ring-offset-0 ring-offset-transparent;
+    --tw-ring-shadow: inset 0 0 0 2px var(--tw-ring-color, currentcolor);
 }
-

package/dist/styles.d.ts

@@ -26,11 +26,29 @@ export declare const controlPaddingMixin: {
     readonly xl: "px-6";
     readonly "2xl": "px-10";
 };
+/**
+ * Suppress the focus ring on a surface that is focusable but is not a control —
+ * a popover panel, a menu container, a bare cell input inside a table that
+ * indicates focus by other means.
+ *
+ * Still expressed as `ring-0`, and that is why the default ring in
+ * `index.css` overrides `--tw-ring-shadow` rather than switching to
+ * `inset-ring-*`: `inset-ring` is a different variable, which this would not
+ * have silenced, and every surface that had opted out would have got a ring
+ * back.
+ */
 export declare const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 export declare const focusedInvisibleMixin = "focus:bg-surface-field-hover";
 /**
- * The focus ring — the single most-seen interaction state in the product, and
- * until now the least tended.
+ * The focus ring, drawn OUTSIDE the element, for a control that opts into it.
+ *
+ * The product's default ring is the `:focus-visible` rule in `index.css`, and
+ * that one is drawn *inside* the border box: an outset ring is paint beyond the
+ * box, and any ancestor that clips — a scroller, a truncating cell, a
+ * max-height collapse — cuts it. This one is still outset because its only
+ * caller is a whole field row sitting inside `p-4`/`p-6` of card padding, where
+ * there is room around it and nothing clipping within 16px. Reach for it only
+ * where that is true; anywhere else, let the default apply.
  *
  * Three dead declarations were removed rather than reshuffled:
  *   `outline-hidden` + `outline-none`  — the same instruction twice.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebasepro/ui",
-  "version": "0.19.2-canary.gef769df",
+  "version": "0.20.0",
   "description": "Rebase design system — React components and design tokens built on Radix UI, Tailwind CSS and lucide-react",
   "keywords": [
     "rebase",
@@ -31,10 +31,9 @@
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
-  "//sideEffects": "The stylesheet is the side effect. `index.css` and the CSS the build emits are imported for what they do, not for what they export, so a bundler told this package is side-effect-free would drop them and ship an unstyled admin panel.",
+  "//sideEffects": "The stylesheet is the side effect. The CSS this package emits is imported for what it does, not for what it exports, so a bundler told this package is side-effect-free would drop it and ship an unstyled admin panel. One glob is enough: bundlers match this list against the RESOLVED file path, and `@rebasepro/ui/index.css` resolves through `exports` to `dist/index.css`, which `**/*.css` already claims. A second `./index.css` entry used to sit beside it, naming a package-root file that no tarball has ever contained.",
   "sideEffects": [
-    "**/*.css",
-    "./index.css"
+    "**/*.css"
   ],
   "engines": {
     "node": ">=22.22.0"
@@ -112,8 +111,7 @@
     "vite-plugin-static-copy": "^4.1.1"
   },
   "files": [
-    "dist",
-    "index.css"
+    "dist"
   ],
   "gitHead": "d935eefa5aa8d1009a2398cfac2c1e4ee9aeb6b6",
   "publishConfig": {