@skdx/web-components 0.27.0 → 0.28.0

package/dist/editable/Editable.d.ts

@@ -1,238 +1,213 @@
 import { LitElement } from 'lit';
-/** How interacting with `<skdx-editable-preview>` enters edit mode. Keyboard activation (Enter/Space) always works, in every mode. */
-export type SkdxEditableActivationMode = 'click' | 'dblclick' | 'focus';
-/** Which gestures commit the draft. `'none'` leaves committing entirely to `<skdx-editable-submit-trigger>`. */
+/** Separates preview's name placeholder from editor's hint. */
+export interface SkdxEditablePlaceholder {
+    /** The editor's placeholder attribute (a hint, not a name). */
+    edit: string;
+    /** The empty preview's accessible name. */
+    preview: string;
+}
+/** How to enter edit mode via preview interaction; keyboard always works. */
+export type SkdxEditableActivationMode = 'click' | 'dblclick' | 'focus' | 'none';
+/** Detail for the `value-revert` event. */
+export interface SkdxEditableRevertDetail {
+    /** The text restored on screen. */
+    value: string;
+    /** The abandoned draft. */
+    previousValue: string;
+}
+/** Which gestures commit the draft; `'none'` requires explicit trigger. */
 export type SkdxEditableSubmitMode = 'blur' | 'enter' | 'both' | 'none';
 /**
- * @internal Non-bubbling signal the root fires whenever any of its state
- * changes, so the light-DOM parts — which have no context mechanism to read
- * from — can re-render. The parts subscribe in `connectedCallback`.
- */
-export declare const EDITABLE_UPDATE_EVENT = "skdx-editable-internal-update";
-/**
- * @internal The slice of an editor part (`<skdx-editable-input>` /
- * `<skdx-editable-textarea>`) the root drives. Declared structurally rather than
- * imported so the root never depends on its own parts.
+ * @internal Slice of editor parts the root drives. Structural to avoid
+ * root depending on its own parts.
  */
 interface EditableEditor extends HTMLElement {
     readonly updateComplete: Promise<boolean>;
-    /** Focuses the native editor, selecting everything or placing the caret at the end. */
+    /** Focuses the editor, optionally selecting all text. */
     focusEditor(selectAll: boolean): void;
 }
-/** @internal The slice of `<skdx-editable-preview>` the root drives. */
+/** @internal Slice of preview the root drives. */
 interface EditablePreview extends HTMLElement {
     readonly updateComplete: Promise<boolean>;
 }
+declare const SkdxEditable_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
 /**
- * `<skdx-editable>` — the Web Components implementation of the shared Editable
- * contract (see `@skdx/shared`'s `editableContract`). Click-to-edit inline
- * text: owns the draft `value` **and** the `editing` mode, and hands both down
- * to its light-DOM parts, which look the root up via
- * `this.closest('skdx-editable')` (there is no cross-shadow-root context
- * mechanism in Web Components) and re-render on the root's internal update
- * event. Renders a bare `<slot>` carrying `data-state="editing" | "preview"`,
- * `data-empty`, `data-disabled` and `data-readonly` — how preview and editor
- * sit in the layout is entirely your CSS.
- *
- * Both pieces of state are settable: `value`/`default-value` for the text,
- * `editing`/`default-editing` for the mode. `value` tracks the *live* draft, so
- * `value-change` fires per keystroke; `value-commit` fires once, on a
- * successful submit — that is the one to hang a network write off.
- *
- * The state machine, in full:
- * - **Enter edit** — the gesture named by `activation-mode` on the preview, or
- *   Enter/Space while the preview has focus, or `<skdx-editable-edit-trigger>`.
- *   The pre-edit text is snapshotted, then the editor is focused with
- *   everything selected (`select-on-focus`, the default) or the caret at the end.
- * - **Submit** — the gestures named by `submit-mode`, or
- *   `<skdx-editable-submit-trigger>`. Commits, unless `required` and the draft is
- *   blank, in which case the snapshot is restored and nothing is committed.
- * - **Cancel** — Escape, always, whatever `submit-mode` says, or
- *   `<skdx-editable-cancel-trigger>`. Restores the snapshot.
- * - **Either exit returns focus to the preview.** Losing focus to `<body>`
- *   after an inline edit strands keyboard users mid-page, so the root drives
- *   this rather than leaving it to the editor that just hid itself.
- *
- * Deliberately *not* form-associated: the editor is a real `<input>`, but the
- * root submits nothing, matching every other framework's Editable. A consumer
- * inside a `<form>` serialises the committed value themselves.
+ * Click-to-edit inline text. Owns the draft `value` and `editing` mode,
+ * handing both to light-DOM parts. Renders `<slot>` with `data-state="editing"` or
+ * `"preview"`; layout is entirely CSS.
  *
- * @example
- * ```html
- * <skdx-editable default-value="Untitled" placeholder="Name this board">
- *   <skdx-editable-preview></skdx-editable-preview>
- *   <skdx-editable-input aria-label="Board name"></skdx-editable-input>
- * </skdx-editable>
- * ```
+ * `value` tracks the live draft, firing `value-change` per keystroke;
+ * `value-commit` fires once on submit. Escape always cancels and restores the
+ * pre-edit text. Both exit return focus to the preview.
  *
- * @fires value-change - Fires with the new text (string) on every keystroke while editing, and again with the restored text when an edit is cancelled or rejected. Suppressed when the text is unchanged.
- * @fires value-commit - Fires with the final text (string) when an edit is successfully submitted. Never fires for an Escape-cancel, nor for a `required` field submitted blank.
- * @fires edit-change - Fires with the new edit state (boolean) whenever it flips. Suppressed when the state is unchanged.
+ * Form-associated via `ElementInternals`; publishes only committed text,
+ * never the live draft.
+ * @fires value-change - Emits the new text (string) per keystroke while editing,
+ * and again with the restored text on cancel. Suppressed when text is unchanged.
+ * @fires value-commit - Emits final text (string) on successful submit.
+ * Never fires for Escape or blank `required` submit.
+ * @fires value-revert - Emits `{ value, previousValue }` when edit is abandoned
+ * (Escape, cancel trigger, or blank `required` submit).
+ * @fires edit-change - Emits the new edit state (boolean) when it flips.
+ * Suppressed when state is unchanged.
  */
