npm - @skdx/vue - Versions diffs - 0.28.0 → 0.30.0 - Mend

@skdx/vue 0.28.0 → 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3440) hide show

package/dist/dialog/DialogContent.vue.d.cts CHANGED Viewed

@@ -1,48 +1,27 @@
 import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.cjs';
 import { type AutoFocusEvent } from '../utils/useFocusTrap.cjs';
-/**
- * The dialog's panel: native `<dialog>` element with `role="dialog"`,
- * labelled by `<SkdxDialogTitle>` and described by `<SkdxDialogDescription>`
- * via `aria-labelledby`/`aria-describedby` — each emitted only when the part
- * is mounted, so an omitted part leaves no dangling reference. The native
- * element provides focus trapping, top-layer stacking, and focus-return-to-invoker;
- * when modal, it takes the page out of the accessibility tree itself.
- *
- * Closes on Escape or pointer-down on the backdrop, unless `@escape-key-down`/
- * `@pointer-down-outside` call `preventDefault()`. Outside interactions are
- * reported in full: `@pointer-down-outside`, `@focus-outside`, and
- * `@interact-outside` for either kind. Only a modal dialog closes on an
- * un-prevented outside interaction. Every dismissal event fires in every
- * `dismiss` policy mode; the policy withholds the close, not the notification.
- *
- * Announces focus moves as cancelable `@open-auto-focus` (before entering) and
- * `@close-auto-focus` (before leaving). The platform provides no way to stop
- * these moves, so `preventDefault()` is honoured after the fact. Must be used
- * inside `<SkdxDialog>`.
- */
+/** The dialog's panel: a native `<dialog>` labelled/described by its title and description parts, taking the root's role. */
 type __VLS_Props = {
     /**
-     * CSS selector for the element that should receive focus when the dialog
-     * opens, resolved with `querySelector` **inside this panel**. Applies only
-     * when `@open-auto-focus` was not prevented — a handler that vetoes the
-     * automatic move has taken over placement. Falls back to the first tabbable
-     * element (then the panel itself) when the selector matches nothing, with a
-     * console warning: a stale selector must never strand focus on `<body>`
-     * while the page behind is inert. A selector rather than an element handle,
-     * so the same member exists as `initial-focus` on `<skdx-dialog-content>`.
-     * @default undefined — focus lands on the first tabbable element.
+     * CSS selector for the element that should receive focus when the dialog opens, resolved inside this panel.
+     * @default undefined
      */
     initialFocus?: string;
     /**
-     * CSS selector for the element focus should be sent to when the dialog
-     * closes, resolved at **document** level rather than inside the panel: by
-     * close time the panel is closing, and the element that opened it may be
-     * gone — which is the case this prop exists for. Applies only when
-     * `@close-auto-focus` was not prevented. Falls back to the native return to
-     * the invoker when the selector matches nothing, with a console warning.
-     * @default undefined — focus returns to the element focused before opening.
+     * CSS selector for the element focus should move to when the dialog closes, resolved at document level.
+     * @default undefined
      */
     finalFocus?: string;
+    /**
+     * Size rung the skin renders the panel at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Severity rung the skin paints the panel with, reflected as `data-status`.
+     * @default undefined — falls back to a `data-status` attribute.
+     */
+    status?: 'info' | 'success' | 'warning' | 'danger' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -52,19 +31,19 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     /** The underlying native `<dialog>` element. */
     el: import("vue").Ref<HTMLDialogElement | null, HTMLDialogElement | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "focus-outside": (event: FocusOutsideEvent) => any;
     "open-auto-focus": (event: AutoFocusEvent) => any;
     "close-auto-focus": (event: AutoFocusEvent) => any;
+    "focus-outside": (event: FocusOutsideEvent) => any;
     "escape-key-down": (event: Event) => any;
     "pointer-down-outside": (event: PointerEvent) => any;
     "interact-outside": (event: InteractOutsideEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
-    "onOpen-auto-focus"?: ((event: AutoFocusEvent) => any) | undefined;
-    "onClose-auto-focus"?: ((event: AutoFocusEvent) => any) | undefined;
-    "onEscape-key-down"?: ((event: Event) => any) | undefined;
-    "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
-    "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
+    "onOpen-auto-focus"?: (event: AutoFocusEvent) => any;
+    "onClose-auto-focus"?: (event: AutoFocusEvent) => any;
+    "onFocus-outside"?: (event: FocusOutsideEvent) => any;
+    "onEscape-key-down"?: (event: Event) => any;
+    "onPointer-down-outside"?: (event: PointerEvent) => any;
+    "onInteract-outside"?: (event: InteractOutsideEvent) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/dialog/DialogContent.vue.d.ts CHANGED Viewed

@@ -1,48 +1,27 @@
 import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.js';
 import { type AutoFocusEvent } from '../utils/useFocusTrap.js';
-/**
- * The dialog's panel: native `<dialog>` element with `role="dialog"`,
- * labelled by `<SkdxDialogTitle>` and described by `<SkdxDialogDescription>`
- * via `aria-labelledby`/`aria-describedby` — each emitted only when the part
- * is mounted, so an omitted part leaves no dangling reference. The native
- * element provides focus trapping, top-layer stacking, and focus-return-to-invoker;
- * when modal, it takes the page out of the accessibility tree itself.
- *
- * Closes on Escape or pointer-down on the backdrop, unless `@escape-key-down`/
- * `@pointer-down-outside` call `preventDefault()`. Outside interactions are
- * reported in full: `@pointer-down-outside`, `@focus-outside`, and
- * `@interact-outside` for either kind. Only a modal dialog closes on an
- * un-prevented outside interaction. Every dismissal event fires in every
- * `dismiss` policy mode; the policy withholds the close, not the notification.
- *
- * Announces focus moves as cancelable `@open-auto-focus` (before entering) and
- * `@close-auto-focus` (before leaving). The platform provides no way to stop
- * these moves, so `preventDefault()` is honoured after the fact. Must be used
- * inside `<SkdxDialog>`.
- */
+/** The dialog's panel: a native `<dialog>` labelled/described by its title and description parts, taking the root's role. */
 type __VLS_Props = {
     /**
-     * CSS selector for the element that should receive focus when the dialog
-     * opens, resolved with `querySelector` **inside this panel**. Applies only
-     * when `@open-auto-focus` was not prevented — a handler that vetoes the
-     * automatic move has taken over placement. Falls back to the first tabbable
-     * element (then the panel itself) when the selector matches nothing, with a
-     * console warning: a stale selector must never strand focus on `<body>`
-     * while the page behind is inert. A selector rather than an element handle,
-     * so the same member exists as `initial-focus` on `<skdx-dialog-content>`.
-     * @default undefined — focus lands on the first tabbable element.
+     * CSS selector for the element that should receive focus when the dialog opens, resolved inside this panel.
+     * @default undefined
      */
     initialFocus?: string;
     /**
-     * CSS selector for the element focus should be sent to when the dialog
-     * closes, resolved at **document** level rather than inside the panel: by
-     * close time the panel is closing, and the element that opened it may be
-     * gone — which is the case this prop exists for. Applies only when
-     * `@close-auto-focus` was not prevented. Falls back to the native return to
-     * the invoker when the selector matches nothing, with a console warning.
-     * @default undefined — focus returns to the element focused before opening.
+     * CSS selector for the element focus should move to when the dialog closes, resolved at document level.
+     * @default undefined
      */
     finalFocus?: string;
+    /**
+     * Size rung the skin renders the panel at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Severity rung the skin paints the panel with, reflected as `data-status`.
+     * @default undefined — falls back to a `data-status` attribute.
+     */
+    status?: 'info' | 'success' | 'warning' | 'danger' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -52,19 +31,19 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     /** The underlying native `<dialog>` element. */
     el: import("vue").Ref<HTMLDialogElement | null, HTMLDialogElement | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "focus-outside": (event: FocusOutsideEvent) => any;
     "open-auto-focus": (event: AutoFocusEvent) => any;
     "close-auto-focus": (event: AutoFocusEvent) => any;
+    "focus-outside": (event: FocusOutsideEvent) => any;
     "escape-key-down": (event: Event) => any;
     "pointer-down-outside": (event: PointerEvent) => any;
     "interact-outside": (event: InteractOutsideEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
-    "onOpen-auto-focus"?: ((event: AutoFocusEvent) => any) | undefined;
-    "onClose-auto-focus"?: ((event: AutoFocusEvent) => any) | undefined;
-    "onEscape-key-down"?: ((event: Event) => any) | undefined;
-    "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
-    "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
+    "onOpen-auto-focus"?: (event: AutoFocusEvent) => any;
+    "onClose-auto-focus"?: (event: AutoFocusEvent) => any;
+    "onFocus-outside"?: (event: FocusOutsideEvent) => any;
+    "onEscape-key-down"?: (event: Event) => any;
+    "onPointer-down-outside"?: (event: PointerEvent) => any;
+    "onInteract-outside"?: (event: InteractOutsideEvent) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/dialog/DialogContent.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const M=require("../utils/composeRefs.cjs"),h=require("./context.cjs"),C=require("../utils/~~useBodyScrollLock~~.cjs"),m=require("../utils/~~useDismiss~~.cjs"),f=require("../utils/~~useFocusTrap~~.cjs"),_=require("~~./focusTargets~~.cjs");let s=require("vue");var E=["id","aria-labelledby","aria-describedby","aria-modal","data-state","data-dismiss"],P=(0,s.defineComponent)({__name:"DialogContent",props:{initialFocus:{},finalFocus:{}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside","open-auto-focus","close-auto-focus"],setup(y,{expose:D,emit:F}){const c=y,i=F,e=~~(0,s~~.~~inject)~~(h.DIALOG_CONTEXT~~);if(!e)throw new Error(~~"<SkdxDialogContent> must be used inside <SkdxDialog>.")~~;const~~ u=(0,s.ref)(null),w=M.composeRefs(u,e.contentRef);C.useBodyScrollLock((0,s.computed)(()=>e.isOpen.value&&e.isModal.value));const b=(0,s.computed)(()=>e.dismiss.value==="any"\|\|e.dismiss.value==="escape"),r=(0,s.computed)(()=>e.dismiss.value==="any"\|\|e.dismiss.value==="outside");let a=!1;m.useDismiss({enabled:e.isOpen,onInteractOutside:o=>i("interact-outside",o),onPointerDownOutside:o=>{i("pointer-down-outside",o),!o.defaultPrevented&&e.isModal.value&&r.value&&l()},onFocusOutside:o=>{i("focus-outside",o),!o.defaultPrevented&&e.isModal.value&&r.value&&l()}},[u]);function p(o,t){const n=u.value;if(n)if(o&&!n.open){const d=document.activeElement~~,v=f~~.~~autoFocusEvent~~(~~"open-auto-focus",O=>i~~(~~"open-auto-focus",O~~));t?n.showModal?.():n.show?.(),!v~~&&d?.isConnected&&d!==document~~.~~body&&d.focus?.~~(~~{preventScroll:!0})~~,~~v&&c~~.initialFocus~~&&_.applyInitialFocus~~(n,~~c.initialFocus~~)}else!o&&n.open&&l()}(0,s.watch)(()=>[e.isOpen.value,e.isModal.value],([o,t])=>p(o,t)),(0,s.onMounted)(()=>p(e.isOpen.value,e.isModal.value));function l(){a=!f.autoFocusEvent("close-auto-focus",o=>i("close-auto-focus",o)),u.value?.close?.()}function g(o){if(i("escape-key-down",o),!b.value){o.preventDefault();return}o.defaultPrevented\|\|(a=!f.autoFocusEvent("close-auto-focus",t=>i("close-auto-focus",t)))}function q(){a?(a=!1,document.activeElement?.blur?.()):_.applyFinalFocus(c.finalFocus),e.setOpen(!1)}function k(o){const t=m.backdropPointerDown(o,u.value);t&&(i("interact-outside",t),i("pointer-down-outside",t),!t.defaultPrevented&&e.isModal.value&&r.value&&l())}return D({el:u}),(o,t)=>((0,s.openBlock)(),(0,s.createElementBlock)("dialog",{~~class~~:~~"skdx-dialog__content","data-part":"content",ref:~~(0,s.unref)(w),id:(0,s.unref)(e)~~.contentId~~,"aria-labelledby":(0,s.unref)(e).hasTitle.value?(0,s.unref)(e).titleId:void 0,"aria-describedby":(0,s.unref)(e).hasDescription.value?(0,s.unref)(e).descriptionId:void 0,role:"dialog","aria-modal":(0,s.unref)(e).isModal.value?"true":void 0,"data-state":(0,s.unref)(e).isOpen.value?"open":"closed","data-dismiss":(0,s.unref)(e).dismiss.value,onCancel:g,onClose:q,onPointerdown:k},[(0,s.renderSlot)(o.$slots,"default")],40,E))}});exports.default=P;
1	+ const F=require("../utils/appearance.cjs"),k=require("../utils/injectRequired.cjs"),M=require("../utils/composeRefs.cjs"),P=require("./context.cjs"),l=require("../utils/dismissal.cjs"),v=require("../utils/focus-targets.cjs"),R=require("../utils/useBodyScrollLock.cjs"),h=require("../utils/useDismiss.cjs");let o=require("vue");var C=["id","aria-labelledby","aria-describedby","role","aria-modal","data-state","data-dismiss"],E=(0,o.defineComponent)({inheritAttrs:!1,__name:"DialogContent",props:{initialFocus:{},finalFocus:{},size:{},status:{}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside","open-auto-focus","close-auto-focus"],setup(c,{expose:m,emit:q}){const f=c,i=q,e=k.injectRequired(P.DIALOG_CONTEXT,"<SkdxDialogContent> must be used inside <SkdxDialog>."),u=(0,o.ref)(null),D=M.composeRefs(u,e.contentRef);R.useBodyScrollLock((0,o.computed)(()=>e.isOpen.value&&e.isModal.value));const _=(0,o.computed)(()=>e.dismiss.value==="any"\|\|e.dismiss.value==="escape"),d=(0,o.computed)(()=>e.dismiss.value==="any"\|\|e.dismiss.value==="outside");let n=!1;h.useDismiss({enabled:e.isOpen,onInteractOutside:s=>i("interact-outside",s),onPointerDownOutside:s=>{i("pointer-down-outside",s),!s.defaultPrevented&&e.isModal.value&&d.value&&r()},onFocusOutside:s=>{i("focus-outside",s),!s.defaultPrevented&&e.isModal.value&&d.value&&r()}},[u,e.triggerRef]);function p(s,t){const a=u.value;if(a)if(s&&!a.open){const b=document.activeElement;l.focusOnOpen(()=>t?a.showModal?.():a.show?.()),v.applyOpenAutoFocus(a,f.initialFocus,"Dialog",w=>i("open-auto-focus",w),b)}else!s&&a.open&&r()}(0,o.watch)(()=>[e.isOpen.value,e.isModal.value],([s,t])=>p(s,t)),(0,o.onMounted)(()=>p(e.isOpen.value,e.isModal.value));function r(){n=!l.autoFocusEvent("close-auto-focus",s=>i("close-auto-focus",s)),u.value?.close?.()}function g(s){if(i("escape-key-down",s),!_.value){s.preventDefault();return}s.defaultPrevented\|\|(n=!l.autoFocusEvent("close-auto-focus",t=>i("close-auto-focus",t)))}function y(){n?(n=!1,document.activeElement?.blur?.()):v.applyFinalFocus(f.finalFocus,"Dialog"),e.setOpen(!1)}function O(s){const t=l.backdropPointerDown(s,u.value);t&&(i("interact-outside",t),i("pointer-down-outside",t),!t.defaultPrevented&&e.isModal.value&&d.value&&r())}return m({el:u}),(s,t)=>((0,o.openBlock)(),(0,o.createElementBlock)("dialog",(0,o.mergeProps)({id:(0,o.unref)(e).contentId,ref:(0,o.unref)(D),class:"skdx-dialog__content","data-part":"content","aria-labelledby":(0,o.unref)(e).hasTitle.value?(0,o.unref)(e).titleId:void 0,"aria-describedby":(0,o.unref)(e).hasDescription.value?(0,o.unref)(e).descriptionId:void 0,role:(0,o.unref)(e).role?.value??"dialog","aria-modal":(0,o.unref)(e).isModal.value?"true":void 0,"data-state":(0,o.unref)(e).isOpen.value?"open":"closed","data-dismiss":(0,o.unref)(e).dismiss.value},{...s.$attrs,...(0,o.unref)(F.appearanceAttrs)({size:c.size,status:c.status},s.$attrs)},{onCancel:g,onClose:y,onPointerdown:O}),[(0,o.renderSlot)(s.$slots,"default")],16,C))}});exports.default=E;

package/dist/dialog/DialogContent.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{~~composeRefs~~ as e}from"../utils/composeRefs.js";import{DIALOG_CONTEXT as o}from"./context.js";import{~~useBodyScrollLock~~ as s}from"../utils/~~useBodyScrollLock~~.js";import{~~backdropPointerDown~~ as a,~~useDismiss~~ as t}from"../utils/~~useDismiss~~.js";import{~~autoFocusEvent~~ as i}from"../utils/~~useFocusTrap~~.js";import{~~applyFinalFocus~~ as ~~n,applyInitialFocus as u~~}from"~~./focusTargets~~.js";import{computed as l,createElementBlock as d,defineComponent as c,~~inject~~ as r,onMounted as p,openBlock as f,ref as m,renderSlot as v,unref as b,watch as w}from"vue";var y=["id","aria-labelledby","aria-describedby","aria-modal","data-state","data-dismiss"],F=/* @__PURE__ */c({__name:"DialogContent",props:{initialFocus:{},finalFocus:{}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside","open-auto-focus","close-auto-focus"],setup(c,{expose:F,emit:O}){const k=c,D=O,M=r(~~o);if(!M)throw new Error(~~"<SkdxDialogContent> must be used inside <SkdxDialog>.")~~;const g~~=m(null),j=e(g,M.contentRef);s(l(()=>M.isOpen.value&&M.isModal.value));const C=l(()=>"any"===M.dismiss.value\|\|"escape"===M.dismiss.value),P=l(()=>"any"===M.dismiss.value\|\|"outside"===M.dismiss.value);let h=!1;function x(e,o){const s=g.value;if(s)if(e&&!s.open){const e=document.activeElement~~,a=i~~(~~"open-auto-focus",e=>D~~(~~"open-auto-focus",e~~));o?s.showModal?.():s.show?.()~~,!a&&e?.isConnected&&e!==document.body&&e.focus?.({preventScroll:!0}~~),~~a&&k~~.initialFocus~~&&u~~(s,~~k.initialFocus~~)}else!e&&s.open&&E()}function E(){h=!i("close-auto-focus",e=>D("close-auto-focus",e)),g.value?.close?.()}function I(e){D("escape-key-down",e),C.value?e.defaultPrevented\|\|(h=!i("close-auto-focus",e=>D("close-auto-focus",e))):e.preventDefault()}function S(){h?(h=!1,document.activeElement?.blur?.()):n(k.finalFocus),M.setOpen(!1)}function T(e){const o=a(e,g.value);o&&(D("interact-outside",o),D("pointer-down-outside",o),!o.defaultPrevented&&M.isModal.value&&P.value&&E())}return t({enabled:M.isOpen,onInteractOutside:e=>D("interact-outside",e),onPointerDownOutside:e=>{D("pointer-down-outside",e),!e.defaultPrevented&&M.isModal.value&&P.value&&E()},onFocusOutside:e=>{D("focus-outside",e),!e.defaultPrevented&&M.isModal.value&&P.value&&E()}},[g]),w(()=>[M.isOpen.value,M.isModal.value],([e,o])=>x(e,o)),p(()=>x(M.isOpen.value,M.isModal.value)),F({el:g}),(e,o)=>(f(),d("dialog",{class:"skdx-dialog__content","data-part":"content",~~ref:b(j),id:b(M).contentId,~~"aria-labelledby":b(M).hasTitle.value?b(M).titleId:void 0,"aria-describedby":b(M).hasDescription.value?b(M).descriptionId:void 0,role:"dialog","aria-modal":b(M).isModal.value?"true":void 0,"data-state":b(M).isOpen.value?"open":"closed","data-dismiss":b(M).dismiss.value,onCancel:I,onClose:S,onPointerdown:T},[v(e.$slots,"default")],40,y))}});export{F as default};
1	+ import{appearanceAttrs as e}from"../utils/appearance.js";import{injectRequired as s}from"../utils/injectRequired.js";import{composeRefs as o}from"../utils/composeRefs.js";import{DIALOG_CONTEXT as a}from"./context.js";import{autoFocusEvent as t,backdropPointerDown as i,focusOnOpen as u}from"../utils/dismissal.js";import{applyFinalFocus as l,applyOpenAutoFocus as n}from"../utils/focus-targets.js";import{useBodyScrollLock as d}from"../utils/useBodyScrollLock.js";import{useDismiss as r}from"../utils/useDismiss.js";import{computed as c,createElementBlock as p,defineComponent as f,mergeProps as m,onMounted as v,openBlock as O,ref as b,renderSlot as g,unref as y,watch as D}from"vue";var w=["id","aria-labelledby","aria-describedby","role","aria-modal","data-state","data-dismiss"],j=/* @__PURE__ */f({inheritAttrs:!1,__name:"DialogContent",props:{initialFocus:{},finalFocus:{},size:{},status:{}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside","open-auto-focus","close-auto-focus"],setup(f,{expose:j,emit:k}){const F=f,M=k,P=s(a,"<SkdxDialogContent> must be used inside <SkdxDialog>."),h=b(null),x=o(h,P.contentRef);d(c(()=>P.isOpen.value&&P.isModal.value));const C=c(()=>"any"===P.dismiss.value\|\|"escape"===P.dismiss.value),R=c(()=>"any"===P.dismiss.value\|\|"outside"===P.dismiss.value);let E=!1;function I(e,s){const o=h.value;if(o)if(e&&!o.open){const e=document.activeElement;u(()=>s?o.showModal?.():o.show?.()),n(o,F.initialFocus,"Dialog",e=>M("open-auto-focus",e),e)}else!e&&o.open&&S()}function S(){E=!t("close-auto-focus",e=>M("close-auto-focus",e)),h.value?.close?.()}function _(e){M("escape-key-down",e),C.value?e.defaultPrevented\|\|(E=!t("close-auto-focus",e=>M("close-auto-focus",e))):e.preventDefault()}function A(){E?(E=!1,document.activeElement?.blur?.()):l(F.finalFocus,"Dialog"),P.setOpen(!1)}function B(e){const s=i(e,h.value);s&&(M("interact-outside",s),M("pointer-down-outside",s),!s.defaultPrevented&&P.isModal.value&&R.value&&S())}return r({enabled:P.isOpen,onInteractOutside:e=>M("interact-outside",e),onPointerDownOutside:e=>{M("pointer-down-outside",e),!e.defaultPrevented&&P.isModal.value&&R.value&&S()},onFocusOutside:e=>{M("focus-outside",e),!e.defaultPrevented&&P.isModal.value&&R.value&&S()}},[h,P.triggerRef]),D(()=>[P.isOpen.value,P.isModal.value],([e,s])=>I(e,s)),v(()=>I(P.isOpen.value,P.isModal.value)),j({el:h}),(s,o)=>(O(),p("dialog",m({id:y(P).contentId,ref:y(x),class:"skdx-dialog__content","data-part":"content","aria-labelledby":y(P).hasTitle.value?y(P).titleId:void 0,"aria-describedby":y(P).hasDescription.value?y(P).descriptionId:void 0,role:y(P).role?.value??"dialog","aria-modal":y(P).isModal.value?"true":void 0,"data-state":y(P).isOpen.value?"open":"closed","data-dismiss":y(P).dismiss.value},{...s.$attrs,...y(e)({size:f.size,status:f.status},s.$attrs)},{onCancel:_,onClose:A,onPointerdown:B}),[g(s.$slots,"default")],16,w))}});export{j as default};

package/dist/dialog/DialogDescription.vue.d.cts CHANGED Viewed

@@ -1,9 +1,4 @@
-/**
- * The dialog's accessible description: renders a `<p>` wired to
- * `<SkdxDialogContent>` via `aria-describedby`. Genuinely optional, but the
- * wiring is not: it registers on mount so an omitted Description leaves no
- * dangling reference. Must be used inside `<SkdxDialog>`.
- */
+/** The dialog's accessible description, rendered as a `<p>` wired to `<SkdxDialogContent>` via `aria-describedby`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/dialog/DialogDescription.vue.d.ts CHANGED Viewed

@@ -1,9 +1,4 @@
-/**
- * The dialog's accessible description: renders a `<p>` wired to
- * `<SkdxDialogContent>` via `aria-describedby`. Genuinely optional, but the
- * wiring is not: it registers on mount so an omitted Description leaves no
- * dangling reference. Must be used inside `<SkdxDialog>`.
- */
+/** The dialog's accessible description, rendered as a `<p>` wired to `<SkdxDialogContent>` via `aria-describedby`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/dialog/DialogDescription.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const r=require("./context.cjs");let e=require("vue");var o=["id"],n=(0,e.defineComponent)({__name:"DialogDescription",setup(s){const t=~~(0,e~~.~~inject)~~(r.DIALOG_CONTEXT~~);if(!t)throw new Error(~~"<SkdxDialogDescription> must be used inside <SkdxDialog>.");return t.setHasDescription(!0),(0,e.onUnmounted)(()=>t.setHasDescription(!1)),(i,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("p",{~~class~~:~~"skdx-dialog__description"~~,~~"data-part":"description"~~,id:(0,e.unref)(t).~~descriptionId~~},[(0,e.renderSlot)(i.$slots,"default")],8,o))}});exports.default=n;
1	+ const r=require("../utils/injectRequired.cjs"),n=require("./context.cjs");let e=require("vue");var s=["id"],o=(0,e.defineComponent)({__name:"DialogDescription",setup(u){const t=r.injectRequired(n.DIALOG_CONTEXT,"<SkdxDialogDescription> must be used inside <SkdxDialog>.");return t.setHasDescription(!0),(0,e.onUnmounted)(()=>t.setHasDescription(!1)),(i,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("p",{id:(0,e.unref)(t).descriptionId,class:(0,e.normalizeClass)(`skdx-${(0,e.unref)(t).family}__description`),"data-part":"description"},[(0,e.renderSlot)(i.$slots,"default")],10,s))}});exports.default=o;

package/dist/dialog/DialogDescription.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{~~DIALOG_CONTEXT~~ as e}from"./context.js";import{createElementBlock as s,defineComponent as t,~~inject~~ as o,onUnmounted as i,openBlock as a,renderSlot as n,unref as r}from"vue";var d=["id"],p=/* @__PURE__ */t({__name:"DialogDescription",setup(t){const p=o(e~~);if~~(~~!p)throw new Error(~~"<SkdxDialogDescription> must be used inside <SkdxDialog>.");return p.setHasDescription(!0),i(()=>p.setHasDescription(!1)),(e,t)=>(a(),s("p",{class:"skdx~~-dialog__description"~~,"data-part":"description"~~,id:r(p).descriptionId~~},[n(e.$slots,"default")],8,d))}});export{p as default};
1	+ import{injectRequired as e}from"../utils/injectRequired.js";import{DIALOG_CONTEXT as s}from"./context.js";import{createElementBlock as i,defineComponent as t,normalizeClass as o,onUnmounted as a,openBlock as n,renderSlot as r,unref as d}from"vue";var p=["id"],c=/* @__PURE__ */t({__name:"DialogDescription",setup(t){const c=e(s,"<SkdxDialogDescription> must be used inside <SkdxDialog>.");return c.setHasDescription(!0),a(()=>c.setHasDescription(!1)),(e,s)=>(n(),i("p",{id:d(c).descriptionId,class:o(`skdx-${d(c).family}__description`),"data-part":"description"},[r(e.$slots,"default")],10,p))}});export{c as default};

package/dist/dialog/DialogOverlay.vue.d.cts CHANGED Viewed

@@ -1,16 +1,9 @@
-/**
- * Backdrop rendered behind `SkdxDialogContent`, typically styled to dim the
- * page. Exposes `data-state` (`open`/`closed`) for animation and mounts only
- * while open unless `forceMount` is set. Inert styling hook: the native
- * `<dialog>`'s `::backdrop` already catches outside clicks. This part exists
- * for anatomy parity across frameworks and survives ancestors with
- * `pointer-events: none`. Must be used inside `<SkdxDialog>`.
- */
+/** Backdrop rendered behind `SkdxDialogContent`, exposing `data-state` and mounted only while open unless `forceMount`. */
 type __VLS_Props = {
     /** Keep this overlay mounted even while the dialog is closed, instead of unmounting it. */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    forceMount: boolean;
+    forceMount: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/dialog/DialogOverlay.vue.d.ts CHANGED Viewed

@@ -1,16 +1,9 @@
-/**
- * Backdrop rendered behind `SkdxDialogContent`, typically styled to dim the
- * page. Exposes `data-state` (`open`/`closed`) for animation and mounts only
- * while open unless `forceMount` is set. Inert styling hook: the native
- * `<dialog>`'s `::backdrop` already catches outside clicks. This part exists
- * for anatomy parity across frameworks and survives ancestors with
- * `pointer-events: none`. Must be used inside `<SkdxDialog>`.
- */
+/** Backdrop rendered behind `SkdxDialogContent`, exposing `data-state` and mounted only while open unless `forceMount`. */
 type __VLS_Props = {
     /** Keep this overlay mounted even while the dialog is closed, instead of unmounting it. */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    forceMount: boolean;
+    forceMount: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/dialog/DialogOverlay.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const r=require("./context.cjs");let e=require("vue");var o=["data-state"],n=(0,e.defineComponent)({__name:"DialogOverlay",props:{forceMount:{type:Boolean,default:!1}},setup(a){const t=~~(0,e~~.~~inject)~~(r.DIALOG_CONTEXT~~);if(!t)throw new Error(~~"<SkdxDialogOverlay> must be used inside <SkdxDialog>.");return(l,u)=>a.forceMount\|\|(0,e.unref)(t).isOpen.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx~~-dialog__overlay"~~,"data-part":"overlay","data-state":(0,e.unref)(t).isOpen.value?"open":"closed",style:{pointerEvents:"auto"}},null,8,o)):(0,e.createCommentVNode)("",!0)}});exports.default=n;
1	+ const r=require("../utils/injectRequired.cjs"),n=require("./context.cjs");let e=require("vue");var l=["data-state"],o=(0,e.defineComponent)({__name:"DialogOverlay",props:{forceMount:{type:Boolean,default:!1}},setup(a){const t=r.injectRequired(n.DIALOG_CONTEXT,"<SkdxDialogOverlay> must be used inside <SkdxDialog>.");return(u,i)=>a.forceMount\|\|(0,e.unref)(t).isOpen.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:(0,e.normalizeClass)(`skdx-${(0,e.unref)(t).family}__overlay`),"data-part":"overlay","data-state":(0,e.unref)(t).isOpen.value?"open":"closed",style:(0,e.normalizeStyle)({pointerEvents:(0,e.unref)(t).isModal.value&&(0,e.unref)(t).isOpen.value?"auto":"none"})},null,14,l)):(0,e.createCommentVNode)("",!0)}});exports.default=o;

package/dist/dialog/DialogOverlay.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{~~DIALOG_CONTEXT~~ as e}from"./context.js";import{createCommentVNode as a,createElementBlock as o,defineComponent as t,~~inject~~ as s,openBlock as r,unref as n}from"vue";var l=["data-state"],d=/* @__PURE__ */t({__name:"DialogOverlay",props:{forceMount:{type:Boolean,default:!1}},setup(t){const d=s(e~~);if~~(~~!d)throw new Error(~~"<SkdxDialogOverlay> must be used inside <SkdxDialog>.");return(e,s)=>t.forceMount\|\|n(d).isOpen.value?(r(),o("div",{key:0,class:"skdx~~-dialog__overlay"~~,"data-part":"overlay","data-state":n(d).isOpen.value?"open":"closed",style:{pointerEvents:"auto"}},null,8,l)):a("",!0)}});export{d as default};
1	+ import{injectRequired as e}from"../utils/injectRequired.js";import{DIALOG_CONTEXT as a}from"./context.js";import{createCommentVNode as o,createElementBlock as t,defineComponent as s,normalizeClass as l,normalizeStyle as n,openBlock as r,unref as i}from"vue";var u=["data-state"],d=/* @__PURE__ */s({__name:"DialogOverlay",props:{forceMount:{type:Boolean,default:!1}},setup(s){const d=e(a,"<SkdxDialogOverlay> must be used inside <SkdxDialog>.");return(e,a)=>s.forceMount\|\|i(d).isOpen.value?(r(),t("div",{key:0,class:l(`skdx-${i(d).family}__overlay`),"data-part":"overlay","data-state":i(d).isOpen.value?"open":"closed",style:n({pointerEvents:i(d).isModal.value&&i(d).isOpen.value?"auto":"none"})},null,14,u)):o("",!0)}});export{d as default};

package/dist/dialog/DialogRoot.vue.d.cts CHANGED Viewed

@@ -1,16 +1,18 @@
-import { type DialogDismiss } from './context.cjs';
-/**
- * Dialog's state/context primitive: owns open state and provides it to
- * `<SkdxDialogTrigger>`, `<SkdxDialogContent>`, `<SkdxDialogTitle>`,
- * `<SkdxDialogDescription>`, and `<SkdxDialogClose>`. For full primitive
- * composition, use `SkdxDialogRoot` from `@skdx/vue/primitives/dialog`.
- */
+import { type DialogDismiss, type DialogRole } from './context.cjs';
+/** Dialog's state/context primitive: owns open state and provides it to the Trigger, Content, Title, Description and Close parts. */
 type __VLS_Props = {
-    open?: boolean;
-    defaultOpen?: boolean;
-    modal?: boolean;
-    dismiss?: DialogDismiss;
-    dismissible?: boolean;
+    /** Controlled open state. Pair with `v-model:open` or `@open-change`. */
+    open?: boolean | undefined;
+    /** Initial open state, for uncontrolled usage. */
+    defaultOpen?: boolean | undefined;
+    /** Whether the dialog traps focus and blocks page interaction (`showModal()`) or remains non-blocking (`show()`). */
+    modal?: boolean | undefined;
+    /** Which dismissal channels can close the dialog: `'any'`, `'escape'`, `'outside'`, or `'none'`. */
+    dismiss?: DialogDismiss | undefined;
+    /** Whether the dialog can be dismissed at all; `false` forces `dismiss` to `'none'`. */
+    dismissible?: boolean | undefined;
+    /** The panel's role; `'alertdialog'` forces it modal and takes the outside channels away. */
+    role?: DialogRole | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -19,17 +21,22 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
+    cancel: (event: Event) => any;
     "open-change-complete": (open: boolean) => any;
+    confirm: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    "onOpen-change"?: ((open: boolean) => any) | undefined;
-    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    onCancel?: (event: Event) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
+    onConfirm?: (event: Event) => any;
 }>, {
-    dismissible: boolean;
-    open: boolean;
-    defaultOpen: boolean;
-    modal: boolean;
-    dismiss: DialogDismiss;
+    role: DialogRole | undefined;
+    dismissible: boolean | undefined;
+    open: boolean | undefined;
+    defaultOpen: boolean | undefined;
+    modal: boolean | undefined;
+    dismiss: DialogDismiss | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/dialog/DialogRoot.vue.d.ts CHANGED Viewed

@@ -1,16 +1,18 @@
-import { type DialogDismiss } from './context.js';
-/**
- * Dialog's state/context primitive: owns open state and provides it to
- * `<SkdxDialogTrigger>`, `<SkdxDialogContent>`, `<SkdxDialogTitle>`,
- * `<SkdxDialogDescription>`, and `<SkdxDialogClose>`. For full primitive
- * composition, use `SkdxDialogRoot` from `@skdx/vue/primitives/dialog`.
- */
+import { type DialogDismiss, type DialogRole } from './context.js';
+/** Dialog's state/context primitive: owns open state and provides it to the Trigger, Content, Title, Description and Close parts. */
 type __VLS_Props = {
-    open?: boolean;
-    defaultOpen?: boolean;
-    modal?: boolean;
-    dismiss?: DialogDismiss;
-    dismissible?: boolean;
+    /** Controlled open state. Pair with `v-model:open` or `@open-change`. */
+    open?: boolean | undefined;
+    /** Initial open state, for uncontrolled usage. */
+    defaultOpen?: boolean | undefined;
+    /** Whether the dialog traps focus and blocks page interaction (`showModal()`) or remains non-blocking (`show()`). */
+    modal?: boolean | undefined;
+    /** Which dismissal channels can close the dialog: `'any'`, `'escape'`, `'outside'`, or `'none'`. */
+    dismiss?: DialogDismiss | undefined;
+    /** Whether the dialog can be dismissed at all; `false` forces `dismiss` to `'none'`. */
+    dismissible?: boolean | undefined;
+    /** The panel's role; `'alertdialog'` forces it modal and takes the outside channels away. */
+    role?: DialogRole | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -19,17 +21,22 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
+    cancel: (event: Event) => any;
     "open-change-complete": (open: boolean) => any;
+    confirm: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    "onOpen-change"?: ((open: boolean) => any) | undefined;
-    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    onCancel?: (event: Event) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
+    onConfirm?: (event: Event) => any;
 }>, {
-    dismissible: boolean;
-    open: boolean;
-    defaultOpen: boolean;
-    modal: boolean;
-    dismiss: DialogDismiss;
+    role: DialogRole | undefined;
+    dismissible: boolean | undefined;
+    open: boolean | undefined;
+    defaultOpen: boolean | undefined;
+    modal: boolean | undefined;
+    dismiss: DialogDismiss | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/dialog/DialogRoot.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const n=require("./context.cjs"),_=require("../utils/useOpenChangeComplete.cjs");let e=require("vue");var v=(0,e.defineComponent)({__name:"DialogRoot",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},modal:{type:Boolean,default:!0},dismiss:{default:"any"},dismissible:{type:Boolean,default:!0}},emits:["update:open","open-change","open-change-complete"],setup(d,{emit:c}){const o=d,s=c,a=(0,e.ref)(null),l=(0,e.ref)(!1),i=(0,e.ref)(!1),p=(0,e.ref)(o.defaultOpen),u=(0,e.computed)(()=>o.~~open??p~~.value),r=(0,e.computed)(()=>o.modal),f=(0,e.computed)(()=>o.dismissible?o.dismiss:"none");_.useOpenChangeComplete(u,a,t=>s("open-change-complete",t));function m(t){o.~~open===void 0&&~~(~~p.value=t~~)~~,s("update:open",t),s("open-change",t)~~}return(0,e.provide)(n.DIALOG_CONTEXT,{isOpen:u,contentRef:a,isModal:r,dismiss:f,contentId:n.nextDialogId("content"),titleId:n.nextDialogId("title"),descriptionId:n.nextDialogId("description"),hasTitle:(0,e.computed)(()=>l.value),hasDescription:(0,e.computed)(()=>i.value),setHasTitle:t=>{l.value=t},setHasDescription:t=>{i.value=t},setOpen:m}),(t,g)=>(0,e.renderSlot)(t.$slots,"default")}});exports.default=v;
1	+ const l=require("./context.cjs"),h=require("../utils/useControllable.cjs"),D=require("../utils/useOpenChangeComplete.cjs");let t=require("vue");var I=(0,t.defineComponent)({__name:"DialogRoot",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},modal:{type:Boolean,default:!0},dismiss:{default:"any"},dismissible:{type:Boolean,default:!0},role:{default:"dialog"}},emits:["update:open","open-change","open-change-complete","confirm","cancel"],setup(d,{emit:p}){const o=d,n=p,f={any:"escape",outside:"none",escape:"escape",none:"none"},a=(0,t.ref)(null),m=(0,t.ref)(null),s=(0,t.ref)(!1),i=(0,t.ref)(!1),r=h.useControllable({controlled:()=>o.open,defaultValue:()=>o.defaultOpen,onChange:e=>{n("update:open",e),n("open-change",e)}}),u=(0,t.computed)(()=>r.value.value??!1),c=(0,t.computed)(()=>o.role==="alertdialog"),g=(0,t.computed)(()=>c.value\|\|o.modal),_=(0,t.computed)(()=>o.dismissible?c.value?f[o.dismiss]:o.dismiss:"none");D.useOpenChangeComplete(u,a,e=>n("open-change-complete",e));function v(e){r.set(e)}return(0,t.provide)(l.DIALOG_CONTEXT,{family:"dialog",isOpen:u,contentRef:a,triggerRef:m,isModal:g,dismiss:_,role:(0,t.toRef)(o,"role"),contentId:l.nextDialogId("content"),titleId:l.nextDialogId("title"),descriptionId:l.nextDialogId("description"),hasTitle:(0,t.computed)(()=>s.value),hasDescription:(0,t.computed)(()=>i.value),setHasTitle:e=>{s.value=e},setHasDescription:e=>{i.value=e},setOpen:v,confirm:e=>(n("confirm",e),!e.defaultPrevented),cancel:e=>(n("cancel",e),!e.defaultPrevented)}),(e,C)=>(0,t.renderSlot)(e.$slots,"default")}});exports.default=I;

package/dist/dialog/DialogRoot.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{DIALOG_CONTEXT as e,nextDialogId as t}from"./context.js";import{useOpenChangeComplete as o}from"../utils/useOpenChangeComplete.js";import{computed as n,defineComponent as a,provide as s,ref as i,renderSlot as l}from"vue";var p=/* @__PURE__ */a({__name:"DialogRoot",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},modal:{type:Boolean,default:!0},dismiss:{default:"any"},dismissible:{type:Boolean,default:!0}},emits:["update:open","open-change","open-change-complete"],setup(a,{emit:p}){const d=a,u=p,m=i(null),r=i(!1),c=i(!1),f=i(d.defaultOpen),v=n(()=>d.~~open??f~~.value),g=n(()=>d.modal),h=n(()=>d.dismissible?d.dismiss:"none");return o(v,m,e=>u("open-change-complete",e)),s(e,{isOpen:v,contentRef:m,~~isModal~~:g,dismiss:h,contentId:t("content"),titleId:t("title"),descriptionId:t("description"),hasTitle:n(()=>r.value),hasDescription:n(()=>c.value),setHasTitle:e=>{r.value=e},setHasDescription:e=>{c.value=e},setOpen:function(e){~~void 0===d~~.~~open&&~~(~~f.value=~~e),u("~~update:open~~",e),u("~~open-change~~",e)}}),(e,t)=>l(e.$slots,"default")}});export{p as default};
1	+ import{DIALOG_CONTEXT as e,nextDialogId as o}from"./context.js";import{useControllable as t}from"../utils/useControllable.js";import{useOpenChangeComplete as a}from"../utils/useOpenChangeComplete.js";import{computed as n,defineComponent as l,provide as s,ref as i,renderSlot as d,toRef as p}from"vue";var u=/* @__PURE__ */l({__name:"DialogRoot",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},modal:{type:Boolean,default:!0},dismiss:{default:"any"},dismissible:{type:Boolean,default:!0},role:{default:"dialog"}},emits:["update:open","open-change","open-change-complete","confirm","cancel"],setup(l,{emit:u}){const r=l,c=u,m={any:"escape",outside:"none",escape:"escape",none:"none"},f=i(null),g=i(null),v=i(!1),h=i(!1),C=t({controlled:()=>r.open,defaultValue:()=>r.defaultOpen,onChange:e=>{c("update:open",e),c("open-change",e)}}),O=n(()=>C.value.value??!1),y=n(()=>"alertdialog"===r.role),D=n(()=>y.value\|\|r.modal),I=n(()=>r.dismissible?y.value?m[r.dismiss]:r.dismiss:"none");return a(O,f,e=>c("open-change-complete",e)),s(e,{family:"dialog",isOpen:O,contentRef:f,triggerRef:g,isModal:D,dismiss:I,role:p(r,"role"),contentId:o("content"),titleId:o("title"),descriptionId:o("description"),hasTitle:n(()=>v.value),hasDescription:n(()=>h.value),setHasTitle:e=>{v.value=e},setHasDescription:e=>{h.value=e},setOpen:function(e){C.set(e)},confirm:e=>(c("confirm",e),!e.defaultPrevented),cancel:e=>(c("cancel",e),!e.defaultPrevented)}),(e,o)=>d(e.$slots,"default")}});export{u as default};

package/dist/dialog/DialogTitle.vue.d.cts CHANGED Viewed

@@ -1,11 +1,4 @@
-/**
- * The dialog's accessible name: renders an `<h2>` wired to
- * `<SkdxDialogContent>` via `aria-labelledby`. Every dialog should include one
- * — a `role="dialog"` with no name announces as bare "dialog". Registers
- * itself on mount, which is what makes Content emit `aria-labelledby` at all:
- * without a Title, the attribute is omitted rather than point at nothing.
- * Must be used inside `<SkdxDialog>`.
- */
+/** The dialog's accessible name, rendered as an `<h2>` wired to `<SkdxDialogContent>` via `aria-labelledby`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/dialog/DialogTitle.vue.d.ts CHANGED Viewed

@@ -1,11 +1,4 @@
-/**
- * The dialog's accessible name: renders an `<h2>` wired to
- * `<SkdxDialogContent>` via `aria-labelledby`. Every dialog should include one
- * — a `role="dialog"` with no name announces as bare "dialog". Registers
- * itself on mount, which is what makes Content emit `aria-labelledby` at all:
- * without a Title, the attribute is omitted rather than point at nothing.
- * Must be used inside `<SkdxDialog>`.
- */
+/** The dialog's accessible name, rendered as an `<h2>` wired to `<SkdxDialogContent>` via `aria-labelledby`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/dialog/DialogTitle.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const l=require("./context.cjs");let e=require("vue");var r=["id"],o=(0,e.defineComponent)({__name:"DialogTitle",setup(a){const t=~~(0,e~~.~~inject)~~(l.DIALOG_CONTEXT~~);if(!t)throw new Error(~~"<SkdxDialogTitle> must be used inside <SkdxDialog>.");return t.setHasTitle(!0),(0,e.onUnmounted)(()=>t.setHasTitle(!1)),(i,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("h2",{~~class~~:~~"skdx-dialog__title"~~,~~"data-part":"title"~~,id:(0,e.unref)(t).~~titleId~~},[(0,e.renderSlot)(i.$slots,"default")],8,r))}});exports.default=o;
1	+ const r=require("../utils/injectRequired.cjs"),l=require("./context.cjs");let e=require("vue");var n=["id"],u=(0,e.defineComponent)({__name:"DialogTitle",setup(a){const t=r.injectRequired(l.DIALOG_CONTEXT,"<SkdxDialogTitle> must be used inside <SkdxDialog>.");return t.setHasTitle(!0),(0,e.onUnmounted)(()=>t.setHasTitle(!1)),(i,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("h2",{id:(0,e.unref)(t).titleId,class:(0,e.normalizeClass)(`skdx-${(0,e.unref)(t).family}__title`),"data-part":"title"},[(0,e.renderSlot)(i.$slots,"default")],10,n))}});exports.default=u;

package/dist/dialog/DialogTitle.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{~~DIALOG_CONTEXT~~ as e}from"./context.js";import{createElementBlock as t,defineComponent as a,~~inject~~ as s,onUnmounted as o,openBlock as i,renderSlot as l,unref as n}from"vue";var r=["id"],d=/* @__PURE__ */a({__name:"DialogTitle",setup(a){const d=s(e~~);if~~(~~!d)throw new Error(~~"<SkdxDialogTitle> must be used inside <SkdxDialog>.");return d.setHasTitle(!0),o(()=>d.setHasTitle(!1)),(e,a)=>(i(),t("h2",{class:"skdx~~-dialog__title"~~,"data-part":"title"~~,id:n(d).titleId~~},[l(e.$slots,"default")],8,r))}});export{d as default};
1	+ import{injectRequired as e}from"../utils/injectRequired.js";import{DIALOG_CONTEXT as t}from"./context.js";import{createElementBlock as s,defineComponent as a,normalizeClass as i,onUnmounted as l,openBlock as o,renderSlot as n,unref as r}from"vue";var d=["id"],m=/* @__PURE__ */a({__name:"DialogTitle",setup(a){const m=e(t,"<SkdxDialogTitle> must be used inside <SkdxDialog>.");return m.setHasTitle(!0),l(()=>m.setHasTitle(!1)),(e,t)=>(o(),s("h2",{id:r(m).titleId,class:i(`skdx-${r(m).family}__title`),"data-part":"title"},[n(e.$slots,"default")],10,d))}});export{m as default};

package/dist/dialog/DialogTrigger.vue.d.cts CHANGED Viewed

@@ -1,8 +1,4 @@
-/**
- * Button that opens the dialog when clicked. Sets `aria-haspopup="dialog"`,
- * `aria-expanded`, `aria-controls`, and `data-state`. Must be used inside
- * `<SkdxDialog>`.
- */
+/** Button that opens the dialog when clicked, setting `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/dialog/DialogTrigger.vue.d.ts CHANGED Viewed

@@ -1,8 +1,4 @@
-/**
- * Button that opens the dialog when clicked. Sets `aria-haspopup="dialog"`,
- * `aria-expanded`, `aria-controls`, and `data-state`. Must be used inside
- * `<SkdxDialog>`.
- */
+/** Button that opens the dialog when clicked, setting `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/dialog/DialogTrigger.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const n=require("./context.cjs");let e=require("vue");var o=["aria-expanded","aria-controls","data-state"],i=(0,e.defineComponent)({__name:"DialogTrigger",setup(u){const t=~~(0,e~~.~~inject)~~(n.DIALOG_CONTEXT~~);if(!t)throw new Error(~~"<SkdxDialogTrigger> must be used inside <SkdxDialog>.");return(a,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{~~class~~:"~~skdx-dialog__trigger~~","data-part":"trigger",type:"button","aria-haspopup":"dialog","aria-expanded":(0,e.unref)(t).isOpen.value,"aria-controls":(0,e.unref)(t).contentId,"data-state":(0,e.unref)(t).isOpen.value?"open":"closed",onClick:r[0]\|\|(r[0]=s=>(0,e.unref)(t).setOpen(!0))},[(0,e.renderSlot)(a.$slots,"default")],8,o))}});exports.default=i;
1	+ const i=require("../utils/injectRequired.cjs"),u=require("./context.cjs");let e=require("vue");var o=["aria-expanded","aria-controls","data-state"],l=(0,e.defineComponent)({__name:"DialogTrigger",setup(s){const r=i.injectRequired(u.DIALOG_CONTEXT,"<SkdxDialogTrigger> must be used inside <SkdxDialog>."),t=(0,e.ref)(null);return(0,e.onMounted)(()=>{r.triggerRef.value=t.value}),(n,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{ref_key:"elRef",ref:t,class:(0,e.normalizeClass)(`skdx-${(0,e.unref)(r).family}__trigger`),"data-part":"trigger",type:"button","aria-haspopup":"dialog","aria-expanded":(0,e.unref)(r).isOpen.value,"aria-controls":(0,e.unref)(r).contentId,"data-state":(0,e.unref)(r).isOpen.value?"open":"closed",onClick:a[0]\|\|(a[0]=d=>(0,e.unref)(r).setOpen(!0))},[(0,e.renderSlot)(n.$slots,"default")],10,o))}});exports.default=l;

package/dist/dialog/DialogTrigger.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{~~DIALOG_CONTEXT~~ as e}from"./context.js";import{createElementBlock as a,defineComponent as t,~~inject~~ as o,openBlock as r,renderSlot as s,unref as n}from"vue";var i=["aria-expanded","aria-controls","data-state"],d=/* @__PURE__ */t({__name:"DialogTrigger",setup(t){const d=o(e~~);if~~(~~!d)throw new Error(~~"<SkdxDialogTrigger> must be used inside <SkdxDialog>.");return(e,t)=>(r(),a("button",{~~class~~:"~~skdx-dialog__trigger~~","data-part":"trigger",type:"button","aria-haspopup":"dialog","aria-expanded":n(d).isOpen.value,"aria-controls":n(d).contentId,"data-state":n(d).isOpen.value?"open":"closed",onClick:t[0]\|\|(t[0]=e=>n(d).setOpen(!0))},[s(e.$slots,"default")],8,i))}});export{d as default};
1	+ import{injectRequired as e}from"../utils/injectRequired.js";import{DIALOG_CONTEXT as a}from"./context.js";import{createElementBlock as t,defineComponent as r,normalizeClass as s,onMounted as o,openBlock as n,ref as i,renderSlot as l,unref as d}from"vue";var u=["aria-expanded","aria-controls","data-state"],p=/* @__PURE__ */r({__name:"DialogTrigger",setup(r){const p=e(a,"<SkdxDialogTrigger> must be used inside <SkdxDialog>."),g=i(null);return o(()=>{p.triggerRef.value=g.value}),(e,a)=>(n(),t("button",{ref_key:"elRef",ref:g,class:s(`skdx-${d(p).family}__trigger`),"data-part":"trigger",type:"button","aria-haspopup":"dialog","aria-expanded":d(p).isOpen.value,"aria-controls":d(p).contentId,"data-state":d(p).isOpen.value?"open":"closed",onClick:a[0]\|\|(a[0]=e=>d(p).setOpen(!0))},[l(e.$slots,"default")],10,u))}});export{p as default};

package/dist/dialog/context.d.cts CHANGED Viewed

@@ -1,14 +1,20 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue';
-/**
- * Which dismissal channels may close a dialog: `'any'`, `'escape'`, `'outside'`,
- * or `'none'`. Policy over *dismissal*, not events (all fire in every mode).
- */
+import type { LogicalSide } from '../utils/direction.cjs';
+/** Which dismissal channels may close a dialog: `'any'`, `'escape'`, `'outside'`, or `'none'`. */
 export type DialogDismiss = 'any' | 'escape' | 'outside' | 'none';
+/** The panel's role: `'dialog'`, or `'alertdialog'` for the interruptive confirmation. */
+export type DialogRole = 'dialog' | 'alertdialog';
+/** @internal Which component the shared parts render for, deciding their class names. */
+export type DialogFamily = 'dialog' | 'drawer';
 /** @internal Injection key a Dialog provides so its parts can read/drive shared state. */
 export interface DialogContext {
+    /** The family the parts belong to, which their `skdx-<family>__*` class names follow. */
+    family: DialogFamily;
     isOpen: Readonly<Ref<boolean>>;
-    /** Native `<dialog>` panel (mirrored by Content to track open state). */
+    /** The panel element (mirrored by Content to track open state). */
     contentRef: Ref<HTMLElement | null>;
+    /** Trigger button, kept out of the dismiss scope so its own click never reads as an outside interaction. */
+    triggerRef: Ref<HTMLElement | null>;
     isModal: Readonly<Ref<boolean>>;
     /** Dismissal policy (gates channels, emits data-dismiss). */
     dismiss: Readonly<Ref<DialogDismiss>>;
@@ -22,6 +28,14 @@ export interface DialogContext {
     setHasTitle: (present: boolean) => void;
     setHasDescription: (present: boolean) => void;
     setOpen: (open: boolean) => void;
+    /** The panel's role; the drawer family leaves it unset and is always a plain dialog. */
+    role?: Readonly<Ref<DialogRole>>;
+    /** The viewport edge the panel is anchored to; only the drawer family sets it. */
+    placement?: Readonly<Ref<LogicalSide>>;
+    /** Emits the root's cancelable `confirm`, returning `false` when a listener vetoed the close. */
+    confirm?: (event: Event) => boolean;
+    /** Emits the root's cancelable `cancel`, returning `false` when a listener vetoed the close. */
+    cancel?: (event: Event) => boolean;
 }
 /** @internal Injection key the Dialog root provides so its Trigger, Content, Title, and Description share open state and part ids. */
 export declare const DIALOG_CONTEXT: InjectionKey<DialogContext>;