@urbicon-ui/blocks 6.24.0 → 6.26.0

package/dist/utils/index.d.ts

@@ -7,7 +7,7 @@ export * from './id.js';
 export { observeTargetResolution } from './observe-target.js';
 export { createOptionalContext } from './optional-context.js';
 export { overlayStack } from './overlay-stack.svelte.js';
-export { type EasingFn, getOverlayMotion, OVERLAY_MOTION_DEFAULTS, type OverlayMotion, type OverlayMotionOverride } from './overlay-tokens.js';
+export { type EasingFn, getOverlayMotion, maxTransitionDurationMs, OVERLAY_MOTION_DEFAULTS, type OverlayMotion, type OverlayMotionOverride } from './overlay-tokens.js';
 export * from './persistent-state.svelte.js';
 export { edgeEnabledIndex, nextEnabledIndex } from './roving.js';
 export { getTierContext, type InteractiveTier, setTierContext, type TierContext } from './tier-context.js';

package/dist/utils/index.js

@@ -7,7 +7,7 @@ export * from './id.js';
 export { observeTargetResolution } from './observe-target.js';
 export { createOptionalContext } from './optional-context.js';
 export { overlayStack } from './overlay-stack.svelte.js';
-export { getOverlayMotion, OVERLAY_MOTION_DEFAULTS } from './overlay-tokens.js';
+export { getOverlayMotion, maxTransitionDurationMs, OVERLAY_MOTION_DEFAULTS } from './overlay-tokens.js';
 export * from './persistent-state.svelte.js';
 export { edgeEnabledIndex, nextEnabledIndex } from './roving.js';
 export { getTierContext, setTierContext } from './tier-context.js';

package/dist/utils/overlay-tokens.d.ts

@@ -45,6 +45,23 @@ export interface OverlayMotionOverride {
 }
 /** Defaults mirror the CSS custom properties in `interaction.css`. */
 export declare const OVERLAY_MOTION_DEFAULTS: OverlayMotion;