-export declare class SkdxEditable extends LitElement {
+export declare class SkdxEditable extends SkdxEditable_base {
     static styles: import("lit").CSSResult;
     /**
-     * The live draft text. Setting it drives the element; leaving it unset lets
-     * the element own its own text, seeded once from `default-value`. It tracks
-     * the draft *while editing*, not only committed text — listen for
-     * `value-commit` if only the submitted result matters.
-     * @default undefined — seeded from `default-value` (or `''`) on the first update, then owned by the element.
+     * The live draft text, tracks changes while editing.
+     * @default undefined — seeded from `default-value`, then owned by element.
      */
     value?: string;
     /**
-     * Initial text, for uncontrolled usage — read once, before the first render,
-     * and then left alone, exactly as a native control treats its default value.
-     * @default undefined — starts empty, so the preview shows `placeholder` and the root carries `data-empty`.
+     * Initial text for uncontrolled usage; read once before first render.
+     * @default undefined — starts empty.
      */
     defaultValue?: string;
     /**
-     * Whether the editor is showing instead of the preview. Setting it drives the
-     * element; leaving it unset lets the element own the mode, seeded once from
-     * `default-editing`.
-     * @default undefined — seeded from `default-editing` (or `false`) on the first update, then owned by the element.
+     * Form field name; publishes committed value via `ElementInternals`.
+     * @default undefined — nothing is submitted.
+     */
+    name?: string;
+    /**
+     * Form id when outside the form it submits into; only meaningful with `name`.
+     * @default undefined
+     */
+    formId?: string;
+    /**
+     * Whether the editor is showing instead of the preview.
+     * @default undefined — seeded from `default-editing`, then owned by element.
      */
     editing?: boolean;
     /**
-     * Whether to start in edit mode, for uncontrolled usage. Starting `true`
-     * focuses the editor on mount, so use it only when the edit is the reason the
-     * surface appeared (a freshly added row), never on a page the user has just
-     * landed on.
-     * @default false — starts showing the preview.
+     * Start in edit mode for uncontrolled usage; focuses editor on mount.
+     * @default false
      */
     defaultEditing: boolean;
     /**
-     * Text rendered by `<skdx-editable-preview>` when the value is empty, and set
-     * as the editor's `placeholder`. It doubles as the preview's accessible name
-     * while empty, so an editable with neither a placeholder nor a value renders
-     * a button with no name — always supply one, or an `aria-label` on the preview.
-     * @default undefined — an empty value renders an empty preview.
+     * Text for empty preview and editor placeholder; use object form to set separately.
+     * @default undefined
      */
-    placeholder?: string;
+    placeholder?: string | SkdxEditablePlaceholder;
     /**
-     * Blocks editing entirely and takes the preview out of the tab order.
-     * @default false — the preview is a tab stop and every activation gesture works.
+     * Callback resolving where focus goes when edit ends; returns null to fall back to preview.
+     * @default undefined
+     */
+    finalFocusEl?: () => HTMLElement | null;
+    /** @internal The editor's placeholder half, already resolved. */
+    get editPlaceholder(): string | undefined;
+    /** @internal The preview's placeholder half, already resolved. */
+    get previewPlaceholder(): string | undefined;
+    /** @internal Id the editor claims; target for `<skdx-editable-label>`'s `for`. */
+    readonly editorId: string;
+    /** @internal Id claimed by mounted `<skdx-editable-label>` and used by preview. */
+    readonly labelId: string;
+    /** @internal Whether an editable-label is mounted. */
+    labelPresent: boolean;
+    /**
+     * Blocks editing and removes preview from tab order.
+     * @default false
      */
     disabled: boolean;
     /**
-     * Shows the value but blocks entering edit mode. The preview stays focusable,
-     * unlike `disabled`, so the text is still reachable by keyboard.
-     * @default false — editing is allowed.
+     * Shows value but blocks entering edit mode; preview stays focusable.
+     * @default false
      */
     readOnly: boolean;
     /**
-     * Rejects a submit that would leave the value blank: the pre-edit text is
-     * restored, `value-commit` does not fire, and edit mode closes. Whitespace
-     * counts as blank.
-     * @default false — an empty submit is committed like any other.
+     * Rejects blank submits; restores pre-edit text without committing.
+     * @default false
      */
     required: boolean;
     /**
-     * Maximum number of characters the editor accepts, forwarded to the native
-     * `maxlength` attribute.
+     * Marks the current value as invalid, consumer-owned. Published as data-invalid.
+     * @default false
+     */
+    invalid: boolean;
+    /**
+     * Maximum characters the editor accepts, forwarded to the native maxlength attribute.
      * @default undefined — no limit.
      */
     maxLength?: number;
     /**
-     * Which pointer gesture on the preview enters edit mode. `'focus'` makes the
-     * field editable as soon as it is tabbed to — convenient in a form, hostile in
-     * a read-mostly page, where `'dblclick'` avoids editing on a stray click.
-     * Keyboard activation (Enter/Space) works in every mode regardless.
-     * @default 'click' — a single click on the preview starts editing.
+     * Which pointer gesture enters edit mode; keyboard always works.
+     * @default 'click'
      */
     activationMode: SkdxEditableActivationMode;
     /**
-     * Which gestures commit the draft: `'enter'` (Enter key), `'blur'` (focus
-     * leaves the editor), `'both'`, or `'none'` — which leaves committing to
-     * `<skdx-editable-submit-trigger>` alone. Escape always cancels regardless, so
-     * no setting can trap a user in an edit.
-     * @default 'both' — Enter and blur each submit.
+     * Which gestures commit the draft; Escape always cancels.
+     * @default 'both'
      */
     submitMode: SkdxEditableSubmitMode;
     /**
-     * Select the whole value when edit mode opens, so typing replaces it. With
-     * `false` the caret is placed at the end instead, so typing appends.
-     *
-     * Uses the `optOutBoolean` converter rather than Lit's stock `Boolean`,
-     * because the default is `true`: attribute *presence* could never switch it
-     * off, so `select-on-focus="false"` is the documented opt-out.
-     * @default true — entering edit mode selects everything.
+     * Select all text when edit opens so typing replaces it.
+     * @default true
      */
     selectOnFocus: boolean;
     /**
-     * @internal True only for the instant the root is programmatically handing
-     * focus back to the preview. `activation-mode="focus"` reads it so the focus
-     * the root just caused does not re-open the editor it has just closed, which
-     * would loop forever.
+     * Whether the derived editor is a Textarea instead of Input.
+     * @default false
      */
-    returningFocus: boolean;
+    multiline: boolean;
     /**
-     * The value as it stood when this edit opened — what Escape, the cancel
-     * trigger and a rejected `required` submit all restore. Not reactive: nothing
-     * renders from it.
+     * Whether derived anatomy includes SubmitTrigger/CancelTrigger after editor.
+     * @default false
      */
+    showControls: boolean;
+    /** @internal True while returning focus to preview to avoid re-opening editor. */
+    returningFocus: boolean;
+    /** Value when edit opened, restored by Escape or cancelled required submit. */
     private restoreValue;
-    /** Seeded from the initial `editing`, so `default-editing` focuses the editor on mount. */
+    /** Seeded from initial editing state. */
     private wasEditing;
-    /** @internal The live draft, resolved before `willUpdate` has seeded it. */
+    /** @internal The live draft. */
     get text(): string;
-    /** @internal The current mode, resolved before `willUpdate` has seeded it. */
+    /** @internal The current mode. */
     get isEditing(): boolean;
-    /** @internal Whether `submit-mode` includes the Enter key. */
+    /** @internal Whether `submit-mode` includes Enter. */
     get submitsOnEnter(): boolean;
-    /** @internal Whether `submit-mode` includes focus leaving the editor. */
+    /** @internal Whether `submit-mode` includes blur. */
     get submitsOnBlur(): boolean;
     protected willUpdate(): void;
+    /** Whether this is the mount update. */
+    private hasUpdatedOnce;
     protected updated(changed: Map<string, unknown>): void;
+    private _anatomyBuilt;
+    /** Draw canonical anatomy when no consumer-authored parts exist. */
+    private readonly _fillAnatomy;
+    /** Rebuild anatomy when multiline changes. */
+    private readonly _rebuildAnatomy;
     private syncHostAttributes;
-    /** Tells the light-DOM parts to re-render; they own no copy of this state, they only read it. */
+    /** Tell light-DOM parts to re-render. */
     private notify;
-    /**
-     * The part matching `selector` that belongs to *this* root, not to a nested one.
-     *
-     * Not named `part` — that shadows `HTMLElement.prototype.part` (a readonly
-     * `DOMTokenList`), which fails the Lit base-class check.
-     */
+    /** Get part matching selector, scoped to this root only. */
     private ownPart;
-    /** @internal Whichever editor the consumer mounted — there is only ever one. */
+    /** @internal The mounted editor, if any. */
     get editor(): EditableEditor | null;
-    /** @internal The preview, which is where focus goes when an edit ends. */
+    /** @internal The preview where focus goes when edit ends. */
     get preview(): EditablePreview | null;
-    /**
-     * Focus follows the mode: into the editor when an edit opens, back to the
-     * preview when it closes by any route. Both halves have to wait for the part
-     * to re-render first — focusing an editor that is still `display: none`, or a
-     * preview that has not been un-hidden yet, is a silent no-op.
-     */
+    /** Focus follows mode: into editor when opening, back to preview when closing. */
     private moveFocus;
-    /** @internal Writes the draft and fires `value-change`. A no-op write emits nothing. */
+    /** @internal Write the draft and fire `value-change`. No-op writes emit nothing. */
     setValue(next: string): void;
-    /** Flips the mode and fires `edit-change`. A no-op flip emits nothing. */
+    /** Flip the mode and fire `edit-change`. No-op flips emit nothing. */
     private setEditing;
-    /** @internal Enters edit mode, snapshotting the text this edit will restore. Blocked while disabled or read-only. */
+    /** @internal Enter edit mode, blocked while disabled or read-only. */
     activate(): void;
-    /** @internal Discards the draft, restores the pre-edit text and closes. Commits nothing. */
+    /** @internal Discard the draft, restore pre-edit text, and close without committing. */
     cancel(): void;
-    /** @internal Commits the draft and closes, or — for a blank `required` draft — restores and closes without committing. */
+    /** Restore, close, and fire `value-revert`; dispatch order ensures listeners see restored text. */
+    private revert;
+    /** @internal Commit the draft and close, or revert if blank and required. */
     submit(): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-/**
- * @internal Shared plumbing for every `<skdx-editable-*>` part: finds the root
- * through the light DOM and re-renders whenever the root says its state moved.
- * The parts hold no copy of that state — they read it back off the root every
- * render, so a draft cannot diverge from what the root is tracking.
- */
-export declare abstract class SkdxEditablePart extends LitElement {
-    /** The owning `<skdx-editable>`, resolved at connect. */
-    protected root: SkdxEditable | null;
-    private readonly onRootUpdate;
     connectedCallback(): void;
-    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
 }
+export { EDITABLE_UPDATE_EVENT, SkdxEditablePart } from './EditablePart.js';
 declare global {
     interface HTMLElementTagNameMap {
         'skdx-editable': SkdxEditable;
     }
 }
-export {};

package/dist/editable/Editable.js

@@ -1,5 +1,5 @@
-var p=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var i=(d,a,t,s)=>{for(var r=s>1?void 0:s?b(a,t):a,n=d.length-1,l;n>=0;n--)(l=d[n])&&(r=(s?l(a,t,r):l(r))||r);return s&&r&&p(a,t,r),r};import{css as v,html as m,LitElement as h}from"lit";import{property as o}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{focusOnOpen as f}from"../internal/dismiss.js";import{optOutBoolean as E}from"../internal/positioning.js";var u="skdx-editable-internal-update",e=class extends h{constructor(){super(...arguments);this.defaultEditing=!1;this.disabled=!1;this.readOnly=!1;this.required=!1;this.activationMode="click";this.submitMode="both";this.selectOnFocus=!0;this.returningFocus=!1;this.restoreValue="";this.wasEditing=!1}get text(){return this.value??""}get isEditing(){return this.editing??!1}get submitsOnEnter(){return this.submitMode==="enter"||this.submitMode==="both"}get submitsOnBlur(){return this.submitMode==="blur"||this.submitMode==="both"}willUpdate(){this.hasUpdated||(this.value??(this.value=this.defaultValue??""),this.editing??(this.editing=this.defaultEditing),this.restoreValue=this.text)}updated(t){this.syncHostAttributes(),t.size>0&&this.notify(),this.isEditing!==this.wasEditing&&this.moveFocus()}syncHostAttributes(){this.setAttribute("data-state",this.isEditing?"editing":"preview"),this.toggleAttribute("data-empty",this.text===""),this.toggleAttribute("data-disabled",this.disabled),this.toggleAttribute("data-readonly",this.readOnly)}notify(){this.dispatchEvent(new CustomEvent(u))}ownPart(t){let s=this.querySelector(t);return s&&s.closest("skdx-editable")===this?s:null}get editor(){return this.ownPart("skdx-editable-input, skdx-editable-textarea")}get preview(){return this.ownPart("skdx-editable-preview")}async moveFocus(){let t=this.isEditing;this.wasEditing=t;let s=this.editor,r=this.preview;if(await Promise.all([s?.updateComplete,r?.updateComplete]),!this.isConnected||this.isEditing!==t)return;if(t){f(()=>s?.focusEditor(this.selectOnFocus));return}let n=document.activeElement,l=n===s||!!n&&!!s?.contains(n);n&&n!==document.body&&!l||(this.returningFocus=!0,r?.focus(),this.returningFocus=!1)}setValue(t){t!==this.text&&(this.value=t,this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0})))}setEditing(t){t!==this.isEditing&&(this.editing=t,this.dispatchEvent(new CustomEvent("edit-change",{detail:t,bubbles:!0,composed:!0})))}activate(){this.disabled||this.readOnly||this.isEditing||(this.restoreValue=this.text,this.setEditing(!0))}cancel(){this.isEditing&&(this.setValue(this.restoreValue),this.setEditing(!1))}submit(){if(this.isEditing){if(this.required&&this.text.trim()===""){this.setValue(this.restoreValue),this.setEditing(!1);return}this.setEditing(!1),this.dispatchEvent(new CustomEvent("value-commit",{detail:this.text,bubbles:!0,composed:!0}))}}disconnectedCallback(){this.returningFocus=!1,super.disconnectedCallback()}render(){return m`<slot></slot>`}};e.styles=v`
+var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,l,t,s)=>{for(var o=s>1?void 0:s?f(l,t):l,a=n.length-1,d;a>=0;a--)(d=n[a])&&(o=(s?d(l,t,o):d(o))||o);return s&&o&&c(l,t,o),o};import{css as m,html as p,LitElement as v}from"lit";import{property as r}from"lit/decorators.js";import{hasAuthoredParts as b}from"../internal/authored.js";import{customElement as g}from"../internal/define.js";import{focusOnOpen as E}from"../internal/dismiss.js";import{FormAssociated as y}from"../internal/form-associated.js";import{nextId as u}from"../internal/ids.js";import{optOutBoolean as w}from"../internal/positioning.js";import{EDITABLE_ANATOMY_GENERATED as A,fillEditableAnatomy as P}from"./EditableAnatomy.js";import{EDITABLE_UPDATE_EVENT as B}from"./EditablePart.js";import{EDITABLE_UPDATE_EVENT as k,SkdxEditablePart as N}from"./EditablePart.js";function h(n){return n===void 0?{edit:void 0,preview:void 0}:typeof n=="string"?{edit:n,preview:n}:{edit:n.edit,preview:n.preview}}var e=class extends y(v){constructor(){super(...arguments);this.defaultEditing=!1;this.editorId=u("skdx-editable-editor");this.labelId=u("skdx-editable-label");this.labelPresent=!1;this.disabled=!1;this.readOnly=!1;this.required=!1;this.invalid=!1;this.activationMode="click";this.submitMode="both";this.selectOnFocus=!0;this.multiline=!1;this.showControls=!1;this.returningFocus=!1;this.restoreValue="";this.wasEditing=!1;this.hasUpdatedOnce=!1;this._anatomyBuilt=!1;this._fillAnatomy=()=>{if(b(this,A)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,P(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()}}get editPlaceholder(){return h(this.placeholder).edit}get previewPlaceholder(){return h(this.placeholder).preview}get text(){return this.value??""}get isEditing(){return this.editing??!1}get submitsOnEnter(){return this.submitMode==="enter"||this.submitMode==="both"}get submitsOnBlur(){return this.submitMode==="blur"||this.submitMode==="both"}willUpdate(){this.hasUpdated||(this.value??(this.value=this.defaultValue??""),this.editing??(this.editing=this.defaultEditing),this.restoreValue=this.text),this.isEditing&&!this.wasEditing&&(this.restoreValue=this.text)}updated(t){let s=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.syncHostAttributes(),(s||!this.isEditing)&&(t.has("value")||t.has("editing")||t.has("name"))&&this.setFormValue(this.name?this.text:null),t.size>0&&this.notify(),this.isEditing!==this.wasEditing&&this.moveFocus(),t.has("multiline")||t.has("showControls")?this._rebuildAnatomy():this._fillAnatomy()}syncHostAttributes(){this.setAttribute("data-state",this.isEditing?"editing":"preview"),this.toggleAttribute("data-empty",this.text===""),this.toggleAttribute("data-disabled",this.disabled),this.toggleAttribute("data-readonly",this.readOnly),this.toggleAttribute("data-invalid",this.invalid)}notify(){this.dispatchEvent(new CustomEvent(B))}ownPart(t){let s=this.querySelector(t);return s&&s.closest("skdx-editable")===this?s:null}get editor(){return this.ownPart("skdx-editable-input, skdx-editable-textarea")}get preview(){return this.ownPart("skdx-editable-preview")}async moveFocus(){let t=this.isEditing;this.wasEditing=t;let s=this.editor,o=this.preview;if(await Promise.all([s?.updateComplete,o?.updateComplete]),!this.isConnected||this.isEditing!==t)return;if(t){E(()=>s?.focusEditor(this.selectOnFocus));return}let a=document.activeElement,d=a===s||!!a&&!!s?.contains(a);a&&a!==document.body&&!d||(this.returningFocus=!0,(this.finalFocusEl?.()??o)?.focus(),this.returningFocus=!1)}setValue(t){t!==this.text&&(this.value=t,this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0})))}setEditing(t){t!==this.isEditing&&(this.editing=t,this.dispatchEvent(new CustomEvent("edit-change",{detail:t,bubbles:!0,composed:!0})))}activate(){this.disabled||this.readOnly||this.isEditing||this.setEditing(!0)}cancel(){this.isEditing&&this.revert()}revert(){let t=this.text,s=this.restoreValue;this.setValue(s),this.setEditing(!1),this.dispatchEvent(new CustomEvent("value-revert",{detail:{value:s,previousValue:t},bubbles:!0,composed:!0}))}submit(){if(this.isEditing){if(this.required&&this.text.trim()===""){this.revert();return}this.setEditing(!1),this.dispatchEvent(new CustomEvent("value-commit",{detail:this.text,bubbles:!0,composed:!0}))}}disconnectedCallback(){this.returningFocus=!1,super.disconnectedCallback()}connectedCallback(){super.connectedCallback(),queueMicrotask(this._fillAnatomy)}render(){return p`<slot @slotchange=${this._fillAnatomy}></slot>`}};e.styles=m`
     :host {
       display: block;
     }
