@skdx/web-components 0.26.0 → 0.28.0

package/dist/editable/EditableTextarea.d.cts

@@ -1,39 +1,20 @@
 import { nothing } from 'lit';
-import { SkdxEditablePart } from './Editable.cjs';
+import { SkdxEditablePart } from './EditablePart.cjs';
 /**
- * `<skdx-editable-textarea>` — the multi-line editor for an `<skdx-editable>`, a
- * drop-in alternative to `<skdx-editable-input>` and never used alongside it.
- * Hidden outside edit mode, and a native `<textarea>` inside it, taking value,
- * `placeholder`, `disabled`, `read-only`, `required` and `max-length` from the
- * root. Must be used inside `<skdx-editable>`.
- *
- * The one behavioural difference is Enter, and it matters: in a multi-line
- * field Enter has to insert a newline, so **Cmd/Ctrl+Enter** submits instead
- * (still gated on `submit-mode` including `'enter'`). A plain Enter is left
- * entirely alone. Escape still cancels, and blur still submits under
- * `submit-mode` `'blur'`/`'both'`.
+ * Multi-line editor for `<skdx-editable>`. Hidden outside edit mode. Renders native `<textarea>`,
+ * taking value, placeholder, disabled, read-only, required, max-length from root. Cmd/Ctrl+Enter
+ * submits (plain Enter inserts newline). With `auto-resize`: grows to fit (capped by `max-rows`,
+ * floored by `min-rows`). Light DOM only — for label naming and `<skdx-field>` discovery.
  *
  * @example
  * ```html
  * <skdx-editable placeholder="Add a note" submit-mode="enter">
  *   <skdx-editable-preview></skdx-editable-preview>
- *   <skdx-editable-textarea aria-label="Note" rows="4"></skdx-editable-textarea>
+ *   <skdx-editable-textarea aria-label="Note" min-rows="4"></skdx-editable-textarea>
  * </skdx-editable>
  * ```
  *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root), for the same reason `<skdx-text-field-input>` does: behind a shadow
- * boundary a wrapping `<label>` cannot name the `<textarea>` (a label names its
- * first labelable *descendant*) and `<skdx-field>`'s `findFieldControl()` cannot
- * see it (`querySelectorAll()` does not pierce a shadow root). Putting
- * `display: contents` on the `<textarea>` instead is not an option: CSS Display
- * 3 computes it to `none` on form controls.
- *
- * @csspart textarea - The native `<textarea>` element. **`::part(textarea)` does not reach
- * it.** This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
- * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so the
- * name matches the shadow-DOM components and the styling-hooks contract. Style it as an
- * ordinary descendant instead: `skdx-editable-textarea > textarea { … }`.
+ * @csspart textarea - Native `<textarea>` element (light DOM, so `::part()` does not reach).
  */
 export declare class SkdxEditableTextarea extends SkdxEditablePart {
     /** Light DOM, for the labelling reasons in the class docblock. */
@@ -44,10 +25,42 @@ export declare class SkdxEditableTextarea extends SkdxEditablePart {
      * forward focus itself.
      */
     focus(options?: FocusOptions): void;
+    /**
+     * Grow the editor to fit its content instead of showing a scrollbar. An
+     * inline note editor that scrolls after three lines is one the user has to
+     * drag open before they can read what they typed — and the drag handle is
+     * what `resize: none` takes away while this is on.
+     * @default false — the editor keeps its `rows` height and scrolls.
+     */
+    autoResize: boolean;
+    /**
+     * Caps auto-resize growth to this many rows, based on computed line-height.
+     * Past the cap the editor scrolls again, which is the point: an inline edit
+     * that grows without limit pushes the rest of the page off screen.
+     * @default undefined — grows without limit.
+     */
+    maxRows?: number;
+    /**
+     * The editor's opening size, and the floor auto-resize will not shrink below.
+     * Rendered as the native `rows` attribute when `auto-resize` is off, and
+     * applied as a minimum on the measured height when it is on. Where `min-rows`
+     * and `max-rows` disagree, `max-rows` wins.
+     * @default 2 — the platform's own `rows` default.
+     */
+    minRows: number;
     /** The consumer writes `aria-label` on this tag; the role-bearing element is the `<textarea>` inside. */
     private label;
     connectedCallback(): void;
     protected updated(): void;
+    /**
+     * The measurement is `@skdx/shared`'s `measureAutoResizeHeight`, copied
+     * rather than imported and character-for-character the Textarea family's
+     * (`packages/web-components/src/textarea/Textarea.ts`): `@skdx/shared` is a
+     * dev-only dependency (contracts and test assertions, never runtime code).
+     * `assertTextareaAutoResize` measures both families against it, which is what
+     * stops this becoming a second implementation.
+     */
+    private resize;
     /** The native control, once rendered. */
     private get control();
     /**

package/dist/editable/EditableTextarea.d.ts

@@ -1,39 +1,20 @@
 import { nothing } from 'lit';
-import { SkdxEditablePart } from './Editable.js';
+import { SkdxEditablePart } from './EditablePart.js';
 /**
- * `<skdx-editable-textarea>` — the multi-line editor for an `<skdx-editable>`, a
- * drop-in alternative to `<skdx-editable-input>` and never used alongside it.
- * Hidden outside edit mode, and a native `<textarea>` inside it, taking value,
- * `placeholder`, `disabled`, `read-only`, `required` and `max-length` from the
- * root. Must be used inside `<skdx-editable>`.
- *
- * The one behavioural difference is Enter, and it matters: in a multi-line
- * field Enter has to insert a newline, so **Cmd/Ctrl+Enter** submits instead
- * (still gated on `submit-mode` including `'enter'`). A plain Enter is left
- * entirely alone. Escape still cancels, and blur still submits under
- * `submit-mode` `'blur'`/`'both'`.
+ * Multi-line editor for `<skdx-editable>`. Hidden outside edit mode. Renders native `<textarea>`,
+ * taking value, placeholder, disabled, read-only, required, max-length from root. Cmd/Ctrl+Enter
+ * submits (plain Enter inserts newline). With `auto-resize`: grows to fit (capped by `max-rows`,
+ * floored by `min-rows`). Light DOM only — for label naming and `<skdx-field>` discovery.
  *
  * @example
  * ```html
  * <skdx-editable placeholder="Add a note" submit-mode="enter">
  *   <skdx-editable-preview></skdx-editable-preview>
- *   <skdx-editable-textarea aria-label="Note" rows="4"></skdx-editable-textarea>
+ *   <skdx-editable-textarea aria-label="Note" min-rows="4"></skdx-editable-textarea>
  * </skdx-editable>
  * ```
  *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root), for the same reason `<skdx-text-field-input>` does: behind a shadow
- * boundary a wrapping `<label>` cannot name the `<textarea>` (a label names its
- * first labelable *descendant*) and `<skdx-field>`'s `findFieldControl()` cannot
- * see it (`querySelectorAll()` does not pierce a shadow root). Putting
- * `display: contents` on the `<textarea>` instead is not an option: CSS Display
- * 3 computes it to `none` on form controls.
- *
- * @csspart textarea - The native `<textarea>` element. **`::part(textarea)` does not reach
- * it.** This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
- * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so the
- * name matches the shadow-DOM components and the styling-hooks contract. Style it as an
- * ordinary descendant instead: `skdx-editable-textarea > textarea { … }`.
+ * @csspart textarea - Native `<textarea>` element (light DOM, so `::part()` does not reach).
  */
 export declare class SkdxEditableTextarea extends SkdxEditablePart {
     /** Light DOM, for the labelling reasons in the class docblock. */
@@ -44,10 +25,42 @@ export declare class SkdxEditableTextarea extends SkdxEditablePart {
      * forward focus itself.
      */
     focus(options?: FocusOptions): void;
+    /**
+     * Grow the editor to fit its content instead of showing a scrollbar. An
+     * inline note editor that scrolls after three lines is one the user has to
+     * drag open before they can read what they typed — and the drag handle is
+     * what `resize: none` takes away while this is on.
+     * @default false — the editor keeps its `rows` height and scrolls.
+     */
+    autoResize: boolean;
+    /**
+     * Caps auto-resize growth to this many rows, based on computed line-height.
+     * Past the cap the editor scrolls again, which is the point: an inline edit
+     * that grows without limit pushes the rest of the page off screen.
+     * @default undefined — grows without limit.
+     */
+    maxRows?: number;
+    /**
+     * The editor's opening size, and the floor auto-resize will not shrink below.
+     * Rendered as the native `rows` attribute when `auto-resize` is off, and
+     * applied as a minimum on the measured height when it is on. Where `min-rows`
+     * and `max-rows` disagree, `max-rows` wins.
+     * @default 2 — the platform's own `rows` default.
+     */
+    minRows: number;
     /** The consumer writes `aria-label` on this tag; the role-bearing element is the `<textarea>` inside. */
     private label;
     connectedCallback(): void;
     protected updated(): void;
+    /**
+     * The measurement is `@skdx/shared`'s `measureAutoResizeHeight`, copied
+     * rather than imported and character-for-character the Textarea family's
+     * (`packages/web-components/src/textarea/Textarea.ts`): `@skdx/shared` is a
+     * dev-only dependency (contracts and test assertions, never runtime code).
+     * `assertTextareaAutoResize` measures both families against it, which is what
+     * stops this becoming a second implementation.
+     */
+    private resize;
     /** The native control, once rendered. */
     private get control();
     /**

package/dist/editable/EditableTextarea.js

@@ -1,17 +1,23 @@
-var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(l,a,e,t)=>{for(var r=t>1?void 0:t?h(a,e):a,n=l.length-1,s;n>=0;n--)(s=l[n])&&(r=(t?s(a,e,r):s(r))||r);return t&&r&&u(a,e,r),r};import{html as c,nothing as o}from"lit";import{takeHostAriaLabel as m}from"../internal/aria-label.js";import{customElement as p}from"../internal/define.js";import{installLightDomStyles as f}from"../internal/styles.js";import{SkdxEditablePart as v}from"./Editable.js";var i=class extends v{constructor(){super(...arguments);this.label=null;this.handleInput=e=>{this.root?.setValue(e.target.value)};this.handleKeydown=e=>{let t=this.root;if(t){if(e.key==="Escape"){e.preventDefault(),t.cancel();return}e.key==="Enter"&&(!e.metaKey&&!e.ctrlKey||t.submitsOnEnter&&(e.preventDefault(),t.submit()))}};this.handleBlur=()=>{this.root?.submitsOnBlur&&this.root.submit()}}createRenderRoot(){return this}focus(e){this.control?.focus(e)}connectedCallback(){super.connectedCallback(),f(),this.label=m(this),this.hidden=!(this.root?.isEditing??!1)}updated(){this.hidden=!(this.root?.isEditing??!1)}get control(){return this.querySelector("textarea")}focusEditor(e){let t=this.control;t&&(t.focus(),e?t.select():t.setSelectionRange(t.value.length,t.value.length))}render(){let e=this.root;return e?c`
+var f=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var d=(u,s,e,t)=>{for(var r=t>1?void 0:t?g(s,e):s,a=u.length-1,n;a>=0;a--)(n=u[a])&&(r=(t?n(s,e,r):n(r))||r);return t&&r&&f(s,e,r),r};import{html as v,nothing as i}from"lit";import{property as c}from"lit/decorators.js";import{takeHostAriaLabel as y}from"../internal/aria-label.js";import{customElement as x}from"../internal/define.js";import{installLightDomStyles as $}from"../internal/styles.js";import{SkdxEditablePart as w}from"./EditablePart.js";var o=class extends w{constructor(){super(...arguments);this.autoResize=!1;this.minRows=2;this.label=null;this.handleInput=e=>{this.root?.setValue(e.target.value),this.resize()};this.handleKeydown=e=>{let t=this.root;if(t){if(e.key==="Escape"){e.preventDefault(),t.cancel();return}e.key==="Enter"&&(!e.metaKey&&!e.ctrlKey||t.submitsOnEnter&&(e.preventDefault(),t.submit()))}};this.handleBlur=()=>{this.root?.submitsOnBlur&&this.root.submit()}}createRenderRoot(){return this}focus(e){this.control?.focus(e)}connectedCallback(){super.connectedCallback(),$(),this.label=y(this),this.hidden=!(this.root?.isEditing??!1)}updated(){this.hidden=!(this.root?.isEditing??!1),this.resize()}resize(){let e=this.control;if(!e||!this.autoResize)return;let t=getComputedStyle(e),r=m=>parseFloat(m)||0,a=r(t.borderTopWidth)+r(t.borderBottomWidth),n=r(t.paddingTop)+r(t.paddingBottom),p=t.boxSizing==="border-box",h=r(t.lineHeight),b=m=>m*h+(p?n+a:0);e.style.height="auto";let l=e.scrollHeight+(p?a:-n);this.minRows!=null&&h>0&&(l=Math.max(l,b(this.minRows))),this.maxRows!=null&&h>0&&(l=Math.min(l,b(this.maxRows))),e.style.height=`${l}px`}get control(){return this.querySelector("textarea")}focusEditor(e){let t=this.control;t&&(t.focus(),e?t.select():t.setSelectionRange(t.value.length,t.value.length))}render(){let e=this.root;return e?v`
       <textarea
         part="textarea"
-        aria-label=${this.label??o}
-        placeholder=${e.placeholder??o}
-        maxlength=${e.maxLength??o}
+        id=${e.editorId}
+        rows=${this.autoResize?i:this.minRows}
+        style=${this.autoResize?"overflow: hidden; resize: none;":i}
+        aria-label=${this.label??i}
+        placeholder=${e.editPlaceholder??i}
+        maxlength=${e.maxLength??i}
         .value=${e.text}
         ?disabled=${e.disabled}
         ?readonly=${e.readOnly}
         ?required=${e.required}
+        aria-required=${e.required?"true":i}
+        aria-invalid=${e.invalid?"true":i}
         data-state="editing"
-        data-empty=${e.text===""?"":o}
+        data-empty=${e.text===""?"":i}
+        data-invalid=${e.invalid?"":i}
         @input=${this.handleInput}
         @keydown=${this.handleKeydown}
         @blur=${this.handleBlur}
       ></textarea>
-    `:o}};i=d([p("skdx-editable-textarea","editable","textarea")],i);export{i as SkdxEditableTextarea};
+    `:i}};d([c({type:Boolean,attribute:"auto-resize"})],o.prototype,"autoResize",2),d([c({type:Number,attribute:"max-rows"})],o.prototype,"maxRows",2),d([c({type:Number,attribute:"min-rows"})],o.prototype,"minRows",2),o=d([x("skdx-editable-textarea","editable","textarea")],o);export{o as SkdxEditableTextarea};

package/dist/editable/index.cjs

@@ -1 +1 @@
-"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var d in e)i(t,d,{get:e[d],enumerable:!0})},T=(t,e,d,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!f.call(t,r)&&r!==d&&i(t,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return t};var n=t=>T(i({},"__esModule",{value:!0}),t);var u={};g(u,{SkdxEditable:()=>x.SkdxEditable,SkdxEditableCancelTrigger:()=>S.SkdxEditableCancelTrigger,SkdxEditableEditTrigger:()=>m.SkdxEditableEditTrigger,SkdxEditableInput:()=>b.SkdxEditableInput,SkdxEditablePreview:()=>a.SkdxEditablePreview,SkdxEditableSubmitTrigger:()=>E.SkdxEditableSubmitTrigger,SkdxEditableTextarea:()=>l.SkdxEditableTextarea});module.exports=n(u);var x=require("./Editable.cjs"),a=require("./EditablePreview.cjs"),b=require("./EditableInput.cjs"),l=require("./EditableTextarea.cjs"),E=require("./EditableSubmitTrigger.cjs"),S=require("./EditableCancelTrigger.cjs"),m=require("./EditableEditTrigger.cjs");0&&(module.exports={SkdxEditable,SkdxEditableCancelTrigger,SkdxEditableEditTrigger,SkdxEditableInput,SkdxEditablePreview,SkdxEditableSubmitTrigger,SkdxEditableTextarea});
+"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var E=(d,e)=>{for(var i in e)a(d,i,{get:e[i],enumerable:!0})},S=(d,e,i,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of x(e))!r.call(d,t)&&t!==i&&a(d,t,{get:()=>e[t],enumerable:!(l=b(e,t))||l.enumerable});return d};var k=d=>S(a({},"__esModule",{value:!0}),d);var m={};E(m,{SkdxEditable:()=>o.SkdxEditable});module.exports=k(m);var o=require("./Editable.cjs");0&&(module.exports={SkdxEditable});

package/dist/editable/index.d.cts

@@ -1,8 +1,2 @@
 export { SkdxEditable } from './Editable.cjs';
-export type { SkdxEditableActivationMode, SkdxEditableSubmitMode } from './Editable.cjs';
-export { SkdxEditablePreview } from './EditablePreview.cjs';
-export { SkdxEditableInput } from './EditableInput.cjs';
-export { SkdxEditableTextarea } from './EditableTextarea.cjs';
-export { SkdxEditableSubmitTrigger } from './EditableSubmitTrigger.cjs';
-export { SkdxEditableCancelTrigger } from './EditableCancelTrigger.cjs';
-export { SkdxEditableEditTrigger } from './EditableEditTrigger.cjs';
+export type { SkdxEditableActivationMode, SkdxEditablePlaceholder, SkdxEditableRevertDetail, SkdxEditableSubmitMode, } from './Editable.cjs';

package/dist/editable/index.d.ts

@@ -1,8 +1,2 @@
 export { SkdxEditable } from './Editable.js';
-export type { SkdxEditableActivationMode, SkdxEditableSubmitMode } from './Editable.js';
-export { SkdxEditablePreview } from './EditablePreview.js';
-export { SkdxEditableInput } from './EditableInput.js';
-export { SkdxEditableTextarea } from './EditableTextarea.js';
-export { SkdxEditableSubmitTrigger } from './EditableSubmitTrigger.js';
-export { SkdxEditableCancelTrigger } from './EditableCancelTrigger.js';
-export { SkdxEditableEditTrigger } from './EditableEditTrigger.js';
+export type { SkdxEditableActivationMode, SkdxEditablePlaceholder, SkdxEditableRevertDetail, SkdxEditableSubmitMode, } from './Editable.js';

package/dist/editable/index.js

@@ -1 +1 @@
-import{SkdxEditable as r}from"./Editable.js";import{SkdxEditablePreview as i}from"./EditablePreview.js";import{SkdxEditableInput as x}from"./EditableInput.js";import{SkdxEditableTextarea as b}from"./EditableTextarea.js";import{SkdxEditableSubmitTrigger as E}from"./EditableSubmitTrigger.js";import{SkdxEditableCancelTrigger as m}from"./EditableCancelTrigger.js";import{SkdxEditableEditTrigger as k}from"./EditableEditTrigger.js";export{r as SkdxEditable,m as SkdxEditableCancelTrigger,k as SkdxEditableEditTrigger,x as SkdxEditableInput,i as SkdxEditablePreview,E as SkdxEditableSubmitTrigger,b as SkdxEditableTextarea};
+import{SkdxEditable as t}from"./Editable.js";export{t as SkdxEditable};

package/dist/editable/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var g=(r,e)=>{for(var d in e)x(r,d,{get:e[d],enumerable:!0})},T=(r,e,d,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!k.call(r,t)&&t!==d&&x(r,t,{get:()=>e[t],enumerable:!(o=S(e,t))||o.enumerable});return r};var n=r=>T(x({},"__esModule",{value:!0}),r);var u={};g(u,{SkdxEditableCancelTrigger:()=>p.SkdxEditableCancelTrigger,SkdxEditableEditTrigger:()=>E.SkdxEditableEditTrigger,SkdxEditableInput:()=>b.SkdxEditableInput,SkdxEditableLabel:()=>i.SkdxEditableLabel,SkdxEditablePreview:()=>a.SkdxEditablePreview,SkdxEditableSubmitTrigger:()=>m.SkdxEditableSubmitTrigger,SkdxEditableTextarea:()=>l.SkdxEditableTextarea});module.exports=n(u);var i=require("./EditableLabel.cjs"),a=require("./EditablePreview.cjs"),b=require("./EditableInput.cjs"),l=require("./EditableTextarea.cjs"),m=require("./EditableSubmitTrigger.cjs"),p=require("./EditableCancelTrigger.cjs"),E=require("./EditableEditTrigger.cjs");0&&(module.exports={SkdxEditableCancelTrigger,SkdxEditableEditTrigger,SkdxEditableInput,SkdxEditableLabel,SkdxEditablePreview,SkdxEditableSubmitTrigger,SkdxEditableTextarea});

package/dist/editable/primitives.d.cts

@@ -0,0 +1,24 @@
+/**
+ * Advanced primitives for `<skdx-editable>` — the parts the recipe composes.
+ *
+ * Reach for these when the derived anatomy is not the structure you need.
+ * The recipe (`<skdx-editable>` from `@skdx/web-components`) is built from exactly these elements.
+ *
+ * @example
+ * ```ts
+ * import * as Editable from '@skdx/web-components/primitives/editable';
+ * ```
+ * ```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>
+ * ```
+ */
+export { SkdxEditableLabel } from './EditableLabel.cjs';
+export { SkdxEditablePreview } from './EditablePreview.cjs';
+export { SkdxEditableInput } from './EditableInput.cjs';
+export { SkdxEditableTextarea } from './EditableTextarea.cjs';
+export { SkdxEditableSubmitTrigger } from './EditableSubmitTrigger.cjs';
+export { SkdxEditableCancelTrigger } from './EditableCancelTrigger.cjs';
+export { SkdxEditableEditTrigger } from './EditableEditTrigger.cjs';

package/dist/editable/primitives.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Advanced primitives for `<skdx-editable>` — the parts the recipe composes.
+ *
+ * Reach for these when the derived anatomy is not the structure you need.
+ * The recipe (`<skdx-editable>` from `@skdx/web-components`) is built from exactly these elements.
+ *
+ * @example
+ * ```ts
+ * import * as Editable from '@skdx/web-components/primitives/editable';
+ * ```
+ * ```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>
+ * ```
+ */
+export { SkdxEditableLabel } from './EditableLabel.js';
+export { SkdxEditablePreview } from './EditablePreview.js';
+export { SkdxEditableInput } from './EditableInput.js';
+export { SkdxEditableTextarea } from './EditableTextarea.js';
+export { SkdxEditableSubmitTrigger } from './EditableSubmitTrigger.js';
+export { SkdxEditableCancelTrigger } from './EditableCancelTrigger.js';
+export { SkdxEditableEditTrigger } from './EditableEditTrigger.js';

package/dist/editable/primitives.js

@@ -0,0 +1 @@
+import{SkdxEditableLabel as t}from"./EditableLabel.js";import{SkdxEditablePreview as x}from"./EditablePreview.js";import{SkdxEditableInput as i}from"./EditableInput.js";import{SkdxEditableTextarea as b}from"./EditableTextarea.js";import{SkdxEditableSubmitTrigger as m}from"./EditableSubmitTrigger.js";import{SkdxEditableCancelTrigger as E}from"./EditableCancelTrigger.js";import{SkdxEditableEditTrigger as f}from"./EditableEditTrigger.js";export{E as SkdxEditableCancelTrigger,f as SkdxEditableEditTrigger,i as SkdxEditableInput,t as SkdxEditableLabel,x as SkdxEditablePreview,m as SkdxEditableSubmitTrigger,b as SkdxEditableTextarea};

package/dist/field/Field.cjs

@@ -1,5 +1,5 @@
-"use strict";var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var y=(s,e)=>{for(var t in e)h(s,t,{get:e[t],enumerable:!0})},M=(s,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of g(e))!C.call(s,i)&&i!==t&&h(s,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return s};var b=s=>M(h({},"__esModule",{value:!0}),s),n=(s,e,t,r)=>{for(var i=r>1?void 0:r?p(e,t):e,c=s.length-1,m;c>=0;c--)(m=s[c])&&(i=(r?m(e,t,i):m(i))||i);return r&&i&&h(e,t,i),i};var E={};y(E,{SkdxField:()=>o});module.exports=b(E);var l=require("lit"),a=require("lit/decorators.js"),v=require("../internal/define.cjs"),d=require("../internal/ids.cjs"),f=require("../utils/live-announcer.cjs"),u=require("./field-core.cjs");var o=class extends l.LitElement{constructor(){super(...arguments);this.mode="blur";this.labelId=(0,d.nextId)("skdx-field-label");this.descriptionId=(0,d.nextId)("skdx-field-description");this.errorId=(0,d.nextId)("skdx-field-error");this.fallbackControlId=(0,d.nextId)("skdx-field-control");this.controller=new u.FieldController({labelId:this.labelId,descriptionId:this.descriptionId,errorId:this.errorId,controlId:this.fallbackControlId,grouped:this.grouped,onSnapshotChange:()=>this.handleSnapshotChange(),announce:f.announce});this.mirrored="";this.mirrorQueued=!1;this.nativeForm=null;this.resetMirror=()=>{this.mirrored&&(this.mirrored="",this.control?.setCustomValidity?.(""))};this.handleSlotChange=()=>{this.controller.sync(),this.refreshParts()}}get grouped(){return!1}get control(){return(0,u.findFieldControl)(this)}get messages(){return this.controller.state.errors}get controlId(){return this.controller.state.controlId}get count(){return this.controller.state.count}setCharacterCount(t){this.controller.setCharacterCount(t)}get state(){return this.controller.state}connectedCallback(){super.connectedCallback(),this.addEventListener("input",this.resetMirror,!0),this.addEventListener("change",this.resetMirror,!0),this.addEventListener("focusout",this.resetMirror,!0),this.nativeForm=this.closest("form"),this.nativeForm&&this.ownerDocument.addEventListener("submit",this.resetMirror,!0),this.applyProps(),this.controller.connect(this)}disconnectedCallback(){this.removeEventListener("input",this.resetMirror,!0),this.removeEventListener("change",this.resetMirror,!0),this.removeEventListener("focusout",this.resetMirror,!0),this.nativeForm&&this.ownerDocument.removeEventListener("submit",this.resetMirror,!0),this.nativeForm=null,this.controller.disconnect(),super.disconnectedCallback()}updated(){this.applyProps(),this.controller.sync()}validate(){return this.resetMirror(),this.controller.validate()}applyProps(){this.controller.setProps({validate:this.validator,mode:this.mode,errors:this.errors,value:this.value,name:this.name,getCharacterCountMessage:this.getCharacterCountMessage,invalidMessage:this.invalidMessage})}handleSnapshotChange(){this.refreshParts(),this.controller.sync(),this.queueMirror()}refreshParts(){let t=this.querySelectorAll("skdx-field-label, skdx-field-description, skdx-field-error, skdx-field-character-count");for(let r of t)r.refresh?.()}queueMirror(){this.mirrorQueued||(this.mirrorQueued=!0,queueMicrotask(()=>{this.mirrorQueued=!1,this.mirrorValidity()}))}mirrorValidity(){let t=this.control;if(typeof t?.setCustomValidity!="function")return;let r=this.messages[0]??"";r!==this.mirrored&&(this.mirrored=r,t.setCustomValidity(r))}render(){return l.html`<slot @slotchange=${this.handleSlotChange}></slot>`}};o.styles=l.css`
+"use strict";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var M=(a,e)=>{for(var t in e)u(a,t,{get:e[t],enumerable:!0})},E=(a,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of b(e))!C.call(a,s)&&s!==t&&u(a,s,{get:()=>e[s],enumerable:!(o=v(e,s))||o.enumerable});return a};var I=a=>E(u({},"__esModule",{value:!0}),a),i=(a,e,t,o)=>{for(var s=o>1?void 0:o?v(e,t):e,m=a.length-1,p;m>=0;m--)(p=a[m])&&(s=(o?p(e,t,s):p(s))||s);return o&&s&&u(e,t,s),s};var L={};M(L,{SkdxField:()=>l,SkdxFieldBase:()=>r});module.exports=I(L);var d=require("lit"),n=require("lit/decorators.js"),f=require("../internal/define.cjs"),h=require("../internal/ids.cjs"),g=require("../utils/live-announcer.cjs"),c=require("./field-core.cjs"),y=require("./FieldAnatomy.cjs");var r=class extends d.LitElement{constructor(){super(...arguments);this.mode="blur";this.required=!1;this.disabled=!1;this.validationDebounceTime=0;this.labelId=(0,h.nextId)("skdx-field-label");this.descriptionId=(0,h.nextId)("skdx-field-description");this.errorId=(0,h.nextId)("skdx-field-error");this.fallbackControlId=(0,h.nextId)("skdx-field-control");this.controller=new c.FieldController({labelId:this.labelId,descriptionId:this.descriptionId,errorId:this.errorId,controlId:this.fallbackControlId,grouped:this.grouped,onSnapshotChange:()=>this.handleSnapshotChange(),announce:g.announce});this.mirrored="";this.mirrorQueued=!1;this.nativeForm=null;this.fillAnatomy=()=>{this.derive(),this.controller.sync()};this.resetMirror=()=>{this.mirrored&&(this.mirrored="",this.control?.setCustomValidity?.(""))};this.handleSlotChange=()=>{this.derive(),this.controller.sync(),this.refreshParts()}}get grouped(){return!1}get control(){return(0,c.findFieldControl)(this)}get messages(){return this.controller.state.errors}get controlId(){return this.controller.state.controlId}get count(){return this.controller.state.count}setCharacterCount(t){this.controller.setCharacterCount(t)}get state(){return this.controller.state}derive(){}connectedCallback(){super.connectedCallback(),this.addEventListener("input",this.resetMirror,!0),this.addEventListener("change",this.resetMirror,!0),this.addEventListener("focusout",this.resetMirror,!0),this.nativeForm=this.closest("form"),this.nativeForm&&this.ownerDocument.addEventListener("submit",this.resetMirror,!0),this.applyProps(),this.controller.connect(this),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("input",this.resetMirror,!0),this.removeEventListener("change",this.resetMirror,!0),this.removeEventListener("focusout",this.resetMirror,!0),this.nativeForm&&this.ownerDocument.removeEventListener("submit",this.resetMirror,!0),this.nativeForm=null,this.controller.disconnect(),super.disconnectedCallback()}updated(t){this.applyProps(),this.controller.sync()}checkValidity(){return this.resetMirror(),this.controller.validate()}reset(){this.resetMirror(),this.controller.reset()}applyProps(){this.controller.setProps({validate:this.validate,mode:this.mode,errors:this.errors,value:this.value,name:this.name,required:this.required,disabled:this.disabled,getCharacterCountMessage:this.getCharacterCountMessage,invalidMessage:this.invalidMessage,validationDebounceTime:this.validationDebounceTime})}handleSnapshotChange(){this.refreshParts(),this.controller.sync(),this.queueMirror()}refreshParts(){let t=this.querySelectorAll("skdx-field-label, skdx-field-required-indicator, skdx-field-description, skdx-field-error, skdx-field-character-count");for(let o of t)o.refresh?.()}queueMirror(){this.mirrorQueued||(this.mirrorQueued=!0,queueMicrotask(()=>{this.mirrorQueued=!1,this.mirrorValidity()}))}mirrorValidity(){let t=this.control;if(typeof t?.setCustomValidity!="function")return;let o=this.messages[0]??"";o!==this.mirrored&&(this.mirrored=o,t.setCustomValidity(o))}render(){return d.html`<slot @slotchange=${this.handleSlotChange}></slot>`}};r.styles=d.css`
     :host {
       display: block;
     }
-  `,n([(0,a.property)({type:String,reflect:!0})],o.prototype,"name",2),n([(0,a.property)({type:String})],o.prototype,"mode",2),n([(0,a.property)({attribute:"errors"})],o.prototype,"errors",2),n([(0,a.property)({attribute:!1})],o.prototype,"value",2),n([(0,a.property)({attribute:!1})],o.prototype,"validator",2),n([(0,a.property)({attribute:!1})],o.prototype,"getCharacterCountMessage",2),n([(0,a.property)({attribute:"invalid-message"})],o.prototype,"invalidMessage",2),o=n([(0,v.customElement)("skdx-field","field","root")],o);0&&(module.exports={SkdxField});
+  `,i([(0,n.property)({type:String,reflect:!0})],r.prototype,"name",2),i([(0,n.property)({type:String})],r.prototype,"mode",2),i([(0,n.property)({attribute:"errors"})],r.prototype,"errors",2),i([(0,n.property)({attribute:!1})],r.prototype,"value",2),i([(0,n.property)({attribute:!1})],r.prototype,"validate",2),i([(0,n.property)({attribute:!1})],r.prototype,"getCharacterCountMessage",2),i([(0,n.property)({type:Boolean,reflect:!0})],r.prototype,"required",2),i([(0,n.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),i([(0,n.property)({attribute:"invalid-message"})],r.prototype,"invalidMessage",2),i([(0,n.property)({type:Number,attribute:"validation-debounce-time"})],r.prototype,"validationDebounceTime",2);var l=class extends r{derive(){(0,y.fillFieldAnatomy)(this)}updated(e){(e.has("label")||e.has("description"))&&this.derive(),super.updated(e)}};i([(0,n.property)({type:String})],l.prototype,"label",2),i([(0,n.property)({type:String})],l.prototype,"description",2),l=i([(0,f.customElement)("skdx-field","field","root")],l);0&&(module.exports={SkdxField,SkdxFieldBase});