@flood-md/react 0.2.11 → 0.2.13

package/dist/dumbbell-chart.js

@@ -0,0 +1,80 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { Inline, Surface, Text, VisuallyHidden } from "./index.js";
+const number = new Intl.NumberFormat("en", { maximumSignificantDigits: 21 });
+export const DumbbellPlot = /* @__PURE__ */ forwardRef(function DumbbellPlot({ label, items, domain, beforeLabel = "Before", afterLabel = "After", missingLabel = "No data", emptyLabel = "No observations", formatValue = number.format, navigationLabel = "Use arrow keys to explore groups, or Home and End to jump.", className, ...props }, ref) {
+    const instructions = useId();
+    const [cursor, setCursor] = useState(0);
+    const [hover, setHover] = useState();
+    const [tap, setTap] = useState();
+    const [focused, setFocused] = useState(false);
+    const ids = new Set();
+    let low = Infinity;
+    let high = -Infinity;
+    for (const item of items) {
+        if (!item.id.trim() || ids.has(item.id) || !item.label.trim())
+            throw new Error("Flood DumbbellChart needs unique IDs and nonempty labels");
+        ids.add(item.id);
+        for (const value of [item.before, item.after]) {
+            if (value === null)
+                continue;
+            if (!Number.isFinite(value))
+                throw new RangeError("Flood DumbbellChart endpoints must be finite");
+            low = Math.min(low, value);
+            high = Math.max(high, value);
+        }
+    }
+    if (domain && (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1]) ||
+        domain[0] >= domain[1] || domain[0] > low || domain[1] < high)) {
+        throw new RangeError("Flood DumbbellChart domain must contain all observed endpoints and have finite increasing bounds");
+    }
+    const [min, max] = domain ?? [low, high];
+    const span = max - min;
+    const position = (value) => span === 0 ? 50 : 100 * (Number.isFinite(span)
+        ? (value - min) / span : (value / 2 - min / 2) / (max / 2 - min / 2));
+    const last = items.length - 1;
+    const active = Math.min(last, hover ?? tap ?? cursor);
+    const item = items[active];
+    const inspecting = hover !== undefined || tap !== undefined || focused;
+    const values = item ? [item.before, item.after].map(value => value === null ? missingLabel : formatValue(value)) : [];
+    const valueText = item && `${item.label}, ${beforeLabel}: ${values[0]}, ${afterLabel}: ${values[1]}`;
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowDown":
+            case "ArrowRight":
+                next = active + 1;
+                break;
+            case "ArrowUp":
+            case "ArrowLeft":
+                next = active - 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = last;
+                break;
+            case "Escape":
+                if (inspecting)
+                    event.preventDefault();
+                setHover(undefined);
+                setTap(undefined);
+                setFocused(false);
+                return;
+            default: return;
+        }
+        event.preventDefault();
+        setHover(undefined);
+        setTap(undefined);
+        setFocused(true);
+        setCursor(Math.max(0, Math.min(last, next)));
+    };
+    return _jsx("div", { ...props, ref: ref, className: ["flood-dumbbell-chart", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: low <= high ? _jsxs(_Fragment, { children: [last > 0 && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsxs("div", { className: "flood-dumbbell-chart__plot", dir: "ltr", role: last > 0 ? "slider" : "img", tabIndex: 0, "aria-label": last > 0 ? label : `${label}. ${valueText}`, "aria-describedby": last > 0 ? instructions : undefined, "aria-valuemin": last > 0 ? 1 : undefined, "aria-valuemax": last > 0 ? items.length : undefined, "aria-valuenow": last > 0 ? active + 1 : undefined, "aria-valuetext": last > 0 ? valueText : undefined, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onKeyDown: navigate, onPointerLeave: () => setHover(undefined), children: [_jsx("div", { className: "flood-dumbbell-chart__rows", "aria-hidden": "true", children: items.map(({ id, label: name, before, after }, index) => {
+                                const start = before === null ? undefined : position(before);
+                                const end = after === null ? undefined : position(after);
+                                return _jsxs("div", { className: "flood-dumbbell-chart__row", "data-active": inspecting && index === active || undefined, onPointerEnter: event => { if (event.pointerType !== "touch")
+                                        setHover(index); }, onPointerUp: event => { if (event.pointerType === "touch")
+                                        setTap(previous => previous === index ? undefined : index); }, children: [_jsx(Text, { className: "flood-dumbbell-chart__name", size: "helper", tone: "subtle", dir: "auto", title: name, children: name }), _jsxs("div", { className: "flood-dumbbell-chart__track", children: [start !== undefined && end !== undefined && _jsx("span", { className: "flood-dumbbell-chart__connector", style: { left: `${Math.min(start, end)}%`, width: `${Math.abs(end - start)}%` } }), start !== undefined && _jsx("span", { className: "flood-dumbbell-chart__point", "data-point": "before", style: { left: `${start}%` } }), end !== undefined && _jsx("span", { className: "flood-dumbbell-chart__point", "data-point": "after", style: { left: `${end}%` } })] }), inspecting && index === active && _jsxs(Surface, { className: "flood-chart__tooltip flood-dumbbell-chart__tooltip", padding: "2", elevation: "raised", "data-side": index < items.length / 2 ? "below" : "above", style: { "--flood-dumbbell-anchor": (end ?? start ?? 50) / 100 }, children: [_jsx(Text, { size: "helper", dir: "auto", children: name }), _jsxs(Inline, { gap: "2", className: "flood-dumbbell-chart__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", children: beforeLabel }), _jsx(Text, { size: "helper", children: values[0] })] }), _jsxs(Inline, { gap: "2", className: "flood-dumbbell-chart__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", children: afterLabel }), _jsx(Text, { size: "helper", children: values[1] })] })] })] }, id);
+                            }) }), _jsxs("div", { className: "flood-dumbbell-chart__axis", "aria-hidden": "true", children: [_jsx(Text, { size: "helper", tone: "subtle", children: formatValue(min) }), min !== max && _jsx(Text, { size: "helper", tone: "subtle", children: formatValue(max) })] })] }), _jsxs(Inline, { gap: "4", className: "flood-dumbbell-chart__legend", "aria-hidden": "true", children: [_jsxs(Inline, { gap: "2", align: "center", children: [_jsx("span", { className: "flood-dumbbell-chart__key", "data-point": "before" }), _jsx(Text, { size: "helper", tone: "subtle", children: beforeLabel })] }), _jsxs(Inline, { gap: "2", align: "center", children: [_jsx("span", { className: "flood-dumbbell-chart__key", "data-point": "after" }), _jsx(Text, { size: "helper", tone: "subtle", children: afterLabel })] })] })] }) : _jsx(Text, { size: "compact", tone: "subtle", children: emptyLabel }) });
+});

