@skdx/vue 0.27.0 → 0.28.0

package/dist/collapsible/Collapsible.vue.d.cts

@@ -1,30 +1,45 @@
 /**
- * The Vue implementation of the shared Collapsible contract (see
- * `@skdx/shared`'s `collapsibleContract`). Owns open state and `provide()`s
- * it to `<SkdxCollapsibleTrigger>`/`<SkdxCollapsibleContent>`. Renders a plain
- * `<div>` with `data-state`/`data-disabled`.
+ * Disclosure component with a titled trigger and collapsible panel. Use
+ * `v-model:open` for controlled mode or `default-open` for uncontrolled. For
+ * custom triggers, compose the parts under `SkdxCollapsibleRoot` instead.
  *
- * Works controlled (`v-model:open`) or uncontrolled (`default-open`).
+ * ```vue
+ * <SkdxCollapsible title="Shipping">Free over £50.</SkdxCollapsible>
+ * ```
  */
 type __VLS_Props = {
-    /** Open state, for controlled usage. Pair with `v-model:open` or `@open-change`. */
+    /** Open state, for controlled usage. Pair with `v-model:open`. */
     open?: boolean;
-    /** Initial open state, for uncontrolled usage. */
+    /** Initial open state, for uncontrolled usage. @default false */
     defaultOpen?: boolean;
-    /** Prevents the trigger from toggling the content when set. */
+    /** Prevents the trigger from toggling the content when set. @default false */
     disabled?: boolean;
+    /**
+     * Text of the derived trigger — the button that toggles the panel.
+     * @default undefined — no trigger is rendered.
+     */
+    title?: string;
 };
-declare var __VLS_1: {};
+declare var __VLS_14: {}, __VLS_19: {}, __VLS_24: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    trigger?: (props: typeof __VLS_14) => any;
+} & {
+    indicator?: (props: typeof __VLS_19) => any;
+} & {
+    content?: (props: typeof __VLS_24) => any;
+} & {
+    default?: (props: typeof __VLS_26) => any;
 };
 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;
+    "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;
 }>, {
+    title: string;
     disabled: boolean;
     open: boolean;
     defaultOpen: boolean;

package/dist/collapsible/Collapsible.vue.d.ts

@@ -1,30 +1,45 @@
 /**
- * The Vue implementation of the shared Collapsible contract (see
- * `@skdx/shared`'s `collapsibleContract`). Owns open state and `provide()`s
- * it to `<SkdxCollapsibleTrigger>`/`<SkdxCollapsibleContent>`. Renders a plain
- * `<div>` with `data-state`/`data-disabled`.
+ * Disclosure component with a titled trigger and collapsible panel. Use
+ * `v-model:open` for controlled mode or `default-open` for uncontrolled. For
+ * custom triggers, compose the parts under `SkdxCollapsibleRoot` instead.
  *
- * Works controlled (`v-model:open`) or uncontrolled (`default-open`).
+ * ```vue
+ * <SkdxCollapsible title="Shipping">Free over £50.</SkdxCollapsible>
+ * ```
  */
 type __VLS_Props = {
-    /** Open state, for controlled usage. Pair with `v-model:open` or `@open-change`. */
+    /** Open state, for controlled usage. Pair with `v-model:open`. */
     open?: boolean;
-    /** Initial open state, for uncontrolled usage. */
+    /** Initial open state, for uncontrolled usage. @default false */
     defaultOpen?: boolean;
-    /** Prevents the trigger from toggling the content when set. */
+    /** Prevents the trigger from toggling the content when set. @default false */
     disabled?: boolean;
+    /**
+     * Text of the derived trigger — the button that toggles the panel.
+     * @default undefined — no trigger is rendered.
+     */
+    title?: string;
 };
-declare var __VLS_1: {};
+declare var __VLS_14: {}, __VLS_19: {}, __VLS_24: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    trigger?: (props: typeof __VLS_14) => any;
+} & {
+    indicator?: (props: typeof __VLS_19) => any;
+} & {
+    content?: (props: typeof __VLS_24) => any;
+} & {
+    default?: (props: typeof __VLS_26) => any;
 };
 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;
