@webjsdev/ui 0.3.9 → 0.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/ui",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "type": "module",
   "description": "An AI-first component library - class-helper functions for visuals, custom elements only where state matters. Source-copied into your repo, you own it. Works with any Tailwind v4 project.",
   "bin": {

package/packages/registry/components/tabs.ts

@@ -241,7 +241,13 @@ export class UiTabsTrigger extends WebComponent({
     const tabs = this._tabs;
     if (!tabs) return;
     const orientation = tabs.orientation;
-    const triggers = Array.from(tabs.querySelectorAll<UiTabsTrigger>('ui-tabs-trigger'));
+    // Scope to triggers belonging to THIS group: querySelectorAll crosses into
+    // a nested <ui-tabs> inside a panel, and arrow nav at the boundary would
+    // jump into the inner group and set this group's value to an inner-only
+    // value (hiding every panel). Same scoping dropdown-menu applies to items.
+    const triggers = Array.from(tabs.querySelectorAll<UiTabsTrigger>('ui-tabs-trigger')).filter(
+      (t) => t._tabs === tabs,
+    );
     const idx = triggers.indexOf(this);
     const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
     const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
@@ -257,7 +263,13 @@ export class UiTabsTrigger extends WebComponent({
       e.preventDefault();
       const v = target.value;
       if (v) tabs.setAttribute('value', v);
-      target.focus();
+      // Focus the inner <button role="tab">, NOT the <ui-tabs-trigger> host.
+      // The host carries no tabindex so it is not focusable; calling focus()
+      // on it is a no-op that leaves the focus ring stranded on the previous
+      // trigger while a different panel shows. The roving tabindex lives on
+      // the inner button, so that is what APG focus-follows-selection targets.
+      const btn = target.querySelector<HTMLButtonElement>('[role="tab"]');
+      (btn ?? target).focus();
     }
   };
 }

package/packages/registry/lib/utils.ts

@@ -73,22 +73,48 @@ const GROUPS: Array<[RegExp, string]> = [
   [/^grid(-|$)/, 'grid'],
 ];
 
+// Directional shorthand conflicts (the tailwind-merge model). A shorthand
+// utility invalidates the axis / side utilities it SUBSUMES, because Tailwind's
+// cascade makes the shorthand win: `p-0` after `px-4 py-2` drops both, but
+// `px-4` after `p-2` refines only the x-axis so BOTH survive (the conflict is
+// directional, not symmetric). Keyed by the group a NEWLY-seen token belongs to;
+// the value lists the EARLIER groups whose survivors it removes (its own group
+// is always removed too, handled below).
+const CONFLICTS: Record<string, string[]> = {
+  p: ['px', 'py', 'pt', 'pr', 'pb', 'pl'],
+  px: ['pl', 'pr'],
+  py: ['pt', 'pb'],
+  m: ['mx', 'my', 'mt', 'mr', 'mb', 'ml'],
+  mx: ['ml', 'mr'],
+  my: ['mt', 'mb'],
+  size: ['w', 'h'],
+};
+
 function dedupeUtilities(input: string): string {
   const tokens = input.split(/\s+/).filter(Boolean);
-  const seen = new Map<string, number>();
+  // `${prefix}::${group}` -> index of the last SURVIVING token in that group.
+  const lastByKey = new Map<string, number>();
   const result: Array<string | null> = [];
 
   for (const token of tokens) {
-    let key: string | null = null;
-    // Strip variant prefix (`hover:`, `dark:md:`, …) before testing each
-    // dedupe regex so `hover:bg-red-500` still matches the `bg-color` group.
+    // Strip variant prefix (`hover:`, `dark:md:`, …) before testing each dedupe
+    // regex so `hover:bg-red-500` still matches the `bg-color` group. Conflicts
+    // only apply WITHIN the same variant (`px-4 hover:p-0` keeps both).
     const prefix = variantPrefix(token);
     const bare = prefix ? token.slice(prefix.length) : token;
-    for (const [re, gk] of GROUPS) {
-      if (re.test(bare)) { key = `${prefix}::${gk}`; break; }
+    let gk: string | null = null;
+    for (const [re, g] of GROUPS) {
+      if (re.test(bare)) { gk = g; break; }
+    }
+    if (gk) {
+      // Remove earlier survivors in this group AND in every group it subsumes.
+      for (const g of [gk, ...(CONFLICTS[gk] ?? [])]) {
+        const k = `${prefix}::${g}`;
+        const idx = lastByKey.get(k);
+        if (idx !== undefined) { result[idx] = null; lastByKey.delete(k); }
+      }
+      lastByKey.set(`${prefix}::${gk}`, result.length);
     }
-    if (key && seen.has(key)) result[seen.get(key)!] = null;
-    if (key) seen.set(key, result.length);
     result.push(token);
   }
   return result.filter(Boolean).join(' ');

package/packages/registry/themes/index.css

@@ -135,7 +135,18 @@
 }
 
 @layer base {
+  /* Focus: a themed, keyboard-only (:focus-visible), never-removed outline, in
+     the --ring colour, applied globally. `outline-ring/50` themes only the
+     COLOUR and leaves outline-style: auto, which the browser draws as its OWN
+     ring (it can look thick/white and ignore the colour). So force a SOLID
+     outline on focus, at a consistent width + offset, so the themed --ring/50
+     colour actually renders the same on every element. A shadow-DOM component
+     sets its own focus (a document rule cannot cross the shadow boundary). */
   * {
     @apply border-border outline-ring/50;
   }
+  :focus-visible {
+    outline: 2px solid color-mix(in oklab, var(--color-ring) 50%, transparent);
+    outline-offset: 2px;
+  }
 }

package/src/registry/extract.js

@@ -19,13 +19,7 @@
  */
 
 import { loadRegistryItem, loadRegistryIndex, isCustomElementSource } from './local.js';
-import { extractExample, stripExample } from './example.js';
-
-// Re-export the lean-copy primitives so the scaffold generator (via
-// `packages/cli/lib/lean-copy.js`) has one import surface for the shared
-// example-strip. (The CLI's own `add` imports them directly from local.js /
-// example.js.)
-export { isCustomElementSource, stripExample };
+import { extractExample } from './example.js';
 
 /**
  * Extract the exported class-helper signatures from a Tier-1 source, e.g.