@webjsdev/ui 0.3.5 → 0.3.6

package/README.md

@@ -30,14 +30,32 @@ is configured, the components render correctly. Variant names, sizes, and
 data-attribute conventions mirror shadcn's so an AI agent's existing
 knowledge of shadcn maps directly.
 
-Tier-2 elements extend `WebComponent` from `@webjsdev/core`, a tiny
-Lit-shaped base class with `static properties` for reactive attributes,
+Tier-2 elements extend the `WebComponent({ ... })` factory from
+`@webjsdev/core`, a tiny Lit-shaped base class whose factory shape declares
+reactive attributes,
 `render()` returning an `` html`...` `` template, and declarative
 bindings (`@click`, `?attr`, `attr=`). Light DOM throughout, so Tailwind
 utility classes on authored children apply directly. The `webjsui add`
 CLI installs `@webjsdev/core` automatically when you add a Tier-2
 component.
 
+## Accessibility
+
+Tier-2 elements are accessible out of the box: they wire their own WAI-ARIA
+pattern, so you do not hand-add ARIA. Tabs cross-links triggers and panels and
+reports orientation, toggle-group uses roving tabindex with Arrow / Home / End,
+dropdown-menu declares orientation and reflects `aria-disabled`, dialog and
+alert-dialog name themselves from their title and description, tooltip wires
+`aria-describedby`, hover-card exposes `aria-haspopup` / `aria-expanded`, and
+sonner is a live region.
+
+Tier-1 class helpers return only classes, so the semantic element and ARIA are
+yours to supply. Each one's JSDoc carries an `A11y (required for accessible
+output)` block stating exactly what to add: a name on an icon-only button, a
+role on an alert, `scope` on table headers, `alt` on an avatar image, a
+labelled `<nav>` with `aria-current="page"` on pagination and breadcrumb, and
+so on. Follow that block and the markup is fully accessible.
+
 ## Install
 
 ### Option A : Webjs users (already have `@webjsdev/cli`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/ui",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "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

@@ -32,8 +32,8 @@
  *     </ui-alert-dialog-trigger>
  *     <ui-alert-dialog-content>
  *       <div class=${alertDialogHeaderClass()}>
- *         <h2 class=${alertDialogTitleClass()}>Delete account?</h2>
- *         <p class=${alertDialogDescriptionClass()}>This cannot be undone.</p>
+ *         <h2 data-slot="alert-dialog-title" class=${alertDialogTitleClass()}>Delete account?</h2>
+ *         <p data-slot="alert-dialog-description" class=${alertDialogDescriptionClass()}>This cannot be undone.</p>
  *       </div>
  *       <div class=${alertDialogFooterClass()}>
  *         <ui-alert-dialog-cancel>Cancel</ui-alert-dialog-cancel>
@@ -63,8 +63,9 @@
  *
  * Design tokens used: --background, --border, --muted-foreground.
  */
-import { WebComponent, html } from '@webjsdev/core';
+import { WebComponent, html, prop } from '@webjsdev/core';
 import { ref, createRef } from '@webjsdev/core/directives';
+import { ensureId } from '../lib/utils.ts';
 import { buttonClass, type ButtonVariant, type ButtonSize } from './button.ts';
 
 export const alertDialogContentClass = (): string =>
@@ -131,12 +132,9 @@ function unlockScroll(): void {
 // content child via prop transitions.
 // --------------------------------------------------------------------------
 
-export class UiAlertDialog extends WebComponent {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-  };
-  declare open: boolean;
-
+export class UiAlertDialog extends WebComponent({
+  open: prop(Boolean, { reflect: true }),
+}) {
   constructor() {
     super();
     this.open = false;
@@ -223,12 +221,9 @@ UiAlertDialogTrigger.register('ui-alert-dialog-trigger');
 // explicit choice via Cancel / Action).
 // --------------------------------------------------------------------------
 
-export class UiAlertDialogContent extends WebComponent {
-  static properties = {
-    size: { type: String, reflect: true },
-  };
-  declare size: 'default' | 'sm';
-
+export class UiAlertDialogContent extends WebComponent({
+  size: prop<'default' | 'sm'>(String, { reflect: true }),
+}) {
   // 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).
@@ -240,10 +235,33 @@ export class UiAlertDialogContent extends WebComponent {
   }
 
   showModal(): void {
+    this._wireLabels();
     const native = this.#dialog.value;
     if (native && !native.open) native.showModal();
   }
 
+  // Wire the alertdialog's accessible name + description to its title /
+  // description nodes at open time (an alert dialog only ever appears via
+  // showModal(), so there is no SSR id-stability concern). The title is
+  // data-slot="alert-dialog-title" (falling back to the first heading); the
+  // description is data-slot="alert-dialog-description" (falling back to the
+  // first paragraph). Author-set ARIA always wins. Inlined rather than shared
+  // with dialog.ts so `webjs ui add alert-dialog` stays self-contained.
+  _wireLabels(): void {
+    const panel = this.querySelector('[data-slot="alert-dialog-content"]');
+    if (!panel) return;
+    const title =
+      this.querySelector('[data-slot="alert-dialog-title"]') ?? this.querySelector('h1, h2, h3');
+    const desc =
+      this.querySelector('[data-slot="alert-dialog-description"]') ?? this.querySelector('p');
+    if (title && !panel.hasAttribute('aria-labelledby')) {
+      panel.setAttribute('aria-labelledby', ensureId(title as HTMLElement, 'ui-alert-title'));
+    }
+    if (desc && !panel.hasAttribute('aria-describedby')) {
+      panel.setAttribute('aria-describedby', ensureId(desc as HTMLElement, 'ui-alert-desc'));
+    }
+  }
+
   close(): void {
     const native = this.#dialog.value;
     if (native?.open) native.close();
@@ -311,14 +329,10 @@ UiAlertDialogContent.register('ui-alert-dialog-content');
 
 const ALERT_DIALOG_ACTION_GRID_STRETCH = 'group-data-[size=sm]/alert-dialog-content:w-full';
 
-export class UiAlertDialogCancel extends WebComponent {
-  static properties = {
-    variant: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-  };
-  declare variant: ButtonVariant;
-  declare size: ButtonSize;
-
+export class UiAlertDialogCancel extends WebComponent({
+  variant: prop<ButtonVariant>(String, { reflect: true }),
+  size: prop<ButtonSize>(String, { reflect: true }),
+}) {
   constructor() {
     super();
     this.variant = 'outline';
@@ -338,14 +352,10 @@ export class UiAlertDialogCancel extends WebComponent {
 }
 UiAlertDialogCancel.register('ui-alert-dialog-cancel');
 
-export class UiAlertDialogAction extends WebComponent {
-  static properties = {
-    variant: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-  };
-  declare variant: ButtonVariant;
-  declare size: ButtonSize;
-
+export class UiAlertDialogAction extends WebComponent({
+  variant: prop<ButtonVariant>(String, { reflect: true }),
+  size: prop<ButtonSize>(String, { reflect: true }),
+}) {
   constructor() {
     super();
     this.variant = 'default';

package/packages/registry/components/alert.ts

@@ -25,6 +25,11 @@
  *     </div>
  *   </div>
  *
+ * A11y (required for accessible output): put role="alert" on the container
+ * for an urgent, interrupting message, or role="status" for a polite,
+ * non-urgent update. The class helper sets no role, so without one the
+ * banner is silent to assistive tech.
+ *
  * Design tokens used: --card, --card-foreground, --destructive, --muted-foreground.
  */
 import { cn } from '../lib/utils.ts';

package/packages/registry/components/avatar.ts

@@ -23,6 +23,11 @@
  *     <div class=${avatarGroupCountClass()}>+3</div>
  *   </div>
  *
+ * A11y (required for accessible output): the <img> MUST have an alt that
+ * names the person (alt="Vivek Khandelwal"), or alt="" when a visible text
+ * fallback already names them. Always provide the fallback <span> so the
+ * avatar is still named if the image fails to load.
+ *
  * Design tokens used: --muted, --muted-foreground, --primary, --background.
  */
 import { cn } from '../lib/utils.ts';

package/packages/registry/components/badge.ts

@@ -14,6 +14,10 @@
  * The `[a&]:hover:...` hover styles only apply when the element is an `<a>`,
  * so a static `<span>` doesn't pick up an unwanted hover.
  *
+ * A11y (required for accessible output): render a static badge as a plain
+ * <span> (not focusable, no tabindex). Only an interactive badge (an <a>
+ * or <button>) is focusable, and an icon-only one needs an aria-label.
+ *
  * Design tokens used: --primary, --secondary, --destructive, --foreground,
  * --accent, --border, --ring.
  */

package/packages/registry/components/breadcrumb.ts

@@ -26,6 +26,11 @@
  *     </ol>
  *   </nav>
  *
+ * A11y (required for accessible output): wrap the list in <nav
+ * aria-label="breadcrumb">, set aria-current="page" on the current-page
+ * element, and mark each separator role="presentation" aria-hidden="true".
+ * The class helpers emit none of these.
+ *
  * Design tokens used: --muted-foreground, --foreground.
  */
 

package/packages/registry/components/button.ts

@@ -17,6 +17,12 @@
  * shadcn React's `asChild` (Slot) prop has no equivalent here: just call
  * `buttonClass(...)` and spread the classes onto whatever element you want.
  *
+ * A11y (required for accessible output): an icon-only button (the `icon`,
+ * `icon-xs`, `icon-sm`, `icon-lg` sizes) has no visible text, so it MUST
+ * carry an accessible name via aria-label (or aria-labelledby). A button
+ * that opens an overlay should also set aria-haspopup and aria-expanded.
+ * Native <button> focus and keyboard activation are already correct.
+ *
  * Design tokens used: --primary, --primary-foreground, --destructive,
  * --secondary, --secondary-foreground, --accent, --accent-foreground,
  * --background, --input, --ring.

package/packages/registry/components/dialog.ts

@@ -29,8 +29,8 @@
  *     </ui-dialog-trigger>
  *     <ui-dialog-content>
  *       <div class=${dialogHeaderClass()}>
- *         <h2 class=${dialogTitleClass()}>Edit profile</h2>
- *         <p class=${dialogDescriptionClass()}>Make changes and click save.</p>
+ *         <h2 data-slot="dialog-title" class=${dialogTitleClass()}>Edit profile</h2>
+ *         <p data-slot="dialog-description" class=${dialogDescriptionClass()}>Make changes and click save.</p>
  *       </div>
  *       <div class="grid gap-3">
  *         <label class=${labelClass()} for="dlg-name">Name</label>
@@ -63,10 +63,33 @@
  *
  * Design tokens used: --background, --border, --muted-foreground.
  */
-import { WebComponent, html, unsafeHTML } from '@webjsdev/core';
+import { WebComponent, html, unsafeHTML, prop } from '@webjsdev/core';
 import { ref, createRef } from '@webjsdev/core/directives';
+import { ensureId } from '../lib/utils.ts';
 import { buttonClass } from './button.ts';
 
+// Wires a dialog panel's accessible name + description to its title /
+// description nodes. A dialog only ever appears via showModal() (JS), so
+// resolving the relationship at open time is correct and avoids any
+// SSR id-stability concern. The title is the element marked
+// data-slot="dialog-title" (falling back to the first heading); the
+// description is data-slot="dialog-description" (falling back to the first
+// paragraph). Author-set aria-labelledby / aria-describedby always win.
+export function wireDialogLabels(host: Element, panelSelector: string): void {
+  const panel = host.querySelector(panelSelector);
+  if (!panel) return;
+  const title =
+    host.querySelector('[data-slot="dialog-title"]') ?? host.querySelector('h1, h2, h3');
+  const desc =
+    host.querySelector('[data-slot="dialog-description"]') ?? host.querySelector('p');
+  if (title && !panel.hasAttribute('aria-labelledby')) {
+    panel.setAttribute('aria-labelledby', ensureId(title as HTMLElement, 'ui-dialog-title'));
+  }
+  if (desc && !panel.hasAttribute('aria-describedby')) {
+    panel.setAttribute('aria-describedby', ensureId(desc as HTMLElement, 'ui-dialog-desc'));
+  }
+}
+
 // --------------------------------------------------------------------------
 // Class helpers for subparts.
 // --------------------------------------------------------------------------
@@ -157,12 +180,9 @@ function unlockScroll(): void {
 // to showModal() / close() its inner <dialog>.
 // --------------------------------------------------------------------------
 
-export class UiDialog extends WebComponent {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-  };
-  declare open: boolean;
-
+export class UiDialog extends WebComponent({
+  open: prop(Boolean, { reflect: true }),
+}) {
   constructor() {
     super();
     this.open = false;
@@ -257,12 +277,9 @@ UiDialogTrigger.register('ui-dialog-trigger');
 // close button. Exposes showModal() / close() so the parent <ui-dialog>
 // can drive the open state imperatively without a named slot.
 
-export class UiDialogContent extends WebComponent {
-  static properties = {
-    showCloseButton: { type: String, reflect: true, attribute: 'show-close-button' },
-  };
-  declare showCloseButton: string;
-
+export class UiDialogContent extends WebComponent({
+  showCloseButton: prop(String, { reflect: true, attribute: 'show-close-button' }),
+}) {
   // 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).
@@ -274,6 +291,7 @@ export class UiDialogContent extends WebComponent {
   }
 
   showModal(): void {
+    wireDialogLabels(this, '[data-slot="dialog-content"]');
     const native = this.#dialog.value;
     if (native && !native.open) native.showModal();
   }
@@ -359,12 +377,9 @@ UiDialogClose.register('ui-dialog-close');
 // <ui-dialog-footer>
 // --------------------------------------------------------------------------
 
-export class UiDialogFooter extends WebComponent {
-  static properties = {
-    showCloseButton: { type: String, attribute: 'show-close-button' },
-  };
-  declare showCloseButton: string | null;
-
+export class UiDialogFooter extends WebComponent({
+  showCloseButton: prop<string | null>(String, { attribute: 'show-close-button' }),
+}) {
   constructor() {
     super();
     this.showCloseButton = null;

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

@@ -55,6 +55,9 @@
  *   `type`:    omit (default) | "checkbox" | "radio".
  *   `checked`: boolean. Applies to checkbox / radio items.
  *   `value`:   string. Identifier for radio items.
+ *   `data-disabled`: boolean. Skips keyboard focus and activation, dims the
+ *                    item, and sets aria-disabled. Same attribute on a
+ *                    <ui-dropdown-menu-sub-trigger> disables the submenu.
  *
  * Events:
  *   `ui-open-change` on <ui-dropdown-menu>: `{ detail: { open } }` after a transition.
@@ -74,7 +77,8 @@
  * Design tokens used: --popover, --popover-foreground, --accent,
  * --accent-foreground, --destructive, --muted-foreground, --border.
  */
-import { WebComponent, html, unsafeHTML, signal } from '@webjsdev/core';
+import { WebComponent, html, unsafeHTML, signal, prop } from '@webjsdev/core';
+import { ensureId } from '../lib/utils.ts';
 import { positionFloating, type PopoverSide, type PopoverAlign } from './popover.ts';
 
 // --------------------------------------------------------------------------
@@ -116,12 +120,9 @@ const SUB_CLOSE_DELAY = 200;
 // <ui-dropdown-menu>
 // --------------------------------------------------------------------------
 
-export class UiDropdownMenu extends WebComponent {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-  };
-  declare open: boolean;
-
+export class UiDropdownMenu extends WebComponent({
+  open: prop(Boolean, { reflect: true }),
+}) {
   _typeBuffer = '';
   _typeBufferTimer: number | undefined;
 
@@ -156,15 +157,58 @@ export class UiDropdownMenu extends WebComponent {
     queueMicrotask(() => this._afterRender());
   }
 
+  connectedCallback(): void {
+    super.connectedCallback?.();
+    // webjs projects slotted light-DOM children in a pass after the first
+    // render, so the trigger button and the menu are not in place at
+    // connect. Defer to the next frame, when the projection has run.
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => this._wireAria());
+    }
+  }
+
   _afterRender(): void {
     const content = this._content();
     if (content) {
       this._syncContentPopover(content);
     }
+    this._wireAria();
     if (this.open) this._setup();
     else this._teardown();
   }
 
+  // The trigger wraps an author-supplied control (usually a <button>). Expose
+  // the menu relationship on that focusable control: aria-haspopup announces
+  // it opens a menu, aria-expanded tracks open state, aria-controls points at
+  // the menu, and the menu is labelled back by the trigger. Done at runtime
+  // because the menu is JS-driven (never shown without script).
+  _triggerControl(): HTMLElement | null {
+    const trigger = this.querySelector('ui-dropdown-menu-trigger');
+    if (!trigger) return null;
+    return (
+      trigger.querySelector<HTMLElement>('button, [role="button"], a[href], [tabindex]') ??
+      (trigger as HTMLElement)
+    );
+  }
+
+  _menuEl(): HTMLElement | null {
+    return this.querySelector('ui-dropdown-menu-content [role="menu"]');
+  }
+
+  _wireAria(): void {
+    const control = this._triggerControl();
+    if (!control) return;
+    control.setAttribute('aria-haspopup', 'menu');
+    control.setAttribute('aria-expanded', String(this.open));
+    const menu = this._menuEl();
+    if (!menu) return;
+    const menuId = ensureId(menu, 'ui-menu');
+    control.setAttribute('aria-controls', menuId);
+    if (!menu.hasAttribute('aria-label') && !menu.hasAttribute('aria-labelledby')) {
+      menu.setAttribute('aria-labelledby', ensureId(control, 'ui-menu-trigger'));
+    }
+  }
+
   _content(): HTMLElement | null {
     return this.querySelector('ui-dropdown-menu-content [popover]');
   }
@@ -329,6 +373,7 @@ export class UiDropdownMenuContent extends WebComponent {
     return html`<div
       data-slot="dropdown-menu-content"
       role="menu"
