@webjsdev/ui 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "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/dropdown-menu.ts

@@ -343,22 +343,24 @@ UiDropdownMenuContent.register('ui-dropdown-menu-content');
 export class UiDropdownMenuItem extends WebComponent {
   static properties = {
     variant: { type: String, reflect: true },
+    inset: { type: Boolean },
   };
   declare variant: 'default' | 'destructive';
+  declare inset: boolean;
 
   constructor() {
     super();
     this.variant = 'default';
+    this.inset = false;
   }
 
   render() {
-    const inset = this.hasAttribute('inset');
     return html`<div
       data-slot="dropdown-menu-item"
       role="menuitem"
       tabindex="-1"
       data-variant=${this.variant}
-      ?data-inset=${inset}
+      ?data-inset=${this.inset}
       class=${dropdownMenuItemClass()}
       @click=${this._onClick}
       @pointerenter=${this._onPointerEnter}
@@ -394,11 +396,18 @@ UiDropdownMenuItem.register('ui-dropdown-menu-item');
 // --------------------------------------------------------------------------
 
 export class UiDropdownMenuLabel extends WebComponent {
+  static properties = { inset: { type: Boolean } };
+  declare inset: boolean;
+
+  constructor() {
+    super();
+    this.inset = false;
+  }
+
   render() {
-    const inset = this.hasAttribute('inset');
     return html`<div
       data-slot="dropdown-menu-label"
-      ?data-inset=${inset}
+      ?data-inset=${this.inset}
       class=${dropdownMenuLabelClass()}
     ><slot></slot></div>`;
   }
@@ -540,6 +549,14 @@ export class UiDropdownMenuSub extends WebComponent {
 UiDropdownMenuSub.register('ui-dropdown-menu-sub');
 
 export class UiDropdownMenuSubTrigger extends WebComponent {
+  static properties = { inset: { type: Boolean } };
+  declare inset: boolean;
+
+  constructor() {
+    super();
+    this.inset = false;
+  }
+
   // SSR-safe: linkedom doesn't implement closest() on custom elements.
   _sub(): UiDropdownMenuSub | null {
     if (typeof this.closest !== 'function') return null;
@@ -547,7 +564,6 @@ export class UiDropdownMenuSubTrigger extends WebComponent {
   }
 
   render() {
-    const inset = this.hasAttribute('inset');
     const open = !!this._sub()?.open;
     return html`<div
       data-slot="dropdown-menu-sub-trigger"
@@ -556,7 +572,7 @@ export class UiDropdownMenuSubTrigger extends WebComponent {
       aria-haspopup="menu"
       aria-expanded=${String(open)}
       data-state=${open ? 'open' : 'closed'}
-      ?data-inset=${inset}
+      ?data-inset=${this.inset}
       class=${dropdownMenuSubTriggerClass()}
       @click=${this._onClick}
       @pointerenter=${this._onPointerEnter}

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/toggle.ts

@@ -33,7 +33,7 @@
  * Events:
  *   `ui-pressed-change` on <ui-toggle>: `{ detail: { pressed } }` after a click.
  *
- * Keyboard: native button — Enter / Space activates (via the inner <button>).
+ * Keyboard: native button. Enter / Space activates (via the inner <button>).
  *
  * Design tokens used: --muted, --muted-foreground, --accent, --accent-foreground,
  * --input, --background, --ring, --destructive.

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;