@rebasepro/ui 0.19.2-canary.gef769df → 0.20.0

package/dist/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/index.es.js

@@ -59,11 +59,29 @@ var controlPaddingMixin = {
 	xl: "px-6",
 	"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.
+*/
 var focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 var 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.
@@ -4396,7 +4414,7 @@ var FilterChip = React.forwardRef(function FilterChip({ children, active = false
 		type: "button",
 		onClick,
 		disabled,
-		className: cls("inline-flex items-center gap-1 rounded-md", "font-medium whitespace-nowrap select-none shrink-0", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", sizeClasses[size], !disabled && "cursor-pointer", active ? "bg-surface-active text-text-primary dark:text-text-primary-dark" : cls("bg-transparent text-text-secondary dark:text-text-secondary-dark", !disabled && "hover:bg-surface-hover"), disabled && "opacity-50 cursor-not-allowed", className),
+		className: cls("inline-flex items-center gap-1 rounded-md", "font-medium whitespace-nowrap select-none shrink-0", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-primary/50", sizeClasses[size], !disabled && "cursor-pointer", active ? "bg-surface-active text-text-primary dark:text-text-primary-dark" : cls("bg-transparent text-text-secondary dark:text-text-secondary-dark", !disabled && "hover:bg-surface-hover"), disabled && "opacity-50 cursor-not-allowed", className),
 		...rest,
 		children: [icon, children]
 	});
@@ -5706,7 +5724,7 @@ function Tab({ value, className, innerClassName, children, disabled }) {
 	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
 		value,
 		disabled,
-		className: cls("inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", variant === "standard" && "rounded-md px-3 py-1 data-[state=active]:bg-surface-lifted data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:text-surface-50", variant === "boxy" && cls("flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 cursor-pointer text-xs font-medium transition-colors group relative box-border", "rounded-t-lg -mb-px border border-transparent border-b-0", "data-[state=active]:bg-surface-card data-[state=active]:border-hairline", "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark", "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover"), variant === "pill" && cls("px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-primary", "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"), className, variant === "standard" && innerClassName),
+		className: cls("inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all", "focus-visible:outline-none focus-visible:ring-surface-400", "disabled:pointer-events-none disabled:opacity-50", variant === "standard" && "rounded-md px-3 py-1 data-[state=active]:bg-surface-lifted data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:text-surface-50", variant === "boxy" && cls("flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 cursor-pointer text-xs font-medium transition-colors group relative box-border", "rounded-t-lg -mb-px border border-transparent border-b-0", "data-[state=active]:bg-surface-card data-[state=active]:border-hairline", "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark", "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover"), variant === "pill" && cls("px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-primary", "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"), className, variant === "standard" && innerClassName),
 		children
 	});
 }