@urbicon-ui/blocks 6.25.0 → 6.26.0

package/dist/primitives/Tooltip/tooltip.variants.d.ts

@@ -1,19 +1,19 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const tooltipVariants: ((props?: {
     open?: boolean | undefined;
-    intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+    intent?: "info" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
 } | undefined) => {
     base: (props?: ({
         open?: boolean | undefined;
-        intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     arrow: (props?: ({
         open?: boolean | undefined;
-        intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "info" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;

package/dist/primitives/Tooltip/tooltip.variants.js

@@ -53,7 +53,7 @@ export const tooltipVariants = tv({
             secondary: { base: 'bg-secondary text-text-on-primary' },
             info: { base: 'bg-info text-text-on-primary' },
             success: { base: 'bg-success text-text-on-primary' },
-            warning: { base: 'bg-warning text-text-on-surface' },
+            warning: { base: 'bg-warning text-text-on-warning' },
             danger: { base: 'bg-danger text-text-on-primary' },
             neutral: { base: 'bg-surface-inverted text-text-inverted' }
         },

package/dist/style/foundation.css

@@ -52,20 +52,20 @@
   --color-warm-neutral-900: oklch(0.2 0.008 45);
   --color-warm-neutral-950: oklch(0.12 0.006 45);
 
-  /* Darkened *-500 / *-600 / *-700 so text-on-primary (white) passes WCAG
-     AA (4.5:1) on the solid intent backgrounds **in light mode**, where
-     --color-<intent> resolves to the -500/-600 shades. Previous values had
-     L=0.65 which produced ~3:1 contrast — below AA. Warning keeps its
-     yellow hue at L=0.75 because it pairs with text-on-surface (dark),
-     not white.
-
-     Scope, measured (contrast.test.ts, 2026-07-14): this holds for light
-     mode only. In dark mode --color-<intent> resolves to the *lighter*
-     -400/-300/-200 shades while --color-text-on-primary stays white, so
-     every filled intent lands at 1.5–4.1:1. That is a semantic.css issue
-     (text-on-primary is not mode-aware), not something these ramps can fix
-     — see the KNOWN SHORTFALLS block in contrast.test.ts. Do not "fix" it
-     by lightening these ramps; that would break light mode instead. */
+  /* Darkened *-500 / *-600 / *-700 so text-on-primary (white in light mode)
+     passes WCAG AA (4.5:1) on the solid intent backgrounds **in light
+     mode**, where --color-<intent> resolves to the -500/-600 shades.
+     Previous values had L=0.65 which produced ~3:1 contrast — below AA.
+     Warning is the one inverted ramp: its fill stays light in both modes
+     (500 keeps its yellow at L=0.75) and pairs with the dark,
+     non-mode-aware `text-on-warning` (= warning-950), not white.
+
+     In dark mode --color-<intent> resolves to the *lighter* -400/-300/-200
+     shades and pairs with the dark branch of the mode-aware
+     `text-on-primary` (semantic.css, 2026-07-14). Both directions are
+     measured across all six themes by style/contrast.test.ts. Do not
+     lighten these ramps to "help" dark mode; light mode is the branch
+     these stops guarantee. */
   --color-success-50: oklch(0.95 0.03 140);
   --color-success-100: oklch(0.9 0.05 140);
   --color-success-200: oklch(0.82 0.08 140);
@@ -85,7 +85,14 @@
   --color-warning-400: oklch(0.66 0.14 80);
   --color-warning-500: oklch(0.75 0.15 80);
   --color-warning-600: oklch(0.65 0.15 80);
-  --color-warning-700: oklch(0.55 0.13 80);
+  /* L=0.59, not the ramp's usual 0.55: warning-700 is the light-mode press
+     fill (--color-warning-active) under the dark `text-on-warning`
+     (warning-950). Warning's ramp is inverted — pressing moves TOWARD the
+     dark label — and at L=0.55 the press state measured 3.90–4.05:1, under
+     AA. 0.59 is the lowest 0.01 step at which every themed hue clears
+     4.5:1 (0.58 still fails forest's hue 60 at 4.46:1). Mirrored by the
+     forest/sunset ramps; guarded by contrast.test.ts. */
+  --color-warning-700: oklch(0.59 0.13 80);
   --color-warning-800: oklch(0.45 0.11 80);
   --color-warning-900: oklch(0.25 0.08 80);
   --color-warning-950: oklch(0.15 0.05 80);

package/dist/style/semantic.css

@@ -54,12 +54,13 @@
   --color-text-tertiary: light-dark(var(--color-neutral-600), var(--color-neutral-300));
   --color-text-quaternary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   --color-text-disabled: light-dark(var(--color-neutral-300), var(--color-neutral-600));
-  /* The two on-colors below pair text with a *fill* rather than a surface.
-     Their fills are dark in light mode and light in dark mode, so the label
-     has to travel the opposite way — white, then near-black. They are
-     deliberately NOT aliased to one another (`text-on-primary: var(
-     --color-text-on-dark)`), even though they carry the same value today —
-     they answer to different fills and must stay independently overridable:
+  /* The on-colors below pair text with a *fill* rather than a surface.
+     text-on-dark and text-on-primary answer fills that are dark in light
+     mode and light in dark mode, so the label has to travel the opposite
+     way — white, then near-black. They are deliberately NOT aliased to one
+     another (`text-on-primary: var(--color-text-on-dark)`), even though
+     they carry the same value today — they answer to different fills and
+     must stay independently overridable:
 
        - text-on-dark is the partner of the avatar identity palette, whose 12
          slots hold ONE lightness per mode (0.45 / 0.72) by construction.
@@ -75,10 +76,21 @@
      Material-3 `onPrimary` pattern). White here was unconditional until
      2026-07-14, which put 125 of the 126 dark-mode intent fills under WCAG AA
      — down to 1.51:1, and getting *worse* on press. The mode-aware branch
-     clears all 108 fills this token governs; `warning` is not one of them (it
-     pairs with text-on-surface and is still under AA in dark mode — see the
-     KNOWN SHORTFALLS block in style/contrast.test.ts, which guards all of it). */
+     clears all 108 fills this token governs; `warning` is not one of them —
+     its fill is light in BOTH modes, so it carries its own non-mode-aware
+     on-color below (`--color-text-on-warning`). */
   --color-text-on-primary: light-dark(var(--color-neutral-0), var(--color-neutral-900));
+  /* Warning's own on-color. Warning is the one intent whose fill stays a
+     light amber in BOTH modes (base/hover/active ride L 0.59–0.82), so unlike
+     text-on-primary this token is deliberately NOT mode-aware — the label is
+     a warm dark in both modes. It rides the warning ramp's own 950 stop
+     rather than a neutral, so theme re-hues (forest 60, sunset 92) flow
+     through and the label reads as part of the swatch instead of soot on top
+     of it. Until 2026-07-20 filled warning paired with `text-on-surface` — a
+     *surface* token that flips light in dark mode — which put all 18
+     dark-mode warning fills at 1.51–2.80:1. Measured across every theme ×
+     mode × state by style/contrast.test.ts. */
+  --color-text-on-warning: var(--color-warning-950);
   --color-text-on-surface: light-dark(var(--color-neutral-900), var(--color-neutral-100));
 
   /* === PRIMARY INTENT ===

package/dist/style/themes/forest.css

@@ -86,7 +86,9 @@
   --color-warning-400: oklch(0.66 0.14 60);
   --color-warning-500: oklch(0.75 0.15 60);
   --color-warning-600: oklch(0.65 0.15 60);
-  --color-warning-700: oklch(0.55 0.13 60);
+  /* 0.59 mirrors foundation.css: light-mode press fill under the dark
+     text-on-warning — hue 60 is the binding case (0.58 = 4.46:1, under AA). */
+  --color-warning-700: oklch(0.59 0.13 60);
   --color-warning-800: oklch(0.45 0.11 60);
   --color-warning-900: oklch(0.25 0.08 60);
   --color-warning-950: oklch(0.15 0.05 60);

package/dist/style/themes/sunset.css

@@ -73,7 +73,9 @@
   --color-warning-400: oklch(0.66 0.14 92);
   --color-warning-500: oklch(0.75 0.15 92);
   --color-warning-600: oklch(0.65 0.15 92);
-  --color-warning-700: oklch(0.55 0.13 92);
+  /* 0.59 mirrors foundation.css: light-mode press fill under the dark
+     text-on-warning (AA floor across all themed hues). */
+  --color-warning-700: oklch(0.59 0.13 92);
   --color-warning-800: oklch(0.45 0.11 92);
   --color-warning-900: oklch(0.25 0.08 92);
   --color-warning-950: oklch(0.15 0.05 92);

package/dist/utils/figma-token-export.js

@@ -99,7 +99,7 @@ const foundationColors = {
         '400': 'oklch(0.66 0.14 80)',
         '500': 'oklch(0.75 0.15 80)',
         '600': 'oklch(0.65 0.15 80)',
-        '700': 'oklch(0.55 0.13 80)',
+        '700': 'oklch(0.59 0.13 80)',
         '800': 'oklch(0.45 0.11 80)',
         '900': 'oklch(0.25 0.08 80)',
         '950': 'oklch(0.15 0.05 80)'
@@ -155,6 +155,10 @@ const semanticTokens = {
         disabled: { value: '{color.neutral.300}', description: 'Disabled text' },
         'on-dark': { value: '{color.neutral.0}', description: 'Text on dark surfaces' },
         'on-primary': { value: '{color.neutral.0}', description: 'Text on primary color bg' },
+        'on-warning': {
+            value: '{color.warning.950}',
+            description: 'Text on the warning fill (warm dark in both modes)'
+        },
         'on-surface': { value: '{color.neutral.900}', description: 'Text on tinted surfaces' }
     },
     border: {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.25.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.25.0",
-    "@urbicon-ui/shared-types": "6.25.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",