@skdx/vue 0.28.0 → 0.30.0

package/dist/dialog/context.d.ts

@@ -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.js';
+/** 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>;

package/dist/dialog/index.d.cts

@@ -1,2 +1,2 @@
 export { default as SkdxDialog } from './Dialog.vue.cjs';
-export type { DialogDismiss } from './context.cjs';
+export type { DialogDismiss, DialogRole } from './context.cjs';

package/dist/dialog/index.d.ts

@@ -1,2 +1,2 @@
 export { default as SkdxDialog } from './Dialog.vue.js';
-export type { DialogDismiss } from './context.js';
+export type { DialogDismiss, DialogRole } from './context.js';

package/dist/dialog/primitives.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DialogClose.vue.cjs"),r=require("./DialogContent.vue.cjs"),i=require("./DialogDescription.vue.cjs"),o=require("./DialogOverlay.vue.cjs"),l=require("./DialogTitle.vue.cjs"),t=require("./DialogRoot.vue.cjs"),a=require("./DialogTrigger.vue.cjs");exports.SkdxDialogClose=e.default;exports.SkdxDialogContent=r.default;exports.SkdxDialogDescription=i.default;exports.SkdxDialogOverlay=o.default;exports.SkdxDialogRoot=t.default;exports.SkdxDialogTitle=l.default;exports.SkdxDialogTrigger=a.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DialogAction.vue.cjs"),i=require("./DialogCancel.vue.cjs"),r=require("./DialogClose.vue.cjs"),o=require("./DialogContent.vue.cjs"),l=require("./DialogDescription.vue.cjs"),t=require("./DialogOverlay.vue.cjs"),a=require("./DialogTitle.vue.cjs"),u=require("./DialogRoot.vue.cjs"),g=require("./DialogTrigger.vue.cjs");exports.SkdxDialogAction=e.default;exports.SkdxDialogCancel=i.default;exports.SkdxDialogClose=r.default;exports.SkdxDialogContent=o.default;exports.SkdxDialogDescription=l.default;exports.SkdxDialogOverlay=t.default;exports.SkdxDialogRoot=u.default;exports.SkdxDialogTitle=a.default;exports.SkdxDialogTrigger=g.default;

package/dist/dialog/primitives.d.cts

@@ -1,6 +1,5 @@
 /**
- * Primitives for `SkdxDialog` — composable building blocks.
- * Use these when you need a custom layout beyond the derived recipe.
+ * Primitives for `SkdxDialog` — composable building blocks for a custom layout.
  *
  * @example
  * ```vue
@@ -22,6 +21,8 @@
  * ```
  */
 export { default as SkdxDialogRoot } from './DialogRoot.vue.cjs';
+export { default as SkdxDialogAction } from './DialogAction.vue.cjs';
+export { default as SkdxDialogCancel } from './DialogCancel.vue.cjs';
 export { default as SkdxDialogClose } from './DialogClose.vue.cjs';
 export { default as SkdxDialogContent } from './DialogContent.vue.cjs';
 export { default as SkdxDialogDescription } from './DialogDescription.vue.cjs';

package/dist/dialog/primitives.d.ts

@@ -1,6 +1,5 @@
 /**
- * Primitives for `SkdxDialog` — composable building blocks.
- * Use these when you need a custom layout beyond the derived recipe.
+ * Primitives for `SkdxDialog` — composable building blocks for a custom layout.
  *
  * @example
  * ```vue
@@ -22,6 +21,8 @@
  * ```
  */
 export { default as SkdxDialogRoot } from './DialogRoot.vue.js';
+export { default as SkdxDialogAction } from './DialogAction.vue.js';
+export { default as SkdxDialogCancel } from './DialogCancel.vue.js';
 export { default as SkdxDialogClose } from './DialogClose.vue.js';
 export { default as SkdxDialogContent } from './DialogContent.vue.js';
 export { default as SkdxDialogDescription } from './DialogDescription.vue.js';

package/dist/dialog/primitives.js

@@ -1 +1 @@
-import o from"./DialogClose.vue.js";import i from"./DialogContent.vue.js";import a from"./DialogDescription.vue.js";import r from"./DialogOverlay.vue.js";import e from"./DialogTitle.vue.js";import l from"./DialogRoot.vue.js";import g from"./DialogTrigger.vue.js";export{o as SkdxDialogClose,i as SkdxDialogContent,a as SkdxDialogDescription,r as SkdxDialogOverlay,l as SkdxDialogRoot,e as SkdxDialogTitle,g as SkdxDialogTrigger};
+import o from"./DialogAction.vue.js";import i from"./DialogCancel.vue.js";import a from"./DialogClose.vue.js";import r from"./DialogContent.vue.js";import l from"./DialogDescription.vue.js";import e from"./DialogOverlay.vue.js";import g from"./DialogTitle.vue.js";import s from"./DialogRoot.vue.js";import t from"./DialogTrigger.vue.js";export{o as SkdxDialogAction,i as SkdxDialogCancel,a as SkdxDialogClose,r as SkdxDialogContent,l as SkdxDialogDescription,e as SkdxDialogOverlay,s as SkdxDialogRoot,g as SkdxDialogTitle,t as SkdxDialogTrigger};