+    "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;
 }>, {
+    title: string;
     disabled: boolean;
     open: boolean;
     defaultOpen: boolean;

package/dist/collapsible/Collapsible.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const p=require("./context.cjs");let e=require("vue");var i=["data-state","data-disabled"],r=(0,e.defineComponent)({__name:"Collapsible",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:open","open-change"],setup(s,{emit:u}){const o=s,l=u,n=(0,e.ref)(o.defaultOpen),a=(0,e.computed)(()=>o.open??n.value),d=(0,e.computed)(()=>o.disabled);function c(){const t=!a.value;o.open===void 0&&(n.value=t),l("update:open",t),l("open-change",t)}return(0,e.provide)(p.COLLAPSIBLE_CONTEXT,{contentId:p.nextCollapsibleId(),open:a,disabled:d,onOpenToggle:c}),(t,v)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-collapsible","data-part":"root","data-skdx-component":"collapsible","data-state":a.value?"open":"closed","data-disabled":d.value?"":void 0},[(0,e.renderSlot)(t.$slots,"default")],8,i))}});exports.default=r;
+const u=require("./CollapsibleContent.vue.cjs"),i=require("./CollapsibleIndicator.vue.cjs"),p=require("./CollapsibleRoot.vue.cjs"),s=require("./CollapsibleTrigger.vue.cjs");let e=require("vue");var f=(0,e.defineComponent)({__name:"Collapsible",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},title:{default:void 0}},emits:["update:open","open-change","open-change-complete"],setup(o,{emit:r}){const d=o,a=r;return(n,t)=>((0,e.openBlock)(),(0,e.createBlock)(p.default,{open:d.open,"default-open":o.defaultOpen,disabled:o.disabled,"onUpdate:open":t[0]||(t[0]=l=>a("update:open",l)),onOpenChange:t[1]||(t[1]=l=>a("open-change",l)),onOpenChangeComplete:t[2]||(t[2]=l=>a("open-change-complete",l))},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(s.default,null,{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,"trigger",{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(o.title)+" ",1),(0,e.createVNode)(i.default,null,{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,"indicator")]),_:3})])]),_:3}),(0,e.createVNode)(u.default,null,{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,"content",{},()=>[(0,e.renderSlot)(n.$slots,"default")])]),_:3})]),_:3},8,["open","default-open","disabled"]))}});exports.default=f;

package/dist/collapsible/Collapsible.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{COLLAPSIBLE_CONTEXT as e,nextCollapsibleId as a}from"./context.js";import{computed as o,createElementBlock as t,defineComponent as l,openBlock as d,provide as n,ref as s,renderSlot as p}from"vue";var i=["data-state","data-disabled"],u=/* @__PURE__ */l({__name:"Collapsible",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:open","open-change"],setup(l,{emit:u}){const c=l,r=u,f=s(c.defaultOpen),v=o(()=>c.open??f.value),m=o(()=>c.disabled);return n(e,{contentId:a(),open:v,disabled:m,onOpenToggle:function(){const e=!v.value;void 0===c.open&&(f.value=e),r("update:open",e),r("open-change",e)}}),(e,a)=>(d(),t("div",{class:"skdx-collapsible","data-part":"root","data-skdx-component":"collapsible","data-state":v.value?"open":"closed","data-disabled":m.value?"":void 0},[p(e.$slots,"default")],8,i))}});export{u as default};
+import e from"./CollapsibleContent.vue.js";import o from"./CollapsibleIndicator.vue.js";import t from"./CollapsibleRoot.vue.js";import l from"./CollapsibleTrigger.vue.js";import{createBlock as a,createTextVNode as n,createVNode as p,defineComponent as s,openBlock as d,renderSlot as i,toDisplayString as r,withCtx as u}from"vue";var f=/* @__PURE__ */s({__name:"Collapsible",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},title:{default:void 0}},emits:["update:open","open-change","open-change-complete"],setup(s,{emit:f}){const m=s,c=f;return(f,g)=>(d(),a(t,{open:m.open,"default-open":s.defaultOpen,disabled:s.disabled,"onUpdate:open":g[0]||(g[0]=e=>c("update:open",e)),onOpenChange:g[1]||(g[1]=e=>c("open-change",e)),onOpenChangeComplete:g[2]||(g[2]=e=>c("open-change-complete",e))},{default:u(()=>[p(l,null,{default:u(()=>[i(f.$slots,"trigger",{},()=>[n(r(s.title)+" ",1),p(o,null,{default:u(()=>[i(f.$slots,"indicator")]),_:3})])]),_:3}),p(e,null,{default:u(()=>[i(f.$slots,"content",{},()=>[i(f.$slots,"default")])]),_:3})]),_:3},8,["open","default-open","disabled"]))}});export{f as default};

package/dist/collapsible/CollapsibleContent.vue.d.cts

