@skdx/vue 0.26.0 → 0.28.0

package/dist/clipboard/Clipboard.vue.d.ts

@@ -1,10 +1,18 @@
 /**
  * The Vue implementation of the shared Clipboard contract (see
  * `@skdx/shared`'s `clipboardContract`). Root of a copy-to-clipboard widget:
- * owns the text to copy and the transient `copied` state, and hands both to
+ * owns the text to copy and the transient copy state, and hands both to
  * `SkdxClipboardTrigger`, `SkdxClipboardIndicator` and `SkdxClipboardInput`
  * through provide/inject. Renders a `<div>` with
- * `data-state="copied" | "idle"` and `data-disabled`.
+ * `data-state="copied" | "idle" | "error"` and `data-disabled`.
+ *
+ * A **failed** copy is the mirror image of a successful one: `data-state="error"`
+ * for the same window, `errorLabel` announced *assertively*, and the
+ * `copy-error` emit.
+ *
+ * The copy state belongs to the **root**, so two triggers under one root both
+ * confirm when either is pressed. `copy()` is exposed through `defineExpose`,
+ * so the write is reachable without a trigger.
  *
  * **The confirmation is the component.** Writing to the clipboard is two lines
  * of platform API; what needs owning is the `copied` flag that has to expire,
@@ -21,13 +29,30 @@
  * inside the click handler, never at setup scope, so the component
  * server-renders on a runtime with no `document` at all.
  *
- * @example
+ * The Trigger carries the accessible name and the Indicators are `aria-hidden`
+ * glyphs. Swapping the button's *text* instead — "Copy" to "Copied!" — renames
+ * the control mid-copy, which moves the target the user was about to click
+ * again and re-announces the whole button on focus; see
+ * `<SkdxClipboardTrigger>`.
+ *
+ * Given no default slot content it derives the body from `label` and
+ * `showInput` — an optional Input, and a Trigger named by `label` wrapping an
+ * idle/copied pair of Indicators. Given one, that content is the body and
+ * nothing is derived. Only presence is inspected, never what the slot holds.
+ * The parts are advanced primitives — `@skdx/vue/primitives/clipboard`.
+ *
+ * ```vue
+ * <SkdxClipboard value="npm i @skdx/vue" label="Copy install command" show-input />
+ * ```
+ *
+ * @example Manual composition, for icons the derived Indicators don't provide —
+ * `import * as Clipboard from '@skdx/vue/primitives/clipboard'`:
  * ```vue
  * <SkdxClipboard value="npm i @skdx/vue">
  *   <SkdxClipboardInput aria-label="Install command" />
  *   <SkdxClipboardTrigger aria-label="Copy install command">
- *     <SkdxClipboardIndicator match="idle">Copy</SkdxClipboardIndicator>
- *     <SkdxClipboardIndicator>Copied!</SkdxClipboardIndicator>
+ *     <SkdxClipboardIndicator match="idle"><CopyIcon /></SkdxClipboardIndicator>
+ *     <SkdxClipboardIndicator><CheckIcon /></SkdxClipboardIndicator>
  *   </SkdxClipboardTrigger>
  * </SkdxClipboard>
  * ```
@@ -55,19 +80,65 @@ type __VLS_Props = {
      * @default 'Copied to clipboard'
      */
     copiedLabel?: string;
+    /**
+     * The live-region message announced when the copy *fails* — when both the
+     * async Clipboard API and the `execCommand` fallback are refused.
+     *
+     * Announced **assertively**, unlike `copiedLabel`, and the difference is
+     * deliberate: the user is on their way to paste, and a polite message
+     * queues behind whatever is being read and arrives after they have already
+     * pasted the *previous* clipboard contents. Politely-announced failure is
+     * unannounced failure.
+     *
+     * Pass `''` to announce nothing — `data-state="error"` and the
+     * `copy-error` emit still happen.
+     * @default 'Copy failed'
+     */
+    errorLabel?: string;
+    /**
+     * The trigger's accessible label, and the derived Trigger's `aria-label`.
+     * @default 'Copy'
+     */
+    label?: string;
+    /**
+     * Renders a derived read-only Input showing `value` beside the Trigger.
+     * @default false
+     */
+    showInput?: boolean;
+    /**
+     * The derived Input's accessible label. Separate from `label`, which
+     * names the Trigger — reusing it would name the field "Copy" rather than
+     * describe what it holds.
+     * @default 'Value to copy'
+     */
+    inputLabel?: string;
 };
