@skdx/vue 0.27.0 → 0.28.0

package/dist/alert/Alert.vue.d.ts

@@ -5,9 +5,34 @@
  * `<SkdxAlertTitle>`/`<SkdxAlertDescription>`/`<SkdxAlertClose>` can `inject()`
  * them — Vue's equivalent of React context for slotted content.
  *
+ * ```vue
+ * <SkdxAlert data-status="success" title="Saved" description="Your changes are live." />
+ * ```
+ *
+ * Severity is the author-set `data-status` attribute, not a prop: write it on
+ * the alert and it lands on the live region, which is what the skin keys the
+ * wash, the leading-edge stripe and the icon colour on. `AlertStatus` types
+ * its values. It is not an accessible name — an alert with a non-neutral
+ * status must also carry an `icon` or say the severity in its `title`.
+ *
+ * Given no default slot it derives its anatomy from `title`, `description`,
+ * `dismissible` and the `icon`/`action` slots; given one, that content is the
+ * alert body and nothing is derived. The parts are advanced primitives —
+ * `@skdx/vue/primitives/alert`.
+ *
  * Works controlled (`v-model:open`) or uncontrolled (`default-open`, which
  * defaults to `true`); when closed it renders nothing. Never dismisses on a
  * timer.
+ *
+ * **An alert that is open on first render is not announced.** A live region
+ * has to be in the accessibility tree *before* its text changes, and with
+ * `default-open` at `true` the region and its content mount together. The
+ * default is not changed, because a static banner has to keep rendering as it
+ * always did; an alert that must be announced has to mount after load, or the
+ * consumer has to render a persistent empty live region and fill it.
+ *
+ * Dismissal restores focus rather than dropping it on `document.body` — see
+ * `focusAfterAlertDismiss`.
  */
 type __VLS_Props = {
     /**
@@ -15,14 +40,47 @@ type __VLS_Props = {
      * Use `"alert"` for assertive, time-critical messages (WAI-ARIA alert role).
      */
     role?: 'status' | 'alert';
+    /**
+     * The alert's heading, rendered as the derived Title and pointed at by
+     * `aria-labelledby`.
+     * @default undefined
+     */
+    title?: string;
+    /**
+     * The alert's supporting text, rendered as the derived Description and
+     * pointed at by `aria-describedby`.
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * Whether the derived anatomy renders a dismiss button, named by `closeLabel`.
+     * @default false
+     */
+    dismissible?: boolean;
     /** Controlled visibility. Pair with `v-model:open` or `@open-change`. */
     open?: boolean;
     /** Initial visibility, used only when the alert is uncontrolled. @default true */
     defaultOpen?: boolean;
+    /**
+     * Accessible name for `<SkdxAlertClose>`, an icon-only button with no visible text.
+     * Lives on the root, not the part. `aria-label` on `AlertClose` overrides.
+     * @default 'Dismiss'
+     */
+    closeLabel?: string;
+    /**
+     * Whether `Escape` dismisses the alert while focus is inside it. Opt-in;
+     * when enabled, focus restores to the nearest focusable element before the alert.
+     * @default false
+     */
+    dismissOnEscape?: boolean;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_6) => any;
+} & {
+    action?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
@@ -31,9 +89,14 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     "onOpen-change"?: ((open: boolean) => any) | undefined;
 }>, {
+    title: string;
+    description: string;
+    dismissible: boolean;
     role: "status" | "alert";
     open: boolean;
     defaultOpen: boolean;
+    closeLabel: string;
+    dismissOnEscape: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/alert/Alert.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("./context.cjs");let e=require("vue");var c=["role","aria-live","aria-labelledby","aria-describedby"],v=(0,e.defineComponent)({__name:"Alert",props:{role:{default:"status"},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!0}},emits:["update:open","open-change"],setup(r,{emit:u}){const a=r,l=u,n=(0,e.ref)(a.defaultOpen),p=(0,e.computed)(()=>a.open??n.value);function s(t){a.open===void 0&&(n.value=t),l("update:open",t),l("open-change",t)}const d=o.nextAlertId("title"),i=o.nextAlertId("description");return(0,e.provide)(o.ALERT_CONTEXT,{titleId:d,descriptionId:i,setOpen:s}),(t,f)=>p.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-alert","data-part":"root","data-skdx-component":"alert",role:r.role,"aria-live":r.role==="alert"?"assertive":"polite","aria-labelledby":(0,e.unref)(d),"aria-describedby":(0,e.unref)(i)},[(0,e.renderSlot)(t.$slots,"default")],8,c)):(0,e.createCommentVNode)("",!0)}});exports.default=v;
+const i=require("./context.cjs"),v=require("./AlertAnatomy.vue.cjs");let e=require("vue");var y=["role","aria-live","aria-labelledby","aria-describedby"],b=(0,e.defineComponent)({__name:"Alert",props:{role:{default:"status"},title:{default:void 0},description:{default:void 0},dismissible:{type:Boolean,default:!1},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!0},closeLabel:{default:"Dismiss"},dismissOnEscape:{type:Boolean,default:!1}},emits:["update:open","open-change"],setup(l,{emit:f}){const o=l,a=f,r=(0,e.ref)(o.defaultOpen),p=(0,e.computed)(()=>o.open??r.value),n=(0,e.ref)(null);let s=null;(0,e.onMounted)(()=>{s=n.value?.ownerDocument.activeElement??null});function d(t){t||i.focusAfterAlertDismiss(n.value,s),o.open===void 0&&(r.value=t),a("update:open",t),a("open-change",t)}function m(t){!o.dismissOnEscape||t.key!=="Escape"||(t.preventDefault(),d(!1))}const u=i.nextAlertId("title"),c=i.nextAlertId("description");return(0,e.provide)(i.ALERT_CONTEXT,{titleId:u,descriptionId:c,get closeLabel(){return o.closeLabel},setOpen:d}),(t,k)=>p.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-alert","data-part":"root","data-skdx-component":"alert",role:l.role,"aria-live":l.role==="alert"?"assertive":"polite","aria-labelledby":(0,e.unref)(u),"aria-describedby":(0,e.unref)(c),ref_key:"rootRef",ref:n,onKeydown:m},[(0,e.renderSlot)(t.$slots,"default",{},()=>[(0,e.createVNode)(v.default,{title:l.title,description:l.description,dismissible:l.dismissible},(0,e.createSlots)({_:2},[t.$slots.icon?{name:"icon",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"icon")]),key:"0"}:void 0,t.$slots.action?{name:"action",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"action")]),key:"1"}:void 0]),1032,["title","description","dismissible"])])],40,y)):(0,e.createCommentVNode)("",!0)}});exports.default=b;

package/dist/alert/Alert.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{ALERT_CONTEXT as e,nextAlertId as a}from"./context.js";import{computed as t,createCommentVNode as o,createElementBlock as l,defineComponent as r,openBlock as n,provide as d,ref as s,renderSlot as p,unref as i}from"vue";var u=["role","aria-live","aria-labelledby","aria-describedby"],c=/* @__PURE__ */r({__name:"Alert",props:{role:{default:"status"},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!0}},emits:["update:open","open-change"],setup(r,{emit:c}){const f=r,m=c,v=s(f.defaultOpen),b=t(()=>f.open??v.value),y=a("title"),k=a("description");return d(e,{titleId:y,descriptionId:k,setOpen:function(e){void 0===f.open&&(v.value=e),m("update:open",e),m("open-change",e)}}),(e,a)=>b.value?(n(),l("div",{key:0,class:"skdx-alert","data-part":"root","data-skdx-component":"alert",role:r.role,"aria-live":"alert"===r.role?"assertive":"polite","aria-labelledby":i(y),"aria-describedby":i(k)},[p(e.$slots,"default")],8,u)):o("",!0)}});export{c as default};
+import{ALERT_CONTEXT as e,focusAfterAlertDismiss as t,nextAlertId as a}from"./context.js";import o from"./AlertAnatomy.vue.js";import{computed as s,createCommentVNode as l,createElementBlock as i,createSlots as n,createVNode as r,defineComponent as d,onMounted as p,openBlock as c,provide as u,ref as f,renderSlot as m,unref as v,withCtx as b}from"vue";var y=["role","aria-live","aria-labelledby","aria-describedby"],k=/* @__PURE__ */d({__name:"Alert",props:{role:{default:"status"},title:{default:void 0},description:{default:void 0},dismissible:{type:Boolean,default:!1},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!0},closeLabel:{default:"Dismiss"},dismissOnEscape:{type:Boolean,default:!1}},emits:["update:open","open-change"],setup(d,{emit:k}){const A=d,E=k,x=f(A.defaultOpen),B=s(()=>A.open??x.value),O=f(null);let $=null;function _(e){e||t(O.value,$),void 0===A.open&&(x.value=e),E("update:open",e),E("open-change",e)}function C(e){!A.dismissOnEscape||"Escape"!==e.key||(e.preventDefault(),_(!1))}p(()=>{$=O.value?.ownerDocument.activeElement??null});const D=a("title"),L=a("description");return u(e,{titleId:D,descriptionId:L,get closeLabel(){return A.closeLabel},setOpen:_}),(e,t)=>B.value?(c(),i("div",{key:0,class:"skdx-alert","data-part":"root","data-skdx-component":"alert",role:d.role,"aria-live":"alert"===d.role?"assertive":"polite","aria-labelledby":v(D),"aria-describedby":v(L),ref_key:"rootRef",ref:O,onKeydown:C},[m(e.$slots,"default",{},()=>[r(o,{title:d.title,description:d.description,dismissible:d.dismissible},n({_:2},[e.$slots.icon?{name:"icon",fn:b(()=>[m(e.$slots,"icon")]),key:"0"}:void 0,e.$slots.action?{name:"action",fn:b(()=>[m(e.$slots,"action")]),key:"1"}:void 0]),1032,["title","description","dismissible"])])],40,y)):l("",!0)}});export{k as default};

package/dist/alert/AlertAnatomy.vue.cjs

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

package/dist/alert/AlertAnatomy.vue.d.cts

@@ -0,0 +1,28 @@
+/**
+ * Anatomy when default slot empty: icon, title/description, action row, dismiss (if dismissible).
+ * React port's `AlertAnatomy.tsx` must stay synchronized.
+ * @internal
+ */
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    dismissible?: boolean;
+};
+declare var __VLS_4: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_4) => any;
+} & {
+    action?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/alert/AlertAnatomy.vue.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Anatomy when default slot empty: icon, title/description, action row, dismiss (if dismissible).
+ * React port's `AlertAnatomy.tsx` must stay synchronized.
+ * @internal
+ */
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    dismissible?: boolean;
+};
+declare var __VLS_4: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_4) => any;
+} & {
+    action?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/alert/AlertAnatomy.vue.js

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

package/dist/alert/AlertAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const i=require("./AlertAction.vue.cjs"),n=require("./AlertClose.vue.cjs"),u=require("./AlertDescription.vue.cjs"),a=require("./AlertIcon.vue.cjs"),c=require("./AlertTitle.vue.cjs");let e=require("vue");var d=(0,e.defineComponent)({__name:"AlertAnatomy",props:{title:{default:void 0},description:{default:void 0},dismissible:{type:Boolean,default:!1}},setup(t){const r=(0,e.useSlots)();return(o,l)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.unref)(r).icon?((0,e.openBlock)(),(0,e.createBlock)(a.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(o.$slots,"icon")]),_:3})):(0,e.createCommentVNode)("",!0),t.title?((0,e.openBlock)(),(0,e.createBlock)(c.default,{key:1},{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)(u.default,{key:2},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.description),1)]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.unref)(r).action?((0,e.openBlock)(),(0,e.createBlock)(i.default,{key:3},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(o.$slots,"action")]),_:3})):(0,e.createCommentVNode)("",!0),t.dismissible?((0,e.openBlock)(),(0,e.createBlock)(n.default,{key:4},{default:(0,e.withCtx)(()=>[...l[0]||(l[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)],64))}});exports.default=d;

