@webjsdev/ui 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/ui",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "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/alert-dialog.ts

@@ -64,6 +64,7 @@
  * Design tokens used: --background, --border, --muted-foreground.
  */
 import { WebComponent, html } from '@webjsdev/core';
+import { ref, createRef } from '@webjsdev/core/directives';
 import { buttonClass, type ButtonVariant, type ButtonSize } from './button.ts';
 
 export const alertDialogContentClass = (): string =>
@@ -228,18 +229,23 @@ export class UiAlertDialogContent extends WebComponent {
   };
   declare size: 'default' | 'sm';
 
+  // ref to the own-rendered native <dialog>. render() creates it, so a
+  // ref() binding is the lit-idiomatic handle (no querySelector against
+  // a string selector into the component's own output).
+  #dialog = createRef<HTMLDialogElement>();
+
   constructor() {
     super();
     this.size = 'default';
   }
 
   showModal(): void {
-    const native = this.querySelector<HTMLDialogElement>('dialog[data-slot="alert-dialog-native"]');
+    const native = this.#dialog.value;
     if (native && !native.open) native.showModal();
   }
 
   close(): void {
-    const native = this.querySelector<HTMLDialogElement>('dialog[data-slot="alert-dialog-native"]');
+    const native = this.#dialog.value;
     if (native?.open) native.close();
   }
 