+/**
+ * Longest `transition-duration` currently applying to an element, in ms.
+ *
+ * Used by Popover's exit-motion lag: the panel's CSS transition (token-driven,
+ * per-instance-overridable, collapsed by reduced motion) is the single source
+ * of truth for how long closed content must stay mounted, so the lag is read
+ * from the live computed style instead of duplicating the token resolution in
+ * JS. Returns `0` when the element is missing, has no transition, or the
+ * environment has no CSS engine (SSR, jsdom) — callers then tear down
+ * synchronously, which keeps unstyled consumers and node tests on the
+ * pre-motion behaviour.
+ *
+ * `transition-duration` computes to a comma list (one entry per transition
+ * property); the max governs because the exit isn't over until the slowest
+ * property lands.
+ */
+export declare function maxTransitionDurationMs(el: Element | null | undefined): number;
 /**
  * Read the current overlay motion settings.
  *

package/dist/utils/overlay-tokens.js

@@ -28,6 +28,36 @@ export const OVERLAY_MOTION_DEFAULTS = {
     panelScaleStart: 0.96,
     panelFlyDistance: 320
 };
+/**
+ * Longest `transition-duration` currently applying to an element, in ms.
+ *
+ * Used by Popover's exit-motion lag: the panel's CSS transition (token-driven,
+ * per-instance-overridable, collapsed by reduced motion) is the single source
+ * of truth for how long closed content must stay mounted, so the lag is read
+ * from the live computed style instead of duplicating the token resolution in
+ * JS. Returns `0` when the element is missing, has no transition, or the
+ * environment has no CSS engine (SSR, jsdom) — callers then tear down
+ * synchronously, which keeps unstyled consumers and node tests on the
+ * pre-motion behaviour.
+ *
+ * `transition-duration` computes to a comma list (one entry per transition
+ * property); the max governs because the exit isn't over until the slowest
+ * property lands.
+ */
+export function maxTransitionDurationMs(el) {
+    if (!el || typeof window === 'undefined')
+        return 0;
+    const raw = getComputedStyle(el).transitionDuration;
+    if (!raw)
+        return 0;
+    let max = 0;
+    for (const part of raw.split(',')) {
+        const ms = parseDurationMs(part, 0);
+        if (ms > max)
+            max = ms;
+    }
+    return max;
+}
 function parseDurationMs(value, fallback) {
     if (!value)
         return fallback;

package/dist/utils/overlay.js

@@ -18,8 +18,18 @@ export function trapFocus(event, container) {
     if (!isBrowser)
         return;
     const focusable = getFocusableElements(container);
-    if (focusable.length === 0)
+    if (focusable.length === 0) {
+        // Nothing tabbable inside the overlay (untitled Dialog with static
+        // children, Drawer with hideCloseButton): park focus on the container —
+        // the panel that focusFirstElement's fallback focused via tabindex="-1" —
+        // instead of letting Tab walk out of the modal. Browsers with a real top
+        // layer get this from `showModal()` inertness; the guard keeps the trap's
+        // contract honest everywhere else. `contains` includes the container
+        // itself, so focus already parked there stays put.
+        if (container?.contains(document.activeElement))
+            event.preventDefault();
         return;
+    }
     const first = focusable[0];
     const last = focusable[focusable.length - 1];
     if (event.shiftKey) {
@@ -74,8 +84,20 @@ export function focusFirstElement(container) {
         return;
     tick().then(() => {
         const focusable = getFocusableElements(container);
-        if (focusable.length > 0)
+        if (focusable.length > 0) {
             focusable[0].focus();
+            return;
+        }
+        // No focusable descendant — e.g. an untitled Dialog whose children are
+        // static text (no header, so no close button), or a Drawer with
+        // hideCloseButton. Fall back to the container itself, which the overlay
+        // panels make programmatically focusable via tabindex="-1" (excluded from
+        // getFocusableElements, so it never joins the Tab cycle). Without this,
+        // focus stays on <body>: the overlay's element-level keydown never fires,
+        // leaving ESC to the window fallback and the Tab trap inert until the
+        // user clicks in — a WCAG 2.1.2 problem. Mirrors the native <dialog>
+        // focusing steps, which likewise fall back to the dialog element.
+        container?.focus();
     });
 }
 /**

package/dist/utils/use-floating-panel.svelte.js

@@ -80,9 +80,11 @@ export function useFloatingPanel(opts) {
         if (!isOpen || !ref) {
             cleanupPosition?.();
             cleanupPosition = undefined;
-            // Drop the keyboard-aware height clamp so the next open re-measures from
-            // the full design cap instead of inheriting a stale value.
-            floating.style.removeProperty('--blocks-overlay-available-height');
+            // The keyboard-aware height clamp is deliberately NOT dropped here: the
+            // panel may still be painting its CSS exit transition (allow-discrete /
+            // Popover's lagged display), and un-clamping mid-fade would let clamped
+            // content grow while it fades out. The show path below resets it before
+            // the next open instead.
             // Guard on the live `:popover-open` state only (not the current mode):
             // a panel that was promoted to the top layer must still be torn down even
             // if its mode has since flipped to `fixed`/`inline`.
@@ -102,6 +104,10 @@ export function useFloatingPanel(opts) {
         }
         if (zIndexValue)
             floating.style.zIndex = zIndexValue;
+        // Drop the previous open's keyboard-aware height clamp before showing, so
+        // this open re-measures from the full design cap instead of inheriting a
+        // stale value. (Moved off the hide path — see the comment there.)
+        floating.style.removeProperty('--blocks-overlay-available-height');
         if (useTopLayer && !floating.matches(':popover-open')) {
             try {
                 floating.showPopover();

package/dist/utils/variants.js

@@ -232,7 +232,11 @@ const BUCKET_PATTERNS = [
     [/^text-shadow-(2xs|xs|sm|md|lg|none)$/, 'text-shadow'],
     [/^text-shadow$/, 'text-shadow'],
     [/^text-shadow-/, 'text-shadow-color'],
-    [/^text-(xs|sm|base|lg|xl|\d+xl)(\/[\w.-]+)?$/, 'text-size'],
+    // `\d+xs` covers the library's sub-xs scale (--text-2xs/--text-3xs in
+    // foundation.css) and mirrors `\d+xl` for consumer-added steps. Without it
+    // `text-2xs` falls through to the text-color catch-all below, so a color
+    // override would silently strip the font size.
+    [/^text-(\d+xs|xs|sm|base|lg|xl|\d+xl)(\/[\w.-]+)?$/, 'text-size'],
     // Data-type hints disambiguate the overloaded `text-` arbitraries.
     [/^text-\[length:/, 'text-size'],
     [/^text-\[color:/, 'text-color'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.24.0",
+  "version": "6.26.0",
   "description": "Svelte 5 UI component library with Tailwind CSS 4, OKLCH design tokens and zero runtime dependencies",
   "license": "MIT",
   "repository": {
@@ -91,8 +91,8 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.3.1",
-    "@urbicon-ui/i18n": "6.24.0",
-    "@urbicon-ui/shared-types": "6.24.0",
+    "@urbicon-ui/i18n": "6.26.0",
+    "@urbicon-ui/shared-types": "6.26.0",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",