@pienter/ui 0.2.0 → 0.5.0

package/components/navigation/sidebar/context.ts

@@ -0,0 +1,21 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+import type { SubmenuPosition } from '../../../utils/navigation/sidebar.js';
+
+/** What `Sidebar.vue` hands down to the recursive `SidebarMenuItem`. */
+export interface SidebarContext {
+    activeHref: ComputedRef<string | null>;
+    expandedKeys: Ref<Set<string>>;
+    /** Group key whose collapsed-rail flyout is open, or null. */
+    openKey: Ref<string | null>;
+    submenuActive: ComputedRef<boolean>;
+    /** Shared by every flyout; null before the first measure. */
+    submenuPos: Ref<SubmenuPosition | null>;
+
+    onToggle: (key: string, isTopLevel: boolean) => void;
+    /** `topLevelKey` is null for a plain entry, which dismisses the flyout. */
+    onEntryEnter: (topLevelKey: string | null) => void;
+    onEntryKeydown: (event: KeyboardEvent) => void;
+}
+
+export const SIDEBAR_CONTEXT: InjectionKey<SidebarContext> =
+    Symbol('pui-sidebar');

package/components/navigation/sidebar/sidebar.css

@@ -1,10 +1,5 @@
 @layer components {
-    /* ============================================================
-   * Block — the navigation landmark, also the drawer mount point on
-   * mobile. Desktop: a fixed-width column owned by the consumer's
-   * layout shell. Mobile: occupies the full viewport with a backdrop
-   * sibling and a slide-in panel.
-   * ============================================================ */
+    /* Block — the navigation landmark, also the drawer mount point on mobile */
     .pui-sidebar {
         --pui-sidebar-width: var(--space-sidebar-width);
         --pui-sidebar-width-collapsed: var(--space-sidebar-width-collapsed);
@@ -21,10 +16,19 @@
         width: var(--pui-sidebar-width-collapsed);
     }
 
-    /* ============================================================
-   * Panel — the visible column / drawer body containing brand, menu,
-   * footer.
-   * ============================================================ */
+    /* Lift the root, not the flyout: a fixed child escapes overflow but not
+   * a stacking context. Scoped to "flyout open" because this rule is itself
+   * a context trigger, and unscoped it trapped the mobile drawer. */
+    @media (min-width: 768px) {
+        .pui-sidebar:has(.pui-sidebar__group[data-submenu-state='open']) {
+            /* `--layer-below` only means "behind the rail" while the sidebar
+           is the context containing it. */
+            isolation: isolate;
+            z-index: var(--layer-3);
+        }
+    }
+
+    /* Panel — the visible column / drawer body containing brand, menu, footer */
     .pui-sidebar__panel {
         display: flex;
         flex-direction: column;
@@ -35,17 +39,12 @@
         background: var(--bg-clr-surface);
     }
 
-    /* ============================================================
-   * Backdrop — only meaningful in mobile drawer mode. Hidden on desktop.
-   * ============================================================ */
+    /* Backdrop — only meaningful in mobile drawer mode */
     .pui-sidebar__backdrop {
         display: none;
     }
 
-    /* ============================================================
-   * Brand region — top of the panel. Layout owned by consumer markup
-   * inside the slot; we just provide consistent spacing.
-   * ============================================================ */
+    /* Brand region — top of the panel */
     .pui-sidebar__brand {
         display: flex;
         align-items: center;
@@ -53,29 +52,48 @@
         padding-block: var(--space-2xs);
     }
 
-    /* Hide brand inner text when collapsed; consumer markup with
-   * `data-keep-when-collapsed` survives. */
+    /* `data-keep-when-collapsed` survives; the rest would spill out of the
+   * rail, which is narrower than most product names. */
     .pui-sidebar[data-state='collapsed']
         .pui-sidebar__brand
         > :not([data-keep-when-collapsed]) {
-        /* leave layout untouched — many consumers want a wordmark to fade
-     * out while the mark stays — this is the default rule. Consumers
-     * mark the persistent element. */
+        display: none;
+    }
+
+    .pui-sidebar[data-state='collapsed'] .pui-sidebar__brand {
+        justify-content: center;
     }
 
-    /* ============================================================
-   * Menu list — the data-driven menu region.
-   * ============================================================ */
-    .pui-sidebar__menu {
+    /* Nav lists — the two data-driven regions */
+    :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav) {
         list-style: none;
         margin: 0;
         padding: 0;
         display: flex;
         flex-direction: column;
         gap: var(--space-3xs);
+    }
+
+    .pui-sidebar__top-nav {
+        --pui-sidebar-ring-space: calc(
+            var(--outline-offset) + var(--outline-width)
+        );
+
         flex: 1;
         min-height: 0;
         overflow-y: auto;
+
+        /* A scroll container clips at its padding box, which sliced the focus
+       ring off. The padding makes room inside the clip, the negative margin
+       puts the list back. */
+        padding-inline: var(--pui-sidebar-ring-space);
+        margin-inline: calc(var(--pui-sidebar-ring-space) * -1);
+    }
+
+    /* Only as tall as its entries, and it must not clip its own flyouts. */
+    .pui-sidebar__bottom-nav {
+        flex: none;
+        overflow: visible;
     }
 
     .pui-sidebar__item {
@@ -84,10 +102,7 @@
         padding: 0;
     }
 
-    /* ============================================================
-   * Link / group-toggle — share visual treatment so the menu reads
-   * as one column of equally-weighted entries.
-   * ============================================================ */
+    /* Link / group-toggle — share visual treatment so the menu reads as one column of equally-weighted entries */
     .pui-sidebar__link,
     .pui-sidebar__group-toggle {
         display: flex;
@@ -113,8 +128,9 @@
         color: var(--text-clr-brand);
     }
 
+    /* Not the neutral fill hover uses, or the two are indistinguishable. */
     .pui-sidebar__link[aria-current='page'] {
-        background: var(--bg-clr-accent);
+        background: var(--bg-clr-brand-soft);
         color: var(--text-clr-brand-selected);
     }
 
@@ -123,10 +139,19 @@
         pointer-events: none;
     }
 