@@ -1,12 +1,24 @@
 /**
- * Panel controlled by a `SkdxCollapsible`. Renders a `<div>` with the id
- * referenced by the trigger's `aria-controls`, `data-state`/`data-disabled`,
- * and the native `hidden` attribute while closed. Unmounts when closed
- * unless `forceMount` is set.
+ * Panel controlled by a collapsible, rendered as `<div>` with the id referenced
+ * by the trigger's `aria-controls` and the native `hidden` attribute while closed.
+ * Publishes measured size as `--skdx-collapsible-content-height` and `--skdx-collapsible-content-width`,
+ * allowing transitions against them.
  */
 type __VLS_Props = {
-    /** Keep this panel mounted (hidden via the `hidden` attribute) even while closed, instead of unmounting it. */
+    /**
+     * Keeps the panel mounted (hidden via the `hidden` attribute) while closed
+     * instead of unmounting it, for animation libraries needing it during exit transitions.
+     * @default false
+     */
     forceMount?: boolean;
+    /**
+     * Keeps the panel mounted as `hidden="until-found"` for find-in-page and
+     * fragment navigation instead of plain `hidden=""`, degrading to plain `hidden=""`
+     * on unsupported browsers. Do not apply `display: none` on closed panels
+     * or text becomes unsearchable. Implies `forceMount`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -14,6 +26,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     forceMount: boolean;
+    hiddenUntilFound: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/collapsible/CollapsibleContent.vue.d.ts

@@ -1,12 +1,24 @@
 /**
- * Panel controlled by a `SkdxCollapsible`. Renders a `<div>` with the id
- * referenced by the trigger's `aria-controls`, `data-state`/`data-disabled`,
- * and the native `hidden` attribute while closed. Unmounts when closed
- * unless `forceMount` is set.
+ * Panel controlled by a collapsible, rendered as `<div>` with the id referenced
+ * by the trigger's `aria-controls` and the native `hidden` attribute while closed.
+ * Publishes measured size as `--skdx-collapsible-content-height` and `--skdx-collapsible-content-width`,
+ * allowing transitions against them.
  */
 type __VLS_Props = {
-    /** Keep this panel mounted (hidden via the `hidden` attribute) even while closed, instead of unmounting it. */
+    /**
+     * Keeps the panel mounted (hidden via the `hidden` attribute) while closed
+     * instead of unmounting it, for animation libraries needing it during exit transitions.
+     * @default false
+     */
     forceMount?: boolean;
+    /**
+     * Keeps the panel mounted as `hidden="until-found"` for find-in-page and
+     * fragment navigation instead of plain `hidden=""`, degrading to plain `hidden=""`
+     * on unsupported browsers. Do not apply `display: none` on closed panels
+     * or text becomes unsearchable. Implies `forceMount`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -14,6 +26,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     forceMount: boolean;
+    hiddenUntilFound: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/collapsible/CollapsibleContent.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const a=require("./context.cjs");let e=require("vue");var l=["id","data-state","data-disabled","hidden"],d=(0,e.defineComponent)({__name:"CollapsibleContent",props:{forceMount:{type:Boolean,default:!1}},setup(n){const t=(0,e.inject)(a.COLLAPSIBLE_CONTEXT);if(!t)throw new Error("<SkdxCollapsibleContent> must be used inside <SkdxCollapsible>.");return(o,r)=>n.forceMount||(0,e.unref)(t).open.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-collapsible__content","data-part":"content",id:(0,e.unref)(t).contentId,"data-state":(0,e.unref)(t).open.value?"open":"closed","data-disabled":(0,e.unref)(t).disabled.value?"":void 0,hidden:!(0,e.unref)(t).open.value},[(0,e.renderSlot)(o.$slots,"default")],8,l)):(0,e.createCommentVNode)("",!0)}});exports.default=d;
+const v=require("./context.cjs");let e=require("vue");var h=["id","data-state","data-disabled","hidden"],m=(0,e.defineComponent)({__name:"CollapsibleContent",props:{forceMount:{type:Boolean,default:!1},hiddenUntilFound:{type:Boolean,default:!1}},setup(p){const d=p,r=(0,e.inject)(v.COLLAPSIBLE_CONTEXT);if(!r)throw new Error("<SkdxCollapsibleContent> must be used inside <SkdxCollapsible>.");const l=r,a=(0,e.ref)(null),u=(0,e.computed)(()=>d.forceMount||d.hiddenUntilFound||l.open.value);return(0,e.watchEffect)(()=>l.setContentMounted(u.value)),(0,e.onBeforeUnmount)(()=>l.setContentMounted(!1)),(0,e.watchEffect)(t=>{const n=a.value;if(!d.hiddenUntilFound||!n)return;l.open.value?n.removeAttribute("hidden"):n.setAttribute("hidden","until-found");const s=()=>l.onOpen();n.addEventListener("beforematch",s),t(()=>n.removeEventListener("beforematch",s))},{flush:"post"}),(0,e.watchEffect)(()=>{const t=a.value;if(l.open.value,u.value,!t)return;const n=t.getAttribute("hidden");n!==null&&t.removeAttribute("hidden");const{scrollHeight:s,scrollWidth:o}=t;n!==null&&t.setAttribute("hidden",n),t.style.setProperty("--skdx-collapsible-content-height",`${s}px`),t.style.setProperty("--skdx-collapsible-content-width",`${o}px`)},{flush:"post"}),(0,e.watch)(()=>l.open.value,(t,n,s)=>{const o=a.value,f=(o?getComputedStyle(o).transitionDuration:"").split(",").some(c=>Number.parseFloat(c)>0);if(!o||!f){l.onOpenChangeComplete(t);return}const i=c=>{c.target===o&&l.onOpenChangeComplete(t)};o.addEventListener("transitionend",i),o.addEventListener("transitioncancel",i),s(()=>{o.removeEventListener("transitionend",i),o.removeEventListener("transitioncancel",i)})},{flush:"post"}),(t,n)=>u.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-collapsible__content","data-part":"content",ref_key:"contentEl",ref:a,id:(0,e.unref)(r).contentId,"data-state":(0,e.unref)(r).open.value?"open":"closed","data-disabled":(0,e.unref)(r).disabled.value?"":void 0,hidden:!(0,e.unref)(r).open.value},[(0,e.renderSlot)(t.$slots,"default")],8,h)):(0,e.createCommentVNode)("",!0)}});exports.default=m;

package/dist/collapsible/CollapsibleContent.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{COLLAPSIBLE_CONTEXT as e}from"./context.js";import{createCommentVNode as t,createElementBlock as a,defineComponent as o,inject as n,openBlock as d,renderSlot as s,unref as l}from"vue";var r=["id","data-state","data-disabled","hidden"],i=/* @__PURE__ */o({__name:"CollapsibleContent",props:{forceMount:{type:Boolean,default:!1}},setup(o){const i=n(e);if(!i)throw new Error("<SkdxCollapsibleContent> must be used inside <SkdxCollapsible>.");return(e,n)=>o.forceMount||l(i).open.value?(d(),a("div",{key:0,class:"skdx-collapsible__content","data-part":"content",id:l(i).contentId,"data-state":l(i).open.value?"open":"closed","data-disabled":l(i).disabled.value?"":void 0,hidden:!l(i).open.value},[s(e.$slots,"default")],8,r)):t("",!0)}});export{i as default};
+import{COLLAPSIBLE_CONTEXT as e}from"./context.js";import{computed as t,createCommentVNode as n,createElementBlock as o,defineComponent as a,inject as s,onBeforeUnmount as l,openBlock as d,ref as i,renderSlot as r,unref as u,watch as c,watchEffect as p}from"vue";var v=["id","data-state","data-disabled","hidden"],f=/* @__PURE__ */a({__name:"CollapsibleContent",props:{forceMount:{type:Boolean,default:!1},hiddenUntilFound:{type:Boolean,default:!1}},setup(a){const f=a,h=s(e);if(!h)throw new Error("<SkdxCollapsibleContent> must be used inside <SkdxCollapsible>.");const m=h,b=i(null),C=t(()=>f.forceMount||f.hiddenUntilFound||m.open.value);return p(()=>m.setContentMounted(C.value)),l(()=>m.setContentMounted(!1)),p(e=>{const t=b.value;if(!f.hiddenUntilFound||!t)return;m.open.value?t.removeAttribute("hidden"):t.setAttribute("hidden","until-found");const n=()=>m.onOpen();t.addEventListener("beforematch",n),e(()=>t.removeEventListener("beforematch",n))},{flush:"post"}),p(()=>{const e=b.value;if(m.open.value,C.value,!e)return;const t=e.getAttribute("hidden");null!==t&&e.removeAttribute("hidden");const{scrollHeight:n,scrollWidth:o}=e;null!==t&&e.setAttribute("hidden",t),e.style.setProperty("--skdx-collapsible-content-height",`${n}px`),e.style.setProperty("--skdx-collapsible-content-width",`${o}px`)},{flush:"post"}),c(()=>m.open.value,(e,t,n)=>{const o=b.value,a=(o?getComputedStyle(o).transitionDuration:"").split(",").some(e=>Number.parseFloat(e)>0);if(!o||!a)return void m.onOpenChangeComplete(e);const s=t=>{t.target===o&&m.onOpenChangeComplete(e)};o.addEventListener("transitionend",s),o.addEventListener("transitioncancel",s),n(()=>{o.removeEventListener("transitionend",s),o.removeEventListener("transitioncancel",s)})},{flush:"post"}),(e,t)=>C.value?(d(),o("div",{key:0,class:"skdx-collapsible__content","data-part":"content",ref_key:"contentEl",ref:b,id:u(h).contentId,"data-state":u(h).open.value?"open":"closed","data-disabled":u(h).disabled.value?"":void 0,hidden:!u(h).open.value},[r(e.$slots,"default")],8,v)):n("",!0)}});export{f as default};

package/dist/collapsible/CollapsibleIndicator.vue.cjs

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

package/dist/collapsible/CollapsibleIndicator.vue.d.cts

@@ -0,0 +1,18 @@
+/**
+ * Disclosure affordance inside a collapsible trigger, rendered as `<span>` with
+ * `data-state` (`"open"` | `"closed"`) and `data-disabled` for styling rotations.
+ * Renders no glyph of its own; put the icon in its slot.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/collapsible/CollapsibleIndicator.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Disclosure affordance inside a collapsible trigger, rendered as `<span>` with
+ * `data-state` (`"open"` | `"closed"`) and `data-disabled` for styling rotations.
+ * Renders no glyph of its own; put the icon in its slot.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/collapsible/CollapsibleIndicator.vue.js

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

package/dist/collapsible/CollapsibleIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const l=require("./context.cjs");let e=require("vue");var r=["data-state","data-disabled"],d=(0,e.defineComponent)({__name:"CollapsibleIndicator",setup(o){const t=(0,e.inject)(l.COLLAPSIBLE_CONTEXT);if(!t)throw new Error("<SkdxCollapsibleIndicator> must be used inside <SkdxCollapsible>.");return(a,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-collapsible__indicator","data-part":"indicator","aria-hidden":"true","data-state":(0,e.unref)(t).open.value?"open":"closed","data-disabled":(0,e.unref)(t).disabled.value?"":void 0},[(0,e.renderSlot)(a.$slots,"default")],8,r))}});exports.default=d;

package/dist/collapsible/CollapsibleIndicator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{COLLAPSIBLE_CONTEXT as a}from"./context.js";import{createElementBlock as e,defineComponent as t,inject as s,openBlock as d,renderSlot as o,unref as l}from"vue";var i=["data-state","data-disabled"],r=/* @__PURE__ */t({__name:"CollapsibleIndicator",setup(t){const r=s(a);if(!r)throw new Error("<SkdxCollapsibleIndicator> must be used inside <SkdxCollapsible>.");return(a,t)=>(d(),e("span",{class:"skdx-collapsible__indicator","data-part":"indicator","aria-hidden":"true","data-state":l(r).open.value?"open":"closed","data-disabled":l(r).disabled.value?"":void 0},[o(a.$slots,"default")],8,i))}});export{r as default};

package/dist/collapsible/CollapsibleRoot.vue.cjs

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

package/dist/collapsible/CollapsibleRoot.vue.d.cts

@@ -0,0 +1,45 @@
+/**
+ * Headless root of a collapsible, owning open state. Use `v-model:open` for
+ * controlled mode or `default-open` for uncontrolled. Compose the parts yourself
+ * — the root derives nothing, unlike `SkdxCollapsible`.
+ *
+ * @example With `import * as Collapsible from '@skdx/vue/primitives/collapsible'`:
+ * ```vue
+ * <Collapsible.Root v-model:open="open">
+ *   <Collapsible.Trigger>Shipping<Collapsible.Indicator>▾</Collapsible.Indicator></Collapsible.Trigger>
+ *   <Collapsible.Content>Free over £50.</Collapsible.Content>
+ * </Collapsible.Root>
+ * ```
+ */
+type __VLS_Props = {
+    /** Open state, for controlled usage. Pair with `v-model:open`. */
+    open?: boolean;
+    /** Initial open state, for uncontrolled usage. @default false */
+    defaultOpen?: boolean;
+    /** Prevents the trigger from toggling the content when set. @default false */
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+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;
+    "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;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: 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/collapsible/CollapsibleRoot.vue.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Headless root of a collapsible, owning open state. Use `v-model:open` for
+ * controlled mode or `default-open` for uncontrolled. Compose the parts yourself
+ * — the root derives nothing, unlike `SkdxCollapsible`.
+ *
+ * @example With `import * as Collapsible from '@skdx/vue/primitives/collapsible'`:
+ * ```vue
+ * <Collapsible.Root v-model:open="open">
+ *   <Collapsible.Trigger>Shipping<Collapsible.Indicator>▾</Collapsible.Indicator></Collapsible.Trigger>
+ *   <Collapsible.Content>Free over £50.</Collapsible.Content>
+ * </Collapsible.Root>
+ * ```
+ */
+type __VLS_Props = {
+    /** Open state, for controlled usage. Pair with `v-model:open`. */
+    open?: boolean;
+    /** Initial open state, for uncontrolled usage. @default false */
+    defaultOpen?: boolean;
+    /** Prevents the trigger from toggling the content when set. @default false */
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+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;
+    "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;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: 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/collapsible/CollapsibleRoot.vue.js

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

package/dist/collapsible/CollapsibleRoot.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("./context.cjs");let t=require("vue");var O=["data-state","data-disabled"],h=(0,t.defineComponent)({__name:"CollapsibleRoot",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:open","open-change","open-change-complete"],setup(f,{emit:v}){const n=f,a=v,p=(0,t.ref)(n.defaultOpen),o=(0,t.computed)(()=>n.open??p.value),u=(0,t.computed)(()=>n.disabled);function d(e){e!==o.value&&(n.open===void 0&&(p.value=e),a("update:open",e),a("open-change",e))}function _(){d(!o.value)}function m(){d(!0)}const l=(0,t.ref)(!1);function b(e){l.value=e}const s=(0,t.ref)(o.value);function c(e){s.value!==e&&(s.value=e,a("open-change-complete",e))}return(0,t.watch)([o,l],([e,i])=>{i||c(e)},{flush:"post"}),(0,t.provide)(r.COLLAPSIBLE_CONTEXT,{contentId:r.nextCollapsibleId(),open:o,disabled:u,onOpenToggle:_,onOpen:m,onOpenChangeComplete:c,contentMounted:l,setContentMounted:b}),(e,i)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-collapsible","data-part":"root","data-skdx-component":"collapsible","data-state":o.value?"open":"closed","data-disabled":u.value?"":void 0},[(0,t.renderSlot)(e.$slots,"default")],8,O))}});exports.default=h;