package/dist/alert/AlertAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"./AlertAction.vue.js";import t from"./AlertClose.vue.js";import o from"./AlertDescription.vue.js";import r from"./AlertIcon.vue.js";import s from"./AlertTitle.vue.js";import{Fragment as i,createBlock as l,createCommentVNode as a,createElementBlock as n,createElementVNode as d,createTextVNode as u,defineComponent as m,openBlock as c,renderSlot as f,toDisplayString as p,unref as k,useSlots as v,withCtx as y}from"vue";var A=/* @__PURE__ */m({__name:"AlertAnatomy",props:{title:{default:void 0},description:{default:void 0},dismissible:{type:Boolean,default:!1}},setup(m){const A=v();return(v,h)=>(c(),n(i,null,[k(A).icon?(c(),l(r,{key:0},{default:y(()=>[f(v.$slots,"icon")]),_:3})):a("",!0),m.title?(c(),l(s,{key:1},{default:y(()=>[u(p(m.title),1)]),_:1})):a("",!0),m.description?(c(),l(o,{key:2},{default:y(()=>[u(p(m.description),1)]),_:1})):a("",!0),k(A).action?(c(),l(e,{key:3},{default:y(()=>[f(v.$slots,"action")]),_:3})):a("",!0),m.dismissible?(c(),l(t,{key:4},{default:y(()=>[...h[0]||(h[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})):a("",!0)],64))}});export{A as default};

package/dist/alert/AlertClose.vue.d.cts

@@ -1,11 +1,6 @@
 /**
- * Button that dismisses the alert when clicked — sets the parent
- * `<SkdxAlert>`'s visibility to `false` (uncontrolled) and emits
- * `open-change` either way. Must be used inside `<SkdxAlert>`.
- *
- * Carries a default `aria-label="Dismiss"` so the common icon-only close
- * button is never an unnamed button; a consumer-supplied `aria-label` wins
- * via Vue's fallthrough attributes.
+ * Button that dismisses the alert, moving focus to the nearest focusable
+ * element before it. Uses the root's `closeLabel` as the accessible name.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/alert/AlertClose.vue.d.ts

@@ -1,11 +1,6 @@
 /**
- * Button that dismisses the alert when clicked — sets the parent
- * `<SkdxAlert>`'s visibility to `false` (uncontrolled) and emits
- * `open-change` either way. Must be used inside `<SkdxAlert>`.
- *
- * Carries a default `aria-label="Dismiss"` so the common icon-only close
- * button is never an unnamed button; a consumer-supplied `aria-label` wins
- * via Vue's fallthrough attributes.
+ * Button that dismisses the alert, moving focus to the nearest focusable
+ * element before it. Uses the root's `closeLabel` as the accessible name.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/alert/AlertClose.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const s=require("./context.cjs");let e=require("vue");var n=(0,e.defineComponent)({__name:"AlertClose",setup(o){const t=(0,e.inject)(s.ALERT_CONTEXT);if(!t)throw new Error("<SkdxAlertClose> must be used inside <SkdxAlert>.");return(l,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-alert__close","data-part":"close",type:"button","aria-label":"Dismiss",onClick:r[0]||(r[0]=u=>(0,e.unref)(t).setOpen(!1))},[(0,e.renderSlot)(l.$slots,"default")]))}});exports.default=n;
+const n=require("./context.cjs");let e=require("vue");var o=["aria-label"],s=(0,e.defineComponent)({__name:"AlertClose",setup(a){const t=(0,e.inject)(n.ALERT_CONTEXT);if(!t)throw new Error("<SkdxAlertClose> must be used inside <SkdxAlert>.");return(l,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-alert__close","data-part":"close",type:"button","aria-label":(0,e.unref)(t).closeLabel,onClick:r[0]||(r[0]=u=>(0,e.unref)(t).setOpen(!1))},[(0,e.renderSlot)(l.$slots,"default")],8,o))}});exports.default=s;

package/dist/alert/AlertClose.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{ALERT_CONTEXT as e}from"./context.js";import{createElementBlock as t,defineComponent as s,inject as o,openBlock as r,renderSlot as a,unref as l}from"vue";var n=/* @__PURE__ */s({__name:"AlertClose",setup(s){const n=o(e);if(!n)throw new Error("<SkdxAlertClose> must be used inside <SkdxAlert>.");return(e,s)=>(r(),t("button",{class:"skdx-alert__close","data-part":"close",type:"button","aria-label":"Dismiss",onClick:s[0]||(s[0]=e=>l(n).setOpen(!1))},[a(e.$slots,"default")]))}});export{n as default};
+import{ALERT_CONTEXT as e}from"./context.js";import{createElementBlock as t,defineComponent as a,inject as s,openBlock as o,renderSlot as l,unref as r}from"vue";var n=["aria-label"],c=/* @__PURE__ */a({__name:"AlertClose",setup(a){const c=s(e);if(!c)throw new Error("<SkdxAlertClose> must be used inside <SkdxAlert>.");return(e,a)=>(o(),t("button",{class:"skdx-alert__close","data-part":"close",type:"button","aria-label":r(c).closeLabel,onClick:a[0]||(a[0]=e=>r(c).setOpen(!1))},[l(e.$slots,"default")],8,n))}});export{c as default};

package/dist/alert/context.cjs

@@ -1 +1 @@
-const t=require("../utils/id.cjs");var r=Symbol("skdx-alert-context");function n(e){return t.nextId(`alert-${e}`)}exports.ALERT_CONTEXT=r;exports.nextAlertId=n;
+const s=require("../utils/id.cjs"),n=require("../utils/tabbable.cjs");var l=Symbol("skdx-alert-context");function o(t){return s.nextId(`alert-${t}`)}function c(t,r){for(let e=t?.previousElementSibling;e;e=e.previousElementSibling){const i=e.matches(n.TABBABLE_SELECTOR)?e:e.querySelector(n.TABBABLE_SELECTOR);if(i){i.focus();return}}r?.isConnected&&r.focus()}exports.ALERT_CONTEXT=l;exports.focusAfterAlertDismiss=c;exports.nextAlertId=o;

package/dist/alert/context.d.cts

@@ -1,11 +1,17 @@
 import type { InjectionKey } from 'vue';
+/** Severity a `SkdxAlert` publishes as `data-status`, which is what the skin keys its wash and stripe on. */
+export type AlertStatus = 'info' | 'success' | 'warning' | 'danger';
 /** @internal Injection key an Alert provides so AlertTitle/AlertDescription can read its generated ids and AlertClose can dismiss it. */
 export interface AlertContext {
     titleId: string;
     descriptionId: string;
+    /** Accessible name for `<SkdxAlertClose>`, from the root's `closeLabel`. */
+    closeLabel: string;
     setOpen: (open: boolean) => void;
 }
 /** @internal Injection key an Alert provides so AlertTitle/AlertDescription can read the shared aria ids. */
 export declare const ALERT_CONTEXT: InjectionKey<AlertContext>;
 /** @internal Generates a unique id for one of Alert's parts. */
 export declare function nextAlertId(part: 'title' | 'description'): string;
+/** Focuses nearest preceding focusable element on alert dismiss, or previous focus. @internal */
+export declare function focusAfterAlertDismiss(root: HTMLElement | null, previous: HTMLElement | null): void;

package/dist/alert/context.d.ts

@@ -1,11 +1,17 @@
 import type { InjectionKey } from 'vue';
+/** Severity a `SkdxAlert` publishes as `data-status`, which is what the skin keys its wash and stripe on. */
+export type AlertStatus = 'info' | 'success' | 'warning' | 'danger';
 /** @internal Injection key an Alert provides so AlertTitle/AlertDescription can read its generated ids and AlertClose can dismiss it. */
 export interface AlertContext {
     titleId: string;
     descriptionId: string;
+    /** Accessible name for `<SkdxAlertClose>`, from the root's `closeLabel`. */
+    closeLabel: string;
     setOpen: (open: boolean) => void;
 }
 /** @internal Injection key an Alert provides so AlertTitle/AlertDescription can read the shared aria ids. */
 export declare const ALERT_CONTEXT: InjectionKey<AlertContext>;
 /** @internal Generates a unique id for one of Alert's parts. */
 export declare function nextAlertId(part: 'title' | 'description'): string;
+/** Focuses nearest preceding focusable element on alert dismiss, or previous focus. @internal */
+export declare function focusAfterAlertDismiss(root: HTMLElement | null, previous: HTMLElement | null): void;

package/dist/alert/context.js

@@ -1 +1 @@
-import{nextId as t}from"../utils/id.js";var r=/* @__PURE__ */Symbol("skdx-alert-context");function e(r){return t(`alert-${r}`)}export{r as ALERT_CONTEXT,e as nextAlertId};
+import{nextId as t}from"../utils/id.js";import{TABBABLE_SELECTOR as e}from"../utils/tabbable.js";var s=/* @__PURE__ */Symbol("skdx-alert-context");function r(e){return t(`alert-${e}`)}function o(t,s){for(let s=t?.previousElementSibling;s;s=s.previousElementSibling){const t=s.matches(e)?s:s.querySelector(e);if(t)return void t.focus()}s?.isConnected&&s.focus()}export{s as ALERT_CONTEXT,o as focusAfterAlertDismiss,r as nextAlertId};

package/dist/alert/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Alert.vue.cjs"),r=require("./AlertTitle.vue.cjs"),t=require("./AlertDescription.vue.cjs"),l=require("./AlertIcon.vue.cjs"),i=require("./AlertClose.vue.cjs"),u=require("./AlertAction.vue.cjs");exports.SkdxAlert=e.default;exports.SkdxAlertAction=u.default;exports.SkdxAlertClose=i.default;exports.SkdxAlertDescription=t.default;exports.SkdxAlertIcon=l.default;exports.SkdxAlertTitle=r.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Alert.vue.cjs");exports.SkdxAlert=e.default;

package/dist/alert/index.d.cts

@@ -1,6 +1,2 @@
 export { default as SkdxAlert } from './Alert.vue.cjs';
-export { default as SkdxAlertTitle } from './AlertTitle.vue.cjs';
-export { default as SkdxAlertDescription } from './AlertDescription.vue.cjs';
-export { default as SkdxAlertIcon } from './AlertIcon.vue.cjs';
-export { default as SkdxAlertClose } from './AlertClose.vue.cjs';
-export { default as SkdxAlertAction } from './AlertAction.vue.cjs';
+export type { AlertStatus } from './context.cjs';

package/dist/alert/index.d.ts

@@ -1,6 +1,2 @@
 export { default as SkdxAlert } from './Alert.vue.js';
-export { default as SkdxAlertTitle } from './AlertTitle.vue.js';
-export { default as SkdxAlertDescription } from './AlertDescription.vue.js';
-export { default as SkdxAlertIcon } from './AlertIcon.vue.js';
-export { default as SkdxAlertClose } from './AlertClose.vue.js';
-export { default as SkdxAlertAction } from './AlertAction.vue.js';
+export type { AlertStatus } from './context.js';

package/dist/alert/index.js

@@ -1 +1 @@
-import r from"./Alert.vue.js";import e from"./AlertTitle.vue.js";import t from"./AlertDescription.vue.js";import o from"./AlertIcon.vue.js";import l from"./AlertClose.vue.js";import s from"./AlertAction.vue.js";export{r as SkdxAlert,s as SkdxAlertAction,l as SkdxAlertClose,t as SkdxAlertDescription,o as SkdxAlertIcon,e as SkdxAlertTitle};
+import r from"./Alert.vue.js";export{r as SkdxAlert};

package/dist/alert/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./AlertAction.vue.cjs"),r=require("./AlertClose.vue.cjs"),t=require("./AlertDescription.vue.cjs"),l=require("./AlertIcon.vue.cjs"),i=require("./AlertTitle.vue.cjs"),u=require("./Alert.vue.cjs");exports.SkdxAlert=u.default;exports.SkdxAlertAction=e.default;exports.SkdxAlertClose=r.default;exports.SkdxAlertDescription=t.default;exports.SkdxAlertIcon=l.default;exports.SkdxAlertTitle=i.default;

package/dist/alert/primitives.d.cts

@@ -0,0 +1,28 @@
+/**
+ * Advanced primitives for `SkdxAlert` — the parts the recipe composes.
+ * Use when the derived anatomy is not the structure you need.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxAlert, SkdxAlertAction, SkdxAlertClose, SkdxAlertDescription, SkdxAlertIcon, SkdxAlertTitle } from '@skdx/vue/primitives/alert';
+ * </script>
+ *
+ * <template>
+ *   <SkdxAlert role="alert" data-status="danger">
+ *     <SkdxAlertIcon>⚠</SkdxAlertIcon>
+ *     <SkdxAlertTitle>Upload failed</SkdxAlertTitle>
+ *     <SkdxAlertDescription>The file was larger than 10&nbsp;MB.</SkdxAlertDescription>
+ *     <SkdxAlertAction><button type="button">Retry</button></SkdxAlertAction>
+ *     <SkdxAlertClose>×</SkdxAlertClose>
+ *   </SkdxAlert>
+ * </template>
+ * ```
+ */
+export { default as SkdxAlert } from './Alert.vue.cjs';
+export { default as SkdxAlertTitle } from './AlertTitle.vue.cjs';
+export { default as SkdxAlertDescription } from './AlertDescription.vue.cjs';
+export { default as SkdxAlertIcon } from './AlertIcon.vue.cjs';
+export { default as SkdxAlertClose } from './AlertClose.vue.cjs';
+export { default as SkdxAlertAction } from './AlertAction.vue.cjs';
+export type { AlertStatus } from './context.cjs';

package/dist/alert/primitives.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Advanced primitives for `SkdxAlert` — the parts the recipe composes.
+ * Use when the derived anatomy is not the structure you need.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxAlert, SkdxAlertAction, SkdxAlertClose, SkdxAlertDescription, SkdxAlertIcon, SkdxAlertTitle } from '@skdx/vue/primitives/alert';
+ * </script>
+ *
+ * <template>
+ *   <SkdxAlert role="alert" data-status="danger">
+ *     <SkdxAlertIcon>⚠</SkdxAlertIcon>
+ *     <SkdxAlertTitle>Upload failed</SkdxAlertTitle>
+ *     <SkdxAlertDescription>The file was larger than 10&nbsp;MB.</SkdxAlertDescription>
+ *     <SkdxAlertAction><button type="button">Retry</button></SkdxAlertAction>
+ *     <SkdxAlertClose>×</SkdxAlertClose>
+ *   </SkdxAlert>
+ * </template>
+ * ```
+ */
+export { default as SkdxAlert } from './Alert.vue.js';
+export { default as SkdxAlertTitle } from './AlertTitle.vue.js';
+export { default as SkdxAlertDescription } from './AlertDescription.vue.js';
+export { default as SkdxAlertIcon } from './AlertIcon.vue.js';
+export { default as SkdxAlertClose } from './AlertClose.vue.js';
+export { default as SkdxAlertAction } from './AlertAction.vue.js';
+export type { AlertStatus } from './context.js';

package/dist/alert/primitives.js

@@ -0,0 +1 @@
+import r from"./AlertAction.vue.js";import e from"./AlertClose.vue.js";import t from"./AlertDescription.vue.js";import o from"./AlertIcon.vue.js";import l from"./AlertTitle.vue.js";import s from"./Alert.vue.js";export{s as SkdxAlert,r as SkdxAlertAction,e as SkdxAlertClose,t as SkdxAlertDescription,o as SkdxAlertIcon,l as SkdxAlertTitle};

package/dist/alert-dialog/AlertDialog.vue.d.cts

@@ -1,26 +1,89 @@
+import { type AlertDialogDismiss, type AlertDialogTone } from './context.cjs';
 /**
- * The Vue implementation of the shared AlertDialog contract (see
- * `@skdx/shared`'s `alertDialogContract`). Root of an always-modal,
- * interruptive alert dialog (WAI-ARIA `alertdialog` pattern): owns open
- * state and hands it down to `SkdxAlertDialogTrigger` / `SkdxAlertDialogPortal`
- * / `SkdxAlertDialogOverlay` / `SkdxAlertDialogContent` / `SkdxAlertDialogTitle`
- * / `SkdxAlertDialogDescription` / `SkdxAlertDialogAction` /
- * `SkdxAlertDialogCancel` via context. Renders no DOM of its own.
- *
- * Unlike Dialog, it never closes on outside pointer-down — only Escape or an
- * explicit Action/Cancel click.
+ * Always-modal alert dialog (WAI-ARIA `alertdialog` pattern): renders
+ * title, description, body, and Cancel/Action footer. Works controlled
+ * (`v-model:open`) or uncontrolled (`default-open`). Never closes on outside
+ * pointer-down — only Escape (unless `dismiss="none"`) or an explicit
+ * Action/Cancel click.
  *
  * Emits `open-change` the instant the state flips and `open-change-complete`
- * once the change has finished on screen — after `SkdxAlertDialogContent`'s
- * enter or exit animation ends, or in the same task when it declares none.
+ * once the animation finishes — after `SkdxAlertDialogContent`'s enter or exit
+ * animation ends, or immediately when it declares none.
+ *
+ * @example
+ * ```vue
+ * <SkdxAlertDialog v-model:open="open" title="Delete item?"
+ *   description="This can't be undone." tone="danger"
+ *   @confirm="onDelete" />
+ * ```
+ *
+ * @example Vetoing the close so the panel survives an in-flight request
+ * ```vue
+ * <SkdxAlertDialog v-model:open="open" title="Delete item?"
+ *   @confirm="(event) => { event.preventDefault(); remove(); }" />
+ * ```
  *
- * Works controlled (`v-model:open`) or uncontrolled (`default-open`).
+ * @example Primitive composition
+ * ```vue
+ * <SkdxAlertDialog>
+ *   <SkdxAlertDialogTrigger>Delete</SkdxAlertDialogTrigger>
+ *   <SkdxAlertDialogPortal>
+ *     <SkdxAlertDialogOverlay />
+ *     <SkdxAlertDialogContent>
+ *       <SkdxAlertDialogTitle>Delete item?</SkdxAlertDialogTitle>
+ *       <SkdxAlertDialogCancel>Cancel</SkdxAlertDialogCancel>
+ *       <SkdxAlertDialogAction @click="onDelete">Delete</SkdxAlertDialogAction>
+ *     </SkdxAlertDialogContent>
+ *   </SkdxAlertDialogPortal>
+ * </SkdxAlertDialog>
+ * ```
  */
 type __VLS_Props = {
     /** Whether the alert dialog is open, for controlled usage. Pair with `@update:open`. */
     open?: boolean;
     /** Whether the alert dialog is initially open, for uncontrolled usage. */
     defaultOpen?: boolean;
+    /**
+     * Which un-prevented interaction is allowed to close the alert dialog:
+     * `'escape'` lets the Escape key close it, `'none'` leaves an explicit
+     * Action/Cancel click as the only way out. `escape-key-down` still fires
+     * under `'none'` — the policy decides only whether an un-prevented Escape
+     * actually closes the panel. Two-valued, unlike `SkdxDialog`'s four: an
+     * alert dialog never dismisses on an outside interaction, so `'any'` and
+     * `'outside'` would name behaviour that does not exist here. Reflected as
+     * `data-dismiss` on `SkdxAlertDialogContent`, since this root renders no
+     * DOM of its own.
+     */
+    dismiss?: AlertDialogDismiss;
+    /**
+     * Title rendered by the derived anatomy as `SkdxAlertDialogTitle`.
+     * Ignored when the default slot supplies its own `SkdxAlertDialogContent`.
+     * @default undefined — no title is rendered.
+     */
+    title?: string;
+    /**
+     * Description rendered by the derived anatomy as
+     * `SkdxAlertDialogDescription`. Ignored when the default slot supplies
+     * its own `SkdxAlertDialogContent`.
+     * @default undefined — no description is rendered.
+     */
+    description?: string;
+    /**
+     * Label of the derived `SkdxAlertDialogAction` button, which emits `confirm` on click.
+     * @default 'Confirm'
+     */
+    confirmLabel?: string;
+    /**
+     * Label of the derived `SkdxAlertDialogCancel` button, which emits `cancel` on click.
+     * @default 'Cancel'
+     */
+    cancelLabel?: string;
+    /**
+     * Tone token the derived panel carries as `data-tone`, for a skin to key
+     * its action button's color off. Purely presentational.
+     * @default 'neutral'
+     */
+    tone?: AlertDialogTone;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -29,14 +92,24 @@ 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: MouseEvent) => any;
     "open-change-complete": (open: boolean) => any;
+    confirm: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     "onOpen-change"?: ((open: boolean) => any) | undefined;
+    onCancel?: ((event: MouseEvent) => any) | undefined;
     "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    onConfirm?: ((event: MouseEvent) => any) | undefined;
 }>, {
+    title: string;
+    description: string;
     open: boolean;
     defaultOpen: boolean;
+    dismiss: AlertDialogDismiss;
+    confirmLabel: string;
+    cancelLabel: string;
+    tone: AlertDialogTone;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;