+    /* Outset. Colour follows the entry's tone as `--btn-ring` does for
+   * Button, so the ring never fights the fill it sits on. */
     .pui-sidebar__link:focus-visible,
-    .pui-sidebar__group-toggle:focus-visible {
-        outline: 3px solid var(--outline-clr-base);
-        outline-offset: 2px;
+    .pui-sidebar__group-toggle:focus-visible,
+    .pui-sidebar__group-caret-toggle:focus-visible {
+        outline: var(--outline-width) solid
+            var(--pui-sidebar-ring, var(--border-clr-strong));
+        outline-offset: var(--outline-offset);
+    }
+
+    .pui-sidebar__link[aria-current='page'],
+    .pui-sidebar__group[data-active='true'] > .pui-sidebar__group-toggle {
+        --pui-sidebar-ring: var(--outline-clr-base);
     }
 
     .pui-sidebar__link-label {
@@ -150,9 +175,7 @@
         text-align: center;
     }
 
-    /* ============================================================
-   * Group — collapsible container.
-   * ============================================================ */
+    /* Group — collapsible container */
     .pui-sidebar__group {
         list-style: none;
         margin: 0;
@@ -164,6 +187,44 @@
         transition: transform 150ms ease;
     }
 
+    /* Only when the group carries an `href` — the row navigates, so the
+   * disclosure needs its own control. */
+    .pui-sidebar__group-caret-toggle {
+        display: flex;
+        align-items: center;
+        margin-inline-start: auto;
+        padding: var(--space-3xs);
+        border: 0;
+        border-radius: var(--radius-sm);
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+
+        & .pui-sidebar__group-caret {
+            margin-inline-start: 0;
+        }
+
+        &:hover {
+            background: var(--bg-clr-accent);
+            color: var(--text-clr-brand);
+        }
+    }
+
+    .pui-sidebar__group:has(> .pui-sidebar__group-caret-toggle) {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        & > .pui-sidebar__group-toggle {
+            flex: 1;
+            min-width: 0;
+        }
+
+        & > .pui-sidebar__group-items {
+            flex-basis: 100%;
+        }
+    }
+
     .pui-sidebar__group-toggle[aria-expanded='true'] .pui-sidebar__group-caret {
         transform: rotate(180deg);
     }
@@ -186,9 +247,7 @@
         display: none;
     }
 