+      aria-orientation="vertical"
       popover="manual"
       class=${dropdownMenuContentClass()}
     ><slot></slot></div>`;
@@ -340,14 +385,10 @@ UiDropdownMenuContent.register('ui-dropdown-menu-content');
 // <ui-dropdown-menu-item>
 // --------------------------------------------------------------------------
 
-export class UiDropdownMenuItem extends WebComponent {
-  static properties = {
-    variant: { type: String, reflect: true },
-    inset: { type: Boolean },
-  };
-  declare variant: 'default' | 'destructive';
-  declare inset: boolean;
-
+export class UiDropdownMenuItem extends WebComponent({
+  variant: prop<'default' | 'destructive'>(String, { reflect: true }),
+  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
@@ -361,12 +402,19 @@ export class UiDropdownMenuItem extends WebComponent {
   }
 
   render() {
+    // `data-disabled` on the host is the historical disabled marker (focus
+    // skips it, the click / pointer handlers bail on it). Mirror it onto the
+    // inner menuitem as both data-disabled (CSS) and aria-disabled, so the
+    // state also reaches assistive tech.
+    const disabled = typeof this.hasAttribute === 'function' && this.hasAttribute('data-disabled');
     return html`<div
       data-slot="dropdown-menu-item"
       role="menuitem"
       tabindex="-1"
       data-variant=${this.variant}
       ?data-inset=${this.inset}
