@skdx/web-components 0.26.0

package/dist/dropdown-menu/DropdownMenuTrigger.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-dropdown-menu-trigger>` — opens the closest ancestor
+ * `<skdx-dropdown-menu>` when clicked or via Arrow Up/Down, and doubles as
+ * the default positioning anchor for `<skdx-dropdown-menu-content>`. Renders
+ * `<button type="button">` in shadow DOM with `aria-haspopup="menu"`,
+ * `aria-expanded`, `aria-controls`, and `data-state` (`open`/`closed`).
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxDropdownMenuTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Disables the trigger and prevents opening the menu. */
+    disabled: boolean;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private readonly handleClick;
+    private readonly handleKeyDown;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dropdown-menu-trigger': SkdxDropdownMenuTrigger;
+    }
+}

package/dist/dropdown-menu/DropdownMenuTrigger.js

@@ -0,0 +1,20 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(n,r,t,d)=>{for(var e=d>1?void 0:d?c(r,t):r,i=n.length-1,s;i>=0;i--)(s=n[i])&&(e=(d?s(r,t,e):s(e))||e);return d&&e&&p(r,t,e),e};import{css as h,html as u,LitElement as m,nothing as l}from"lit";import{property as v}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{reflectHostState as f}from"../internal/part.js";import{controlBoxOnHost as y,delegatesFocusShadowRootOptions as w,resetNativeControl as k}from"../internal/styles.js";var o=class extends m{constructor(){super(...arguments);this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!this.root.open);this.handleKeyDown=t=>{["ArrowDown","ArrowUp"].includes(t.key)&&(t.preventDefault(),this.root?.setOpen(!0))}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-dropdown-menu"),this.root?.addEventListener("skdx-dropdown-menu-internal-update",this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-dropdown-menu-internal-update",this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let t=this.shadowRoot?.querySelector("button");this.root&&t&&(this.root.triggerEl=t)}updated(){f(this,{"data-disabled":this.disabled?"":null})}render(){let t=this.root;return t?u`
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded=${t.open}
+        aria-controls=${t.contentId}
+        data-state=${t.open?"open":"closed"}
+        data-disabled=${this.disabled?"":l}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot></slot>
+      </button>
+    `:l}};o.shadowRootOptions=w,o.styles=[k,h`
+      :host {
+        display: inline-block;
+      }
+    `,y],a([v({type:Boolean,reflect:!0})],o.prototype,"disabled",2),o=a([b("skdx-dropdown-menu-trigger","dropdown-menu","trigger")],o);export{o as SkdxDropdownMenuTrigger};

package/dist/dropdown-menu/index.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var l=(r,o)=>{for(var d in o)p(r,d,{get:o[d],enumerable:!0})},G=(r,o,d,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of C(o))!c.call(r,n)&&n!==d&&p(r,n,{get:()=>o[n],enumerable:!(x=g(o,n))||x.enumerable});return r};var R=r=>G(p({},"__esModule",{value:!0}),r);var T={};l(T,{SkdxDropdownMenu:()=>t.SkdxDropdownMenu,SkdxDropdownMenuArrow:()=>I.SkdxDropdownMenuArrow,SkdxDropdownMenuCheckboxItem:()=>w.SkdxDropdownMenuCheckboxItem,SkdxDropdownMenuContent:()=>m.SkdxDropdownMenuContent,SkdxDropdownMenuGroup:()=>a.SkdxDropdownMenuGroup,SkdxDropdownMenuItem:()=>k.SkdxDropdownMenuItem,SkdxDropdownMenuItemIndicator:()=>f.SkdxDropdownMenuItemIndicator,SkdxDropdownMenuLabel:()=>b.SkdxDropdownMenuLabel,SkdxDropdownMenuPortal:()=>S.SkdxDropdownMenuPortal,SkdxDropdownMenuRadioGroup:()=>D.SkdxDropdownMenuRadioGroup,SkdxDropdownMenuRadioItem:()=>M.SkdxDropdownMenuRadioItem,SkdxDropdownMenuSeparator:()=>i.SkdxDropdownMenuSeparator,SkdxDropdownMenuSub:()=>e.SkdxDropdownMenuSub,SkdxDropdownMenuSubContent:()=>e.SkdxDropdownMenuSubContent,SkdxDropdownMenuSubTrigger:()=>e.SkdxDropdownMenuSubTrigger,SkdxDropdownMenuTrigger:()=>u.SkdxDropdownMenuTrigger});module.exports=R(T);var t=require("./DropdownMenu.cjs"),u=require("./DropdownMenuTrigger.cjs"),S=require("./DropdownMenuPortal.cjs"),m=require("./DropdownMenuContent.cjs"),k=require("./DropdownMenuItem.cjs"),w=require("./DropdownMenuCheckboxItem.cjs"),D=require("./DropdownMenuRadioGroup.cjs"),M=require("./DropdownMenuRadioItem.cjs"),f=require("./DropdownMenuItemIndicator.cjs"),a=require("./DropdownMenuGroup.cjs"),b=require("./DropdownMenuLabel.cjs"),i=require("./DropdownMenuSeparator.cjs"),I=require("./DropdownMenuArrow.cjs"),e=require("./DropdownMenuSub.cjs");0&&(module.exports={SkdxDropdownMenu,SkdxDropdownMenuArrow,SkdxDropdownMenuCheckboxItem,SkdxDropdownMenuContent,SkdxDropdownMenuGroup,SkdxDropdownMenuItem,SkdxDropdownMenuItemIndicator,SkdxDropdownMenuLabel,SkdxDropdownMenuPortal,SkdxDropdownMenuRadioGroup,SkdxDropdownMenuRadioItem,SkdxDropdownMenuSeparator,SkdxDropdownMenuSub,SkdxDropdownMenuSubContent,SkdxDropdownMenuSubTrigger,SkdxDropdownMenuTrigger});

package/dist/dropdown-menu/index.d.cts

@@ -0,0 +1,14 @@
+export { SkdxDropdownMenu } from './DropdownMenu.cjs';
+export { SkdxDropdownMenuTrigger } from './DropdownMenuTrigger.cjs';
+export { SkdxDropdownMenuPortal } from './DropdownMenuPortal.cjs';
+export { SkdxDropdownMenuContent } from './DropdownMenuContent.cjs';
+export { SkdxDropdownMenuItem } from './DropdownMenuItem.cjs';
+export { SkdxDropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.cjs';
+export { SkdxDropdownMenuRadioGroup } from './DropdownMenuRadioGroup.cjs';
+export { SkdxDropdownMenuRadioItem } from './DropdownMenuRadioItem.cjs';
+export { SkdxDropdownMenuItemIndicator } from './DropdownMenuItemIndicator.cjs';
+export { SkdxDropdownMenuGroup } from './DropdownMenuGroup.cjs';
+export { SkdxDropdownMenuLabel } from './DropdownMenuLabel.cjs';
+export { SkdxDropdownMenuSeparator } from './DropdownMenuSeparator.cjs';
+export { SkdxDropdownMenuArrow } from './DropdownMenuArrow.cjs';
+export { SkdxDropdownMenuSub, SkdxDropdownMenuSubTrigger, SkdxDropdownMenuSubContent, } from './DropdownMenuSub.cjs';

package/dist/dropdown-menu/index.d.ts

@@ -0,0 +1,14 @@
+export { SkdxDropdownMenu } from './DropdownMenu.js';
+export { SkdxDropdownMenuTrigger } from './DropdownMenuTrigger.js';
+export { SkdxDropdownMenuPortal } from './DropdownMenuPortal.js';
+export { SkdxDropdownMenuContent } from './DropdownMenuContent.js';
+export { SkdxDropdownMenuItem } from './DropdownMenuItem.js';
+export { SkdxDropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.js';
+export { SkdxDropdownMenuRadioGroup } from './DropdownMenuRadioGroup.js';
+export { SkdxDropdownMenuRadioItem } from './DropdownMenuRadioItem.js';
+export { SkdxDropdownMenuItemIndicator } from './DropdownMenuItemIndicator.js';
+export { SkdxDropdownMenuGroup } from './DropdownMenuGroup.js';
+export { SkdxDropdownMenuLabel } from './DropdownMenuLabel.js';
+export { SkdxDropdownMenuSeparator } from './DropdownMenuSeparator.js';
+export { SkdxDropdownMenuArrow } from './DropdownMenuArrow.js';
+export { SkdxDropdownMenuSub, SkdxDropdownMenuSubTrigger, SkdxDropdownMenuSubContent, } from './DropdownMenuSub.js';

package/dist/dropdown-menu/index.js

@@ -0,0 +1 @@
+import{SkdxDropdownMenu as e}from"./DropdownMenu.js";import{SkdxDropdownMenuTrigger as d}from"./DropdownMenuTrigger.js";import{SkdxDropdownMenuPortal as x}from"./DropdownMenuPortal.js";import{SkdxDropdownMenuContent as u}from"./DropdownMenuContent.js";import{SkdxDropdownMenuItem as m}from"./DropdownMenuItem.js";import{SkdxDropdownMenuCheckboxItem as w}from"./DropdownMenuCheckboxItem.js";import{SkdxDropdownMenuRadioGroup as M}from"./DropdownMenuRadioGroup.js";import{SkdxDropdownMenuRadioItem as a}from"./DropdownMenuRadioItem.js";import{SkdxDropdownMenuItemIndicator as i}from"./DropdownMenuItemIndicator.js";import{SkdxDropdownMenuGroup as g}from"./DropdownMenuGroup.js";import{SkdxDropdownMenuLabel as c}from"./DropdownMenuLabel.js";import{SkdxDropdownMenuSeparator as G}from"./DropdownMenuSeparator.js";import{SkdxDropdownMenuArrow as T}from"./DropdownMenuArrow.js";import{SkdxDropdownMenuSub as A,SkdxDropdownMenuSubTrigger as L,SkdxDropdownMenuSubContent as P}from"./DropdownMenuSub.js";export{e as SkdxDropdownMenu,T as SkdxDropdownMenuArrow,w as SkdxDropdownMenuCheckboxItem,u as SkdxDropdownMenuContent,g as SkdxDropdownMenuGroup,m as SkdxDropdownMenuItem,i as SkdxDropdownMenuItemIndicator,c as SkdxDropdownMenuLabel,x as SkdxDropdownMenuPortal,M as SkdxDropdownMenuRadioGroup,a as SkdxDropdownMenuRadioItem,G as SkdxDropdownMenuSeparator,A as SkdxDropdownMenuSub,P as SkdxDropdownMenuSubContent,L as SkdxDropdownMenuSubTrigger,d as SkdxDropdownMenuTrigger};

package/dist/editable/Editable.cjs

@@ -0,0 +1,5 @@
+"use strict";var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var y=(a,i)=>{for(var t in i)c(a,t,{get:i[t],enumerable:!0})},w=(a,i,t,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of f(i))!E.call(a,o)&&o!==t&&c(a,o,{get:()=>i[o],enumerable:!(s=b(i,o))||s.enumerable});return a};var C=a=>w(c({},"__esModule",{value:!0}),a),r=(a,i,t,s)=>{for(var o=s>1?void 0:s?b(i,t):i,l=a.length-1,u;l>=0;l--)(u=a[l])&&(o=(s?u(i,t,o):u(o))||o);return s&&o&&c(i,t,o),o};var M={};y(M,{EDITABLE_UPDATE_EVENT:()=>h,SkdxEditable:()=>e,SkdxEditablePart:()=>p});module.exports=C(M);var d=require("lit"),n=require("lit/decorators.js"),v=require("../internal/define.cjs"),m=require("../internal/dismiss.cjs"),g=require("../internal/positioning.cjs");var h="skdx-editable-internal-update",e=class extends d.LitElement{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(h))}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){(0,m.focusOnOpen)(()=>s?.focusEditor(this.selectOnFocus));return}let l=document.activeElement,u=l===s||!!l&&!!s?.contains(l);l&&l!==document.body&&!u||(this.returningFocus=!0,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.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 d.html`<slot></slot>`}};e.styles=d.css`
+    :host {
+      display: block;
+    }
+  `,r([(0,n.property)({type:String,reflect:!0})],e.prototype,"value",2),r([(0,n.property)({type:String,attribute:"default-value"})],e.prototype,"defaultValue",2),r([(0,n.property)({type:Boolean,reflect:!0})],e.prototype,"editing",2),r([(0,n.property)({type:Boolean,attribute:"default-editing"})],e.prototype,"defaultEditing",2),r([(0,n.property)({type:String})],e.prototype,"placeholder",2),r([(0,n.property)({type:Boolean,reflect:!0})],e.prototype,"disabled",2),r([(0,n.property)({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),r([(0,n.property)({type:Boolean,reflect:!0})],e.prototype,"required",2),r([(0,n.property)({type:Number,attribute:"max-length"})],e.prototype,"maxLength",2),r([(0,n.property)({type:String,attribute:"activation-mode"})],e.prototype,"activationMode",2),r([(0,n.property)({type:String,attribute:"submit-mode"})],e.prototype,"submitMode",2),r([(0,n.property)({converter:g.optOutBoolean,attribute:"select-on-focus"})],e.prototype,"selectOnFocus",2),e=r([(0,v.customElement)("skdx-editable","editable","root")],e);var p=class extends d.LitElement{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(h,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(h,this.onRootUpdate),super.disconnectedCallback()}};0&&(module.exports={EDITABLE_UPDATE_EVENT,SkdxEditable,SkdxEditablePart});

package/dist/editable/Editable.d.cts

@@ -0,0 +1,238 @@
+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>`. */
+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.
+ */
+interface EditableEditor extends HTMLElement {
+    readonly updateComplete: Promise<boolean>;
+    /** Focuses the native editor, selecting everything or placing the caret at the end. */
+    focusEditor(selectAll: boolean): void;
+}
+/** @internal The slice of `<skdx-editable-preview>` the root drives. */
+interface EditablePreview extends HTMLElement {
+    readonly updateComplete: Promise<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.
+ *
+ * @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>
+ * ```
+ *
+ * @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.
+ */
+export declare class SkdxEditable extends LitElement {
+    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.
+     */
+    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`.
+     */
+    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.
+     */
+    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.
+     */
+    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.
+     */
+    placeholder?: string;
+    /**
+     * 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.
+     */
+    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.
+     */
+    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.
+     */
+    required: boolean;
+    /**
+     * Maximum number of 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.
+     */
+    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.
+     */
+    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.
+     */
+    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.
+     */
+    returningFocus: 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.
+     */
+    private restoreValue;
+    /** Seeded from the initial `editing`, so `default-editing` focuses the editor on mount. */
+    private wasEditing;
+    /** @internal The live draft, resolved before `willUpdate` has seeded it. */
+    get text(): string;
+    /** @internal The current mode, resolved before `willUpdate` has seeded it. */
+    get isEditing(): boolean;
+    /** @internal Whether `submit-mode` includes the Enter key. */
+    get submitsOnEnter(): boolean;
+    /** @internal Whether `submit-mode` includes focus leaving the editor. */
+    get submitsOnBlur(): boolean;
+    protected willUpdate(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncHostAttributes;
+    /** Tells the light-DOM parts to re-render; they own no copy of this state, they only read it. */
+    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.
+     */
+    private ownPart;
+    /** @internal Whichever editor the consumer mounted — there is only ever one. */
+    get editor(): EditableEditor | null;
+    /** @internal The preview, which is where focus goes when an 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.
+     */
+    private moveFocus;
+    /** @internal Writes the draft and fires `value-change`. A no-op write emits nothing. */
+    setValue(next: string): void;
+    /** Flips the mode and fires `edit-change`. A no-op flip emits nothing. */
+    private setEditing;
+    /** @internal Enters edit mode, snapshotting the text this edit will restore. Blocked while disabled or read-only. */
+    activate(): void;
+    /** @internal Discards the draft, restores the pre-edit text and closes. Commits nothing. */
+    cancel(): void;
+    /** @internal Commits the draft and closes, or — for a blank `required` draft — restores and closes without committing. */
+    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;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-editable': SkdxEditable;
+    }
+}
+export {};