+/**
+ * Performs the copy a Trigger would; exposed for shortcuts and retries.
+ * A no-op while the root is disabled.
+ */
+declare function copy(): void;
 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, {
-    copy: (value: string) => any;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /**
+     * Writes value to clipboard; no-op while disabled.
+     */
+    copy: typeof copy;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "copy-success": (value: string) => any;
     "copy-error": (error: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCopy?: ((value: string) => any) | undefined;
+    "onCopy-success"?: ((value: string) => any) | undefined;
     "onCopy-error"?: ((error: unknown) => any) | undefined;
 }>, {
+    label: string;
     disabled: boolean;
+    inputLabel: string;
+    errorLabel: string;
+    showInput: boolean;
     timeout: number | null;
     copiedLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/clipboard/Clipboard.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const m=require("../utils/liveAnnouncer.cjs"),f=require("./context.cjs");let e=require("vue");var v=["data-state","data-disabled"],b=(0,e.defineComponent)({__name:"Clipboard",props:{value:{},timeout:{default:2e3},disabled:{type:Boolean,default:!1},copiedLabel:{default:"Copied to clipboard"}},emits:["copy","copy-error"],setup(c,{emit:l}){const o=c,n=l,d=(0,e.ref)(!1);let r;(0,e.onUnmounted)(()=>clearTimeout(r));function u(t){const i=document.activeElement,a=document.createElement("textarea");a.value=t,a.setAttribute("readonly",""),a.style.cssText="position:fixed;top:0;left:-9999px;opacity:0;",document.body.appendChild(a);try{if(a.select(),typeof document.execCommand!="function"||!document.execCommand("copy"))throw new Error('[skandadx] `document.execCommand("copy")` is unavailable or was rejected.')}finally{a.remove(),i?.focus()}}async function p(t){if(navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(t);return}catch{}u(t)}function s(){if(o.disabled)return;const t=o.value;p(t).then(()=>{d.value=!0,o.copiedLabel&&m.announce(o.copiedLabel),n("copy",t),clearTimeout(r),o.timeout!==null&&(r=setTimeout(()=>{d.value=!1},o.timeout))},i=>n("copy-error",i))}return(0,e.provide)(f.CLIPBOARD_CONTEXT,{value:(0,e.computed)(()=>o.value),copied:(0,e.computed)(()=>d.value),disabled:(0,e.computed)(()=>o.disabled),copy:s}),(t,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-clipboard","data-part":"root","data-skdx-component":"clipboard","data-state":d.value?"copied":"idle","data-disabled":c.disabled?"":void 0},[(0,e.renderSlot)(t.$slots,"default")],8,v))}});exports.default=b;
+const s=require("../utils/liveAnnouncer.cjs"),v=require("./context.cjs"),y=require("./ClipboardAnatomy.vue.cjs");let t=require("vue");var x=["data-state","data-disabled"],C=(0,t.defineComponent)({__name:"Clipboard",props:{value:{},timeout:{default:2e3},disabled:{type:Boolean,default:!1},copiedLabel:{default:"Copied to clipboard"},errorLabel:{default:"Copy failed"},label:{default:"Copy"},showInput:{type:Boolean,default:!1},inputLabel:{default:"Value to copy"}},emits:["copy-success","copy-error"],setup(l,{expose:p,emit:m}){const a=l,d=m,i=(0,t.ref)("idle");let n;(0,t.onUnmounted)(()=>clearTimeout(n));function b(e){const r=document.activeElement,o=document.createElement("textarea");o.value=e,o.setAttribute("readonly",""),o.style.cssText="position:fixed;top:0;left:-9999px;opacity:0;",document.body.appendChild(o);try{if(o.select(),typeof document.execCommand!="function"||!document.execCommand("copy"))throw new Error('[skandadx] `document.execCommand("copy")` is unavailable or was rejected.')}finally{o.remove(),r?.focus()}}async function f(e){if(navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(e);return}catch{}b(e)}function u(e){i.value=e,clearTimeout(n),a.timeout!==null&&(n=setTimeout(()=>{i.value="idle"},a.timeout))}function c(){if(a.disabled)return;const e=a.value;f(e).then(()=>{u("copied"),a.copiedLabel&&s.announce(a.copiedLabel),d("copy-success",e)},r=>{u("error"),a.errorLabel&&s.announce(a.errorLabel,"assertive"),d("copy-error",r)})}return p({copy:c}),(0,t.provide)(v.CLIPBOARD_CONTEXT,{value:(0,t.computed)(()=>a.value),state:(0,t.computed)(()=>i.value),disabled:(0,t.computed)(()=>a.disabled),copy:c}),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-clipboard","data-part":"root","data-skdx-component":"clipboard","data-state":i.value,"data-disabled":l.disabled?"":void 0},[(0,t.renderSlot)(e.$slots,"default",{},()=>[(0,t.createVNode)(y.default,{label:l.label,"show-input":l.showInput,"input-label":l.inputLabel},null,8,["label","show-input","input-label"])])],8,x))}});exports.default=C;

package/dist/clipboard/Clipboard.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{announce as e}from"../utils/liveAnnouncer.js";import{CLIPBOARD_CONTEXT as t}from"./context.js";import{computed as a,createElementBlock as o,defineComponent as d,onUnmounted as i,openBlock as n,provide as l,ref as c,renderSlot as r}from"vue";var s=["data-state","data-disabled"],u=/* @__PURE__ */d({__name:"Clipboard",props:{value:{},timeout:{default:2e3},disabled:{type:Boolean,default:!1},copiedLabel:{default:"Copied to clipboard"}},emits:["copy","copy-error"],setup(d,{emit:u}){const p=d,m=u,f=c(!1);let v;return i(()=>clearTimeout(v)),l(t,{value:a(()=>p.value),copied:a(()=>f.value),disabled:a(()=>p.disabled),copy:function(){if(p.disabled)return;const t=p.value;(async function(e){if(navigator.clipboard?.writeText)try{return void await navigator.clipboard.writeText(e)}catch{}!function(e){const t=document.activeElement,a=document.createElement("textarea");a.value=e,a.setAttribute("readonly",""),a.style.cssText="position:fixed;top:0;left:-9999px;opacity:0;",document.body.appendChild(a);try{if(a.select(),"function"!=typeof document.execCommand||!document.execCommand("copy"))throw new Error('[skandadx] `document.execCommand("copy")` is unavailable or was rejected.')}finally{a.remove(),t?.focus()}}(e)})(t).then(()=>{f.value=!0,p.copiedLabel&&e(p.copiedLabel),m("copy",t),clearTimeout(v),null!==p.timeout&&(v=setTimeout(()=>{f.value=!1},p.timeout))},e=>m("copy-error",e))}}),(e,t)=>(n(),o("div",{class:"skdx-clipboard","data-part":"root","data-skdx-component":"clipboard","data-state":f.value?"copied":"idle","data-disabled":d.disabled?"":void 0},[r(e.$slots,"default")],8,s))}});export{u as default};
+import{announce as e}from"../utils/liveAnnouncer.js";import{CLIPBOARD_CONTEXT as t}from"./context.js";import a from"./ClipboardAnatomy.vue.js";import{computed as o,createElementBlock as l,createVNode as d,defineComponent as i,onUnmounted as r,openBlock as n,provide as s,ref as u,renderSlot as c}from"vue";var p=["data-state","data-disabled"],m=/* @__PURE__ */i({__name:"Clipboard",props:{value:{},timeout:{default:2e3},disabled:{type:Boolean,default:!1},copiedLabel:{default:"Copied to clipboard"},errorLabel:{default:"Copy failed"},label:{default:"Copy"},showInput:{type:Boolean,default:!1},inputLabel:{default:"Value to copy"}},emits:["copy-success","copy-error"],setup(i,{expose:m,emit:b}){const f=i,v=b,y=u("idle");let x;function C(e){y.value=e,clearTimeout(x),null!==f.timeout&&(x=setTimeout(()=>{y.value="idle"},f.timeout))}function w(){if(f.disabled)return;const t=f.value;(async function(e){if(navigator.clipboard?.writeText)try{return void await navigator.clipboard.writeText(e)}catch{}!function(e){const t=document.activeElement,a=document.createElement("textarea");a.value=e,a.setAttribute("readonly",""),a.style.cssText="position:fixed;top:0;left:-9999px;opacity:0;",document.body.appendChild(a);try{if(a.select(),"function"!=typeof document.execCommand||!document.execCommand("copy"))throw new Error('[skandadx] `document.execCommand("copy")` is unavailable or was rejected.')}finally{a.remove(),t?.focus()}}(e)})(t).then(()=>{C("copied"),f.copiedLabel&&e(f.copiedLabel),v("copy-success",t)},t=>{C("error"),f.errorLabel&&e(f.errorLabel,"assertive"),v("copy-error",t)})}return r(()=>clearTimeout(x)),m({copy:w}),s(t,{value:o(()=>f.value),state:o(()=>y.value),disabled:o(()=>f.disabled),copy:w}),(e,t)=>(n(),l("div",{class:"skdx-clipboard","data-part":"root","data-skdx-component":"clipboard","data-state":y.value,"data-disabled":i.disabled?"":void 0},[c(e.$slots,"default",{},()=>[d(a,{label:i.label,"show-input":i.showInput,"input-label":i.inputLabel},null,8,["label","show-input","input-label"])])],8,p))}});export{m as default};

package/dist/clipboard/ClipboardAnatomy.vue.cjs

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

package/dist/clipboard/ClipboardAnatomy.vue.d.cts

@@ -0,0 +1,16 @@
+/**
+ * Anatomy when default slot empty: optional Input, Trigger with idle/copied Indicators.
+ * React port's `ClipboardAnatomy.tsx` must stay synchronized.
+ * @internal
+ */
+type __VLS_Props = {
+    label?: string;
+    showInput?: boolean;
+    inputLabel?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    inputLabel: string;
+    showInput: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/clipboard/ClipboardAnatomy.vue.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Anatomy when default slot empty: optional Input, Trigger with idle/copied Indicators.
+ * React port's `ClipboardAnatomy.tsx` must stay synchronized.
+ * @internal
+ */
+type __VLS_Props = {
+    label?: string;
+    showInput?: boolean;
+    inputLabel?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    inputLabel: string;
+    showInput: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/clipboard/ClipboardAnatomy.vue.js

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

package/dist/clipboard/ClipboardAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const l=require("./ClipboardIndicator.vue.cjs"),r=require("./ClipboardInput.vue.cjs"),u=require("./ClipboardTrigger.vue.cjs");let e=require("vue");var o=(0,e.defineComponent)({__name:"ClipboardAnatomy",props:{label:{default:"Copy"},showInput:{type:Boolean,default:!1},inputLabel:{default:"Value to copy"}},setup(a){return(d,t)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[a.showInput?((0,e.openBlock)(),(0,e.createBlock)(r.default,{key:0,"aria-label":a.inputLabel},null,8,["aria-label"])):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(u.default,{"aria-label":a.label},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(l.default,{match:"idle"},{default:(0,e.withCtx)(()=>[...t[0]||(t[0]=[(0,e.createTextVNode)("Copy",-1)])]),_:1}),(0,e.createVNode)(l.default,null,{default:(0,e.withCtx)(()=>[...t[1]||(t[1]=[(0,e.createTextVNode)("Copied",-1)])]),_:1})]),_:1},8,["aria-label"])],64))}});exports.default=o;

package/dist/clipboard/ClipboardAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"./ClipboardIndicator.vue.js";import a from"./ClipboardInput.vue.js";import l from"./ClipboardTrigger.vue.js";import{Fragment as o,createBlock as t,createCommentVNode as r,createElementBlock as p,createTextVNode as u,createVNode as i,defineComponent as n,openBlock as d,withCtx as s}from"vue";var m=/* @__PURE__ */n({__name:"ClipboardAnatomy",props:{label:{default:"Copy"},showInput:{type:Boolean,default:!1},inputLabel:{default:"Value to copy"}},setup:n=>(m,b)=>(d(),p(o,null,[n.showInput?(d(),t(a,{key:0,"aria-label":n.inputLabel},null,8,["aria-label"])):r("",!0),i(l,{"aria-label":n.label},{default:s(()=>[i(e,{match:"idle"},{default:s(()=>[...b[0]||(b[0]=[u("Copy",-1)])]),_:1}),i(e,null,{default:s(()=>[...b[1]||(b[1]=[u("Copied",-1)])]),_:1})]),_:1},8,["aria-label"])],64))});export{m as default};

package/dist/clipboard/ClipboardIndicator.vue.d.cts

@@ -1,29 +1,20 @@
 import { type ClipboardState } from './context.cjs';
 /**
- * Renders its content only while the `SkdxClipboard` root is in the state named
- * by `match` — `'copied'` by default, `'idle'` for the icon it replaces. The
- * two swap without the consumer branching on anything.
- *
- * It renders a plain `<span>` and stays out of the accessibility tree's way:
- * the announcement of a successful copy comes from the root's live-region
- * message, not from this node appearing. If the indicator is an icon with no
- * text, mark it `aria-hidden` and name the trigger instead — an unlabelled
- * swap is silence to a screen-reader user, and a spoken "copied" on top of the
- * announcement reads as a stutter.
- *
- * Must be used inside `<SkdxClipboard>`.
+ * Renders content based on clipboard state, hidden from screen readers by default
+ * to prevent duplication in live announcements.
  *
  * @example
  * ```vue
- * <SkdxClipboardIndicator match="idle">Copy</SkdxClipboardIndicator>
- * <SkdxClipboardIndicator>Copied!</SkdxClipboardIndicator>
+ * <SkdxClipboardTrigger aria-label="Copy install command">
+ *   <SkdxClipboardIndicator match="idle"><CopyIcon /></SkdxClipboardIndicator>
+ *   <SkdxClipboardIndicator><CheckIcon /></SkdxClipboardIndicator>
+ * </SkdxClipboardTrigger>
  * ```
  */
 type __VLS_Props = {
     /**
-     * Which state this indicator renders in — `'copied'` for the checkmark,
-     * `'idle'` for the copy icon it replaces.
-     * @default 'copied' — the confirmation, which is the one that needs mounting logic.
+     * State to render in: `'copied'` for checkmark, `'idle'` for copy icon.
+     * @default 'copied'
      */
     match?: ClipboardState;
 };

package/dist/clipboard/ClipboardIndicator.vue.d.ts

@@ -1,29 +1,20 @@
 import { type ClipboardState } from './context.js';
 /**
- * Renders its content only while the `SkdxClipboard` root is in the state named
- * by `match` — `'copied'` by default, `'idle'` for the icon it replaces. The
- * two swap without the consumer branching on anything.
- *
- * It renders a plain `<span>` and stays out of the accessibility tree's way:
- * the announcement of a successful copy comes from the root's live-region
- * message, not from this node appearing. If the indicator is an icon with no
- * text, mark it `aria-hidden` and name the trigger instead — an unlabelled
- * swap is silence to a screen-reader user, and a spoken "copied" on top of the
- * announcement reads as a stutter.
- *
- * Must be used inside `<SkdxClipboard>`.
+ * Renders content based on clipboard state, hidden from screen readers by default
+ * to prevent duplication in live announcements.
  *
  * @example
  * ```vue
- * <SkdxClipboardIndicator match="idle">Copy</SkdxClipboardIndicator>
- * <SkdxClipboardIndicator>Copied!</SkdxClipboardIndicator>
+ * <SkdxClipboardTrigger aria-label="Copy install command">
+ *   <SkdxClipboardIndicator match="idle"><CopyIcon /></SkdxClipboardIndicator>
+ *   <SkdxClipboardIndicator><CheckIcon /></SkdxClipboardIndicator>
+ * </SkdxClipboardTrigger>
  * ```
  */
 type __VLS_Props = {
     /**
-     * Which state this indicator renders in — `'copied'` for the checkmark,
-     * `'idle'` for the copy icon it replaces.
-     * @default 'copied' — the confirmation, which is the one that needs mounting logic.
+     * State to render in: `'copied'` for checkmark, `'idle'` for copy icon.
+     * @default 'copied'
      */
     match?: ClipboardState;
 };

package/dist/clipboard/ClipboardIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const n=require("./context.cjs");let e=require("vue");var i=["data-state"],s=(0,e.defineComponent)({__name:"ClipboardIndicator",props:{match:{default:"copied"}},setup(r){const o=r,t=(0,e.inject)(n.CLIPBOARD_CONTEXT);if(!t)throw new Error("<SkdxClipboardIndicator> must be used inside <SkdxClipboard>.");const a=(0,e.computed)(()=>t.copied.value?"copied":"idle"),d=(0,e.computed)(()=>a.value===o.match);return(c,u)=>d.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:0,class:"skdx-clipboard__indicator","data-part":"indicator","data-state":a.value},[(0,e.renderSlot)(c.$slots,"default")],8,i)):(0,e.createCommentVNode)("",!0)}});exports.default=s;
+const c=require("./context.cjs");let e=require("vue");var i=["data-state"],s=(0,e.defineComponent)({__name:"ClipboardIndicator",props:{match:{default:"copied"}},setup(r){const o=r,t=(0,e.inject)(c.CLIPBOARD_CONTEXT);if(!t)throw new Error("<SkdxClipboardIndicator> must be used inside <SkdxClipboard>.");const a=(0,e.computed)(()=>t.state.value),d=(0,e.computed)(()=>a.value===o.match);return(n,u)=>d.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:0,class:"skdx-clipboard__indicator","data-part":"indicator","aria-hidden":"true","data-state":a.value},[(0,e.renderSlot)(n.$slots,"default")],8,i)):(0,e.createCommentVNode)("",!0)}});exports.default=s;