-    /* ============================================================
-   * Section header — non-interactive label.
-   * ============================================================ */
+    /* Section header — non-interactive label */
     .pui-sidebar__section {
         list-style: none;
         margin: 0;
@@ -203,48 +262,190 @@
         color: var(--text-clr-muted);
     }
 
-    /* ============================================================
-   * Footer region — bottom of the panel.
-   * ============================================================ */
-    .pui-sidebar__footer {
+    /* Bottom region — foot of the panel */
+    .pui-sidebar__bottom {
         margin-block-start: auto;
         padding-block-start: var(--space-2xs);
         border-block-start: var(--stroke-sm) solid var(--border-clr-base);
     }
 
-    /* ============================================================
-   * Collapsed-state visual rules — hide labels and badges, keep icons.
-   * Section headers also hidden because they're label-only.
-   * ============================================================ */
-    .pui-sidebar[data-state='collapsed'] .pui-sidebar__link-label,
-    .pui-sidebar[data-state='collapsed'] .pui-sidebar__badge,
-    .pui-sidebar[data-state='collapsed'] .pui-sidebar__group-caret,
-    .pui-sidebar[data-state='collapsed'] .pui-sidebar__section {
-        display: none;
+    /* Collapsed — the icon rail. Every selector is scoped with `>` to
+   * entries directly in a nav list; a descendant selector would reach into
+   * an open flyout and collapse its contents too. */
+
+    /* The expanded padding would leave ~2rem for a caption. Wide enough
+   * here to also hold the focus ring. */
+    .pui-sidebar[data-state='collapsed'] .pui-sidebar__panel {
+        padding-inline: var(--space-2xs);
     }
 
-    .pui-sidebar[data-state='collapsed'] .pui-sidebar__link,
-    .pui-sidebar[data-state='collapsed'] .pui-sidebar__group-toggle {
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__item
+        > .pui-sidebar__link,
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__group
+        > .pui-sidebar__group-toggle {
+        flex-direction: column;
         justify-content: center;
+        gap: var(--space-3xs);
         padding-inline: var(--space-3xs);
+        text-align: center;
+    }
+
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__item
+        > .pui-sidebar__link
+        > .pui-sidebar__link-label,
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__group
+        > .pui-sidebar__group-toggle
+        > .pui-sidebar__link-label {
+        flex: none;
+        max-width: 100%;
+        font-size: var(--step--3);
+        font-weight: var(--fw-regular);
+        line-height: var(--lh-tight);
+        /* Wrap rather than ellipsise — an ellipsis hides what the caption is
+       for. `break-word`, not `anywhere`: `anywhere` shrinks min-content
+       width, so words break even when they would have fit. */
+        white-space: normal;
+        overflow-wrap: break-word;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
     }
 
-    /* In collapsed mode we also hide nested group items (they'd
-   * overflow the narrow column). Hover-to-expand with tooltip is a
-   * Phase 4 deferral. */
-    .pui-sidebar[data-state='collapsed'] .pui-sidebar__group-items {
+    /* Scoped to the rail entry's own badge; a descendant combinator would
+   * strip the flyout's too. */
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__item
+        > .pui-sidebar__link
+        > .pui-sidebar__badge,
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__group
+        > .pui-sidebar__group-toggle
+        > .pui-sidebar__group-caret,
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__group
+        > .pui-sidebar__group-caret-toggle,
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__section {
         display: none;
     }
 
-    /* ============================================================
-   * Mobile drawer mode — below the breakpoint, the column transforms
-   * into a fixed-overlay drawer. The breakpoint default lives in JS
-   * (768px), CSS mirrors with the same number. If a consumer changes
-   * `:drawer-breakpoint`, they're responsible for matching CSS via
-   * a custom stylesheet — out of scope for v1.
-   * ============================================================ */
+    /* Marks which icon the open flyout came from — hover can't, once the
+   * flyout was opened by keyboard. Before the selected rule so that wins. */
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__group
+        > .pui-sidebar__group-toggle[aria-expanded='true'] {
+        background: var(--bg-clr-accent);
+        color: var(--text-clr-brand);
+    }
+
+    /* The rail hides its children, so the group is the only indicator of
+   * location and a tint alone loses to the hover fill. Reverted in drawer
+   * mode, where it would merge with its own current child. */
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__group[data-active='true']
+        > .pui-sidebar__group-toggle {
+        background: var(--bg-clr-brand-soft);
+        color: var(--text-clr-brand-selected);
+    }
+
+    /* Default policy; `collapsedSubmenu="panel"` overrides it below. */
+    .pui-sidebar[data-state='collapsed']
+        :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+        > .pui-sidebar__group
+        > .pui-sidebar__group-items {
+        display: none;
+    }
+
+    /* Collapsed submenu — the flyout. `data-submenu-state`'s presence is the
+   * switch, its value the state. Fixed, with coordinates set by the tier, so
+   * it escapes the nav's `overflow-y: auto` without portalling. */
+    .pui-sidebar[data-state='collapsed']
+        .pui-sidebar__group[data-submenu-state]
+        > .pui-sidebar__group-items {
+        display: flex;
+        position: fixed;
+        /* Under the rail: the panel is in-flow inside the isolated root, and
+       in-flow content paints above negative rungs. Giving the panel a rung
+       would make it a context and put its own flyout back on top. */
+        z-index: var(--layer-below);
+        width: var(--pui-sidebar-width);
+        padding: var(--space-xs) var(--space-2xs);
+        overflow-y: auto;
+        background: var(--bg-clr-surface);
+        border-inline-end: var(--stroke-sm) solid var(--border-clr-base);
+        box-shadow: var(--shadow-lg);
+        /* No transition here: a transition belongs to the state moved *to*,
+       so declaring it only on `open` makes hiding instant. */
+    }
+
+    .pui-sidebar[data-state='collapsed']
+        .pui-sidebar__group[data-submenu-state='closed']
+        > .pui-sidebar__group-items {
+        /* `visibility`, not `hidden`: keeps a box to transition while staying
+       out of the tab order and the a11y tree. */
+        visibility: hidden;
+        opacity: 0;
+        /* Where the slide starts. */
+        transform: translateX(-100%);
+        /* Explicit so it survives a transition being added above. */
+        transition: none;
+    }
+
+    .pui-sidebar[data-state='collapsed']
+        .pui-sidebar__group[data-submenu-state='open']
+        > .pui-sidebar__group-items {
+        visibility: visible;
+        opacity: 1;
+        transform: none;
+        /* `visibility` is deliberately absent: untransitioned it flips at
+       once, so Tab reaches the entries instead of walking past them. */
+        transition:
+            opacity var(--duration-fast) var(--ease-out),
+            transform var(--duration-base) var(--ease-out);
+        transition-delay: var(--duration-fast);
+    }
+
+    /* Full-width rows again, so the expanded tree's indent is dropped. */
+    .pui-sidebar__group[data-submenu-state] > .pui-sidebar__group-items {
+        padding-inline-start: var(--space-2xs);
+    }
+
+    /* It travels, so it needs its own reduced-motion escape. */
+    @media (prefers-reduced-motion: reduce) {
+        .pui-sidebar[data-state='collapsed']
+            .pui-sidebar__group[data-submenu-state]
+            > .pui-sidebar__group-items {
+            transition: none;
+        }
+
+        .pui-sidebar[data-state='collapsed']
+            .pui-sidebar__group[data-submenu-state='closed']
+            > .pui-sidebar__group-items {
+            transform: none;
+        }
+    }
+
+    /* Mobile drawer mode — below the breakpoint, the column transforms into a fixed-overlay drawer */
     @media (max-width: 767px) {
-        .pui-sidebar {
+        .pui-sidebar,
+        /* Repeats `[data-state]`: a media query grants no extra specificity,
+       so the plain selector alone loses to the collapsed rule above. */
+        .pui-sidebar[data-state='collapsed'] {
             width: 0;
             border-inline-end: none;
             transition: none;
@@ -258,13 +459,20 @@
             box-shadow: var(--shadow-spark-lg);
             transform: translateX(-100%);
             transition: transform 220ms ease;
-            z-index: 50;
+            z-index: var(--layer-5);
         }
 
         .pui-sidebar[data-drawer-state='open'] .pui-sidebar__panel {
             transform: translateX(0);
         }
 
+        /* Lift the whole root: the panel's own rung only ranks it against
+       siblings, and a consumer's sticky sidebar makes the root a context
+       that an app header can paint over. Inert if the root is static. */
+        .pui-sidebar[data-drawer-state='open'] {
+            z-index: var(--layer-5);
+        }
+
         .pui-sidebar__backdrop {
             display: block;
             position: fixed;
@@ -273,7 +481,7 @@
             opacity: 0;
             pointer-events: none;
             transition: opacity 220ms ease;
-            z-index: 40;
+            z-index: var(--layer-4);
         }
 
         .pui-sidebar[data-drawer-state='open'] .pui-sidebar__backdrop {
@@ -281,23 +489,83 @@
             pointer-events: auto;
         }
 
-        /* In drawer mode, the desktop "collapsed" state is irrelevant —
-     * the panel is full-width drawer when open and hidden otherwise. */
-        .pui-sidebar[data-state='collapsed'] .pui-sidebar__link-label,
-        .pui-sidebar[data-state='collapsed'] .pui-sidebar__badge,
-        .pui-sidebar[data-state='collapsed'] .pui-sidebar__group-caret,
-        .pui-sidebar[data-state='collapsed'] .pui-sidebar__section {
+        /* Collapsed is irrelevant here. Each revert mirrors the scoping of
+     * the rule it undoes — a media query grants no extra specificity. The
+     * flyout needs none: `data-submenu-state` is absent below the
+     * breakpoint. */
+        .pui-sidebar[data-state='collapsed'] .pui-sidebar__panel {
+            padding-inline: var(--space-s);
+        }
+
+        .pui-sidebar[data-state='collapsed']
+            :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+            > .pui-sidebar__item
+            > .pui-sidebar__link
+            > .pui-sidebar__badge,
+        .pui-sidebar[data-state='collapsed']
+            :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+            > .pui-sidebar__group
+            > .pui-sidebar__group-toggle
+            > .pui-sidebar__group-caret,
+        .pui-sidebar[data-state='collapsed']
+            :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+            > .pui-sidebar__section {
             display: revert;
         }
 
-        .pui-sidebar[data-state='collapsed'] .pui-sidebar__link,
-        .pui-sidebar[data-state='collapsed'] .pui-sidebar__group-toggle {
+        /* The caret toggle is the disclosure here, so it comes back. */
+        .pui-sidebar[data-state='collapsed']
+            :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+            > .pui-sidebar__group
+            > .pui-sidebar__group-caret-toggle {
+            display: flex;
+        }
+
+        .pui-sidebar[data-state='collapsed']
+            :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+            > .pui-sidebar__item
+            > .pui-sidebar__link,
+        .pui-sidebar[data-state='collapsed']
+            :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+            > .pui-sidebar__group
+            > .pui-sidebar__group-toggle {
+            flex-direction: row;
             justify-content: flex-start;
+            gap: var(--space-2xs);
             padding-inline: var(--space-xs);
+            text-align: start;
+        }
+
+        .pui-sidebar[data-state='collapsed']
+            :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+            > .pui-sidebar__item
+            > .pui-sidebar__link
+            > .pui-sidebar__link-label,
+        .pui-sidebar[data-state='collapsed']
+            :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+            > .pui-sidebar__group
+            > .pui-sidebar__group-toggle
+            > .pui-sidebar__link-label {
+            flex: 1;
+            font-size: var(--step--1);
+            font-weight: var(--fw-semibold);
+            line-height: var(--lh-base);
         }
 
-        .pui-sidebar[data-state='collapsed'] .pui-sidebar__group-items {
+        .pui-sidebar[data-state='collapsed']
+            :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+            > .pui-sidebar__group
+            > .pui-sidebar__group-items {
             display: flex;
         }
+
+        /* The children are visible here, so the same fill on both ran them
+     together into one block. */
+        .pui-sidebar[data-state='collapsed']
+            :is(.pui-sidebar__top-nav, .pui-sidebar__bottom-nav)
+            > .pui-sidebar__group[data-active='true']
+            > .pui-sidebar__group-toggle {
+            background: transparent;
+        }
     }
 }

package/components/navigation/sidebar/types.ts

@@ -1,7 +1,8 @@
 /**
  * Sidebar driver-data discriminated union.
  *
- * The Sidebar component takes an `:items` prop of `SidebarItem[]`. Each
+ * The Sidebar takes `:top-items` (and optionally `:bottom-items`)
+ * of `SidebarItem[]`. Each
  * entry is one of three shapes, distinguished by the `type` field:
  *
  * - `link`     — a navigable menu entry (renders as `<a>`)
@@ -42,6 +43,17 @@ export interface SidebarGroup {
     label: string;
     /** Optional leading icon on the group toggle. */
     icon?: string;
+    /**
+     * Makes the group a destination as well as a disclosure — the row
+     * becomes a link, matched against `activeHref` like any other.
+     *
+     * With an `href` the row navigates and the caret becomes a separate
+     * toggle button, because one control cannot both go somewhere and
+     * expand in place. On the collapsed rail there is no caret: the row
+     * still navigates, and the flyout opens on hover or focus as it always
+     * does. Without an `href` the whole row is the toggle, as before.
+     */
+    href?: string;
     /** Nested items — links, sections, or further groups. */
     items: SidebarItem[];
     /**

package/components/overlay/alert-dialog/AlertDialog.vue

@@ -38,12 +38,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref } from 'vue';
 import { generateId } from '../../../utils/a11y/id.js';
-import {
-    mountDialog,
-    type DialogControl,
-} from '../../../utils/controllers/dialog.js';
+import { useDialog } from '../../../composables/useDialog.js';
 
 defineOptions({ inheritAttrs: false });
 
@@ -72,7 +69,6 @@ const emit = defineEmits<{
 const rootRef = ref<HTMLDialogElement | null>(null);
 const titleId = generateId('alertdialog-title');
 const descriptionId = generateId('alertdialog-desc');
-let control: DialogControl | null = null;
 
 function onConfirm(): void {
     emit('confirm');
@@ -84,31 +80,14 @@ function onCancel(): void {
     emit('update:open', false);
 }
 
-onMounted(() => {
-    if (!rootRef.value) return;
-    control = mountDialog(rootRef.value, {
-        role: 'alertdialog',
-        persistent: true,
-        initialFocus: 'cancel',
-        // No onClose — persistent dialogs suppress Escape and backdrop-click
-        // dismissal at the controller layer. Close happens only through the
-        // explicit confirm/cancel buttons wired in the template.
-    });
-    if (props.open) control.open();
-});
-
-watch(
-    () => props.open,
-    (isOpen) => {
-        if (!control) return;
-        if (isOpen) control.open();
-        else control.close();
-    },
-);
-
-onBeforeUnmount(() => {
-    control?.teardown();
-    control = null;
+useDialog(rootRef, {
+    role: 'alertdialog',
+    persistent: true,
+    initialFocus: 'cancel',
+    open: () => props.open,
+    // No onClose — persistent dialogs suppress Escape and backdrop-click
+    // dismissal at the composable layer. Close happens only through the
+    // explicit confirm/cancel buttons wired in the template.
 });
 </script>