+      ?data-disabled=${disabled}
+      aria-disabled=${disabled ? 'true' : 'false'}
       ?data-highlighted=${this.#highlighted.get()}
       class=${dropdownMenuItemClass()}
       @click=${this._onClick}
@@ -402,10 +450,7 @@ UiDropdownMenuItem.register('ui-dropdown-menu-item');
 // <ui-dropdown-menu-label>
 // --------------------------------------------------------------------------
 
-export class UiDropdownMenuLabel extends WebComponent {
-  static properties = { inset: { type: Boolean } };
-  declare inset: boolean;
-
+export class UiDropdownMenuLabel extends WebComponent({ inset: Boolean }) {
   constructor() {
     super();
     this.inset = false;
@@ -468,12 +513,9 @@ UiDropdownMenuGroup.register('ui-dropdown-menu-group');
 // Submenu: Sub / SubTrigger / SubContent
 // --------------------------------------------------------------------------
 
-export class UiDropdownMenuSub extends WebComponent {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-  };
-  declare open: boolean;
-
+export class UiDropdownMenuSub extends WebComponent({
+  open: prop(Boolean, { reflect: true }),
+}) {
   _closeTimer: number | undefined;
 
   constructor() {
@@ -555,10 +597,7 @@ export class UiDropdownMenuSub extends WebComponent {
 }
 UiDropdownMenuSub.register('ui-dropdown-menu-sub');
 
-export class UiDropdownMenuSubTrigger extends WebComponent {
-  static properties = { inset: { type: Boolean } };
-  declare inset: boolean;
-
+export class UiDropdownMenuSubTrigger extends WebComponent({ inset: Boolean }) {
   constructor() {
     super();
     this.inset = false;
@@ -572,14 +611,17 @@ export class UiDropdownMenuSubTrigger extends WebComponent {
 
   render() {
     const open = !!this._sub()?.open;
+    const disabled = typeof this.hasAttribute === 'function' && this.hasAttribute('data-disabled');
     return html`<div
       data-slot="dropdown-menu-sub-trigger"
       role="menuitem"
       tabindex="-1"
       aria-haspopup="menu"
       aria-expanded=${String(open)}
+      aria-disabled=${disabled ? 'true' : 'false'}
       data-state=${open ? 'open' : 'closed'}
       ?data-inset=${this.inset}
+      ?data-disabled=${disabled}
       class=${dropdownMenuSubTriggerClass()}
       @click=${this._onClick}
       @pointerenter=${this._onPointerEnter}
@@ -606,6 +648,7 @@ export class UiDropdownMenuSubContent extends WebComponent {
     return html`<div
       data-slot="dropdown-menu-sub-content"
       role="menu"
+      aria-orientation="vertical"
       popover="manual"
       class=${dropdownMenuSubContentClass()}
     ><slot></slot></div>`;

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

@@ -38,7 +38,8 @@
  *
  * Design tokens used: --popover, --popover-foreground, --border.
  */
-import { WebComponent, html } from '@webjsdev/core';
+import { WebComponent, html, prop } from '@webjsdev/core';
+import { ensureId } from '../lib/utils.ts';
 import { positionFloating, type PopoverSide, type PopoverAlign } from './popover.ts';
 
 // `fixed m-0` opts out of the UA `[popover]` auto-centering margin so
@@ -52,18 +53,13 @@ export const hoverCardContentClass = (): string =>
 // <ui-hover-card>
 // --------------------------------------------------------------------------
 
-export class UiHoverCard extends WebComponent {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-    openDelay: { type: Number },
-    closeDelay: { type: Number },
-  };
-  declare open: boolean;
+export class UiHoverCard extends WebComponent({
+  open: prop(Boolean, { reflect: true }),
   // `openDelay` / `closeDelay` ride the `open-delay` / `close-delay`
   // attributes (shadcn parity), read as typed props.
-  declare openDelay: number;
-  declare closeDelay: number;
-
+  openDelay: Number,
+  closeDelay: Number,
+}) {
   _showTimer: number | undefined;
   _hideTimer: number | undefined;
 
@@ -74,6 +70,37 @@ export class UiHoverCard extends WebComponent {
     this.closeDelay = 300;
   }
 
+  connectedCallback(): void {
+    super.connectedCallback?.();
+    // webjs projects slotted light-DOM children after the first render, so
+    // the trigger control is not in place at connect. Defer to the next
+    // frame, when the projection has run.
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => this._wireAria());
+    }
+  }
+
+  // The trigger also opens on focus (see the @focusin handler), so it is
+  // keyboard-reachable: expose the popup relationship on the focusable
+  // control. aria-expanded is refreshed on every open transition.
+  _control(): HTMLElement | null {
+    const t = this.querySelector('ui-hover-card-trigger');
+    if (!t) return null;
+    return (
+      t.querySelector<HTMLElement>('a[href], button, [tabindex], [role="button"]') ??
+      (t as HTMLElement)
+    );
+  }
+
+  _wireAria(): void {
+    const control = this._control();
+    if (!control) return;
+    control.setAttribute('aria-haspopup', 'dialog');
+    control.setAttribute('aria-expanded', String(this.open));
+    const content = this.querySelector<HTMLElement>('ui-hover-card-content [role="dialog"]');
+    if (content) control.setAttribute('aria-controls', ensureId(content, 'ui-hovercard'));
+  }
+
   // Back-compat getter.
   get isOpen(): boolean { return this.open; }
 
@@ -98,8 +125,12 @@ export class UiHoverCard extends WebComponent {
     if (!changedProperties.has('open')) return;
     if (changedProperties.get('open') === undefined) return;
     // Wait one microtask for <ui-hover-card-content>'s inner [popover]
-    // element to commit; we drive its showPopover() / hidePopover().
-    queueMicrotask(() => this._syncContent());
+    // element to commit; we drive its showPopover() / hidePopover() and
+    // refresh the trigger's aria-expanded.
+    queueMicrotask(() => {
+      this._wireAria();
+      this._syncContent();
+    });
   }
 
   _syncContent(): void {

package/packages/registry/components/pagination.ts

@@ -23,6 +23,11 @@
  *     </ul>
  *   </nav>
  *
+ * A11y (required for accessible output): wrap the list in <nav
+ * aria-label="pagination">, set aria-current="page" on the active page
+ * link, give an icon-only Previous / Next control an aria-label, and mark
+ * the ellipsis aria-hidden="true". The class helpers emit none of these.
+ *
  * Design tokens used: inherited from buttonClass.
  */
 import { cn } from '../lib/utils.ts';

package/packages/registry/components/progress.ts

@@ -16,6 +16,11 @@
  *   <!-- Indeterminate (no `value` attribute): -->
  *   <progress class=${progressClass()}></progress>
  *
+ * A11y (required for accessible output): give the <progress> an accessible
+ * name with aria-label (or a <label for>), e.g. aria-label="Upload
+ * progress". The native element supplies the role and value; only the name
+ * is the author's responsibility.
+ *
  * Design tokens used: --primary.
  */
 

package/packages/registry/components/separator.ts

@@ -13,6 +13,11 @@
  *        class=${separatorClass({ orientation: 'vertical' })}
  *        data-orientation="vertical"></div>
  *
+ * A11y (required for accessible output): a meaningful divider needs
+ * role="separator" plus aria-orientation. A purely decorative one needs
+ * role="none" (or aria-hidden="true") so assistive tech does not announce
+ * an empty separator.
+ *
  * Design tokens used: --border.
  */
 import { cn } from '../lib/utils.ts';

package/packages/registry/components/skeleton.ts

@@ -10,6 +10,11 @@
  *   <div class=${cn(skeletonClass(), 'h-4 w-32')}></div>
  *   <div class=${cn(skeletonClass(), 'h-12 w-12 rounded-full')}></div>
  *
+ * A11y (required for accessible output): a skeleton is a decorative
+ * placeholder, so hide it from assistive tech with aria-hidden="true" (or
+ * mark the loading region aria-busy="true"). Announce the real content
+ * once it replaces the skeleton.
+ *
  * Design tokens used: --accent.
  */
 

package/packages/registry/components/sonner.ts

@@ -43,7 +43,7 @@
  *
  * Design tokens used: --popover, --popover-foreground, --border, --radius.
  */
-import { WebComponent, html, repeat, unsafeHTML, signal } from '@webjsdev/core';
+import { WebComponent, html, repeat, unsafeHTML, signal, prop } from '@webjsdev/core';
 
 type ToastType = 'default' | 'success' | 'error' | 'info' | 'warning' | 'loading';
 
@@ -134,11 +134,9 @@ const TYPE_ICON_COLOR: Record<ToastType, string> = {
   loading: 'text-muted-foreground',
 };
 
-export class UiSonner extends WebComponent {
-  static properties = {
-    position: { type: String, reflect: true },
-  };
-  declare position: SonnerPosition;
+export class UiSonner extends WebComponent({
+  position: prop<SonnerPosition>(String, { reflect: true }),
+}) {
   items = signal<ToastItem[]>([]);
 
   constructor() {
@@ -190,8 +188,18 @@ export class UiSonner extends WebComponent {
 
   render() {
     const pos = POSITIONS[this.position] ?? POSITIONS['bottom-right'];
+    // The container is a persistent live region: it is in the DOM from the
+    // first render (even with zero toasts), so a screen reader announces
+    // each toast as it is inserted. It defaults to polite; an `error` toast
+    // carries its own role="alert" (assertive) and that innermost live
+    // region wins for that item.
     return html`<div
       data-slot="sonner"
+      role="region"
+      aria-label="Notifications"
+      aria-live="polite"
+      aria-relevant="additions text"
+      aria-atomic="false"
       class=${`pointer-events-none fixed z-[100] flex flex-col gap-2 ${pos}`}
     >
       ${repeat(

package/packages/registry/components/table.ts

@@ -18,8 +18,8 @@
  *     <table class=${tableClass()}>
  *       <thead class=${tableHeaderClass()}>
  *         <tr class=${tableRowClass()}>
- *           <th class=${tableHeadClass()}>Name</th>
- *           <th class=${tableHeadClass()}>Status</th>
+ *           <th scope="col" class=${tableHeadClass()}>Name</th>
+ *           <th scope="col" class=${tableHeadClass()}>Status</th>
  *         </tr>
  *       </thead>
  *       <tbody class=${tableBodyClass()}>
@@ -32,6 +32,11 @@
  *     </table>
  *   </div>
  *
+ * A11y (required for accessible output): every header cell needs a scope
+ * (scope="col" on a column header, scope="row" on a row header) so screen
+ * readers map cells to their headers. Add a <caption> naming the table's
+ * purpose (it can be visually hidden if a heading already names it).
+ *
  * Design tokens used: --muted, --muted-foreground, --foreground.
  */
 

package/packages/registry/components/tabs.ts

@@ -43,8 +43,11 @@
  * Design tokens used: --muted, --muted-foreground, --foreground, --background,
  * --input, --ring.
  */
-import { WebComponent, html } from '@webjsdev/core';
-import { cn } from '../lib/utils.ts';
+import { WebComponent, html, prop } from '@webjsdev/core';
+import { cn, ensureId } from '../lib/utils.ts';
+
+// A tab `value` becomes part of an id, so reduce it to id-safe characters.
+const idSafe = (s: string): string => s.replace(/[^A-Za-z0-9_-]/g, '-');
 
 // --------------------------------------------------------------------------
 // Class helpers
@@ -92,20 +95,29 @@ const TABS_CONTENT_CLASS = 'flex-1 outline-none';
 // requestUpdate() to re-render against the new parent value.
 // --------------------------------------------------------------------------
 
-export class UiTabs extends WebComponent {
-  static properties = {
-    value: { type: String, reflect: true },
-    orientation: { type: String, reflect: true },
-  };
-  declare value: string;
-  declare orientation: 'horizontal' | 'vertical';
-
+export class UiTabs extends WebComponent({
+  value: prop(String, { reflect: true }),
+  orientation: prop<'horizontal' | 'vertical'>(String, { reflect: true }),
+}) {
   constructor() {
     super();
     this.value = '';
     this.orientation = 'horizontal';
   }
 
+  // Stable per-instance scope so a trigger and its panel agree on the
+  // shared id stem (`<scope>-trigger-<value>` / `<scope>-panel-<value>`)
+  // even when several tab sets reuse the same `value` names on one page.
+  get scopeId(): string {
+    return ensureId(this, 'ui-tabs');
+  }
+
+  // Builds the trigger / panel id pair a child derives from its `value`.
+  idsFor(value: string): { trigger: string; panel: string } {
+    const v = idSafe(value);
+    return { trigger: `${this.scopeId}-trigger-${v}`, panel: `${this.scopeId}-panel-${v}` };
+  }
+
   render() {
     return html`<div
       data-slot="tabs"
@@ -130,7 +142,7 @@ export class UiTabs extends WebComponent {
 
   _broadcast(): void {
     this.querySelectorAll<WebComponent>(
-      'ui-tabs-trigger, ui-tabs-content',
+      'ui-tabs-list, ui-tabs-trigger, ui-tabs-content',
     ).forEach((el) => el.requestUpdate?.());
   }
 }
@@ -140,21 +152,25 @@ UiTabs.register('ui-tabs');
 // <ui-tabs-list>
 // --------------------------------------------------------------------------
 
-export class UiTabsList extends WebComponent {
-  static properties = {
-    variant: { type: String, reflect: true },
-  };
-  declare variant: TabsListVariant;
-
+export class UiTabsList extends WebComponent({
+  variant: prop<TabsListVariant>(String, { reflect: true }),
+}) {
   constructor() {
     super();
     this.variant = 'default';
   }
 
+  get _tabs(): UiTabs | null {
+    if (typeof this.closest !== 'function') return null;
+    return this.closest('ui-tabs') as UiTabs | null;
+  }
+
   render() {
+    const orientation = this._tabs?.orientation ?? 'horizontal';
     return html`<div
       data-slot="tabs-list"
       role="tablist"
+      aria-orientation=${orientation}
       data-variant=${this.variant}
       class=${tabsListClass({ variant: this.variant })}
     ><slot></slot></div>`;
@@ -166,12 +182,9 @@ UiTabsList.register('ui-tabs-list');
 // <ui-tabs-trigger value="...">
 // --------------------------------------------------------------------------
 
-export class UiTabsTrigger extends WebComponent {
-  static properties = {
-    value: { type: String, reflect: true },
-  };
-  declare value: string;
-
+export class UiTabsTrigger extends WebComponent({
+  value: prop(String, { reflect: true }),
+}) {
   constructor() {
     super();
     this.value = '';
@@ -188,10 +201,13 @@ export class UiTabsTrigger extends WebComponent {
   render() {
     const tabs = this._tabs;
     const active = !!tabs && tabs.value === this.value && this.value !== '';
+    const ids = tabs && this.value ? tabs.idsFor(this.value) : null;
     return html`<button
       type="button"
       role="tab"
       data-slot="tabs-trigger"
+      id=${ids ? ids.trigger : ''}
+      aria-controls=${ids ? ids.panel : ''}
       data-state=${active ? 'active' : 'inactive'}
       aria-selected=${String(active)}
       tabindex=${active ? '0' : '-1'}
@@ -235,12 +251,9 @@ UiTabsTrigger.register('ui-tabs-trigger');
 // <ui-tabs-content value="...">
 // --------------------------------------------------------------------------
 
-export class UiTabsContent extends WebComponent {
-  static properties = {
-    value: { type: String, reflect: true },
-  };
-  declare value: string;
-
+export class UiTabsContent extends WebComponent({
+  value: prop(String, { reflect: true }),
+}) {
   constructor() {
     super();
     this.value = '';
@@ -254,14 +267,20 @@ export class UiTabsContent extends WebComponent {
   render() {
     const tabs = this._tabs;
     const active = !!tabs && tabs.value === this.value && this.value !== '';
+    const ids = tabs && this.value ? tabs.idsFor(this.value) : null;
     // The host needs to be hidden when inactive so its rendered <section>
     // is removed from layout (light DOM has no :host CSS to scope this).
     // Use the native `hidden` IDL property rather than imperative
-    // setAttribute, so it reads as a property assignment.
+    // setAttribute, so it reads as a property assignment. `inert` on the
+    // host additionally pulls an inactive panel (and anything focusable
+    // inside it) out of the tab order and the accessibility tree.
     this.hidden = !active;
+    this.inert = !active;
     return html`<section
       data-slot="tabs-content"
       role="tabpanel"
+      id=${ids ? ids.panel : ''}
+      aria-labelledby=${ids ? ids.trigger : ''}
       tabindex="0"
       data-state=${active ? 'active' : 'inactive'}
       class=${TABS_CONTENT_CLASS}

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

@@ -41,12 +41,14 @@
  * Events:
  *   `ui-value-change` on <ui-toggle-group>: `{ detail: { value } }` after selection changes.
  *
- * Keyboard: Enter / Space toggles the focused item (native button activation).
+ * Keyboard: Arrow keys move focus between items (roving tabindex, so the
+ * group is a single Tab stop), Home / End jump to the first / last item, and
+ * Enter / Space toggles the focused item.
  *
  * Design tokens used: inherited from toggleClass (--muted, --accent, --ring,
  * --input, --destructive).
  */
-import { WebComponent, html } from '@webjsdev/core';
+import { WebComponent, html, prop } from '@webjsdev/core';
 import { cn } from '../lib/utils.ts';
 import { toggleClass, type ToggleVariant, type ToggleSize } from './toggle.ts';
 
@@ -66,22 +68,14 @@ const ITEM_EXTRA =
 // their own renders before we read / write their state.
 // --------------------------------------------------------------------------
 
-export class UiToggleGroup extends WebComponent {
-  static properties = {
-    value: { type: String, reflect: true },
-    type: { type: String, reflect: true },
-    variant: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-    spacing: { type: String, reflect: true },
-    orientation: { type: String, reflect: true },
-  };
-  declare value: string;
-  declare type: 'single' | 'multiple';
-  declare variant: ToggleVariant;
-  declare size: ToggleSize;
-  declare spacing: string;
-  declare orientation: 'horizontal' | 'vertical';
-
+export class UiToggleGroup extends WebComponent({
+  value: prop(String, { reflect: true }),
+  type: prop<'single' | 'multiple'>(String, { reflect: true }),
+  variant: prop<ToggleVariant>(String, { reflect: true }),
+  size: prop<ToggleSize>(String, { reflect: true }),
+  spacing: prop(String, { reflect: true }),
+  orientation: prop<'horizontal' | 'vertical'>(String, { reflect: true }),
+}) {
   constructor() {
     super();
     this.value = '';
@@ -117,9 +111,15 @@ export class UiToggleGroup extends WebComponent {
     queueMicrotask(() => this._reflectItems());
   }
 
+  _items(): UiToggleGroupItem[] {
+    return Array.from(this.querySelectorAll<UiToggleGroupItem>('ui-toggle-group-item'));
+  }
+
   _reflectItems(): void {
     const values = this._values;
-    this.querySelectorAll<UiToggleGroupItem>('ui-toggle-group-item').forEach((item) => {
+    const items = this._items();
+    const current = items.find((el) => el.tabIndex === 0);
+    items.forEach((item) => {
       const on = !!item.value && values.has(item.value);
       // Reflect both on the host (for CSS sibling selectors like
       // data-[spacing=0]:first:rounded-l-md that need to target the host
@@ -127,6 +127,31 @@ export class UiToggleGroup extends WebComponent {
       // item's render() refreshes its inner styling.
       item.pressed = on;
     });
+    this._roving(items, current);
+  }
+
+  // Roving tabindex (APG): exactly one item is in the tab order. Prefer the
+  // currently-focused item, then whichever was tabbable, then the first
+  // selected item, then the first item. Arrow keys move focus and shift the
+  // single tabbable slot via `focusItem`.
+  _roving(items: UiToggleGroupItem[], current?: UiToggleGroupItem): void {
+    if (!items.length) return;
+    const values = this._values;
+    const active =
+      typeof document !== 'undefined' ? (document.activeElement as Element | null) : null;
+    const focused = active ? items.find((i) => i === active) : undefined;
+    const selected = items.find((i) => !!i.value && values.has(i.value));
+    const tabbable = focused ?? current ?? selected ?? items[0];
+    items.forEach((item) => {
+      item.tabIndex = item === tabbable ? 0 : -1;
+    });
+  }
+
+  focusItem(item: UiToggleGroupItem): void {
+    this._items().forEach((el) => {
+      el.tabIndex = el === item ? 0 : -1;
+    });
+    item.focus();
   }
 
   _onItemClick = (e: Event): void => {
@@ -159,14 +184,10 @@ UiToggleGroup.register('ui-toggle-group');
 // Tailwind variant selectors on the joined-spacing rounded corners).
 // --------------------------------------------------------------------------
 
-export class UiToggleGroupItem extends WebComponent {
-  static properties = {
-    value: { type: String, reflect: true },
-    pressed: { type: Boolean, reflect: true },
-  };
-  declare value: string;
-  declare pressed: boolean;
-
+export class UiToggleGroupItem extends WebComponent({
+  value: prop(String, { reflect: true }),
+  pressed: prop(Boolean, { reflect: true }),
+}) {
   constructor() {
     super();
     this.value = '';
@@ -193,7 +214,10 @@ export class UiToggleGroupItem extends WebComponent {
   connectedCallback(): void {
     this.dataset.slot = 'toggle-group-item';
     this.role = 'button';
-    this.tabIndex = 0;
+    // Roving tabindex: start outside the tab order. The group promotes
+    // exactly one item to tabindex 0 in _reflectItems (runs after first
+    // render); Arrow keys move focus and the tabbable slot from there.
+    this.tabIndex = -1;
     this.addEventListener('click', this._onClick);
     this.addEventListener('keydown', this._onKeyDown);
     super.connectedCallback?.();
@@ -230,6 +254,24 @@ export class UiToggleGroupItem extends WebComponent {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       this._onClick();
+      return;
+    }
+    const group = this._group;
+    if (!group) return;
+    const horizontal = group.orientation !== 'vertical';
+    const nextKey = horizontal ? 'ArrowRight' : 'ArrowDown';
+    const prevKey = horizontal ? 'ArrowLeft' : 'ArrowUp';
+    const items = group._items();
+    const idx = items.indexOf(this);
+    if (idx === -1) return;
+    let target: UiToggleGroupItem | null = null;
+    if (e.key === nextKey) target = items[(idx + 1) % items.length] ?? null;
+    else if (e.key === prevKey) target = items[(idx - 1 + items.length) % items.length] ?? null;
+    else if (e.key === 'Home') target = items[0] ?? null;
+    else if (e.key === 'End') target = items[items.length - 1] ?? null;
+    if (target) {
+      e.preventDefault();
+      group.focusItem(target);
     }
   };
 }

package/packages/registry/components/toggle.ts

@@ -38,7 +38,7 @@
  * Design tokens used: --muted, --muted-foreground, --accent, --accent-foreground,
  * --input, --background, --ring, --destructive.
  */
-import { WebComponent, html } from '@webjsdev/core';
+import { WebComponent, html, prop } from '@webjsdev/core';
 import { cn } from '../lib/utils.ts';
 
 // cursor-pointer + select-none on BASE for both call sites: the
@@ -76,18 +76,12 @@ export function toggleClass(opts: { variant?: ToggleVariant; size?: ToggleSize }
 // project through the default slot inside the inner button.
 // --------------------------------------------------------------------------
 
-export class UiToggle extends WebComponent {
-  static properties = {
-    pressed: { type: Boolean, reflect: true },
-    variant: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-  };
-  declare pressed: boolean;
-  declare variant: ToggleVariant;
-  declare size: ToggleSize;
-  declare disabled: boolean;
-
+export class UiToggle extends WebComponent({
+  pressed: prop(Boolean, { reflect: true }),
+  variant: prop<ToggleVariant>(String, { reflect: true }),
+  size: prop<ToggleSize>(String, { reflect: true }),
+  disabled: prop(Boolean, { reflect: true }),
+}) {
   constructor() {
     super();
     this.pressed = false;

package/packages/registry/components/tooltip.ts

@@ -40,7 +40,8 @@
  *
  * Design tokens used: --foreground, --background.
  */
-import { WebComponent, html } from '@webjsdev/core';
+import { WebComponent, html, prop } from '@webjsdev/core';
+import { ensureId } from '../lib/utils.ts';
 import { positionFloating, type PopoverSide, type PopoverAlign } from './popover.ts';
 
 // UA `[popover]` defaults paint a bordered, padded panel centered with
@@ -61,18 +62,13 @@ let lastTooltipHideAt = 0;
 // <ui-tooltip>
 // --------------------------------------------------------------------------
 
-export class UiTooltip extends WebComponent {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-    delayDuration: { type: Number },
-    skipDelayDuration: { type: Number },
-  };
-  declare open: boolean;
+export class UiTooltip extends WebComponent({
+  open: prop(Boolean, { reflect: true }),
   // `delayDuration` / `skipDelayDuration` ride the `delay-duration` /
   // `skip-delay-duration` attributes (shadcn parity), read as typed props.
-  declare delayDuration: number;
-  declare skipDelayDuration: number;
-
+  delayDuration: Number,
+  skipDelayDuration: Number,
+}) {
   _showTimer: number | undefined;
   _hideTimer: number | undefined;
 
@@ -83,6 +79,36 @@ export class UiTooltip extends WebComponent {
     this.skipDelayDuration = 300;
   }
 
+  connectedCallback(): void {
+    super.connectedCallback?.();
+    // webjs projects slotted light-DOM children in a pass after the first
+    // render, so the trigger's focusable control is not in place yet at
+    // connect / firstUpdated. Defer to the next frame, by which point the
+    // projection has run and both the control and the tip content exist.
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => this._wireAria());
+    }
+  }
+
+  // APG tooltip wiring: the focusable trigger references the tip via
+  // aria-describedby, so a screen reader appends the tip text to the
+  // trigger's own name ("Help, button, Helpful tip"). The tip is JS-driven,
+  // so doing this at runtime is correct.
+  _wireAria(): void {
+    const triggerHost = this.querySelector('ui-tooltip-trigger');
+    const content = this.querySelector<HTMLElement>('ui-tooltip-content [role="tooltip"]');
+    if (!triggerHost || !content) return;
+    const control =
+      triggerHost.querySelector<HTMLElement>('button, a[href], [tabindex], [role="button"]') ??
+      (triggerHost as HTMLElement);
+    const id = ensureId(content, 'ui-tooltip');
+    const existing = control.getAttribute('aria-describedby');
+    if (!existing) control.setAttribute('aria-describedby', id);
+    else if (!existing.split(/\s+/).includes(id)) {
+      control.setAttribute('aria-describedby', `${existing} ${id}`);
+    }
+  }
+
   // Back-compat getter for tests + external code that read `el.isOpen`
   // alongside the reactive `open` prop.
   get isOpen(): boolean { return this.open; }

package/packages/registry/lib/utils.ts

@@ -100,6 +100,33 @@ function variantPrefix(token: string): string {
   return i === -1 ? '' : token.slice(0, i + 1);
 }
 
+// ---------------------------------------------------------------------------
+// Stable DOM ids for wiring ARIA relationships (aria-controls /
+// aria-labelledby / aria-describedby) between sibling light-DOM nodes.
+// A monotonic counter is fine for uniqueness within a document: the id is
+// only consumed as an attribute value, never persisted. When SSR emits an
+// id on a host element, the upgraded element reuses it (ensureId is a no-op
+// when an id is already present), so the server and client agree.
+// ---------------------------------------------------------------------------
+
+let _idSeq = 0;
+
+/** A fresh, document-unique id string with a readable prefix. */
+export function domId(prefix = 'ui'): string {
+  _idSeq += 1;
+  return `${prefix}-${_idSeq}`;
+}
+
+/**
+ * Returns `el.id`, assigning a generated one (prefix-based) when absent.
+ * Idempotent, so an id already present (author-set, or carried over from
+ * SSR) is reused unchanged.
+ */
+export function ensureId(el: { id: string }, prefix = 'ui'): string {
+  if (!el.id) el.id = domId(prefix);
+  return el.id;
+}
+
 // ---------------------------------------------------------------------------
 // Custom-element base: SSR-safe. In the browser `Base = HTMLElement`. On
 // the server (Node, during SSR) `HTMLElement` is undefined; we substitute

package/packages/registry/registry.json

@@ -188,7 +188,8 @@
       "name": "dialog",
       "type": "registry:ui",
       "registryDependencies": [
-        "lib-utils"
+        "lib-utils",
+        "button"
       ],
       "dependencies": [
         "@webjsdev/core"
@@ -203,6 +204,9 @@
     {
       "name": "dropdown-menu",
       "type": "registry:ui",
+      "registryDependencies": [
+        "popover"
+      ],
       "dependencies": [
         "@webjsdev/core"
       ],
@@ -216,6 +220,9 @@
     {
       "name": "hover-card",
       "type": "registry:ui",
+      "registryDependencies": [
+        "popover"
+      ],
       "dependencies": [
         "@webjsdev/core"
       ],
@@ -452,6 +459,9 @@
     {
       "name": "toggle-group",
       "type": "registry:ui",
+      "registryDependencies": [
+        "toggle"
+      ],
       "dependencies": [
         "@webjsdev/core"
       ],
@@ -465,6 +475,9 @@
     {
       "name": "tooltip",
       "type": "registry:ui",
+      "registryDependencies": [
+        "popover"
+      ],
       "dependencies": [
         "@webjsdev/core"
       ],