package/dist/collapsible/CollapsibleRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{COLLAPSIBLE_CONTEXT as e,nextCollapsibleId as a}from"./context.js";import{computed as o,createElementBlock as t,defineComponent as n,openBlock as l,provide as p,ref as d,renderSlot as s,watch as u}from"vue";var c=["data-state","data-disabled"],i=/* @__PURE__ */n({__name:"CollapsibleRoot",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:open","open-change","open-change-complete"],setup(n,{emit:i}){const f=n,v=i,r=d(f.defaultOpen),m=o(()=>f.open??r.value),b=o(()=>f.disabled);function C(e){e!==m.value&&(void 0===f.open&&(r.value=e),v("update:open",e),v("open-change",e))}const g=d(!1),h=d(m.value);function O(e){h.value!==e&&(h.value=e,v("open-change-complete",e))}return u([m,g],([e,a])=>{a||O(e)},{flush:"post"}),p(e,{contentId:a(),open:m,disabled:b,onOpenToggle:function(){C(!m.value)},onOpen:function(){C(!0)},onOpenChangeComplete:O,contentMounted:g,setContentMounted:function(e){g.value=e}}),(e,a)=>(l(),t("div",{class:"skdx-collapsible","data-part":"root","data-skdx-component":"collapsible","data-state":m.value?"open":"closed","data-disabled":b.value?"":void 0},[s(e.$slots,"default")],8,c))}});export{i as default};

package/dist/collapsible/CollapsibleTrigger.vue.d.cts

@@ -1,6 +1,8 @@
 /**
- * Toggle button for a `SkdxCollapsible`. Renders `<button type="button">`
- * with `aria-controls`/`aria-expanded`/`data-state`/`data-disabled`.
+ * Toggle button for a collapsible, rendered as `<button type="button">` with
+ * `aria-controls`/`aria-expanded`/`data-state`/`data-disabled`. `aria-controls`
+ * publishes only while a panel is mounted, since unmounted panels have no id
+ * to reference.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/collapsible/CollapsibleTrigger.vue.d.ts

@@ -1,6 +1,8 @@
 /**
- * Toggle button for a `SkdxCollapsible`. Renders `<button type="button">`
- * with `aria-controls`/`aria-expanded`/`data-state`/`data-disabled`.
+ * Toggle button for a collapsible, rendered as `<button type="button">` with
+ * `aria-controls`/`aria-expanded`/`data-state`/`data-disabled`. `aria-controls`
+ * publishes only while a panel is mounted, since unmounted panels have no id
+ * to reference.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/collapsible/CollapsibleTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const n=require("./context.cjs");let e=require("vue");var o=["aria-controls","aria-expanded","data-state","data-disabled","disabled"],d=(0,e.defineComponent)({__name:"CollapsibleTrigger",setup(i){const t=(0,e.inject)(n.COLLAPSIBLE_CONTEXT);if(!t)throw new Error("<SkdxCollapsibleTrigger> must be used inside <SkdxCollapsible>.");return(r,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-collapsible__trigger","data-part":"trigger",type:"button","aria-controls":(0,e.unref)(t).contentId,"aria-expanded":(0,e.unref)(t).open.value,"data-state":(0,e.unref)(t).open.value?"open":"closed","data-disabled":(0,e.unref)(t).disabled.value?"":void 0,disabled:(0,e.unref)(t).disabled.value,onClick:a[0]||(a[0]=(...l)=>(0,e.unref)(t).onOpenToggle&&(0,e.unref)(t).onOpenToggle(...l))},[(0,e.renderSlot)(r.$slots,"default")],8,o))}});exports.default=d;
+const l=require("./context.cjs");let e=require("vue");var o=["aria-controls","aria-expanded","data-state","data-disabled","disabled"],d=(0,e.defineComponent)({__name:"CollapsibleTrigger",setup(u){const t=(0,e.inject)(l.COLLAPSIBLE_CONTEXT);if(!t)throw new Error("<SkdxCollapsibleTrigger> must be used inside <SkdxCollapsible>.");return(r,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-collapsible__trigger","data-part":"trigger",type:"button","aria-controls":(0,e.unref)(t).open.value||(0,e.unref)(t).contentMounted.value?(0,e.unref)(t).contentId:void 0,"aria-expanded":(0,e.unref)(t).open.value,"data-state":(0,e.unref)(t).open.value?"open":"closed","data-disabled":(0,e.unref)(t).disabled.value?"":void 0,disabled:(0,e.unref)(t).disabled.value,onClick:a[0]||(a[0]=(...n)=>(0,e.unref)(t).onOpenToggle&&(0,e.unref)(t).onOpenToggle(...n))},[(0,e.renderSlot)(r.$slots,"default")],8,o))}});exports.default=d;

package/dist/collapsible/CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{COLLAPSIBLE_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as t,inject as o,openBlock as l,renderSlot as s,unref as d}from"vue";var r=["aria-controls","aria-expanded","data-state","data-disabled","disabled"],n=/* @__PURE__ */t({__name:"CollapsibleTrigger",setup(t){const n=o(e);if(!n)throw new Error("<SkdxCollapsibleTrigger> must be used inside <SkdxCollapsible>.");return(e,t)=>(l(),a("button",{class:"skdx-collapsible__trigger","data-part":"trigger",type:"button","aria-controls":d(n).contentId,"aria-expanded":d(n).open.value,"data-state":d(n).open.value?"open":"closed","data-disabled":d(n).disabled.value?"":void 0,disabled:d(n).disabled.value,onClick:t[0]||(t[0]=(...e)=>d(n).onOpenToggle&&d(n).onOpenToggle(...e))},[s(e.$slots,"default")],8,r))}});export{n as default};
+import{COLLAPSIBLE_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as t,inject as o,openBlock as l,renderSlot as d,unref as n}from"vue";var s=["aria-controls","aria-expanded","data-state","data-disabled","disabled"],r=/* @__PURE__ */t({__name:"CollapsibleTrigger",setup(t){const r=o(e);if(!r)throw new Error("<SkdxCollapsibleTrigger> must be used inside <SkdxCollapsible>.");return(e,t)=>(l(),a("button",{class:"skdx-collapsible__trigger","data-part":"trigger",type:"button","aria-controls":n(r).open.value||n(r).contentMounted.value?n(r).contentId:void 0,"aria-expanded":n(r).open.value,"data-state":n(r).open.value?"open":"closed","data-disabled":n(r).disabled.value?"":void 0,disabled:n(r).disabled.value,onClick:t[0]||(t[0]=(...e)=>n(r).onOpenToggle&&n(r).onOpenToggle(...e))},[d(e.$slots,"default")],8,s))}});export{r as default};

package/dist/collapsible/context.d.cts

@@ -5,6 +5,13 @@ export interface CollapsibleContext {
     open: Readonly<Ref<boolean>>;
     disabled: Readonly<Ref<boolean>>;
     onOpenToggle: () => void;
+    /** Opens without toggling — the `beforematch` path, where the browser has already revealed the panel. */
+    onOpen: () => void;
+    /** Reports that the panel has settled into `open`; deduped by the root, which also reports for an unmounted panel. */
+    onOpenChangeComplete: (open: boolean) => void;
+    /** Whether the panel is mounted, so `aria-controls` names an existing element. */
+    contentMounted: Readonly<Ref<boolean>>;
+    setContentMounted: (mounted: boolean) => void;
 }
 /** @internal Injection key a Collapsible provides so its trigger/content can read open/disabled state and toggle it. */
 export declare const COLLAPSIBLE_CONTEXT: InjectionKey<CollapsibleContext>;

package/dist/collapsible/context.d.ts

@@ -5,6 +5,13 @@ export interface CollapsibleContext {
     open: Readonly<Ref<boolean>>;
     disabled: Readonly<Ref<boolean>>;
     onOpenToggle: () => void;
+    /** Opens without toggling — the `beforematch` path, where the browser has already revealed the panel. */
+    onOpen: () => void;
+    /** Reports that the panel has settled into `open`; deduped by the root, which also reports for an unmounted panel. */
+    onOpenChangeComplete: (open: boolean) => void;
+    /** Whether the panel is mounted, so `aria-controls` names an existing element. */
+    contentMounted: Readonly<Ref<boolean>>;
+    setContentMounted: (mounted: boolean) => void;
 }
 /** @internal Injection key a Collapsible provides so its trigger/content can read open/disabled state and toggle it. */
 export declare const COLLAPSIBLE_CONTEXT: InjectionKey<CollapsibleContext>;

package/dist/collapsible/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Collapsible.vue.cjs"),l=require("./CollapsibleTrigger.vue.cjs"),r=require("./CollapsibleContent.vue.cjs");exports.SkdxCollapsible=e.default;exports.SkdxCollapsibleContent=r.default;exports.SkdxCollapsibleTrigger=l.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Collapsible.vue.cjs");exports.SkdxCollapsible=e.default;

package/dist/collapsible/index.d.cts

@@ -1,3 +1 @@
 export { default as SkdxCollapsible } from './Collapsible.vue.cjs';
-export { default as SkdxCollapsibleTrigger } from './CollapsibleTrigger.vue.cjs';
-export { default as SkdxCollapsibleContent } from './CollapsibleContent.vue.cjs';

package/dist/collapsible/index.d.ts

@@ -1,3 +1 @@
 export { default as SkdxCollapsible } from './Collapsible.vue.js';
-export { default as SkdxCollapsibleTrigger } from './CollapsibleTrigger.vue.js';
-export { default as SkdxCollapsibleContent } from './CollapsibleContent.vue.js';

package/dist/collapsible/index.js

@@ -1 +1 @@
-import l from"./Collapsible.vue.js";import o from"./CollapsibleTrigger.vue.js";import e from"./CollapsibleContent.vue.js";export{l as SkdxCollapsible,e as SkdxCollapsibleContent,o as SkdxCollapsibleTrigger};
+import l from"./Collapsible.vue.js";export{l as SkdxCollapsible};

package/dist/collapsible/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./CollapsibleContent.vue.cjs"),l=require("./CollapsibleIndicator.vue.cjs"),r=require("./CollapsibleRoot.vue.cjs"),o=require("./CollapsibleTrigger.vue.cjs");exports.SkdxCollapsibleContent=e.default;exports.SkdxCollapsibleIndicator=l.default;exports.SkdxCollapsibleRoot=r.default;exports.SkdxCollapsibleTrigger=o.default;

package/dist/collapsible/primitives.d.cts

@@ -0,0 +1,26 @@
+/**
+ * Advanced primitives for `SkdxCollapsible` — the parts the recipe composes.
+ * Use when the derived anatomy is not the structure you need — custom trigger
+ * layouts, panels with `force-mount` or `hidden-until-found`.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxCollapsibleContent, SkdxCollapsibleIndicator, SkdxCollapsibleRoot, SkdxCollapsibleTrigger } from '@skdx/vue/primitives/collapsible';
+ * </script>
+ *
+ * <template>
+ *   <SkdxCollapsibleRoot v-model:open="open">
+ *     <SkdxCollapsibleTrigger>
+ *       Shipping
+ *       <SkdxCollapsibleIndicator>▾</SkdxCollapsibleIndicator>
+ *     </SkdxCollapsibleTrigger>
+ *     <SkdxCollapsibleContent hidden-until-found>Free over £50.</SkdxCollapsibleContent>
+ *   </SkdxCollapsibleRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxCollapsibleRoot } from './CollapsibleRoot.vue.cjs';
+export { default as SkdxCollapsibleTrigger } from './CollapsibleTrigger.vue.cjs';
+export { default as SkdxCollapsibleIndicator } from './CollapsibleIndicator.vue.cjs';
+export { default as SkdxCollapsibleContent } from './CollapsibleContent.vue.cjs';

package/dist/collapsible/primitives.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Advanced primitives for `SkdxCollapsible` — the parts the recipe composes.
+ * Use when the derived anatomy is not the structure you need — custom trigger
+ * layouts, panels with `force-mount` or `hidden-until-found`.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxCollapsibleContent, SkdxCollapsibleIndicator, SkdxCollapsibleRoot, SkdxCollapsibleTrigger } from '@skdx/vue/primitives/collapsible';
+ * </script>
+ *
+ * <template>
+ *   <SkdxCollapsibleRoot v-model:open="open">
+ *     <SkdxCollapsibleTrigger>
+ *       Shipping
+ *       <SkdxCollapsibleIndicator>▾</SkdxCollapsibleIndicator>
+ *     </SkdxCollapsibleTrigger>
+ *     <SkdxCollapsibleContent hidden-until-found>Free over £50.</SkdxCollapsibleContent>
+ *   </SkdxCollapsibleRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxCollapsibleRoot } from './CollapsibleRoot.vue.js';
+export { default as SkdxCollapsibleTrigger } from './CollapsibleTrigger.vue.js';
+export { default as SkdxCollapsibleIndicator } from './CollapsibleIndicator.vue.js';
+export { default as SkdxCollapsibleContent } from './CollapsibleContent.vue.js';

package/dist/collapsible/primitives.js

@@ -0,0 +1 @@
+import o from"./CollapsibleContent.vue.js";import l from"./CollapsibleIndicator.vue.js";import e from"./CollapsibleRoot.vue.js";import i from"./CollapsibleTrigger.vue.js";export{o as SkdxCollapsibleContent,l as SkdxCollapsibleIndicator,e as SkdxCollapsibleRoot,i as SkdxCollapsibleTrigger};