package/dist/clipboard/ClipboardIndicator.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{CLIPBOARD_CONTEXT as a}from"./context.js";import{computed as e,createCommentVNode as t,createElementBlock as o,defineComponent as d,inject as r,openBlock as s,renderSlot as i}from"vue";var c=["data-state"],n=/* @__PURE__ */d({__name:"ClipboardIndicator",props:{match:{default:"copied"}},setup(d){const n=d,l=r(a);if(!l)throw new Error("<SkdxClipboardIndicator> must be used inside <SkdxClipboard>.");const p=e(()=>l.copied.value?"copied":"idle"),m=e(()=>p.value===n.match);return(a,e)=>m.value?(s(),o("span",{key:0,class:"skdx-clipboard__indicator","data-part":"indicator","data-state":p.value},[i(a.$slots,"default")],8,c)):t("",!0)}});export{n as default};
+import{CLIPBOARD_CONTEXT as a}from"./context.js";import{computed as e,createCommentVNode as t,createElementBlock as o,defineComponent as r,inject as d,openBlock as s,renderSlot as n}from"vue";var i=["data-state"],c=/* @__PURE__ */r({__name:"ClipboardIndicator",props:{match:{default:"copied"}},setup(r){const c=r,l=d(a);if(!l)throw new Error("<SkdxClipboardIndicator> must be used inside <SkdxClipboard>.");const p=e(()=>l.state.value),u=e(()=>p.value===c.match);return(a,e)=>u.value?(s(),o("span",{key:0,class:"skdx-clipboard__indicator","data-part":"indicator","aria-hidden":"true","data-state":p.value},[n(a.$slots,"default")],8,i)):t("",!0)}});export{c as default};