@@ -248,6 +254,7 @@ export class UiAlertDialogContent extends WebComponent {
     return html`<dialog
       data-slot="alert-dialog-native"
       class=${NATIVE_DIALOG_CLASS}
+      ${ref(this.#dialog)}
       @cancel=${this._onNativeCancel}
       @close=${this._onNativeClose}
     ><div

package/packages/registry/components/dialog.ts

@@ -64,6 +64,7 @@
  * Design tokens used: --background, --border, --muted-foreground.
  */
 import { WebComponent, html, unsafeHTML } from '@webjsdev/core';
+import { ref, createRef } from '@webjsdev/core/directives';
 import { buttonClass } from './button.ts';
 
 // --------------------------------------------------------------------------
@@ -262,18 +263,23 @@ export class UiDialogContent extends WebComponent {
   };
   declare showCloseButton: string;
 
+  // ref to the own-rendered native <dialog>. render() creates it, so a
+  // ref() binding is the lit-idiomatic handle (no querySelector against
+  // a string selector into the component's own output).
+  #dialog = createRef<HTMLDialogElement>();
+
   constructor() {
     super();
     this.showCloseButton = 'true';
   }
 
   showModal(): void {
-    const native = this.querySelector<HTMLDialogElement>('dialog[data-slot="dialog-native"]');
+    const native = this.#dialog.value;
     if (native && !native.open) native.showModal();
   }
 
   close(): void {
-    const native = this.querySelector<HTMLDialogElement>('dialog[data-slot="dialog-native"]');
+    const native = this.#dialog.value;
     if (native?.open) native.close();
   }
 
@@ -283,6 +289,7 @@ export class UiDialogContent extends WebComponent {
     return html`<dialog
       data-slot="dialog-native"
       class=${NATIVE_DIALOG_CLASS}
+      ${ref(this.#dialog)}
       @close=${this._onNativeClose}
       @click=${this._onNativeBackdropClick}
     ><div

package/packages/registry/components/dropdown-menu.ts

@@ -74,7 +74,7 @@
  * Design tokens used: --popover, --popover-foreground, --accent,
  * --accent-foreground, --destructive, --muted-foreground, --border.
  */
-import { WebComponent, html, unsafeHTML } from '@webjsdev/core';
+import { WebComponent, html, unsafeHTML, signal } from '@webjsdev/core';
 import { positionFloating, type PopoverSide, type PopoverAlign } from './popover.ts';
 
 // --------------------------------------------------------------------------
@@ -348,6 +348,12 @@ export class UiDropdownMenuItem extends WebComponent {
   declare variant: 'default' | 'destructive';
   declare inset: boolean;
 
+  // Keyboard / pointer highlight state for the own-rendered menuitem. A
+  // local signal bound with ?data-highlighted keeps the highlight in the
+  // declarative template instead of an imperative setAttribute on
+  // e.currentTarget (the lit-idiomatic form).
+  #highlighted = signal(false);
+
   constructor() {
     super();
     this.variant = 'default';
@@ -361,6 +367,7 @@ export class UiDropdownMenuItem extends WebComponent {
       tabindex="-1"
       data-variant=${this.variant}
       ?data-inset=${this.inset}
+      ?data-highlighted=${this.#highlighted.get()}
       class=${dropdownMenuItemClass()}
       @click=${this._onClick}
       @pointerenter=${this._onPointerEnter}
@@ -381,12 +388,12 @@ export class UiDropdownMenuItem extends WebComponent {
     el.focus();
   };
 
-  _onFocus = (e: Event): void => {
-    (e.currentTarget as HTMLElement).setAttribute('data-highlighted', '');
+  _onFocus = (): void => {
+    this.#highlighted.set(true);
   };
 
-  _onBlur = (e: Event): void => {
-    (e.currentTarget as HTMLElement).removeAttribute('data-highlighted');
+  _onBlur = (): void => {
+    this.#highlighted.set(false);
   };
 }
 UiDropdownMenuItem.register('ui-dropdown-menu-item');

package/packages/registry/components/hover-card.ts

@@ -55,8 +55,14 @@ export const hoverCardContentClass = (): string =>
 export class UiHoverCard extends WebComponent {
   static properties = {
     open: { type: Boolean, reflect: true },
+    openDelay: { type: Number },
+    closeDelay: { type: Number },
   };
   declare open: boolean;
+  // `openDelay` / `closeDelay` ride the `open-delay` / `close-delay`
+  // attributes (shadcn parity), read as typed props.
+  declare openDelay: number;
+  declare closeDelay: number;
 
   _showTimer: number | undefined;
   _hideTimer: number | undefined;
@@ -64,6 +70,8 @@ export class UiHoverCard extends WebComponent {
   constructor() {
     super();
     this.open = false;
+    this.openDelay = 700;
+    this.closeDelay = 300;
   }
 
   // Back-compat getter.
@@ -71,14 +79,12 @@ export class UiHoverCard extends WebComponent {
 
   show(): void {
     clearTimeout(this._hideTimer);
-    const delay = Number(this.getAttribute('open-delay') ?? 700);
-    this._showTimer = window.setTimeout(() => { this.open = true; }, delay);
+    this._showTimer = window.setTimeout(() => { this.open = true; }, this.openDelay);
   }
 
   hide(): void {
     clearTimeout(this._showTimer);
-    const delay = Number(this.getAttribute('close-delay') ?? 300);
-    this._hideTimer = window.setTimeout(() => { this.open = false; }, delay);
+    this._hideTimer = window.setTimeout(() => { this.open = false; }, this.closeDelay);
   }
 
   render() {

package/packages/registry/components/tabs.ts

@@ -177,9 +177,9 @@ export class UiTabsTrigger extends WebComponent {
     this.value = '';
   }
 
-  // render() runs server-side too; linkedom doesn't implement closest()
-  // on custom elements. Return null during SSR; the client re-renders
-  // with the parent reference after hydration.
+  // render() runs server-side too. webjs resolves closest() at SSR against
+  // the enclosing-element ancestor chain, so the active tab is marked in the
+  // first paint (no hydration flash). The typeof guard stays defensive.
   get _tabs(): UiTabs | null {
     if (typeof this.closest !== 'function') return null;
     return this.closest('ui-tabs') as UiTabs | null;

package/packages/registry/components/toggle-group.ts

@@ -173,9 +173,9 @@ export class UiToggleGroupItem extends WebComponent {
     this.pressed = false;
   }
 
-  // render() runs server-side too. linkedom doesn't implement closest()
-  // on custom elements, so guard it; the client re-renders with the
-  // real parent reference after hydration.
+  // render() runs server-side too. webjs resolves closest() at SSR against
+  // the enclosing-element ancestor chain, so the pressed item is marked in
+  // the first paint (no hydration flash). The typeof guard stays defensive.
   get _group(): UiToggleGroup | null {
     if (typeof this.closest !== 'function') return null;
     return this.closest('ui-toggle-group') as UiToggleGroup | null;

package/packages/registry/components/tooltip.ts

@@ -64,8 +64,14 @@ let lastTooltipHideAt = 0;
 export class UiTooltip extends WebComponent {
   static properties = {
     open: { type: Boolean, reflect: true },
+    delayDuration: { type: Number },
+    skipDelayDuration: { type: Number },
   };
   declare open: boolean;
+  // `delayDuration` / `skipDelayDuration` ride the `delay-duration` /
+  // `skip-delay-duration` attributes (shadcn parity), read as typed props.
+  declare delayDuration: number;
+  declare skipDelayDuration: number;
 
   _showTimer: number | undefined;
   _hideTimer: number | undefined;
@@ -73,6 +79,8 @@ export class UiTooltip extends WebComponent {
   constructor() {
     super();
     this.open = false;
+    this.delayDuration = 700;
+    this.skipDelayDuration = 300;
   }
 
   // Back-compat getter for tests + external code that read `el.isOpen`
@@ -82,8 +90,8 @@ export class UiTooltip extends WebComponent {
   show(): void {
     clearTimeout(this._showTimer);
     clearTimeout(this._hideTimer);
-    const delay = Number(this.getAttribute('delay-duration') ?? 700);
-    const skipDelay = Number(this.getAttribute('skip-delay-duration') ?? 300);
+    const delay = this.delayDuration;
+    const skipDelay = this.skipDelayDuration;
     const sinceLastHide = Date.now() - lastTooltipHideAt;
     if (lastTooltipHideAt > 0 && sinceLastHide < skipDelay) {
       this.open = true;