package/dist/editable/Editable.d.ts

@@ -0,0 +1,238 @@
+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>`. */
+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.
+ */
+interface EditableEditor extends HTMLElement {
+    readonly updateComplete: Promise<boolean>;
+    /** Focuses the native editor, selecting everything or placing the caret at the end. */
+    focusEditor(selectAll: boolean): void;
+}
+/** @internal The slice of `<skdx-editable-preview>` the root drives. */
+interface EditablePreview extends HTMLElement {
+    readonly updateComplete: Promise<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.
+ *
+ * @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>
+ * ```
+ *
+ * @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.
+ */
+export declare class SkdxEditable extends LitElement {
+    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.
+     */
+    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`.
+     */
+    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.
+     */
+    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.
+     */
+    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.
+     */
+    placeholder?: string;
+    /**
+     * 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.
+     */
+    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.
+     */
+    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.
+     */
+    required: boolean;
+    /**
+     * Maximum number of 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.
+     */
+    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.
+     */
+    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.
+     */
+    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.
+     */
+    returningFocus: 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.
+     */
+    private restoreValue;
+    /** Seeded from the initial `editing`, so `default-editing` focuses the editor on mount. */
+    private wasEditing;
+    /** @internal The live draft, resolved before `willUpdate` has seeded it. */
+    get text(): string;
+    /** @internal The current mode, resolved before `willUpdate` has seeded it. */
+    get isEditing(): boolean;
+    /** @internal Whether `submit-mode` includes the Enter key. */
+    get submitsOnEnter(): boolean;
+    /** @internal Whether `submit-mode` includes focus leaving the editor. */
+    get submitsOnBlur(): boolean;
+    protected willUpdate(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncHostAttributes;
+    /** Tells the light-DOM parts to re-render; they own no copy of this state, they only read it. */
+    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.
+     */
+    private ownPart;
+    /** @internal Whichever editor the consumer mounted — there is only ever one. */
+    get editor(): EditableEditor | null;
+    /** @internal The preview, which is where focus goes when an 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.
+     */
+    private moveFocus;
+    /** @internal Writes the draft and fires `value-change`. A no-op write emits nothing. */
+    setValue(next: string): void;
+    /** Flips the mode and fires `edit-change`. A no-op flip emits nothing. */
+    private setEditing;
+    /** @internal Enters edit mode, snapshotting the text this edit will restore. Blocked while disabled or read-only. */
+    activate(): void;
+    /** @internal Discards the draft, restores the pre-edit text and closes. Commits nothing. */
+    cancel(): void;
+    /** @internal Commits the draft and closes, or — for a blank `required` draft — restores and closes without committing. */
+    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;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-editable': SkdxEditable;
+    }
+}
+export {};

package/dist/editable/Editable.js

@@ -0,0 +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`
+    :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};

package/dist/editable/EditableCancelTrigger.cjs

@@ -0,0 +1,17 @@
+"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`
+      <button
+        part="cancel-trigger"
+        type="button"
+        aria-label=${this.label??a.nothing}
+        data-state="editing"
+        ?disabled=${e.disabled}
+        @mousedown=${this.handleMouseDown}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `:a.nothing}};l.shadowRootOptions=s.delegatesFocusShadowRootOptions,l.styles=[s.resetNativeControl,s.hiddenHostStyles,a.css`
+      :host {
+        display: inline-block;
+      }
+    `,s.controlBoxOnHost],l=p([(0,u.customElement)("skdx-editable-cancel-trigger","editable","cancel-trigger")],l);0&&(module.exports={SkdxEditableCancelTrigger});