package/dist/editable.js

@@ -1,10 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import { Button, IconButton, IconSlot, Input, InputGroup } from "./index.js";
+import { Button, IconButton, IconSlot, Input, InputGroup, Text } from "./index.js";
+import { mergeDescriptions } from "./field-state.js";
+import { positionLayer, registerLayer } from "./overlay-runtime.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const cx = (...values) => values.filter(Boolean).join(" ");
 /** A draft is private until explicitly committed; native forms receive committed text. */
-export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable({ label, hideLabel = false, value, defaultValue = "", onValueChange, editing, defaultEditing = false, onEditingChange, onCommit, onCancel, blurAction = "commit", readOnly = false, disabled = false, placeholder = "Empty", controlSize = "md", showActions = true, editLabel = "Edit", saveLabel = "Save", cancelLabel = "Cancel", inputRef, name, form, id: explicitId, className, onBlur, onKeyDown, ...props }, forwardedRef) {
+export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable({ label, hideLabel = false, value, defaultValue = "", onValueChange, editing, defaultEditing = false, onEditingChange, onCommit, onCancel, validate, inputMode, previewVariant = "subtle", editorOverlayWidth, blurAction = "commit", readOnly = false, disabled = false, placeholder = "Empty", controlSize = "md", showActions = true, editLabel = "Edit", saveLabel = "Save", cancelLabel = "Cancel", inputRef, name, form, id: explicitId, className, onBlur, onKeyDown, ...props }, forwardedRef) {
     if (![label, editLabel, saveLabel, cancelLabel].every(text => text.trim()))
         throw new Error("Flood Editable requires nonempty control and action labels");
     const initial = useRef(defaultValue), [local, setLocal] = useState(defaultValue);
@@ -12,9 +14,13 @@ export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable
     const [localEditing, setLocalEditing] = useState(defaultEditing);
     const requested = editing ?? localEditing, active = requested && !disabled && !readOnly;
     const [draft, setDraft] = useState(committed);
+    const [validationError, setValidationError] = useState();
     const root = useRef(null), editor = useRef(null), bridge = useRef(null), preview = useRef(null);
-    const current = useRef({ committed, active, draft, value, editing, onValueChange, onEditingChange, onCommit, onCancel });
-    current.current = { committed, active, draft, value, editing, onValueChange, onEditingChange, onCommit, onCancel };
+    const layer = useRef(null);
+    const floating = editorOverlayWidth !== undefined;
+    const fitDraft = editorOverlayWidth === "fit-content";
+    const current = useRef({ committed, active, draft, value, editing, onValueChange, onEditingChange, onCommit, onCancel, validate });
+    current.current = { committed, active, draft, value, editing, onValueChange, onEditingChange, onCommit, onCancel, validate };
     const composing = useRef(false), resolved = useRef(false), wasActive = useRef(false);
     const generated = useId(), id = explicitId ?? `flood-editable-${generated}`, inputId = `${id}-input`, previewId = `${id}-preview`;
     useImperativeHandle(forwardedRef, () => root.current, []);
@@ -34,8 +40,12 @@ export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable
     const finish = (action, restoreFocus) => {
         if (!current.current.active || resolved.current || (composing.current && action === "commit") || editor.current?.matches(":disabled"))
             return;
-        resolved.current = true;
         const next = current.current.draft;
+        const message = action === "commit" ? current.current.validate?.(next) : undefined;
+        setValidationError(message);
+        if (message)
+            return;
+        resolved.current = true;
         if (action === "commit") {
             if (next !== current.current.committed) {
                 if (current.current.value === undefined)
@@ -62,10 +72,35 @@ export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable
         // A controlled host may refuse to close and allow a later deliberate attempt.
         queueMicrotask(() => { resolved.current = false; });
     };
+    useBrowserLayoutEffect(() => {
+        const panel = layer.current, anchor = preview.current;
+        if (!active || !floating || !panel || !anchor)
+            return;
+        const document = panel.ownerDocument, view = document.defaultView;
+        panel.showPopover();
+        let frame = 0;
+        const position = () => {
+            positionLayer(anchor, panel, "bottom", "end", true);
+            frame = view.requestAnimationFrame(position);
+        };
+        position();
+        const unregister = registerLayer(document, {
+            panel, anchor: () => anchor, close: () => finish("cancel", true), closeOnFocusOutside: false,
+            outside: () => { if (blurAction !== "none")
+                finish(blurAction, false); },
+        });
+        return () => {
+            unregister();
+            view.cancelAnimationFrame(frame);
+            if (panel.matches(":popover-open"))
+                panel.hidePopover();
+        };
+    }, [active, floating, blurAction]);
     useBrowserLayoutEffect(() => {
         let frame = 0;
         if (active && !wasActive.current) {
             setDraft(current.current.committed);
+            setValidationError(undefined);
             resolved.current = false;
             composing.current = false;
             const view = editor.current?.ownerDocument.defaultView;
@@ -106,7 +141,20 @@ export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable
         return () => { owner.removeEventListener("reset", reset); clearTimeout(timer); };
     }, [form]);
     const glyph = (kind) => _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: kind === "save" ? _jsx("path", { d: "m5 12 4 4L19 6" }) : kind === "cancel" ? _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) : _jsx(_Fragment, { children: _jsx("path", { d: "m15 5 4 4M4 20l4-1L20 7a2.1 2.1 0 0 0-3-3L5 16l-1 4Z" }) }) });
-    const editorProps = { id: inputId, "aria-describedby": props["aria-describedby"], "aria-invalid": props["aria-invalid"], controlSize, disabled };
+    const errorId = `${inputId}-error`;
+    const editorProps = { id: inputId, inputMode, "aria-describedby": mergeDescriptions(props["aria-describedby"], active && validationError ? errorId : undefined),
+        "aria-invalid": active && validationError ? true : props["aria-invalid"], controlSize, disabled };
+    const editButton = _jsxs(Button, { ref: preview, id: previewId, type: "button", variant: previewVariant, size: controlSize, disabled: disabled, className: "flood-editable__preview", "aria-describedby": props["aria-describedby"], "aria-label": `${editLabel}: ${label}. ${committed || placeholder}`, "aria-hidden": active && floating || undefined, tabIndex: active && floating ? -1 : undefined, onClick: start, children: [_jsx("span", { className: "flood-editable__value", "data-empty": !committed || undefined, children: committed || placeholder }), _jsx(IconSlot, { size: controlSize, children: glyph("edit") })] });
+    const editorContent = active && _jsxs(_Fragment, { children: [_jsx(InputGroup, { ...editorProps, ref: editor, value: draft, placeholder: placeholder, size: fitDraft ? Math.max(4, (draft || placeholder).length + 1) : undefined, onChange: event => { setValidationError(undefined); setDraft(event.currentTarget.value); current.current.draft = event.currentTarget.value; }, onCompositionStart: () => { composing.current = true; }, onCompositionEnd: event => {
+                    composing.current = false;
+                    setDraft(event.currentTarget.value);
+                    current.current.draft = event.currentTarget.value;
+                    const document = event.currentTarget.ownerDocument;
+                    if (blurAction !== "none" && !root.current?.contains(document.activeElement))
+                        queueMicrotask(() => finish(blurAction, false));
+                }, end: showActions ? _jsxs("div", { className: "flood-editable__actions", children: [_jsx(IconButton, { type: "button", label: saveLabel, size: controlSize, variant: "ghost", onPointerDown: event => { if (event.pointerType === "mouse")
+                                event.preventDefault(); }, onMouseDown: event => event.preventDefault(), onClick: () => finish("commit", true), children: glyph("save") }), _jsx(IconButton, { type: "button", label: cancelLabel, size: controlSize, variant: "ghost", onPointerDown: event => { if (event.pointerType === "mouse")
+                                event.preventDefault(); }, onMouseDown: event => event.preventDefault(), onClick: () => finish("cancel", true), children: glyph("cancel") })] }) : undefined }), validationError && _jsx(Text, { as: "p", id: errorId, role: "alert", size: "helper", tone: "error", className: "flood-editable__error", children: validationError })] });
     return _jsxs("div", { ...props, ref: root, id: id, className: cx("flood-editable", className), "data-editing": active || undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, onKeyDown: event => {
             onKeyDown?.(event);
             if (event.defaultPrevented || !current.current.active || event.target !== editor.current || event.nativeEvent.isComposing || composing.current || event.keyCode === 229 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
@@ -120,16 +168,7 @@ export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable
             if (event.defaultPrevented || !current.current.active || event.currentTarget.contains(event.relatedTarget) || blurAction === "none")
                 return;
             finish(blurAction, false);
-        }, children: [_jsx("label", { htmlFor: active || readOnly ? inputId : previewId, className: cx("flood-label", hideLabel && "flood-visually-hidden"), children: label }), _jsx("input", { ref: bridge, type: "hidden", name: name, form: form, value: committed, disabled: disabled }), active ? _jsx(InputGroup, { ...editorProps, ref: editor, value: draft, placeholder: placeholder, onChange: event => { setDraft(event.currentTarget.value); current.current.draft = event.currentTarget.value; }, onCompositionStart: () => { composing.current = true; }, onCompositionEnd: event => {
-                    composing.current = false;
-                    setDraft(event.currentTarget.value);
-                    current.current.draft = event.currentTarget.value;
-                    const document = event.currentTarget.ownerDocument;
-                    if (blurAction !== "none" && !root.current?.contains(document.activeElement))
-                        queueMicrotask(() => finish(blurAction, false));
-                }, end: showActions ? _jsxs("div", { className: "flood-editable__actions", children: [_jsx(IconButton, { type: "button", label: saveLabel, size: controlSize, variant: "ghost", onPointerDown: event => { if (event.pointerType === "mouse")
-                                event.preventDefault(); }, onMouseDown: event => event.preventDefault(), onClick: () => finish("commit", true), children: glyph("save") }), _jsx(IconButton, { type: "button", label: cancelLabel, size: controlSize, variant: "ghost", onPointerDown: event => { if (event.pointerType === "mouse")
-                                event.preventDefault(); }, onMouseDown: event => event.preventDefault(), onClick: () => finish("cancel", true), children: glyph("cancel") })] }) : undefined })
-                : readOnly ? _jsx(Input, { ...editorProps, ref: editor, value: committed, readOnly: true })
-                    : _jsxs(Button, { ref: preview, id: previewId, type: "button", variant: "subtle", size: controlSize, disabled: disabled, className: "flood-editable__preview", "aria-describedby": props["aria-describedby"], "aria-label": `${editLabel}: ${label}. ${committed || placeholder}`, onClick: start, children: [_jsx("span", { className: "flood-editable__value", "data-empty": !committed || undefined, children: committed || placeholder }), _jsx(IconSlot, { size: controlSize, children: glyph("edit") })] })] });
+        }, children: [_jsx("label", { htmlFor: active || readOnly ? inputId : previewId, className: cx("flood-label", hideLabel && "flood-visually-hidden"), children: label }), _jsx("input", { ref: bridge, type: "hidden", name: name, form: form, value: committed, disabled: disabled }), readOnly ? _jsx(Input, { ...editorProps, ref: editor, value: committed, readOnly: true }) : (!active || floating) && editButton, active && (floating
+                ? _jsx("div", { ref: layer, popover: "manual", className: "flood-overlay-panel flood-editable__overlay", "data-fit-draft": fitDraft || undefined, style: { inlineSize: editorOverlayWidth }, children: editorContent })
+                : editorContent)] });
 });