package/dist/clipboard/ClipboardInput.vue.d.cts

@@ -1,17 +1,8 @@
 /**
- * Optional read-only `<input>` showing the `SkdxClipboard` root's `value` — the
- * "here is exactly what you are about to copy" field next to the button.
- * Renders `readonly` (not `disabled`, which would take it out of the tab order
- * and grey the text out) with `data-state="copied" | "idle"` and
- * `data-disabled`, and selects its whole contents on focus so the manual
- * Ctrl+C path is one keystroke rather than a drag.
- *
- * `value` is bound after `$attrs`, so a consumer cannot point the field at
- * something other than what the button copies: the root owns the text, and a
- * field disagreeing with the trigger is a bug with a UI. Give it an
- * `aria-label` — a bare read-only field announces only its contents.
- *
- * Must be used inside `<SkdxClipboard>`.
+ * Read-only field showing clipboard value, with `data-state="copied"|"idle"` and `data-disabled`.
+ * Renders `readonly` not `disabled` (stays in tab order). Selects all on focus for Ctrl+C.
+ * `value` is bound after `$attrs`, so it always shows button's copy value.
+ * Provide `aria-label` — bare readonly field announces only contents.
  *
  * @example
  * ```vue

package/dist/clipboard/ClipboardInput.vue.d.ts

@@ -1,17 +1,8 @@
 /**
- * Optional read-only `<input>` showing the `SkdxClipboard` root's `value` — the
- * "here is exactly what you are about to copy" field next to the button.
- * Renders `readonly` (not `disabled`, which would take it out of the tab order
- * and grey the text out) with `data-state="copied" | "idle"` and
- * `data-disabled`, and selects its whole contents on focus so the manual
- * Ctrl+C path is one keystroke rather than a drag.
- *
- * `value` is bound after `$attrs`, so a consumer cannot point the field at
- * something other than what the button copies: the root owns the text, and a
- * field disagreeing with the trigger is a bug with a UI. Give it an
- * `aria-label` — a bare read-only field announces only its contents.
- *
- * Must be used inside `<SkdxClipboard>`.
+ * Read-only field showing clipboard value, with `data-state="copied"|"idle"` and `data-disabled`.
+ * Renders `readonly` not `disabled` (stays in tab order). Selects all on focus for Ctrl+C.
+ * `value` is bound after `$attrs`, so it always shows button's copy value.
+ * Provide `aria-label` — bare readonly field announces only contents.
  *
  * @example
  * ```vue

package/dist/clipboard/ClipboardInput.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const d=require("./context.cjs");let e=require("vue");var u=["data-state","data-disabled","aria-disabled","value"],i=(0,e.defineComponent)({inheritAttrs:!1,__name:"ClipboardInput",setup(n){const t=(0,e.inject)(d.CLIPBOARD_CONTEXT);if(!t)throw new Error("<SkdxClipboardInput> must be used inside <SkdxClipboard>.");function r(a){a.currentTarget.select()}return(a,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("input",(0,e.mergeProps)({class:"skdx-clipboard__input","data-part":"input",type:"text","data-state":(0,e.unref)(t).copied.value?"copied":"idle","data-disabled":(0,e.unref)(t).disabled.value?"":void 0,"aria-disabled":(0,e.unref)(t).disabled.value||void 0},a.$attrs,{value:(0,e.unref)(t).value.value,readonly:"",onFocus:r}),null,16,u))}});exports.default=i;
+const u=require("./context.cjs");let e=require("vue");var d=["data-state","data-disabled","aria-disabled","value"],n=(0,e.defineComponent)({inheritAttrs:!1,__name:"ClipboardInput",setup(i){const t=(0,e.inject)(u.CLIPBOARD_CONTEXT);if(!t)throw new Error("<SkdxClipboardInput> must be used inside <SkdxClipboard>.");function r(a){a.currentTarget.select()}return(a,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("input",(0,e.mergeProps)({class:"skdx-clipboard__input","data-part":"input",type:"text","data-state":(0,e.unref)(t).state.value,"data-disabled":(0,e.unref)(t).disabled.value?"":void 0,"aria-disabled":(0,e.unref)(t).disabled.value||void 0},a.$attrs,{value:(0,e.unref)(t).value.value,readonly:"",onFocus:r}),null,16,d))}});exports.default=n;

package/dist/clipboard/ClipboardInput.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{CLIPBOARD_CONTEXT as a}from"./context.js";import{createElementBlock as e,defineComponent as t,inject as d,mergeProps as i,openBlock as r,unref as s}from"vue";var l=["data-state","data-disabled","aria-disabled","value"],o=/* @__PURE__ */t({inheritAttrs:!1,__name:"ClipboardInput",setup(t){const o=d(a);if(!o)throw new Error("<SkdxClipboardInput> must be used inside <SkdxClipboard>.");function n(a){a.currentTarget.select()}return(a,t)=>(r(),e("input",i({class:"skdx-clipboard__input","data-part":"input",type:"text","data-state":s(o).copied.value?"copied":"idle","data-disabled":s(o).disabled.value?"":void 0,"aria-disabled":s(o).disabled.value||void 0},a.$attrs,{value:s(o).value.value,readonly:"",onFocus:n}),null,16,l))}});export{o as default};
+import{CLIPBOARD_CONTEXT as a}from"./context.js";import{createElementBlock as e,defineComponent as t,inject as d,mergeProps as s,openBlock as r,unref as i}from"vue";var l=["data-state","data-disabled","aria-disabled","value"],n=/* @__PURE__ */t({inheritAttrs:!1,__name:"ClipboardInput",setup(t){const n=d(a);if(!n)throw new Error("<SkdxClipboardInput> must be used inside <SkdxClipboard>.");function o(a){a.currentTarget.select()}return(a,t)=>(r(),e("input",s({class:"skdx-clipboard__input","data-part":"input",type:"text","data-state":i(n).state.value,"data-disabled":i(n).disabled.value?"":void 0,"aria-disabled":i(n).disabled.value||void 0},a.$attrs,{value:i(n).value.value,readonly:"",onFocus:o}),null,16,l))}});export{n as default};

