@synopackageland/ui 0.14.0 → 0.14.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.14.1 (2026-10-22)
+
+Additive only: existing props, defaults and DOM stay as they were.
+
+- Add `CopyButton`: a copy action whose result shows on the button itself. A press copies `text` (a string or a function read at the press), turns the button to the success colour with a check, and fades back after 1.8s; a failure does the same in the danger colour with a cross and emits `failed(text)` for a manual-copy fallback. The tooltip and accessible name stay the action; a visually hidden polite live region announces the result. Icon-only or `labelled`, `ghost`/`secondary`/`primary`, `sm`/`md`, an optional `icon`, and `words` for the announcements. Reduced motion keeps only the colour change.
+- New string in all nine built-in languages: "Couldn't copy".
+
 ## 0.14.0 (2026-10-22)
 
 Additive only: existing props, defaults and DOM stay as they were.

package/README.md

@@ -468,7 +468,7 @@ Density can be switched per application subtree:
 
 Primitives:
 
-- Button / IconButton
+- Button / IconButton / CopyButton
 - Input / Textarea
 - Checkbox / CheckboxGroup / RadioGroup / Switch
 - Select
@@ -856,7 +856,21 @@ Copy text with `writeClipboard(text)`, which resolves `true` once copied and
 `false` when the page cannot copy. It tries the Clipboard API, which a DSM app
 window (a frame without `clipboard-write`) or a page outside a secure context
 refuses, then the legacy copy command; `navigator.clipboard.writeText` alone
-fails there. `PathDisplay` and `CopyCutField` use it.
+fails there. `PathDisplay`, `CopyCutField` and `CopyButton` use it.
+
+`CopyButton` is a copy action that shows its result on the button itself: on
+a press it copies `text` (a string, or a function read at the press; `undefined`
+copies nothing), takes the success colour and a check, holds it for 1.8s and
+fades back; when the page cannot copy it does the same in the danger colour with
+a cross and emits `failed(text)`, so the app can show the text selected in a
+`CopyCutField` for copying by hand. Nothing is added beside or under it. `label`
+(default "Copy") stays its tooltip and accessible name; a visually hidden polite
+live region announces "Copied" or "Couldn't copy" (`words` replaces them). It is
+an icon button, or with `labelled` an icon and the label; `icon` replaces the
+copy icon, and `variant` (`ghost`, `secondary`, `primary`) and `size` (`sm`, the
+default, or `md`) follow `IconButton` and `Button`. Under reduced motion only the
+colour changes. Attributes and classes go to the button; the button carries
+`data-copy-state` (`copied`, `failed`, then `settling` while it fades back).
 
 FilePicker retains browser `File[]` semantics. Built-in `locale` values are
 `en`, `zh-TW`, `zh-CN`, `ja`, `ko`, `de`, `fr`, `es`, `it`; an explicit picker

package/dist/components/composite/copy-button/CopyButton.vue.d.ts

@@ -0,0 +1,36 @@
+import { Component } from 'vue';
+export type CopyButtonText = string | (() => string | undefined | Promise<string | undefined>);
+export interface CopyButtonWords {
+    copied?: string;
+    failed?: string;
+}
+type __VLS_Props = {
+    text: CopyButtonText;
+    /** The action's name: the tooltip, the accessible name and, when `labelled`, the visible text. Defaults to "Copy". */
+    label?: string;
+    /** What the live region announces; defaults to the built-in "Copied" and "Couldn't copy". */
+    words?: CopyButtonWords;
+    /** The idle icon; the default is a copy icon. */
+    icon?: Component;
+    labelled?: boolean;
+    variant?: 'ghost' | 'secondary' | 'primary';
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    copied: (text: string) => any;
+    failed: (text: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCopied?: ((text: string) => any) | undefined;
+    onFailed?: ((text: string) => any) | undefined;
+}>, {
+    label: string;
+    size: "sm" | "md";
+    variant: "ghost" | "secondary" | "primary";
+    disabled: boolean;
+    icon: Component;
+    words: CopyButtonWords;
+    labelled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/i18n/text.d.ts

@@ -158,6 +158,7 @@ export declare const englishUiText: {
     readonly "Path: {path}": "Path: {path}";
     readonly Copied: "Copied";
     readonly "Couldn't copy. Select the text and copy it manually.": "Couldn't copy. Select the text and copy it manually.";
+    readonly "Couldn't copy": "Couldn't copy";
 };
 export type UiTextKey = keyof typeof englishUiText;
 export type UiTranslator = (key: UiTextKey, values?: Record<string, string | number>) => string;

package/dist/index.d.ts

@@ -137,6 +137,8 @@ export { default as FilePicker } from './components/composite/file-picker/FilePi
 export type { FileRejection } from './components/composite/file-picker/FilePicker.vue';
 export { default as CopyCutField } from './components/composite/copy-cut-field/CopyCutField.vue';
 export { default as PathDisplay } from './components/composite/path-display/PathDisplay.vue';
+export { default as CopyButton } from './components/composite/copy-button/CopyButton.vue';
+export type { CopyButtonText, CopyButtonWords } from './components/composite/copy-button/CopyButton.vue';
 export type { CopyCutFieldAutosize } from './components/composite/copy-cut-field/CopyCutField.vue';
 export { default as DataView } from './components/composite/data-view/DataView.vue';
 export { default as VirtualList } from './components/composite/virtual-list/VirtualList.vue';