-  `,i([o({type:String,reflect:!0})],e.prototype,"value",2),i([o({type:String,attribute:"default-value"})],e.prototype,"defaultValue",2),i([o({type:Boolean,reflect:!0})],e.prototype,"editing",2),i([o({type:Boolean,attribute:"default-editing"})],e.prototype,"defaultEditing",2),i([o({type:String})],e.prototype,"placeholder",2),i([o({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([o({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),i([o({type:Boolean,reflect:!0})],e.prototype,"required",2),i([o({type:Number,attribute:"max-length"})],e.prototype,"maxLength",2),i([o({type:String,attribute:"activation-mode"})],e.prototype,"activationMode",2),i([o({type:String,attribute:"submit-mode"})],e.prototype,"submitMode",2),i([o({converter:E,attribute:"select-on-focus"})],e.prototype,"selectOnFocus",2),e=i([g("skdx-editable","editable","root")],e);var c=class extends h{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-editable"),!this.root)throw new Error(`<${this.localName}> must be used inside <skdx-editable>.`);this.root.addEventListener(u,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(u,this.onRootUpdate),super.disconnectedCallback()}};export{u as EDITABLE_UPDATE_EVENT,e as SkdxEditable,c as SkdxEditablePart};
+  `,i([r({type:String,reflect:!0})],e.prototype,"value",2),i([r({type:String,attribute:"default-value"})],e.prototype,"defaultValue",2),i([r({type:String,reflect:!0})],e.prototype,"name",2),i([r({type:String,attribute:"form",reflect:!0})],e.prototype,"formId",2),i([r({type:Boolean,reflect:!0})],e.prototype,"editing",2),i([r({type:Boolean,attribute:"default-editing"})],e.prototype,"defaultEditing",2),i([r({type:String})],e.prototype,"placeholder",2),i([r({attribute:!1})],e.prototype,"finalFocusEl",2),i([r({attribute:!1})],e.prototype,"labelPresent",2),i([r({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([r({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),i([r({type:Boolean,reflect:!0})],e.prototype,"required",2),i([r({type:Boolean,reflect:!0})],e.prototype,"invalid",2),i([r({type:Number,attribute:"max-length"})],e.prototype,"maxLength",2),i([r({type:String,attribute:"activation-mode"})],e.prototype,"activationMode",2),i([r({type:String,attribute:"submit-mode"})],e.prototype,"submitMode",2),i([r({converter:w,attribute:"select-on-focus"})],e.prototype,"selectOnFocus",2),i([r({type:Boolean,reflect:!0})],e.prototype,"multiline",2),i([r({type:Boolean,reflect:!0,attribute:"show-controls"})],e.prototype,"showControls",2),e=i([g("skdx-editable","editable","root")],e);export{k as EDITABLE_UPDATE_EVENT,e as SkdxEditable,N as SkdxEditablePart};

package/dist/editable/EditableAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},p=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of m(t))!u.call(e,i)&&i!==n&&r(e,i,{get:()=>t[i],enumerable:!(a=o(t,i))||a.enumerable});return e};var E=e=>p(r({},"__esModule",{value:!0}),e);var A={};b(A,{EDITABLE_ANATOMY_GENERATED:()=>d,fillEditableAnatomy:()=>x});module.exports=E(A);var v=require("./EditablePreview.cjs"),M=require("./EditableInput.cjs"),T=require("./EditableTextarea.cjs"),h=require("./EditableSubmitTrigger.cjs"),N=require("./EditableCancelTrigger.cjs"),d="data-skdx-editable-generated",f=["aria-label","aria-labelledby"],s=new WeakMap;function g(e){let t=s.get(e);t||(t=new Map,s.set(e,t));for(let n of f){let a=e.getAttribute(n);a!==null&&(t.set(n,a),e.removeAttribute(n))}return t}function x(e){let t=g(e),n=document.createElement("skdx-editable-preview"),a=document.createElement(e.multiline?"skdx-editable-textarea":"skdx-editable-input");for(let[l,c]of t)a.setAttribute(l,c);let i=[n,a];if(e.showControls){let l=document.createElement("skdx-editable-submit-trigger");l.textContent="Save",i.push(l);let c=document.createElement("skdx-editable-cancel-trigger");c.textContent="Cancel",i.push(c)}for(let l of i)l.setAttribute(d,"");e.replaceChildren(...i)}0&&(module.exports={EDITABLE_ANATOMY_GENERATED,fillEditableAnatomy});

package/dist/editable/EditableAnatomy.d.cts

@@ -0,0 +1,15 @@
+import type { SkdxEditable } from './Editable.cjs';
+import './EditablePreview.cjs';
+import './EditableInput.cjs';
+import './EditableTextarea.cjs';
+import './EditableSubmitTrigger.cjs';
+import './EditableCancelTrigger.cjs';
+/** @internal Marks a direct child of `<skdx-editable>` this module generated. */
+export declare const EDITABLE_ANATOMY_GENERATED = "data-skdx-editable-generated";
+/**
+ * Renders canonical anatomy (Preview and Input/Textarea based on `multiline`) as light-DOM children.
+ * Moves aria-label/aria-labelledby from host to editor.
+ * Only called by `<skdx-editable>` itself after establishing no consumer-authored composition.
+ * @internal
+ */
+export declare function fillEditableAnatomy(root: SkdxEditable): void;

package/dist/editable/EditableAnatomy.d.ts

@@ -0,0 +1,15 @@
+import type { SkdxEditable } from './Editable.js';
+import './EditablePreview.js';
+import './EditableInput.js';
+import './EditableTextarea.js';
+import './EditableSubmitTrigger.js';
+import './EditableCancelTrigger.js';
+/** @internal Marks a direct child of `<skdx-editable>` this module generated. */
+export declare const EDITABLE_ANATOMY_GENERATED = "data-skdx-editable-generated";
+/**
+ * Renders canonical anatomy (Preview and Input/Textarea based on `multiline`) as light-DOM children.
+ * Moves aria-label/aria-labelledby from host to editor.
+ * Only called by `<skdx-editable>` itself after establishing no consumer-authored composition.
+ * @internal
+ */
+export declare function fillEditableAnatomy(root: SkdxEditable): void;

package/dist/editable/EditableAnatomy.js

@@ -0,0 +1 @@
+import"./EditablePreview.js";import"./EditableInput.js";import"./EditableTextarea.js";import"./EditableSubmitTrigger.js";import"./EditableCancelTrigger.js";var s="data-skdx-editable-generated",d=["aria-label","aria-labelledby"],r=new WeakMap;function o(e){let t=r.get(e);t||(t=new Map,r.set(e,t));for(let i of d){let a=e.getAttribute(i);a!==null&&(t.set(i,a),e.removeAttribute(i))}return t}function f(e){let t=o(e),i=document.createElement("skdx-editable-preview"),a=document.createElement(e.multiline?"skdx-editable-textarea":"skdx-editable-input");for(let[n,c]of t)a.setAttribute(n,c);let l=[i,a];if(e.showControls){let n=document.createElement("skdx-editable-submit-trigger");n.textContent="Save",l.push(n);let c=document.createElement("skdx-editable-cancel-trigger");c.textContent="Cancel",l.push(c)}for(let n of l)n.setAttribute(s,"");e.replaceChildren(...l)}export{s as EDITABLE_ANATOMY_GENERATED,f as fillEditableAnatomy};

package/dist/editable/EditableCancelTrigger.cjs

@@ -1,4 +1,4 @@
-"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(i,t)=>{for(var e in t)n(i,e,{get:t[e],enumerable:!0})},k=(i,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of b(t))!f.call(i,o)&&o!==e&&n(i,o,{get:()=>t[o],enumerable:!(r=h(t,o))||r.enumerable});return i};var y=i=>k(n({},"__esModule",{value:!0}),i),p=(i,t,e,r)=>{for(var o=r>1?void 0:r?h(t,e):t,d=i.length-1,c;d>=0;d--)(c=i[d])&&(o=(r?c(t,e,o):c(o))||o);return r&&o&&n(t,e,o),o};var w={};g(w,{SkdxEditableCancelTrigger:()=>l});module.exports=y(w);var a=require("lit"),m=require("../internal/aria-label.cjs"),u=require("../internal/define.cjs"),s=require("../internal/styles.cjs"),v=require("./Editable.cjs");var l=class extends v.SkdxEditablePart{constructor(){super(...arguments);this.label=null;this.handleMouseDown=e=>{e.preventDefault()};this.handleClick=()=>{this.root?.cancel()}}connectedCallback(){super.connectedCallback(),this.label=(0,m.takeHostAriaLabel)(this),this.hidden=!(this.root?.isEditing??!1)}updated(){this.hidden=!(this.root?.isEditing??!1)}render(){let e=this.root;return e?a.html`
+"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(i,t)=>{for(var e in t)n(i,e,{get:t[e],enumerable:!0})},k=(i,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of b(t))!f.call(i,o)&&o!==e&&n(i,o,{get:()=>t[o],enumerable:!(r=h(t,o))||r.enumerable});return i};var y=i=>k(n({},"__esModule",{value:!0}),i),p=(i,t,e,r)=>{for(var o=r>1?void 0:r?h(t,e):t,d=i.length-1,c;d>=0;d--)(c=i[d])&&(o=(r?c(t,e,o):c(o))||o);return r&&o&&n(t,e,o),o};var w={};g(w,{SkdxEditableCancelTrigger:()=>l});module.exports=y(w);var a=require("lit"),m=require("../internal/aria-label.cjs"),u=require("../internal/define.cjs"),s=require("../internal/styles.cjs"),v=require("./EditablePart.cjs");var l=class extends v.SkdxEditablePart{constructor(){super(...arguments);this.label=null;this.handleMouseDown=e=>{e.preventDefault()};this.handleClick=()=>{this.root?.cancel()}}connectedCallback(){super.connectedCallback(),this.label=(0,m.takeHostAriaLabel)(this),this.hidden=!(this.root?.isEditing??!1)}updated(){this.hidden=!(this.root?.isEditing??!1)}render(){let e=this.root;return e?a.html`
       <button
         part="cancel-trigger"
         type="button"

package/dist/editable/EditableCancelTrigger.d.cts

@@ -1,14 +1,8 @@
 import { nothing } from 'lit';
-import { SkdxEditablePart } from './Editable.cjs';
+import { SkdxEditablePart } from './EditablePart.cjs';
 /**
- * `<skdx-editable-cancel-trigger>` — a button that discards the current draft of
- * an `<skdx-editable>` and restores the pre-edit text, the pointer equivalent of
- * Escape. Hidden outside edit mode. Must be used inside `<skdx-editable>`.
- *
- * Like `<skdx-editable-submit-trigger>` it calls `preventDefault()` on mouse-down
- * so the editor keeps focus, and here that is load-bearing rather than merely
- * tidy: without it, under the default `submit-mode="both"`, the blur would
- * *submit* the very draft this button exists to throw away.
+ * Cancel button: discards draft, restores pre-edit text. Calls preventDefault() on mousedown—else
+ * blur submits instead. Hidden outside edit mode.
  *
  * @example
  * ```html
@@ -24,7 +18,7 @@ import { SkdxEditablePart } from './Editable.cjs';
 export declare class SkdxEditableCancelTrigger extends SkdxEditablePart {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /** The consumer writes `aria-label` on this tag; the role-bearing element is the `<button>` inside. */
+    /** aria-label moves to button; host has no role. */
     private label;
     connectedCallback(): void;
     protected updated(): void;

package/dist/editable/EditableCancelTrigger.d.ts

@@ -1,14 +1,8 @@
 import { nothing } from 'lit';
-import { SkdxEditablePart } from './Editable.js';
+import { SkdxEditablePart } from './EditablePart.js';
 /**
- * `<skdx-editable-cancel-trigger>` — a button that discards the current draft of
- * an `<skdx-editable>` and restores the pre-edit text, the pointer equivalent of
- * Escape. Hidden outside edit mode. Must be used inside `<skdx-editable>`.
- *
- * Like `<skdx-editable-submit-trigger>` it calls `preventDefault()` on mouse-down
- * so the editor keeps focus, and here that is load-bearing rather than merely
- * tidy: without it, under the default `submit-mode="both"`, the blur would
- * *submit* the very draft this button exists to throw away.
+ * Cancel button: discards draft, restores pre-edit text. Calls preventDefault() on mousedown—else
+ * blur submits instead. Hidden outside edit mode.
  *
  * @example
  * ```html
@@ -24,7 +18,7 @@ import { SkdxEditablePart } from './Editable.js';
 export declare class SkdxEditableCancelTrigger extends SkdxEditablePart {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /** The consumer writes `aria-label` on this tag; the role-bearing element is the `<button>` inside. */
+    /** aria-label moves to button; host has no role. */
     private label;
     connectedCallback(): void;
     protected updated(): void;

package/dist/editable/EditableCancelTrigger.js

@@ -1,4 +1,4 @@
-var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(r,i,t,s)=>{for(var e=s>1?void 0:s?h(i,t):i,l=r.length-1,a;l>=0;l--)(a=r[l])&&(e=(s?a(i,t,e):a(e))||e);return s&&e&&c(i,t,e),e};import{css as p,html as m,nothing as d}from"lit";import{takeHostAriaLabel as u}from"../internal/aria-label.js";import{customElement as v}from"../internal/define.js";import{controlBoxOnHost as b,delegatesFocusShadowRootOptions as f,hiddenHostStyles as g,resetNativeControl as k}from"../internal/styles.js";import{SkdxEditablePart as y}from"./Editable.js";var o=class extends y{constructor(){super(...arguments);this.label=null;this.handleMouseDown=t=>{t.preventDefault()};this.handleClick=()=>{this.root?.cancel()}}connectedCallback(){super.connectedCallback(),this.label=u(this),this.hidden=!(this.root?.isEditing??!1)}updated(){this.hidden=!(this.root?.isEditing??!1)}render(){let t=this.root;return t?m`
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(r,i,t,s)=>{for(var e=s>1?void 0:s?h(i,t):i,l=r.length-1,a;l>=0;l--)(a=r[l])&&(e=(s?a(i,t,e):a(e))||e);return s&&e&&c(i,t,e),e};import{css as p,html as m,nothing as d}from"lit";import{takeHostAriaLabel as u}from"../internal/aria-label.js";import{customElement as v}from"../internal/define.js";import{controlBoxOnHost as b,delegatesFocusShadowRootOptions as f,hiddenHostStyles as g,resetNativeControl as k}from"../internal/styles.js";import{SkdxEditablePart as y}from"./EditablePart.js";var o=class extends y{constructor(){super(...arguments);this.label=null;this.handleMouseDown=t=>{t.preventDefault()};this.handleClick=()=>{this.root?.cancel()}}connectedCallback(){super.connectedCallback(),this.label=u(this),this.hidden=!(this.root?.isEditing??!1)}updated(){this.hidden=!(this.root?.isEditing??!1)}render(){let t=this.root;return t?m`
       <button
         part="cancel-trigger"
         type="button"

package/dist/editable/EditableEditTrigger.cjs

@@ -1,4 +1,4 @@
-"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var g=(i,t)=>{for(var e in t)d(i,e,{get:t[e],enumerable:!0})},k=(i,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of f(t))!y.call(i,o)&&o!==e&&d(i,o,{get:()=>t[o],enumerable:!(r=h(t,o))||r.enumerable});return i};var O=i=>k(d({},"__esModule",{value:!0}),i),p=(i,t,e,r)=>{for(var o=r>1?void 0:r?h(t,e):t,n=i.length-1,c;n>=0;n--)(c=i[n])&&(o=(r?c(t,e,o):c(o))||o);return r&&o&&d(t,e,o),o};var C={};g(C,{SkdxEditableEditTrigger:()=>s});module.exports=O(C);var a=require("lit"),b=require("../internal/aria-label.cjs"),m=require("../internal/define.cjs"),u=require("../internal/part.cjs"),l=require("../internal/styles.cjs"),v=require("./Editable.cjs");var s=class extends v.SkdxEditablePart{constructor(){super(...arguments);this.label=null;this.handleClick=()=>{this.root?.activate()}}connectedCallback(){super.connectedCallback(),this.label=(0,b.takeHostAriaLabel)(this),this.hidden=this.root?.isEditing??!1}updated(){this.hidden=this.root?.isEditing??!1,(0,u.reflectHostState)(this,{"data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let e=this.root;return e?a.html`
+"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var g=(i,t)=>{for(var e in t)d(i,e,{get:t[e],enumerable:!0})},k=(i,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of f(t))!y.call(i,o)&&o!==e&&d(i,o,{get:()=>t[o],enumerable:!(r=h(t,o))||r.enumerable});return i};var O=i=>k(d({},"__esModule",{value:!0}),i),p=(i,t,e,r)=>{for(var o=r>1?void 0:r?h(t,e):t,n=i.length-1,c;n>=0;n--)(c=i[n])&&(o=(r?c(t,e,o):c(o))||o);return r&&o&&d(t,e,o),o};var C={};g(C,{SkdxEditableEditTrigger:()=>s});module.exports=O(C);var a=require("lit"),b=require("../internal/aria-label.cjs"),m=require("../internal/define.cjs"),u=require("../internal/part.cjs"),l=require("../internal/styles.cjs"),v=require("./EditablePart.cjs");var s=class extends v.SkdxEditablePart{constructor(){super(...arguments);this.label=null;this.handleClick=()=>{this.root?.activate()}}connectedCallback(){super.connectedCallback(),this.label=(0,b.takeHostAriaLabel)(this),this.hidden=this.root?.isEditing??!1}updated(){this.hidden=this.root?.isEditing??!1,(0,u.reflectHostState)(this,{"data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let e=this.root;return e?a.html`
       <button
         part="edit-trigger"
         type="button"

package/dist/editable/EditableEditTrigger.d.cts

@@ -1,17 +1,7 @@
 import { nothing } from 'lit';
-import { SkdxEditablePart } from './Editable.cjs';
+import { SkdxEditablePart } from './EditablePart.cjs';
 /**
- * `<skdx-editable-edit-trigger>` — a button that opens an edit from *outside*
- * the preview: a pencil icon in a table row, an "Edit" item in a toolbar.
- * Hidden while editing, and disabled whenever the root is `disabled` or
- * `read-only`, since neither can be edited. Must be used inside
- * `<skdx-editable>`.
- *
- * It is the discoverable counterpart to `activation-mode`: `'dblclick'` avoids
- * accidental edits but is invisible, so pair the two when the surface is
- * read-mostly. Focus still lands on the editor when the edit opens, and returns
- * to the *preview* — not to this trigger — when it closes, because the preview
- * is where the text the user was just working on now lives.
+ * Button to open edit from outside (pencil icon, "Edit" menu, etc.). Hidden while editing, disabled when root is `disabled` or `read-only`. Pair with `activation-mode="dblclick"` for discoverability. Focus moves to editor; returns on close.
  *
  * @example
  * ```html
@@ -27,7 +17,7 @@ import { SkdxEditablePart } from './Editable.cjs';
 export declare class SkdxEditableEditTrigger extends SkdxEditablePart {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /** The consumer writes `aria-label` on this tag; the role-bearing element is the `<button>` inside. */
+    /** `aria-label` passed to shadow button. */
     private label;
     connectedCallback(): void;
     protected updated(): void;

package/dist/editable/EditableEditTrigger.d.ts

@@ -1,17 +1,7 @@
 import { nothing } from 'lit';
-import { SkdxEditablePart } from './Editable.js';
+import { SkdxEditablePart } from './EditablePart.js';
 /**
- * `<skdx-editable-edit-trigger>` — a button that opens an edit from *outside*
- * the preview: a pencil icon in a table row, an "Edit" item in a toolbar.
- * Hidden while editing, and disabled whenever the root is `disabled` or
- * `read-only`, since neither can be edited. Must be used inside
- * `<skdx-editable>`.
- *
- * It is the discoverable counterpart to `activation-mode`: `'dblclick'` avoids
- * accidental edits but is invisible, so pair the two when the surface is
- * read-mostly. Focus still lands on the editor when the edit opens, and returns
- * to the *preview* — not to this trigger — when it closes, because the preview
- * is where the text the user was just working on now lives.
+ * Button to open edit from outside (pencil icon, "Edit" menu, etc.). Hidden while editing, disabled when root is `disabled` or `read-only`. Pair with `activation-mode="dblclick"` for discoverability. Focus moves to editor; returns on close.
  *
  * @example
  * ```html
@@ -27,7 +17,7 @@ import { SkdxEditablePart } from './Editable.js';
 export declare class SkdxEditableEditTrigger extends SkdxEditablePart {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /** The consumer writes `aria-label` on this tag; the role-bearing element is the `<button>` inside. */
+    /** `aria-label` passed to shadow button. */
     private label;
     connectedCallback(): void;
     protected updated(): void;

package/dist/editable/EditableEditTrigger.js

@@ -1,4 +1,4 @@
-var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(r,i,t,a)=>{for(var e=a>1?void 0:a?h(i,t):i,s=r.length-1,d;s>=0;s--)(d=r[s])&&(e=(a?d(i,t,e):d(e))||e);return a&&e&&c(i,t,e),e};import{css as p,html as b,nothing as l}from"lit";import{takeHostAriaLabel as m}from"../internal/aria-label.js";import{customElement as u}from"../internal/define.js";import{reflectHostState as v}from"../internal/part.js";import{controlBoxOnHost as f,delegatesFocusShadowRootOptions as y,hiddenHostStyles as g,resetNativeControl as k}from"../internal/styles.js";import{SkdxEditablePart as O}from"./Editable.js";var o=class extends O{constructor(){super(...arguments);this.label=null;this.handleClick=()=>{this.root?.activate()}}connectedCallback(){super.connectedCallback(),this.label=m(this),this.hidden=this.root?.isEditing??!1}updated(){this.hidden=this.root?.isEditing??!1,v(this,{"data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let t=this.root;return t?b`
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(r,i,t,a)=>{for(var e=a>1?void 0:a?h(i,t):i,s=r.length-1,d;s>=0;s--)(d=r[s])&&(e=(a?d(i,t,e):d(e))||e);return a&&e&&c(i,t,e),e};import{css as p,html as b,nothing as l}from"lit";import{takeHostAriaLabel as m}from"../internal/aria-label.js";import{customElement as u}from"../internal/define.js";import{reflectHostState as v}from"../internal/part.js";import{controlBoxOnHost as f,delegatesFocusShadowRootOptions as y,hiddenHostStyles as g,resetNativeControl as k}from"../internal/styles.js";import{SkdxEditablePart as O}from"./EditablePart.js";var o=class extends O{constructor(){super(...arguments);this.label=null;this.handleClick=()=>{this.root?.activate()}}connectedCallback(){super.connectedCallback(),this.label=m(this),this.hidden=this.root?.isEditing??!1}updated(){this.hidden=this.root?.isEditing??!1,v(this,{"data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let t=this.root;return t?b`
       <button
         part="edit-trigger"
         type="button"