package/dist/clipboard/ClipboardTrigger.vue.d.cts

@@ -1,19 +1,9 @@
 /**
- * The button that copies the `SkdxClipboard` root's `value`. Renders a real
- * `<button type="button">` — so Enter and Space activate it for free, with no
- * key handling of our own — carrying `data-state="copied" | "idle"` and
- * `data-disabled`, and `disabled` when either it or the root is.
- *
- * It has no built-in label: give it text, or an icon plus `aria-label`. Keep
- * that label stable across the copy ("Copy install command"), and let
- * `SkdxClipboardIndicator` swap the *visual* — renaming the button under the
- * user's pointer moves the target they were about to click again, and
- * re-announces the whole control on focus.
- *
- * Focus never moves: the state change happens under the user rather than
- * around them.
- *
- * Must be used inside `<SkdxClipboard>`.
+ * Button that copies the clipboard's `value`. Renders `<button type="button">`
+ * with `data-state="copied" | "idle"`. Give it text or icon plus `aria-label`;
+ * keep that label stable across the copy, and let `SkdxClipboardIndicator`
+ * swap the visual. Focus stays on the button. Must be used inside
+ * `<SkdxClipboard>`.
  *
  * @example
  * ```vue

package/dist/clipboard/ClipboardTrigger.vue.d.ts

@@ -1,19 +1,9 @@
 /**
- * The button that copies the `SkdxClipboard` root's `value`. Renders a real
- * `<button type="button">` — so Enter and Space activate it for free, with no
- * key handling of our own — carrying `data-state="copied" | "idle"` and
- * `data-disabled`, and `disabled` when either it or the root is.
- *
- * It has no built-in label: give it text, or an icon plus `aria-label`. Keep
- * that label stable across the copy ("Copy install command"), and let
- * `SkdxClipboardIndicator` swap the *visual* — renaming the button under the
- * user's pointer moves the target they were about to click again, and
- * re-announces the whole control on focus.
- *
- * Focus never moves: the state change happens under the user rather than
- * around them.
- *
- * Must be used inside `<SkdxClipboard>`.
+ * Button that copies the clipboard's `value`. Renders `<button type="button">`
+ * with `data-state="copied" | "idle"`. Give it text or icon plus `aria-label`;
+ * keep that label stable across the copy, and let `SkdxClipboardIndicator`
+ * swap the visual. Focus stays on the button. Must be used inside
+ * `<SkdxClipboard>`.
  *
  * @example
  * ```vue

package/dist/clipboard/ClipboardTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("./context.cjs");let e=require("vue");var s=["data-state","data-disabled","disabled"],n=(0,e.defineComponent)({__name:"ClipboardTrigger",props:{disabled:{type:Boolean,default:!1}},setup(r){const i=r,t=(0,e.inject)(o.CLIPBOARD_CONTEXT);if(!t)throw new Error("<SkdxClipboardTrigger> must be used inside <SkdxClipboard>.");const d=(0,e.computed)(()=>t.disabled.value||i.disabled);return(l,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-clipboard__trigger","data-part":"trigger",type:"button","data-state":(0,e.unref)(t).copied.value?"copied":"idle","data-disabled":d.value?"":void 0,disabled:d.value,onClick:a[0]||(a[0]=u=>(0,e.unref)(t).copy())},[(0,e.renderSlot)(l.$slots,"default")],8,s))}});exports.default=n;
+const i=require("./context.cjs");let e=require("vue");var s=["data-state","data-disabled","disabled"],n=(0,e.defineComponent)({__name:"ClipboardTrigger",props:{disabled:{type:Boolean,default:!1}},setup(d){const l=d,t=(0,e.inject)(i.CLIPBOARD_CONTEXT);if(!t)throw new Error("<SkdxClipboardTrigger> must be used inside <SkdxClipboard>.");const a=(0,e.computed)(()=>t.disabled.value||l.disabled);return(o,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-clipboard__trigger","data-part":"trigger",type:"button","data-state":(0,e.unref)(t).state.value,"data-disabled":a.value?"":void 0,disabled:a.value,onClick:r[0]||(r[0]=u=>(0,e.unref)(t).copy())},[(0,e.renderSlot)(o.$slots,"default")],8,s))}});exports.default=n;

package/dist/clipboard/ClipboardTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{CLIPBOARD_CONTEXT as e}from"./context.js";import{computed as a,createElementBlock as t,defineComponent as d,inject as o,openBlock as s,renderSlot as r,unref as i}from"vue";var l=["data-state","data-disabled","disabled"],n=/* @__PURE__ */d({__name:"ClipboardTrigger",props:{disabled:{type:Boolean,default:!1}},setup(d){const n=d,p=o(e);if(!p)throw new Error("<SkdxClipboardTrigger> must be used inside <SkdxClipboard>.");const u=a(()=>p.disabled.value||n.disabled);return(e,a)=>(s(),t("button",{class:"skdx-clipboard__trigger","data-part":"trigger",type:"button","data-state":i(p).copied.value?"copied":"idle","data-disabled":u.value?"":void 0,disabled:u.value,onClick:a[0]||(a[0]=e=>i(p).copy())},[r(e.$slots,"default")],8,l))}});export{n as default};
+import{CLIPBOARD_CONTEXT as e}from"./context.js";import{computed as a,createElementBlock as t,defineComponent as d,inject as s,openBlock as o,renderSlot as r,unref as l}from"vue";var i=["data-state","data-disabled","disabled"],n=/* @__PURE__ */d({__name:"ClipboardTrigger",props:{disabled:{type:Boolean,default:!1}},setup(d){const n=d,p=s(e);if(!p)throw new Error("<SkdxClipboardTrigger> must be used inside <SkdxClipboard>.");const u=a(()=>p.disabled.value||n.disabled);return(e,a)=>(o(),t("button",{class:"skdx-clipboard__trigger","data-part":"trigger",type:"button","data-state":l(p).state.value,"data-disabled":u.value?"":void 0,disabled:u.value,onClick:a[0]||(a[0]=e=>l(p).copy())},[r(e.$slots,"default")],8,i))}});export{n as default};