package/dist/divider/Divider.vue.cjs

@@ -0,0 +1 @@
+const e=require("./Divider.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

package/dist/divider/Divider.vue.d.cts

@@ -0,0 +1,17 @@
+/** Divider line rendered as `<hr>` with `role="separator"`, or `"none"` when `decorative`. */
+type __VLS_Props = {
+    /** Layout axis. Always exposed as data-orientation; as aria-orientation when not decorative (vertical only). */
+    orientation?: 'horizontal' | 'vertical';
+    /** When true, the separator is purely visual and removed from the accessibility tree. */
+    decorative?: boolean;
+    /**
+     * Whether the skin insets the separator from its container edges, as `data-inset`.
+     * @default undefined — falls back to a `data-inset` attribute.
+     */
+    inset?: 'inset' | (string & {}) | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+    decorative: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/divider/Divider.vue.d.ts

@@ -0,0 +1,17 @@
+/** Divider line rendered as `<hr>` with `role="separator"`, or `"none"` when `decorative`. */
+type __VLS_Props = {
+    /** Layout axis. Always exposed as data-orientation; as aria-orientation when not decorative (vertical only). */
+    orientation?: 'horizontal' | 'vertical';
+    /** When true, the separator is purely visual and removed from the accessibility tree. */
+    decorative?: boolean;
+    /**
+     * Whether the skin insets the separator from its container edges, as `data-inset`.
+     * @default undefined — falls back to a `data-inset` attribute.
+     */
+    inset?: 'inset' | (string & {}) | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+    decorative: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/divider/Divider.vue.js

@@ -0,0 +1 @@
+import e from"./Divider.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

package/dist/divider/Divider.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const n=require("../utils/appearance.cjs");let e=require("vue");var d=["role","aria-orientation","data-orientation"],l=(0,e.defineComponent)({inheritAttrs:!1,__name:"Divider",props:{orientation:{default:"horizontal"},decorative:{type:Boolean,default:!1},inset:{}},setup(t){const a=t,i=(0,e.computed)(()=>a.decorative?"none":"separator"),o=(0,e.computed)(()=>!a.decorative&&a.orientation==="vertical"?"vertical":void 0);return(r,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("hr",(0,e.mergeProps)({class:"skdx-divider","data-part":"root","data-skdx-component":"divider",role:i.value,"aria-orientation":o.value,"data-orientation":t.orientation},{...r.$attrs,...(0,e.unref)(n.appearanceAttrs)({inset:t.inset},r.$attrs)}),null,16,d))}});exports.default=l;

package/dist/divider/Divider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{appearanceAttrs as e}from"../utils/appearance.js";import{computed as t,createElementBlock as a,defineComponent as r,mergeProps as o,openBlock as i,unref as n}from"vue";var s=["role","aria-orientation","data-orientation"],d=/* @__PURE__ */r({inheritAttrs:!1,__name:"Divider",props:{orientation:{default:"horizontal"},decorative:{type:Boolean,default:!1},inset:{}},setup(r){const d=r,l=t(()=>d.decorative?"none":"separator"),p=t(()=>d.decorative||"vertical"!==d.orientation?void 0:"vertical");return(t,d)=>(i(),a("hr",o({class:"skdx-divider","data-part":"root","data-skdx-component":"divider",role:l.value,"aria-orientation":p.value,"data-orientation":r.orientation},{...t.$attrs,...n(e)({inset:r.inset},t.$attrs)}),null,16,s))}});export{d as default};

package/dist/divider/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Divider.vue.cjs");exports.SkdxDivider=e.default;

package/dist/divider/index.d.cts

@@ -0,0 +1 @@
+export { default as SkdxDivider } from './Divider.vue.cjs';

package/dist/divider/index.d.ts

@@ -0,0 +1 @@
+export { default as SkdxDivider } from './Divider.vue.js';

package/dist/divider/index.js

@@ -0,0 +1 @@
+import i from"./Divider.vue.js";export{i as SkdxDivider};

package/dist/drawer/Drawer.vue.d.cts

@@ -1,14 +1,6 @@
 import type { DrawerDismiss, DrawerPlacement } from './context.cjs';
 /**
- * Panel anchored to one edge of the viewport with slide-in/out animation.
- * Works controlled (`v-model:open`) or uncontrolled (`default-open`).
- * Renders title, description, body content, optional footer, and optional close
- * button. Like AlertDialog but positioned, and with configurable dismissal
- * policy.
- *
- * Emits `open-change` the instant the state flips and `open-change-complete`
- * once the animation finishes — after `SkdxDrawerContent`'s slide-in or
- * slide-out animation ends, or immediately when it declares none.
+ * Panel anchored to one edge of the viewport with slide-in/out animation, and title/description/footer anatomy.
  *
  * @example
  * ```vue
@@ -16,71 +8,44 @@ import type { DrawerDismiss, DrawerPlacement } from './context.cjs';
  *   <nav>…</nav>
  * </SkdxDrawer>
  * ```
- *
- * @example Full primitive composition —
- * `import * as Drawer from '@skdx/vue/primitives/drawer'`:
- * ```vue
- * <Drawer.Root placement="start">
- *   <Drawer.Trigger>Menu</Drawer.Trigger>
- *   <Drawer.Portal>
- *     <Drawer.Overlay />
- *     <Drawer.Content>
- *       <Drawer.Title>Navigation</Drawer.Title>
- *       <Drawer.Close>Close</Drawer.Close>
- *     </Drawer.Content>
- *   </Drawer.Portal>
- * </Drawer.Root>
- * ```
  */
 type __VLS_Props = {
     /** Controlled open state. Pair with `v-model:open` or `@open-change`. */
-    open?: boolean;
+    open?: boolean | undefined;
     /** Initial open state, for uncontrolled usage. */
     defaultOpen?: boolean;
     /**
-     * Which viewport edge the drawer slides in from, expressed logically so it
-     * mirrors under `dir="rtl"`. Surfaces verbatim as `data-placement`.
+     * Which viewport edge the drawer slides in from, expressed logically so it mirrors under `dir="rtl"`.
+     * Surfaces verbatim as `data-placement`.
      */
     placement?: DrawerPlacement;
-    /**
-     * Whether the drawer traps focus and locks body scroll. `false` leaves the
-     * page interactive but keeps Escape and outside-interaction dismissal.
-     */
+    /** Whether the drawer traps focus and locks body scroll; `false` keeps Escape and outside-interaction dismissal. */
     modal?: boolean;
     /**
-     * Which dismissal channels are allowed to close the drawer: `'any'` — both;
-     * `'escape'` — the Escape key only; `'outside'` — an outside pointer-down
-     * or focus move only; `'none'` — neither, leaving the drawer closable only
-     * through `<SkdxDrawerClose>`, `<SkdxDrawerTrigger>` or the `open` prop.
-     *
-     * A policy, not a mute switch: `@escape-key-down`, `@pointer-down-outside`,
-     * `@focus-outside` and `@interact-outside` all still fire under every
-     * value, and `preventDefault()` still vetoes an attempt the policy allows.
-     *
-     * Unlike Dialog, a drawer dismisses on an outside interaction whether or
-     * not it is modal — so `:modal="false"` does not switch outside dismissal
-     * off, and this prop is the only declarative way to do it. Reflected as
-     * `data-dismiss` on `<SkdxDrawerContent>`; this root renders no element.
+     * Which dismissal channels can close the drawer: `'any'`, `'escape'`, `'outside'`, or `'none'`.
+     * Reflected as `data-dismiss` on `<SkdxDrawerContent>`.
      */
     dismiss?: DrawerDismiss;
     /**
      * Title rendered by the derived anatomy as `SkdxDrawerTitle`.
-     * @default undefined — no title is rendered.
+     * @default undefined
      */
-    title?: string;
+    title?: string | undefined;
     /**
      * Description rendered by the derived anatomy as `SkdxDrawerDescription`.
-     * @default undefined — no description is rendered.
+     * @default undefined
      */
-    description?: string;
+    description?: string | undefined;
     /**
-     * Whether the drawer can be dismissed at all. `false` forces `dismiss` to
-     * `'none'` regardless of that prop's own value **and** withholds the
-     * derived close button, leaving `open` and `SkdxDrawerTrigger` as the only
-     * ways out.
+     * Whether the drawer can be dismissed at all; `false` forces `dismiss` to `'none'` and withholds the derived close button.
      * @default true
      */
     dismissible?: boolean;
+    /**
+     * Size rung the skin renders the panel at, applied to the derived Content part.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_14: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
@@ -93,14 +58,13 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "open-change": (open: boolean) => any;
     "open-change-complete": (open: boolean) => 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;
+    "onOpen-change-complete"?: (open: boolean) => any;
 }>, {
-    title: string;
-    description: string;
+    size: "sm" | "md" | "lg" | (string & {}) | undefined;
     dismissible: boolean;
-    open: boolean;
+    open: boolean | undefined;
     defaultOpen: boolean;
     modal: boolean;
     dismiss: DrawerDismiss;

package/dist/drawer/Drawer.vue.d.ts

@@ -1,14 +1,6 @@
 import type { DrawerDismiss, DrawerPlacement } from './context.js';
 /**
- * Panel anchored to one edge of the viewport with slide-in/out animation.
- * Works controlled (`v-model:open`) or uncontrolled (`default-open`).
- * Renders title, description, body content, optional footer, and optional close
- * button. Like AlertDialog but positioned, and with configurable dismissal
- * policy.
- *
- * Emits `open-change` the instant the state flips and `open-change-complete`
- * once the animation finishes — after `SkdxDrawerContent`'s slide-in or
- * slide-out animation ends, or immediately when it declares none.
+ * Panel anchored to one edge of the viewport with slide-in/out animation, and title/description/footer anatomy.
  *
  * @example
  * ```vue
@@ -16,71 +8,44 @@ import type { DrawerDismiss, DrawerPlacement } from './context.js';
  *   <nav>…</nav>
  * </SkdxDrawer>
  * ```
- *
- * @example Full primitive composition —
- * `import * as Drawer from '@skdx/vue/primitives/drawer'`:
- * ```vue
- * <Drawer.Root placement="start">
- *   <Drawer.Trigger>Menu</Drawer.Trigger>
- *   <Drawer.Portal>
- *     <Drawer.Overlay />
- *     <Drawer.Content>
- *       <Drawer.Title>Navigation</Drawer.Title>
- *       <Drawer.Close>Close</Drawer.Close>
- *     </Drawer.Content>
- *   </Drawer.Portal>
- * </Drawer.Root>
- * ```
  */
 type __VLS_Props = {
     /** Controlled open state. Pair with `v-model:open` or `@open-change`. */
-    open?: boolean;
+    open?: boolean | undefined;
     /** Initial open state, for uncontrolled usage. */
     defaultOpen?: boolean;
     /**
-     * Which viewport edge the drawer slides in from, expressed logically so it
-     * mirrors under `dir="rtl"`. Surfaces verbatim as `data-placement`.
+     * Which viewport edge the drawer slides in from, expressed logically so it mirrors under `dir="rtl"`.
+     * Surfaces verbatim as `data-placement`.
      */
     placement?: DrawerPlacement;
-    /**
-     * Whether the drawer traps focus and locks body scroll. `false` leaves the
-     * page interactive but keeps Escape and outside-interaction dismissal.
-     */
+    /** Whether the drawer traps focus and locks body scroll; `false` keeps Escape and outside-interaction dismissal. */
     modal?: boolean;
     /**
-     * Which dismissal channels are allowed to close the drawer: `'any'` — both;
-     * `'escape'` — the Escape key only; `'outside'` — an outside pointer-down
-     * or focus move only; `'none'` — neither, leaving the drawer closable only
-     * through `<SkdxDrawerClose>`, `<SkdxDrawerTrigger>` or the `open` prop.
-     *
-     * A policy, not a mute switch: `@escape-key-down`, `@pointer-down-outside`,
-     * `@focus-outside` and `@interact-outside` all still fire under every
-     * value, and `preventDefault()` still vetoes an attempt the policy allows.
-     *
-     * Unlike Dialog, a drawer dismisses on an outside interaction whether or
-     * not it is modal — so `:modal="false"` does not switch outside dismissal
-     * off, and this prop is the only declarative way to do it. Reflected as
-     * `data-dismiss` on `<SkdxDrawerContent>`; this root renders no element.
+     * Which dismissal channels can close the drawer: `'any'`, `'escape'`, `'outside'`, or `'none'`.
+     * Reflected as `data-dismiss` on `<SkdxDrawerContent>`.
      */
     dismiss?: DrawerDismiss;
     /**
      * Title rendered by the derived anatomy as `SkdxDrawerTitle`.
-     * @default undefined — no title is rendered.
+     * @default undefined
      */
-    title?: string;
+    title?: string | undefined;
     /**
      * Description rendered by the derived anatomy as `SkdxDrawerDescription`.
-     * @default undefined — no description is rendered.
+     * @default undefined
      */
-    description?: string;
+    description?: string | undefined;
     /**
-     * Whether the drawer can be dismissed at all. `false` forces `dismiss` to
-     * `'none'` regardless of that prop's own value **and** withholds the
-     * derived close button, leaving `open` and `SkdxDrawerTrigger` as the only
-     * ways out.
+     * Whether the drawer can be dismissed at all; `false` forces `dismiss` to `'none'` and withholds the derived close button.
      * @default true
      */
     dismissible?: boolean;
+    /**
+     * Size rung the skin renders the panel at, applied to the derived Content part.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_14: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
@@ -93,14 +58,13 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "open-change": (open: boolean) => any;
     "open-change-complete": (open: boolean) => 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;
+    "onOpen-change-complete"?: (open: boolean) => any;
 }>, {
-    title: string;
-    description: string;
+    size: "sm" | "md" | "lg" | (string & {}) | undefined;
     dismissible: boolean;
-    open: boolean;
+    open: boolean | undefined;
     defaultOpen: boolean;
     modal: boolean;
     dismiss: DrawerDismiss;

package/dist/drawer/Drawer.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("./DrawerAnatomy.vue.cjs"),a=require("./DrawerRoot.vue.cjs");let e=require("vue");var d=(0,e.defineComponent)({inheritAttrs:!1,__name:"Drawer",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},placement:{default:"end"},modal:{type:Boolean,default:!0},dismiss:{default:"any"},title:{default:void 0},description:{default:void 0},dismissible:{type:Boolean,default:!0}},emits:["update:open","open-change","open-change-complete"],setup(t){return(i,l)=>((0,e.openBlock)(),(0,e.createBlock)(a.default,{open:t.open,"default-open":t.defaultOpen,placement:t.placement,modal:t.modal,dismiss:t.dismiss,dismissible:t.dismissible,"onUpdate:open":l[0]||(l[0]=n=>i.$emit("update:open",n)),onOpenChange:l[1]||(l[1]=n=>i.$emit("open-change",n)),onOpenChangeComplete:l[2]||(l[2]=n=>i.$emit("open-change-complete",n))},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(o.default,(0,e.mergeProps)(i.$attrs,{title:t.title,description:t.description,dismissible:t.dismissible}),{footer:(0,e.withCtx)(()=>[(0,e.renderSlot)(i.$slots,"footer")]),default:(0,e.withCtx)(()=>[(0,e.renderSlot)(i.$slots,"default")]),_:3},16,["title","description","dismissible"])]),_:3},8,["open","default-open","placement","modal","dismiss","dismissible"]))}});exports.default=d;
+const r=require("./DrawerAnatomy.vue.cjs"),u=require("./DrawerRoot.vue.cjs");let e=require("vue");var m=(0,e.defineComponent)({inheritAttrs:!1,__name:"Drawer",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},placement:{default:"end"},modal:{type:Boolean,default:!0},dismiss:{default:"any"},title:{},description:{},dismissible:{type:Boolean,default:!0},size:{default:void 0}},emits:["update:open","open-change","open-change-complete"],setup(t){const n=t,l=(0,e.useAttrs)(),a=(0,e.computed)(()=>n.size??l["data-size"]),d=(0,e.computed)(()=>{const{"data-size":s,...i}=l;return i});return(s,i)=>((0,e.openBlock)(),(0,e.createBlock)(u.default,{open:t.open,"default-open":t.defaultOpen,placement:t.placement,modal:t.modal,dismiss:t.dismiss,dismissible:t.dismissible,"onUpdate:open":i[0]||(i[0]=o=>s.$emit("update:open",o)),onOpenChange:i[1]||(i[1]=o=>s.$emit("open-change",o)),onOpenChangeComplete:i[2]||(i[2]=o=>s.$emit("open-change-complete",o))},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(r.default,(0,e.mergeProps)(d.value,{size:a.value,title:t.title,description:t.description,dismissible:n.dismissible}),(0,e.createSlots)({default:(0,e.withCtx)(()=>[(0,e.renderSlot)(s.$slots,"default")]),_:2},[s.$slots.footer?{name:"footer",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(s.$slots,"footer")]),key:"0"}:void 0]),1040,["size","title","description","dismissible"])]),_:3},8,["open","default-open","placement","modal","dismiss","dismissible"]))}});exports.default=m;

package/dist/drawer/Drawer.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import e from"./DrawerAnatomy.vue.js";import t from"./DrawerRoot.vue.js";import{createBlock as o,createVNode as s,defineComponent as a,mergeProps as i,openBlock as n,renderSlot as l,withCtx as d}from"vue";var p=/* @__PURE__ */a({inheritAttrs:!1,__name:"Drawer",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},placement:{default:"end"},modal:{type:Boolean,default:!0},dismiss:{default:"any"},title:{default:void 0},description:{default:void 0},dismissible:{type:Boolean,default:!0}},emits:["update:open","open-change","open-change-complete"],setup:a=>(p,m)=>(n(),o(t,{open:a.open,"default-open":a.defaultOpen,placement:a.placement,modal:a.modal,dismiss:a.dismiss,dismissible:a.dismissible,"onUpdate:open":m[0]||(m[0]=e=>p.$emit("update:open",e)),onOpenChange:m[1]||(m[1]=e=>p.$emit("open-change",e)),onOpenChangeComplete:m[2]||(m[2]=e=>p.$emit("open-change-complete",e))},{default:d(()=>[s(e,i(p.$attrs,{title:a.title,description:a.description,dismissible:a.dismissible}),{footer:d(()=>[l(p.$slots,"footer")]),default:d(()=>[l(p.$slots,"default")]),_:3},16,["title","description","dismissible"])]),_:3},8,["open","default-open","placement","modal","dismiss","dismissible"]))});export{p as default};
+import e from"./DrawerAnatomy.vue.js";import t from"./DrawerRoot.vue.js";import{computed as s,createBlock as o,createSlots as a,createVNode as i,defineComponent as n,mergeProps as l,openBlock as d,renderSlot as p,useAttrs as m,withCtx as r}from"vue";var u=/* @__PURE__ */n({inheritAttrs:!1,__name:"Drawer",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},placement:{default:"end"},modal:{type:Boolean,default:!0},dismiss:{default:"any"},title:{},description:{},dismissible:{type:Boolean,default:!0},size:{default:void 0}},emits:["update:open","open-change","open-change-complete"],setup(n){const u=n,f=m(),c=s(()=>u.size??f["data-size"]),v=s(()=>{const{"data-size":e,...t}=f;return t});return(s,m)=>(d(),o(t,{open:n.open,"default-open":n.defaultOpen,placement:n.placement,modal:n.modal,dismiss:n.dismiss,dismissible:n.dismissible,"onUpdate:open":m[0]||(m[0]=e=>s.$emit("update:open",e)),onOpenChange:m[1]||(m[1]=e=>s.$emit("open-change",e)),onOpenChangeComplete:m[2]||(m[2]=e=>s.$emit("open-change-complete",e))},{default:r(()=>[i(e,l(v.value,{size:c.value,title:n.title,description:n.description,dismissible:u.dismissible}),a({default:r(()=>[p(s.$slots,"default")]),_:2},[s.$slots.footer?{name:"footer",fn:r(()=>[p(s.$slots,"footer")]),key:"0"}:void 0]),1040,["size","title","description","dismissible"])]),_:3},8,["open","default-open","placement","modal","dismiss","dismissible"]))}});export{u as default};

package/dist/drawer/DrawerAnatomy.vue.d.cts

@@ -1,13 +1,16 @@
 /**
- * The anatomy a `SkdxDrawer` renders: a portalled backdrop and sliding panel
- * with derived title, description, slotted body, optional footer, and corner
- * close button unless `dismissible` is `false`.
+ * The anatomy a `SkdxDrawer` renders: portalled backdrop, sliding panel, derived title/description, footer and close button.
  * @internal
  */
 type __VLS_Props = {
-    title?: string;
-    description?: string;
+    title?: string | undefined;
+    description?: string | undefined;
     dismissible: boolean;
+    /**
+     * Size rung the skin renders the panel at, applied to the derived Content part.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {

package/dist/drawer/DrawerAnatomy.vue.d.ts

@@ -1,13 +1,16 @@
 /**
- * The anatomy a `SkdxDrawer` renders: a portalled backdrop and sliding panel
- * with derived title, description, slotted body, optional footer, and corner
- * close button unless `dismissible` is `false`.
+ * The anatomy a `SkdxDrawer` renders: portalled backdrop, sliding panel, derived title/description, footer and close button.
  * @internal
  */
 type __VLS_Props = {
-    title?: string;
-    description?: string;
+    title?: string | undefined;
+    description?: string | undefined;
     dismissible: boolean;
+    /**
+     * Size rung the skin renders the panel at, applied to the derived Content part.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {

package/dist/drawer/DrawerAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const l=require("./DrawerClose.vue.cjs"),i=require("./DrawerContent.vue.cjs"),n=require("./DrawerDescription.vue.cjs"),s=require("./DrawerOverlay.vue.cjs"),u=require("./DrawerPortal.vue.cjs"),d=require("./DrawerTitle.vue.cjs");let e=require("vue");var c={key:2,class:"skdx-drawer__footer","data-part":"footer"},f=(0,e.defineComponent)({inheritAttrs:!1,__name:"DrawerAnatomy",props:{title:{},description:{},dismissible:{type:Boolean}},setup(t){const a=(0,e.useSlots)();return(r,o)=>((0,e.openBlock)(),(0,e.createBlock)(u.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(s.default),(0,e.createVNode)(i.default,(0,e.normalizeProps)((0,e.guardReactiveProps)(r.$attrs)),{default:(0,e.withCtx)(()=>[t.title?((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.title),1)]),_:1})):(0,e.createCommentVNode)("",!0),t.description?((0,e.openBlock)(),(0,e.createBlock)(n.default,{key:1},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.description),1)]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.renderSlot)(r.$slots,"default"),(0,e.unref)(a).footer?((0,e.openBlock)(),(0,e.createElementBlock)("div",c,[(0,e.renderSlot)(r.$slots,"footer")])):(0,e.createCommentVNode)("",!0),t.dismissible?((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:3,class:"skdx-drawer__close-icon","aria-label":"Close"},{default:(0,e.withCtx)(()=>[...o[0]||(o[0]=[(0,e.createElementVNode)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false"},[(0,e.createElementVNode)("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1})):(0,e.createCommentVNode)("",!0)]),_:3},16)]),_:3}))}});exports.default=f;
+const a=require("../utils/Glyph.vue.cjs"),l=require("./DrawerClose.vue.cjs"),i=require("./DrawerContent.vue.cjs"),s=require("./DrawerDescription.vue.cjs"),u=require("./DrawerOverlay.vue.cjs"),n=require("./DrawerPortal.vue.cjs"),c=require("./DrawerTitle.vue.cjs");let e=require("vue");var d={key:2,class:"skdx-drawer__footer","data-part":"footer"},f=(0,e.defineComponent)({inheritAttrs:!1,__name:"DrawerAnatomy",props:{title:{},description:{},dismissible:{type:Boolean},size:{}},setup(t){const o=(0,e.useSlots)();return(r,m)=>((0,e.openBlock)(),(0,e.createBlock)(n.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(u.default),(0,e.createVNode)(i.default,(0,e.mergeProps)(r.$attrs,{size:t.size}),{default:(0,e.withCtx)(()=>[t.title?((0,e.openBlock)(),(0,e.createBlock)(c.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.title),1)]),_:1})):(0,e.createCommentVNode)("",!0),t.description?((0,e.openBlock)(),(0,e.createBlock)(s.default,{key:1},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.description),1)]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.renderSlot)(r.$slots,"default"),(0,e.unref)(o).footer?((0,e.openBlock)(),(0,e.createElementBlock)("div",d,[(0,e.renderSlot)(r.$slots,"footer")])):(0,e.createCommentVNode)("",!0),t.dismissible?((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:3,class:"skdx-drawer__close-icon","aria-label":"Close"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(a.default,{name:"close"})]),_:1})):(0,e.createCommentVNode)("",!0)]),_:3},16,["size"])]),_:3}))}});exports.default=f;

package/dist/drawer/DrawerAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import e from"./DrawerClose.vue.js";import r from"./DrawerContent.vue.js";import t from"./DrawerDescription.vue.js";import o from"./DrawerOverlay.vue.js";import a from"./DrawerPortal.vue.js";import s from"./DrawerTitle.vue.js";import{createBlock as i,createCommentVNode as l,createElementBlock as n,createElementVNode as d,createTextVNode as m,createVNode as u,defineComponent as p,guardReactiveProps as f,normalizeProps as c,openBlock as k,renderSlot as v,toDisplayString as w,unref as _,useSlots as D,withCtx as h}from"vue";var y={key:2,class:"skdx-drawer__footer","data-part":"footer"},j=/* @__PURE__ */p({inheritAttrs:!1,__name:"DrawerAnatomy",props:{title:{},description:{},dismissible:{type:Boolean}},setup(p){const j=D();return(D,C)=>(k(),i(a,null,{default:h(()=>[u(o),u(r,c(f(D.$attrs)),{default:h(()=>[p.title?(k(),i(s,{key:0},{default:h(()=>[m(w(p.title),1)]),_:1})):l("",!0),p.description?(k(),i(t,{key:1},{default:h(()=>[m(w(p.description),1)]),_:1})):l("",!0),v(D.$slots,"default"),_(j).footer?(k(),n("div",y,[v(D.$slots,"footer")])):l("",!0),p.dismissible?(k(),i(e,{key:3,class:"skdx-drawer__close-icon","aria-label":"Close"},{default:h(()=>[...C[0]||(C[0]=[d("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false"},[d("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1})):l("",!0)]),_:3},16)]),_:3}))}});export{j as default};
+import e from"../utils/Glyph.vue.js";import r from"./DrawerClose.vue.js";import t from"./DrawerContent.vue.js";import s from"./DrawerDescription.vue.js";import o from"./DrawerOverlay.vue.js";import a from"./DrawerPortal.vue.js";import i from"./DrawerTitle.vue.js";import{createBlock as l,createCommentVNode as m,createElementBlock as n,createTextVNode as d,createVNode as p,defineComponent as f,mergeProps as u,openBlock as c,renderSlot as v,toDisplayString as _,unref as w,useSlots as k,withCtx as y}from"vue";var D={key:2,class:"skdx-drawer__footer","data-part":"footer"},j=/* @__PURE__ */f({inheritAttrs:!1,__name:"DrawerAnatomy",props:{title:{},description:{},dismissible:{type:Boolean},size:{}},setup(f){const j=k();return(k,C)=>(c(),l(a,null,{default:y(()=>[p(o),p(t,u(k.$attrs,{size:f.size}),{default:y(()=>[f.title?(c(),l(i,{key:0},{default:y(()=>[d(_(f.title),1)]),_:1})):m("",!0),f.description?(c(),l(s,{key:1},{default:y(()=>[d(_(f.description),1)]),_:1})):m("",!0),v(k.$slots,"default"),w(j).footer?(c(),n("div",D,[v(k.$slots,"footer")])):m("",!0),f.dismissible?(c(),l(r,{key:3,class:"skdx-drawer__close-icon","aria-label":"Close"},{default:y(()=>[p(e,{name:"close"})]),_:1})):m("",!0)]),_:3},16,["size"])]),_:3}))}});export{j as default};

package/dist/drawer/DrawerClose.vue.d.cts

@@ -1,12 +1,8 @@
-/**
- * Button that closes the drawer when clicked. Renders inside
- * `<SkdxDrawerContent>` anywhere (e.g. the panel's header "×"). Must be used
- * inside `<SkdxDrawer>`.
- */
+/** Button that closes the drawer when clicked, rendered anywhere inside `<SkdxDrawerContent>`. */
 type __VLS_Props = {};
-declare var __VLS_1: {};
+declare var __VLS_5: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/drawer/DrawerClose.vue.d.ts

@@ -1,12 +1,8 @@
-/**
- * Button that closes the drawer when clicked. Renders inside
- * `<SkdxDrawerContent>` anywhere (e.g. the panel's header "×"). Must be used
- * inside `<SkdxDrawer>`.
- */
+/** Button that closes the drawer when clicked, rendered anywhere inside `<SkdxDrawerContent>`. */
 type __VLS_Props = {};
-declare var __VLS_1: {};
+declare var __VLS_5: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/drawer/DrawerClose.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("./context.cjs");let e=require("vue");var s=(0,e.defineComponent)({__name:"DrawerClose",setup(u){const t=(0,e.inject)(o.DRAWER_CONTEXT);if(!t)throw new Error("<SkdxDrawerClose> must be used inside <SkdxDrawer>.");return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-drawer__close","data-part":"close",type:"button",onClick:r[0]||(r[0]=l=>(0,e.unref)(t).setOpen(!1))},[(0,e.renderSlot)(n.$slots,"default")]))}});exports.default=s;
+const t=require("../utils/injectRequired.cjs"),u=require("../dialog/DialogClose.vue.cjs"),l=require("./context.cjs");let e=require("vue");var _=(0,e.defineComponent)({__name:"DrawerClose",setup(i){return t.injectRequired(l.DRAWER_CONTEXT,"<SkdxDrawerClose> must be used inside <SkdxDrawer>."),(r,n)=>((0,e.openBlock)(),(0,e.createBlock)(u.default,null,{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(r.$slots,"default")]),_:3}))}});exports.default=_;

package/dist/drawer/DrawerClose.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{DRAWER_CONTEXT as e}from"./context.js";import{createElementBlock as t,defineComponent as r,inject as s,openBlock as o,renderSlot as a,unref as n}from"vue";var l=/* @__PURE__ */r({__name:"DrawerClose",setup(r){const l=s(e);if(!l)throw new Error("<SkdxDrawerClose> must be used inside <SkdxDrawer>.");return(e,r)=>(o(),t("button",{class:"skdx-drawer__close","data-part":"close",type:"button",onClick:r[0]||(r[0]=e=>n(l).setOpen(!1))},[a(e.$slots,"default")]))}});export{l as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import o from"../dialog/DialogClose.vue.js";import{DRAWER_CONTEXT as r}from"./context.js";import{createBlock as s,defineComponent as t,openBlock as a,renderSlot as i,withCtx as l}from"vue";var d=/* @__PURE__ */t({__name:"DrawerClose",setup:t=>(e(r,"<SkdxDrawerClose> must be used inside <SkdxDrawer>."),(e,r)=>(a(),s(o,null,{default:l(()=>[i(e.$slots,"default")]),_:3})))});export{d as default};