package/dist/feedback-actions.js

@@ -1,7 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { Button, IconButton, IconSlot, Spinner, VisuallyHidden } from "./index.js";
-export const ClipboardAction = /* @__PURE__ */ forwardRef(function ClipboardAction({ value, copyLabel = "Copy", copiedLabel = "Copied", errorLabel = "Failed", resetDelay = 2000, onCopied, onCopyError, className, disabled, size = "md", variant = "subtle", "aria-label": accessibleLabel, ...props }, ref) {
+function ClipboardGlyph({ index, pending }) {
+    if (pending)
+        return _jsx(Spinner, { decorative: true });
+    return _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: index === 1 ? _jsx("path", { d: "m5 12 4 4L19 6" }) : index === 2 ? _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) : _jsxs(_Fragment, { children: [_jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }), _jsx("path", { d: "M15 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3" })] }) });
+}
+export const ClipboardAction = /* @__PURE__ */ forwardRef(function ClipboardAction({ value, iconOnly, copyLabel = "Copy", copiedLabel = "Copied", errorLabel = "Failed", resetDelay = 2000, onCopied, onCopyError, className, disabled, size = "md", variant = "subtle", "aria-label": accessibleLabel, ...props }, ref) {
     if (!Number.isFinite(resetDelay) || resetDelay < 0)
         throw new Error("Flood CopyButton resetDelay must be finite and nonnegative");
     const [phase, setPhase] = useState("idle");
@@ -9,7 +14,9 @@ export const ClipboardAction = /* @__PURE__ */ forwardRef(function ClipboardActi
     const timer = useRef(undefined);
     const alive = useRef(true);
     useEffect(() => { alive.current = true; return () => { alive.current = false; clearTimeout(timer.current); }; }, []);
-    const label = phase === "copied" ? copiedLabel : phase === "error" ? errorLabel : copyLabel;
+    const phaseIndex = phase === "copied" ? 1 : phase === "error" ? 2 : 0;
+    const labels = [copyLabel, copiedLabel, errorLabel];
+    const label = labels[phaseIndex];
     const copy = async (node) => {
         if (pending || node.matches(":disabled"))
             return;
@@ -38,7 +45,15 @@ export const ClipboardAction = /* @__PURE__ */ forwardRef(function ClipboardActi
         }
         onCopied?.();
     };
-    return _jsxs(_Fragment, { children: [_jsx(Button, { ...props, ref: ref, type: "button", size: size, variant: variant, disabled: disabled || pending, "aria-label": accessibleLabel ? (phase === "idle" ? accessibleLabel : `${label}: ${accessibleLabel}`) : label, className: ["flood-copy-button", className].filter(Boolean).join(" "), onClick: event => { void copy(event.currentTarget); }, children: _jsx("span", { className: "flood-copy-button__labels", "aria-hidden": "true", children: [copyLabel, copiedLabel, errorLabel].map((text, index) => _jsxs("span", { "data-visible": index === (phase === "copied" ? 1 : phase === "error" ? 2 : 0) || undefined, children: [_jsx(IconSlot, { size: size, children: pending ? _jsx(Spinner, { decorative: true }) : _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: index === 1 ? _jsx("path", { d: "m5 12 4 4L19 6" }) : index === 2 ? _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) : _jsxs(_Fragment, { children: [_jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }), _jsx("path", { d: "M15 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3" })] }) }) }), _jsx("span", { children: text })] }, index)) }) }), _jsx(VisuallyHidden, { role: "status", children: phase === "idle" ? "" : label })] });
+    const buttonLabel = accessibleLabel ? (phase === "idle" ? accessibleLabel : `${label}: ${accessibleLabel}`) : label;
+    const buttonProps = {
+        ...props, ref, type: "button", size, variant, disabled: disabled || pending,
+        className: ["flood-copy-button", className].filter(Boolean).join(" "),
+        onClick: (event) => { void copy(event.currentTarget); },
+    };
+    return _jsxs(_Fragment, { children: [iconOnly
+                ? _jsx(IconButton, { ...buttonProps, label: buttonLabel, title: props.title ?? buttonLabel, children: _jsx(ClipboardGlyph, { index: phaseIndex, pending: pending }) })
+                : _jsx(Button, { ...buttonProps, "aria-label": buttonLabel, children: _jsx("span", { className: "flood-copy-button__labels", "aria-hidden": "true", children: labels.map((text, index) => _jsxs("span", { "data-visible": index === phaseIndex || undefined, children: [_jsx(IconSlot, { size: size, children: _jsx(ClipboardGlyph, { index: index, pending: pending }) }), _jsx("span", { children: text })] }, index)) }) }), _jsx(VisuallyHidden, { role: "status", children: phase === "idle" ? "" : label })] });
 });
 function TimedToast({ item, closeLabel, onDismiss }) {
     const duration = item.duration ?? (item.action || item.status === "error" ? 0 : 5000);