package/dist/clipboard/context.d.cts

@@ -1,12 +1,15 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-/** The two states a `SkdxClipboard` can be in, mirrored onto `data-state` on every part. */
-export type ClipboardState = 'copied' | 'idle';
+/**
+ * The three states a `SkdxClipboard` can be in, mirrored onto `data-state`.
+ * Error state is required for announcement (else failure is invisible to users).
+ */
+export type ClipboardState = 'copied' | 'idle' | 'error';
 /** @internal Shared state a `SkdxClipboard` provides so its parts can read the text, the copied flag, and run the copy. */
 export interface ClipboardContext {
     /** The text written to the system clipboard — the root owns it, the parts only display it. */
     value: ComputedRef<string>;
-    /** Whether the transient confirmation is showing. Flips back to `false` when the root's `timeout` elapses. */
-    copied: ComputedRef<boolean>;
+    /** The root's current state, which every part mirrors onto its own `data-state`. Falls back to `'idle'` when the root's `timeout` elapses. */
+    state: ComputedRef<ClipboardState>;
     /** The root's `disabled`. A part combines it with its own `disabled` rather than replacing it. */
     disabled: ComputedRef<boolean>;
     /** Performs the copy. A no-op while the root is disabled; failures go to the root's `copy-error` emit. */

package/dist/clipboard/context.d.ts

@@ -1,12 +1,15 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-/** The two states a `SkdxClipboard` can be in, mirrored onto `data-state` on every part. */
-export type ClipboardState = 'copied' | 'idle';
+/**
+ * The three states a `SkdxClipboard` can be in, mirrored onto `data-state`.
+ * Error state is required for announcement (else failure is invisible to users).
+ */
+export type ClipboardState = 'copied' | 'idle' | 'error';
 /** @internal Shared state a `SkdxClipboard` provides so its parts can read the text, the copied flag, and run the copy. */
 export interface ClipboardContext {
     /** The text written to the system clipboard — the root owns it, the parts only display it. */
     value: ComputedRef<string>;
-    /** Whether the transient confirmation is showing. Flips back to `false` when the root's `timeout` elapses. */
-    copied: ComputedRef<boolean>;
+    /** The root's current state, which every part mirrors onto its own `data-state`. Falls back to `'idle'` when the root's `timeout` elapses. */
+    state: ComputedRef<ClipboardState>;
     /** The root's `disabled`. A part combines it with its own `disabled` rather than replacing it. */
     disabled: ComputedRef<boolean>;
     /** Performs the copy. A no-op while the root is disabled; failures go to the root's `copy-error` emit. */

package/dist/clipboard/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Clipboard.vue.cjs"),e=require("./ClipboardIndicator.vue.cjs"),i=require("./ClipboardInput.vue.cjs"),d=require("./ClipboardTrigger.vue.cjs");exports.SkdxClipboard=r.default;exports.SkdxClipboardIndicator=e.default;exports.SkdxClipboardInput=i.default;exports.SkdxClipboardTrigger=d.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Clipboard.vue.cjs");exports.SkdxClipboard=e.default;

package/dist/clipboard/index.d.cts

@@ -1,5 +1,2 @@
 export { default as SkdxClipboard } from './Clipboard.vue.cjs';
-export { default as SkdxClipboardIndicator } from './ClipboardIndicator.vue.cjs';
-export { default as SkdxClipboardInput } from './ClipboardInput.vue.cjs';
-export { default as SkdxClipboardTrigger } from './ClipboardTrigger.vue.cjs';
 export type { ClipboardState } from './context.cjs';

package/dist/clipboard/index.d.ts

@@ -1,5 +1,2 @@
 export { default as SkdxClipboard } from './Clipboard.vue.js';
-export { default as SkdxClipboardIndicator } from './ClipboardIndicator.vue.js';
-export { default as SkdxClipboardInput } from './ClipboardInput.vue.js';
-export { default as SkdxClipboardTrigger } from './ClipboardTrigger.vue.js';
 export type { ClipboardState } from './context.js';

package/dist/clipboard/index.js

@@ -1 +1 @@
-import r from"./Clipboard.vue.js";import o from"./ClipboardIndicator.vue.js";import i from"./ClipboardInput.vue.js";import p from"./ClipboardTrigger.vue.js";export{r as SkdxClipboard,o as SkdxClipboardIndicator,i as SkdxClipboardInput,p as SkdxClipboardTrigger};
+import o from"./Clipboard.vue.js";export{o as SkdxClipboard};

package/dist/clipboard/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./ClipboardIndicator.vue.cjs"),e=require("./ClipboardInput.vue.cjs"),i=require("./ClipboardTrigger.vue.cjs"),d=require("./Clipboard.vue.cjs");exports.SkdxClipboard=d.default;exports.SkdxClipboardIndicator=r.default;exports.SkdxClipboardInput=e.default;exports.SkdxClipboardTrigger=i.default;

package/dist/clipboard/primitives.d.cts

@@ -0,0 +1,27 @@
+/**
+ * Advanced primitives for `SkdxClipboard` — the parts the recipe composes.
+ * Use when the derived anatomy is not the structure you need — icon indicators,
+ * differently-labelled input.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxClipboard, SkdxClipboardIndicator, SkdxClipboardInput, SkdxClipboardTrigger } from '@skdx/vue/primitives/clipboard';
+ * </script>
+ *
+ * <template>
+ *   <SkdxClipboard value="npm i @skdx/vue">
+ *     <SkdxClipboardInput aria-label="Install command" />
+ *     <SkdxClipboardTrigger aria-label="Copy install command">
+ *       <SkdxClipboardIndicator match="idle"><CopyIcon /></SkdxClipboardIndicator>
+ *       <SkdxClipboardIndicator><CheckIcon /></SkdxClipboardIndicator>
+ *     </SkdxClipboardTrigger>
+ *   </SkdxClipboard>
+ * </template>
+ * ```
+ */
+export { default as SkdxClipboard } from './Clipboard.vue.cjs';
+export { default as SkdxClipboardIndicator } from './ClipboardIndicator.vue.cjs';
+export { default as SkdxClipboardInput } from './ClipboardInput.vue.cjs';
+export { default as SkdxClipboardTrigger } from './ClipboardTrigger.vue.cjs';
+export type { ClipboardState } from './context.cjs';

package/dist/clipboard/primitives.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Advanced primitives for `SkdxClipboard` — the parts the recipe composes.
+ * Use when the derived anatomy is not the structure you need — icon indicators,
+ * differently-labelled input.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxClipboard, SkdxClipboardIndicator, SkdxClipboardInput, SkdxClipboardTrigger } from '@skdx/vue/primitives/clipboard';
+ * </script>
+ *
+ * <template>
+ *   <SkdxClipboard value="npm i @skdx/vue">
+ *     <SkdxClipboardInput aria-label="Install command" />
+ *     <SkdxClipboardTrigger aria-label="Copy install command">
+ *       <SkdxClipboardIndicator match="idle"><CopyIcon /></SkdxClipboardIndicator>
+ *       <SkdxClipboardIndicator><CheckIcon /></SkdxClipboardIndicator>
+ *     </SkdxClipboardTrigger>
+ *   </SkdxClipboard>
+ * </template>
+ * ```
+ */
+export { default as SkdxClipboard } from './Clipboard.vue.js';
+export { default as SkdxClipboardIndicator } from './ClipboardIndicator.vue.js';
+export { default as SkdxClipboardInput } from './ClipboardInput.vue.js';
+export { default as SkdxClipboardTrigger } from './ClipboardTrigger.vue.js';
+export type { ClipboardState } from './context.js';

package/dist/clipboard/primitives.js

@@ -0,0 +1 @@
+import r from"./ClipboardIndicator.vue.js";import o from"./ClipboardInput.vue.js";import i from"./ClipboardTrigger.vue.js";import p from"./Clipboard.vue.js";export{p as SkdxClipboard,r as SkdxClipboardIndicator,o as SkdxClipboardInput,i as SkdxClipboardTrigger};