@skdx/web-components 0.28.0 → 0.30.0

package/dist/text-field/TextFieldSlot.js

@@ -1,5 +1,9 @@
-var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=(a,s,o,r)=>{for(var t=r>1?void 0:r?p(s,o):s,i=a.length-1,n;i>=0;i--)(n=a[i])&&(t=(r?n(s,o,t):n(t))||t);return r&&t&&m(s,o,t),t};import{css as c,html as d,LitElement as f}from"lit";import{property as y}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";var e=class extends f{constructor(){super(...arguments);this.side="start"}render(){return d`<span part="slot" data-side=${this.side}><slot></slot></span>`}};e.styles=c`
+var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var m=(a,s,l,r)=>{for(var t=r>1?void 0:r?n(s,l):s,o=a.length-1,p;o>=0;o--)(p=a[o])&&(t=(r?p(s,l,t):p(t))||t);return r&&t&&i(s,l,t),t};import{css as c,html as d,LitElement as f}from"lit";import{property as u}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";var e=class extends f{constructor(){super(...arguments);this.side="start"}render(){return d`<span
+      part="slot"
+      data-side=${this.side}
+      ><slot></slot
+    ></span>`}};e.styles=c`
     :host {
       display: contents;
     }
-  `,l([y({type:String,reflect:!0})],e.prototype,"side",2),e=l([g("skdx-text-field-slot","text-field","slot")],e);export{e as SkdxTextFieldSlot};
+  `,m([u({type:String,reflect:!0})],e.prototype,"side",2),e=m([y("skdx-text-field-slot","text-field","slot")],e);export{e as SkdxTextFieldSlot};

package/dist/text-field/family.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var m=(t,e)=>{for(var i in e)x(t,i,{get:e[i],enumerable:!0})},T=(t,e,i,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let d of F(e))!f.call(t,d)&&d!==i&&x(t,d,{get:()=>e[d],enumerable:!(l=r(e,d))||l.enumerable});return t};var p=t=>T(x({},"__esModule",{value:!0}),t);var s={};m(s,{TEXT_FIELD_FAMILY:()=>k});module.exports=p(s);var o=require("../internal/family.cjs"),k=(0,o.defineFamily)("text-field",{selector:"skdx-text-field"});0&&(module.exports={TEXT_FIELD_FAMILY});

package/dist/text-field/family.d.cts

@@ -0,0 +1,3 @@
+import type { SkdxTextField } from './TextField.cjs';
+/** @internal The broadcast every `<skdx-text-field-*>` part re-renders on, and the lookup that finds their root. */
+export declare const TEXT_FIELD_FAMILY: import("../internal/family.cjs").SkdxFamily<SkdxTextField>;

package/dist/text-field/family.d.ts

@@ -0,0 +1,3 @@
+import type { SkdxTextField } from './TextField.js';
+/** @internal The broadcast every `<skdx-text-field-*>` part re-renders on, and the lookup that finds their root. */
+export declare const TEXT_FIELD_FAMILY: import("../internal/family.js").SkdxFamily<SkdxTextField>;

package/dist/text-field/family.js

@@ -0,0 +1 @@
+import{defineFamily as e}from"../internal/family.js";var d=e("text-field",{selector:"skdx-text-field"});export{d as TEXT_FIELD_FAMILY};

package/dist/textarea/Textarea.cjs

@@ -1,32 +1,25 @@
-"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var z=(n,a)=>{for(var e in a)m(n,e,{get:a[e],enumerable:!0})},H=(n,a,e,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of E(a))!L.call(n,o)&&o!==e&&m(n,o,{get:()=>a[o],enumerable:!(l=y(a,o))||l.enumerable});return n};var M=n=>H(m({},"__esModule",{value:!0}),n),i=(n,a,e,l)=>{for(var o=l>1?void 0:l?y(a,e):a,u=n.length-1,h;u>=0;u--)(h=n[u])&&(o=(l?h(a,e,o):h(o))||o);return l&&o&&m(a,e,o),o};var B={};z(B,{SkdxTextarea:()=>t});module.exports=M(B);var s=require("lit"),r=require("lit/decorators.js"),g=require("../internal/aria-label.cjs"),w=require("../internal/define.cjs"),$=require("../internal/form-associated.cjs"),R=require("../internal/part.cjs"),d=require("../internal/styles.cjs");var t=class extends(0,$.FormAssociated)(s.LitElement){constructor(){super(...arguments);this.autoResize=!1;this.minRows=2;this.invalid=!1;this.readOnly=!1;this.disabled=!1;this.value="";this.defaultValue="";this.required=!1;this.inputMode="";this.hostLabel=null;this.seeded=!1;this.resize=()=>{let e=this.textareaEl;if(!e||!this.autoResize)return;let l=getComputedStyle(e),o=b=>parseFloat(b)||0,u=o(l.borderTopWidth)+o(l.borderBottomWidth),h=o(l.paddingTop)+o(l.paddingBottom),v=l.boxSizing==="border-box",c=o(l.lineHeight),f=b=>b*c+(v?h+u:0);e.style.height="auto";let p=e.scrollHeight+(v?u:-h);this.minRows!=null&&c>0&&(p=Math.max(p,f(this.minRows))),this.maxRows!=null&&c>0&&(p=Math.min(p,f(this.maxRows))),e.style.height=`${p}px`};this.handleInput=e=>{let l=e.target.value;this.value!==l&&(this.value=l,this.resize(),this.dispatchEvent(new CustomEvent("value-change",{detail:l,bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),this.hostLabel=(0,g.takeHostAriaLabel)(this)??this.hostLabel}get textareaEl(){return this.shadowRoot?.querySelector("textarea")}updated(e){(e.has("value")||e.has("autoResize")||e.has("maxRows")||e.has("minRows"))&&this.resize(),this.syncFormState(),(0,R.reflectHostState)(this,{"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}syncFormState(){this.setFormValue(this.value);let e=this.textareaEl;e&&this.mirrorValidity(e)}formResetCallback(){this.value=this.defaultValue}render(){return s.html`
+"use strict";var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var E=(n,s)=>{for(var e in s)u(n,e,{get:s[e],enumerable:!0})},I=(n,s,e,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of $(s))!A.call(n,o)&&o!==e&&u(n,o,{get:()=>s[o],enumerable:!(r=p(s,o))||r.enumerable});return n};var z=n=>I(u({},"__esModule",{value:!0}),n),i=(n,s,e,r)=>{for(var o=r>1?void 0:r?p(s,e):s,h=n.length-1,d;h>=0;h--)(d=n[h])&&(o=(r?d(s,e,o):d(o))||o);return r&&o&&u(s,e,o),o};var M={};E(M,{SkdxTextarea:()=>t});module.exports=z(M);var l=require("lit"),a=require("lit/decorators.js"),m=require("../internal/aria-label.cjs"),c=require("../internal/associated-label.cjs"),b=require("../internal/define.cjs"),y=require("../internal/events.cjs"),v=require("../internal/field-core.cjs"),f=require("../internal/form-associated.cjs"),g=require("../internal/ids.cjs"),R=require("../internal/light-dom-styles.cjs"),w=require("../internal/measure-auto-resize.cjs"),L=require("../internal/part.cjs");var t=class extends(0,f.FormAssociated)(l.LitElement){constructor(){super(...arguments);this.autoResize=!1;this.minRows=2;this.invalid=!1;this.readOnly=!1;this.disabled=!1;this.value="";this.defaultValue="";this.required=!1;this.inputMode="";this.hostLabel=null;this.seeded=!1;this.ownLabelId=null;this.applyAutoResize=()=>{let e=this.textareaEl;!e||!this.autoResize||(e.style.height=`${(0,w.measureAutoResizeHeight)(e,this.maxRows,this.minRows)}px`)};this.handleInput=e=>{let r=e.target.value;this.value!==r&&(this.value=r,this.applyAutoResize(),(0,y.emit)(this,"value-change",r))}}createRenderRoot(){return this}focus(e){this.textareaEl?.focus(e)}connectedCallback(){super.connectedCallback(),(0,R.installLightDomStyles)(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),this.hostLabel=(0,m.takeHostAriaLabel)(this)??this.hostLabel}get textareaEl(){return this.querySelector("textarea")}syncLabelling(){let e=this.textareaEl;if(!e||this.closest(`[${v.FIELD_ROOT_ATTRIBUTE}]`))return;let r=(0,c.findAssociatedLabel)(this);if(!r){this.ownLabelId!==null&&e.removeAttribute("aria-labelledby"),this.ownLabelId=null;return}this.ownLabelId=(0,g.ensureId)(r,"skdx-textarea","label"),e.setAttribute("aria-labelledby",this.ownLabelId)}updated(e){(e.has("value")||e.has("autoResize")||e.has("maxRows")||e.has("minRows"))&&this.applyAutoResize(),this.syncFormState(),this.syncLabelling(),(0,L.reflectHostState)(this,{"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null,"data-disabled":this.disabled?"":null})}syncFormState(){this.setFormValue(this.value);let e=this.textareaEl;e&&this.mirrorValidity(e)}formResetCallback(){this.value=this.defaultValue}coreAttrs(){return{placeholder:this.placeholder??l.nothing,ariaLabel:this.hostLabel??l.nothing,maxlength:this.maxLength??l.nothing,minlength:this.minLength??l.nothing,rows:this.rows??(this.autoResize?l.nothing:this.minRows),wrap:this.wrap??l.nothing,autocomplete:this.autocomplete??l.nothing,spellcheck:this.spellCheck??l.nothing,inputmode:this.inputMode||l.nothing}}stateAttrs(){return{ariaInvalid:this.invalid?"true":l.nothing,ariaReadonly:this.readOnly?"true":l.nothing,dataInvalid:this.invalid?"":l.nothing,dataReadonly:this.readOnly?"":l.nothing,dataDisabled:this.disabled?"":l.nothing,style:this.autoResize?"overflow: hidden; resize: none":l.nothing}}render(){let e=this.coreAttrs(),r=this.stateAttrs();return l.html`
       <textarea
         part="textarea"
-        placeholder=${this.placeholder??s.nothing}
-        aria-label=${this.hostLabel??s.nothing}
-        maxlength=${this.maxLength??s.nothing}
-        minlength=${this.minLength??s.nothing}
-        rows=${this.rows??(this.autoResize?s.nothing:this.minRows)}
-        wrap=${this.wrap??s.nothing}
-        autocomplete=${this.autocomplete??s.nothing}
-        spellcheck=${this.spellCheck??s.nothing}
-        inputmode=${this.inputMode||s.nothing}
+        placeholder=${e.placeholder}
+        aria-label=${e.ariaLabel}
+        maxlength=${e.maxlength}
+        minlength=${e.minlength}
+        rows=${e.rows}
+        wrap=${e.wrap}
+        autocomplete=${e.autocomplete}
+        spellcheck=${e.spellcheck}
+        inputmode=${e.inputmode}
         ?disabled=${this.disabled}
         ?readonly=${this.readOnly}
         ?required=${this.required}
-        aria-invalid=${this.invalid?"true":s.nothing}
-        aria-readonly=${this.readOnly?"true":s.nothing}
-        data-invalid=${this.invalid?"":s.nothing}
-        data-readonly=${this.readOnly?"":s.nothing}
-        style=${this.autoResize?"overflow: hidden; resize: none":s.nothing}
+        aria-invalid=${r.ariaInvalid}
+        aria-readonly=${r.ariaReadonly}
+        data-invalid=${r.dataInvalid}
+        data-readonly=${r.dataReadonly}
+        data-disabled=${r.dataDisabled}
+        style=${r.style}
         .value=${this.value}
         @input=${this.handleInput}
       ></textarea>
-    `}};t.shadowRootOptions=d.delegatesFocusShadowRootOptions,t.styles=[d.resetNativeControl,d.hiddenHostStyles,s.css`
-      :host {
-        display: inline-block;
-      }
-      /* flex: 1 1 auto on the control — see the JSDoc above. */
-      textarea {
-        flex: 1 1 auto;
-      }
-    `],i([(0,r.property)({type:Boolean,reflect:!0,attribute:"auto-resize"})],t.prototype,"autoResize",2),i([(0,r.property)({type:Number,attribute:"max-rows"})],t.prototype,"maxRows",2),i([(0,r.property)({type:Number,attribute:"min-rows"})],t.prototype,"minRows",2),i([(0,r.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([(0,r.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([(0,r.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([(0,r.property)({type:String})],t.prototype,"placeholder",2),i([(0,r.property)({type:String})],t.prototype,"value",2),i([(0,r.property)({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([(0,r.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),i([(0,r.property)({type:String,reflect:!0})],t.prototype,"name",2),i([(0,r.property)({type:Number,reflect:!0,attribute:"maxlength"})],t.prototype,"maxLength",2),i([(0,r.property)({type:Number,reflect:!0,attribute:"minlength"})],t.prototype,"minLength",2),i([(0,r.property)({type:Number,reflect:!0})],t.prototype,"rows",2),i([(0,r.property)({type:String,reflect:!0})],t.prototype,"wrap",2),i([(0,r.property)({type:String,reflect:!0})],t.prototype,"autocomplete",2),i([(0,r.property)({type:String,attribute:"spellcheck"})],t.prototype,"spellCheck",2),i([(0,r.property)({type:String,attribute:"inputmode"})],t.prototype,"inputMode",2),i([(0,r.state)()],t.prototype,"hostLabel",2),t=i([(0,w.customElement)("skdx-textarea","textarea","root")],t);0&&(module.exports={SkdxTextarea});
+    `}};i([(0,a.property)({type:Boolean,reflect:!0,attribute:"auto-resize"})],t.prototype,"autoResize",2),i([(0,a.property)({type:Number,attribute:"max-rows"})],t.prototype,"maxRows",2),i([(0,a.property)({type:Number,attribute:"min-rows"})],t.prototype,"minRows",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([(0,a.property)({type:String})],t.prototype,"placeholder",2),i([(0,a.property)({type:String})],t.prototype,"value",2),i([(0,a.property)({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"name",2),i([(0,a.property)({type:Number,reflect:!0,attribute:"maxlength"})],t.prototype,"maxLength",2),i([(0,a.property)({type:Number,reflect:!0,attribute:"minlength"})],t.prototype,"minLength",2),i([(0,a.property)({type:Number,reflect:!0})],t.prototype,"rows",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"wrap",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"autocomplete",2),i([(0,a.property)({type:String,attribute:"spellcheck"})],t.prototype,"spellCheck",2),i([(0,a.property)({type:String,attribute:"inputmode"})],t.prototype,"inputMode",2),i([(0,a.property)({type:String,reflect:!0,attribute:"data-resize"})],t.prototype,"resize",2),i([(0,a.state)()],t.prototype,"hostLabel",2),t=i([(0,b.customElement)("skdx-textarea","textarea","root")],t);0&&(module.exports={SkdxTextarea});

package/dist/textarea/Textarea.d.cts

@@ -1,13 +1,13 @@
-import { LitElement } from 'lit';
-declare const SkdxTextarea_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+import { LitElement, type TemplateResult } from 'lit';
+declare const SkdxTextarea_base: typeof LitElement & (new (...args: any[]) => import("../index.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * A textarea that renders a native `<textarea>` with shadow-DOM behavior and
- * accessibility. With `autoResize`, grows to fit content (capped to `maxRows`).
- * Form-associated via `ElementInternals`. Host `aria-label` moves to the inner
- * textarea; use it instead of a placeholder for accessible names.
- * @csspart textarea - The native `<textarea>` element.
+ * A textarea that renders a native `<textarea>` into light DOM, so `<skdx-field>`
+ * and `<label for>` reach it. With `autoResize`, grows to fit content (capped to
+ * `maxRows`). Form-associated via `ElementInternals`. Host `aria-label` moves to
+ * the inner textarea; use it instead of a placeholder for accessible names.
+ * @csspart textarea - The native `<textarea>`. `::part()` does not reach light DOM; style as `skdx-textarea > textarea { … }`.
  * @fires value-change - Fired with the new value whenever it changes.
  * @fires input - Re-dispatched from the inner textarea element.
  * @example
@@ -16,8 +16,9 @@ declare const SkdxTextarea_base: typeof LitElement & (new (...args: any[]) => im
  * ```
  */
 export declare class SkdxTextarea extends SkdxTextarea_base {
-    static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult[];
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Moves focus to the inner native textarea. */
+    focus(options?: FocusOptions): void;
     /**
      * Grow the textarea to fit its content instead of showing a scrollbar.
      * @default false
@@ -103,25 +104,27 @@ export declare class SkdxTextarea extends SkdxTextarea_base {
      * @default '' — no inputmode; the platform's own default keyboard.
      */
     inputMode: string;
+    /**
+     * Resize affordance the skin allows, reflected as `data-resize`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    resize?: 'none' | 'block' | 'auto' | (string & {}) | undefined;
     /** Accessible name for the inner `<textarea>`, moved off this host — see `takeHostAriaLabel`. */
     private hostLabel;
     private seeded;
     connectedCallback(): void;
     private get textareaEl();
-    /**
-     * The measurement is `@skdx/shared`'s `measureAutoResizeHeight`, copied
-     * rather than imported: `@skdx/shared` is a dev-only dependency (contracts
-     * and test assertions, never runtime code — the same note sits at the top of
-     * the framework packages' `utils/dateSegments.ts`).
-     * `assertTextareaAutoResize` is what keeps the five copies in step.
-     */
-    private readonly resize;
+    private ownLabelId;
+    private syncLabelling;
+    private readonly applyAutoResize;
     protected updated(changed: Map<string, unknown>): void;
     private syncFormState;
     /** Restores the declared `defaultValue`, like a native textarea's own. */
     formResetCallback(): void;
     private readonly handleInput;
-    render(): import("lit").TemplateResult<1>;
+    private coreAttrs;
+    private stateAttrs;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/textarea/Textarea.d.ts

@@ -1,13 +1,13 @@
-import { LitElement } from 'lit';
-declare const SkdxTextarea_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+import { LitElement, type TemplateResult } from 'lit';
+declare const SkdxTextarea_base: typeof LitElement & (new (...args: any[]) => import("../index.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * A textarea that renders a native `<textarea>` with shadow-DOM behavior and
- * accessibility. With `autoResize`, grows to fit content (capped to `maxRows`).
- * Form-associated via `ElementInternals`. Host `aria-label` moves to the inner
- * textarea; use it instead of a placeholder for accessible names.
- * @csspart textarea - The native `<textarea>` element.
+ * A textarea that renders a native `<textarea>` into light DOM, so `<skdx-field>`
+ * and `<label for>` reach it. With `autoResize`, grows to fit content (capped to
+ * `maxRows`). Form-associated via `ElementInternals`. Host `aria-label` moves to
+ * the inner textarea; use it instead of a placeholder for accessible names.
+ * @csspart textarea - The native `<textarea>`. `::part()` does not reach light DOM; style as `skdx-textarea > textarea { … }`.
  * @fires value-change - Fired with the new value whenever it changes.
  * @fires input - Re-dispatched from the inner textarea element.
  * @example
@@ -16,8 +16,9 @@ declare const SkdxTextarea_base: typeof LitElement & (new (...args: any[]) => im
  * ```
  */
 export declare class SkdxTextarea extends SkdxTextarea_base {
-    static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult[];
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Moves focus to the inner native textarea. */
+    focus(options?: FocusOptions): void;
     /**
      * Grow the textarea to fit its content instead of showing a scrollbar.
      * @default false
@@ -103,25 +104,27 @@ export declare class SkdxTextarea extends SkdxTextarea_base {
      * @default '' — no inputmode; the platform's own default keyboard.
      */
     inputMode: string;
+    /**
+     * Resize affordance the skin allows, reflected as `data-resize`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    resize?: 'none' | 'block' | 'auto' | (string & {}) | undefined;
     /** Accessible name for the inner `<textarea>`, moved off this host — see `takeHostAriaLabel`. */
     private hostLabel;
     private seeded;
     connectedCallback(): void;
     private get textareaEl();
-    /**
-     * The measurement is `@skdx/shared`'s `measureAutoResizeHeight`, copied
-     * rather than imported: `@skdx/shared` is a dev-only dependency (contracts
-     * and test assertions, never runtime code — the same note sits at the top of
-     * the framework packages' `utils/dateSegments.ts`).
-     * `assertTextareaAutoResize` is what keeps the five copies in step.
-     */
-    private readonly resize;
+    private ownLabelId;
+    private syncLabelling;
+    private readonly applyAutoResize;
     protected updated(changed: Map<string, unknown>): void;
     private syncFormState;
     /** Restores the declared `defaultValue`, like a native textarea's own. */
     formResetCallback(): void;
     private readonly handleInput;
-    render(): import("lit").TemplateResult<1>;
+    private coreAttrs;
+    private stateAttrs;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/textarea/Textarea.js

@@ -1,32 +1,25 @@
-var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var e=(d,u,i,s)=>{for(var l=s>1?void 0:s?f(u,i):u,a=d.length-1,n;a>=0;a--)(n=d[a])&&(l=(s?n(u,i,l):n(l))||l);return s&&l&&v(u,i,l),l};import{css as y,html as g,LitElement as w,nothing as o}from"lit";import{property as r,state as $}from"lit/decorators.js";import{takeHostAriaLabel as R}from"../internal/aria-label.js";import{customElement as E}from"../internal/define.js";import{FormAssociated as L}from"../internal/form-associated.js";import{reflectHostState as z}from"../internal/part.js";import{delegatesFocusShadowRootOptions as H,hiddenHostStyles as M,resetNativeControl as B}from"../internal/styles.js";var t=class extends L(w){constructor(){super(...arguments);this.autoResize=!1;this.minRows=2;this.invalid=!1;this.readOnly=!1;this.disabled=!1;this.value="";this.defaultValue="";this.required=!1;this.inputMode="";this.hostLabel=null;this.seeded=!1;this.resize=()=>{let i=this.textareaEl;if(!i||!this.autoResize)return;let s=getComputedStyle(i),l=m=>parseFloat(m)||0,a=l(s.borderTopWidth)+l(s.borderBottomWidth),n=l(s.paddingTop)+l(s.paddingBottom),c=s.boxSizing==="border-box",p=l(s.lineHeight),b=m=>m*p+(c?n+a:0);i.style.height="auto";let h=i.scrollHeight+(c?a:-n);this.minRows!=null&&p>0&&(h=Math.max(h,b(this.minRows))),this.maxRows!=null&&p>0&&(h=Math.min(h,b(this.maxRows))),i.style.height=`${h}px`};this.handleInput=i=>{let s=i.target.value;this.value!==s&&(this.value=s,this.resize(),this.dispatchEvent(new CustomEvent("value-change",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),this.hostLabel=R(this)??this.hostLabel}get textareaEl(){return this.shadowRoot?.querySelector("textarea")}updated(i){(i.has("value")||i.has("autoResize")||i.has("maxRows")||i.has("minRows"))&&this.resize(),this.syncFormState(),z(this,{"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}syncFormState(){this.setFormValue(this.value);let i=this.textareaEl;i&&this.mirrorValidity(i)}formResetCallback(){this.value=this.defaultValue}render(){return g`
+var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(n,o,e,r)=>{for(var s=r>1?void 0:r?p(o,e):o,u=n.length-1,h;u>=0;u--)(h=n[u])&&(s=(r?h(o,e,s):h(s))||s);return r&&s&&d(o,e,s),s};import{html as m,LitElement as c,nothing as l}from"lit";import{property as a,state as b}from"lit/decorators.js";import{takeHostAriaLabel as y}from"../internal/aria-label.js";import{findAssociatedLabel as v}from"../internal/associated-label.js";import{customElement as f}from"../internal/define.js";import{emit as g}from"../internal/events.js";import{FIELD_ROOT_ATTRIBUTE as R}from"../internal/field-core.js";import{FormAssociated as w}from"../internal/form-associated.js";import{ensureId as L}from"../internal/ids.js";import{installLightDomStyles as $}from"../internal/light-dom-styles.js";import{measureAutoResizeHeight as A}from"../internal/measure-auto-resize.js";import{reflectHostState as E}from"../internal/part.js";var t=class extends w(c){constructor(){super(...arguments);this.autoResize=!1;this.minRows=2;this.invalid=!1;this.readOnly=!1;this.disabled=!1;this.value="";this.defaultValue="";this.required=!1;this.inputMode="";this.hostLabel=null;this.seeded=!1;this.ownLabelId=null;this.applyAutoResize=()=>{let e=this.textareaEl;!e||!this.autoResize||(e.style.height=`${A(e,this.maxRows,this.minRows)}px`)};this.handleInput=e=>{let r=e.target.value;this.value!==r&&(this.value=r,this.applyAutoResize(),g(this,"value-change",r))}}createRenderRoot(){return this}focus(e){this.textareaEl?.focus(e)}connectedCallback(){super.connectedCallback(),$(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),this.hostLabel=y(this)??this.hostLabel}get textareaEl(){return this.querySelector("textarea")}syncLabelling(){let e=this.textareaEl;if(!e||this.closest(`[${R}]`))return;let r=v(this);if(!r){this.ownLabelId!==null&&e.removeAttribute("aria-labelledby"),this.ownLabelId=null;return}this.ownLabelId=L(r,"skdx-textarea","label"),e.setAttribute("aria-labelledby",this.ownLabelId)}updated(e){(e.has("value")||e.has("autoResize")||e.has("maxRows")||e.has("minRows"))&&this.applyAutoResize(),this.syncFormState(),this.syncLabelling(),E(this,{"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null,"data-disabled":this.disabled?"":null})}syncFormState(){this.setFormValue(this.value);let e=this.textareaEl;e&&this.mirrorValidity(e)}formResetCallback(){this.value=this.defaultValue}coreAttrs(){return{placeholder:this.placeholder??l,ariaLabel:this.hostLabel??l,maxlength:this.maxLength??l,minlength:this.minLength??l,rows:this.rows??(this.autoResize?l:this.minRows),wrap:this.wrap??l,autocomplete:this.autocomplete??l,spellcheck:this.spellCheck??l,inputmode:this.inputMode||l}}stateAttrs(){return{ariaInvalid:this.invalid?"true":l,ariaReadonly:this.readOnly?"true":l,dataInvalid:this.invalid?"":l,dataReadonly:this.readOnly?"":l,dataDisabled:this.disabled?"":l,style:this.autoResize?"overflow: hidden; resize: none":l}}render(){let e=this.coreAttrs(),r=this.stateAttrs();return m`
       <textarea
         part="textarea"
-        placeholder=${this.placeholder??o}
-        aria-label=${this.hostLabel??o}
-        maxlength=${this.maxLength??o}
-        minlength=${this.minLength??o}
-        rows=${this.rows??(this.autoResize?o:this.minRows)}
-        wrap=${this.wrap??o}
-        autocomplete=${this.autocomplete??o}
-        spellcheck=${this.spellCheck??o}
-        inputmode=${this.inputMode||o}
+        placeholder=${e.placeholder}
+        aria-label=${e.ariaLabel}
+        maxlength=${e.maxlength}
+        minlength=${e.minlength}
+        rows=${e.rows}
+        wrap=${e.wrap}
+        autocomplete=${e.autocomplete}
+        spellcheck=${e.spellcheck}
+        inputmode=${e.inputmode}
         ?disabled=${this.disabled}
         ?readonly=${this.readOnly}
         ?required=${this.required}
-        aria-invalid=${this.invalid?"true":o}
-        aria-readonly=${this.readOnly?"true":o}
-        data-invalid=${this.invalid?"":o}
-        data-readonly=${this.readOnly?"":o}
-        style=${this.autoResize?"overflow: hidden; resize: none":o}
+        aria-invalid=${r.ariaInvalid}
+        aria-readonly=${r.ariaReadonly}
+        data-invalid=${r.dataInvalid}
+        data-readonly=${r.dataReadonly}
+        data-disabled=${r.dataDisabled}
+        style=${r.style}
         .value=${this.value}
         @input=${this.handleInput}
       ></textarea>
-    `}};t.shadowRootOptions=H,t.styles=[B,M,y`
-      :host {
-        display: inline-block;
-      }
-      /* flex: 1 1 auto on the control — see the JSDoc above. */
-      textarea {
-        flex: 1 1 auto;
-      }
-    `],e([r({type:Boolean,reflect:!0,attribute:"auto-resize"})],t.prototype,"autoResize",2),e([r({type:Number,attribute:"max-rows"})],t.prototype,"maxRows",2),e([r({type:Number,attribute:"min-rows"})],t.prototype,"minRows",2),e([r({type:Boolean,reflect:!0})],t.prototype,"invalid",2),e([r({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),e([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([r({type:String})],t.prototype,"placeholder",2),e([r({type:String})],t.prototype,"value",2),e([r({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),e([r({type:Boolean,reflect:!0})],t.prototype,"required",2),e([r({type:String,reflect:!0})],t.prototype,"name",2),e([r({type:Number,reflect:!0,attribute:"maxlength"})],t.prototype,"maxLength",2),e([r({type:Number,reflect:!0,attribute:"minlength"})],t.prototype,"minLength",2),e([r({type:Number,reflect:!0})],t.prototype,"rows",2),e([r({type:String,reflect:!0})],t.prototype,"wrap",2),e([r({type:String,reflect:!0})],t.prototype,"autocomplete",2),e([r({type:String,attribute:"spellcheck"})],t.prototype,"spellCheck",2),e([r({type:String,attribute:"inputmode"})],t.prototype,"inputMode",2),e([$()],t.prototype,"hostLabel",2),t=e([E("skdx-textarea","textarea","root")],t);export{t as SkdxTextarea};
+    `}};i([a({type:Boolean,reflect:!0,attribute:"auto-resize"})],t.prototype,"autoResize",2),i([a({type:Number,attribute:"max-rows"})],t.prototype,"maxRows",2),i([a({type:Number,attribute:"min-rows"})],t.prototype,"minRows",2),i([a({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([a({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([a({type:String})],t.prototype,"placeholder",2),i([a({type:String})],t.prototype,"value",2),i([a({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([a({type:Boolean,reflect:!0})],t.prototype,"required",2),i([a({type:String,reflect:!0})],t.prototype,"name",2),i([a({type:Number,reflect:!0,attribute:"maxlength"})],t.prototype,"maxLength",2),i([a({type:Number,reflect:!0,attribute:"minlength"})],t.prototype,"minLength",2),i([a({type:Number,reflect:!0})],t.prototype,"rows",2),i([a({type:String,reflect:!0})],t.prototype,"wrap",2),i([a({type:String,reflect:!0})],t.prototype,"autocomplete",2),i([a({type:String,attribute:"spellcheck"})],t.prototype,"spellCheck",2),i([a({type:String,attribute:"inputmode"})],t.prototype,"inputMode",2),i([a({type:String,reflect:!0,attribute:"data-resize"})],t.prototype,"resize",2),i([b()],t.prototype,"hostLabel",2),t=i([f("skdx-textarea","textarea","root")],t);export{t as SkdxTextarea};

package/dist/time/Time.cjs

@@ -1,7 +1,10 @@
-"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var d=(r,t)=>{for(var o in t)m(r,o,{get:t[o],enumerable:!0})},D=(r,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!g.call(r,e)&&e!==o&&m(r,e,{get:()=>t[e],enumerable:!(a=f(t,e))||a.enumerable});return r};var E=r=>D(m({},"__esModule",{value:!0}),r),s=(r,t,o,a)=>{for(var e=a>1?void 0:a?f(t,o):t,u=r.length-1,c;u>=0;u--)(c=r[u])&&(e=(a?c(t,o,e):c(e))||e);return a&&e&&m(t,o,e),e};var I={};d(I,{SkdxTime:()=>l});module.exports=E(I);var i=require("lit"),n=require("lit/decorators.js"),h=require("../internal/date-value.cjs"),b=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),p=require("./format.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.relative=!1;this.absoluteTitle=!0}render(){let o=(0,h.toDate)(this.value,"skdx-time value");if(!o)return i.nothing;let a=(0,p.formatAbsolute)(o,this.locale),e=this.relative&&this.absoluteTitle?a:i.nothing;return i.html`<time part="time" datetime=${o.toISOString()} title=${e}
+"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var D=(l,t)=>{for(var o in t)m(l,o,{get:t[o],enumerable:!0})},E=(l,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of g(t))!d.call(l,e)&&e!==o&&m(l,e,{get:()=>t[e],enumerable:!(a=c(t,e))||a.enumerable});return l};var I=l=>E(m({},"__esModule",{value:!0}),l),s=(l,t,o,a)=>{for(var e=a>1?void 0:a?c(t,o):t,u=l.length-1,f;u>=0;u--)(f=l[u])&&(e=(a?f(t,o,e):f(e))||e);return a&&e&&m(t,o,e),e};var R={};D(R,{SkdxTime:()=>r});module.exports=I(R);var i=require("lit"),n=require("lit/decorators.js"),h=require("../internal/date-value.cjs"),v=require("../internal/define.cjs"),b=require("../internal/positioning.cjs"),y=require("../internal/styles.cjs"),p=require("./format.cjs");var r=class extends i.LitElement{constructor(){super(...arguments);this.relative=!1;this.absoluteTitle=!0}render(){let o=(0,h.toDate)(this.value,"skdx-time value");if(!o)return i.nothing;let a=(0,p.formatAbsolute)(o,this.locale),e=this.relative&&this.absoluteTitle?a:i.nothing;return i.html`<time
+      part="time"
+      datetime=${o.toISOString()}
+      title=${e}
       ><slot>${this.relative?(0,p.formatRelative)(o,this.now,this.locale):a}</slot></time
-    >`}};l.styles=[v.hiddenHostStyles,i.css`
+    >`}};r.styles=[y.hiddenHostStyles,i.css`
       :host {
         display: inline;
       }
-    `],s([(0,n.property)()],l.prototype,"value",2),s([(0,n.property)({type:Boolean,reflect:!0})],l.prototype,"relative",2),s([(0,n.property)({type:Boolean,attribute:"absolute-title"})],l.prototype,"absoluteTitle",2),s([(0,n.property)({type:String})],l.prototype,"locale",2),s([(0,n.property)({attribute:!1})],l.prototype,"now",2),l=s([(0,b.customElement)("skdx-time","time","root")],l);0&&(module.exports={SkdxTime});
+    `],s([(0,n.property)()],r.prototype,"value",2),s([(0,n.property)({type:Boolean})],r.prototype,"relative",2),s([(0,n.property)({converter:b.optOutBoolean,attribute:"absolute-title"})],r.prototype,"absoluteTitle",2),s([(0,n.property)({type:String})],r.prototype,"locale",2),s([(0,n.property)({attribute:!1})],r.prototype,"now",2),r=s([(0,v.customElement)("skdx-time","time","root")],r);0&&(module.exports={SkdxTime});

package/dist/time/Time.d.cts

@@ -1,4 +1,4 @@
-import { LitElement, nothing } from 'lit';
+import { LitElement, nothing, type TemplateResult } from 'lit';
 import { type DateInput } from '../internal/date-value.cjs';
 /**
  * `<skdx-time>` renders a `<time>` whose `datetime` is the machine-readable
@@ -44,7 +44,7 @@ export declare class SkdxTime extends LitElement {
      * @default undefined — read once at render; this component starts no timer.
      */
     now?: Date | number;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/time/Time.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, nothing } from 'lit';
+import { LitElement, nothing, type TemplateResult } from 'lit';
 import { type DateInput } from '../internal/date-value.js';
 /**
  * `<skdx-time>` renders a `<time>` whose `datetime` is the machine-readable
@@ -44,7 +44,7 @@ export declare class SkdxTime extends LitElement {
      * @default undefined — read once at render; this component starts no timer.
      */
     now?: Date | number;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/time/Time.js

@@ -1,7 +1,10 @@
-var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(s,a,o,r)=>{for(var e=r>1?void 0:r?c(a,o):a,n=s.length-1,m;n>=0;n--)(m=s[n])&&(e=(r?m(a,o,e):m(e))||e);return r&&e&&u(a,o,e),e};import{css as f,html as h,LitElement as b,nothing as p}from"lit";import{property as i}from"lit/decorators.js";import{toDate as v}from"../internal/date-value.js";import{customElement as y}from"../internal/define.js";import{hiddenHostStyles as g}from"../internal/styles.js";import{formatAbsolute as d,formatRelative as D}from"./format.js";var t=class extends b{constructor(){super(...arguments);this.relative=!1;this.absoluteTitle=!0}render(){let o=v(this.value,"skdx-time value");if(!o)return p;let r=d(o,this.locale),e=this.relative&&this.absoluteTitle?r:p;return h`<time part="time" datetime=${o.toISOString()} title=${e}
-      ><slot>${this.relative?D(o,this.now,this.locale):r}</slot></time
-    >`}};t.styles=[g,f`
+var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var r=(s,a,o,l)=>{for(var e=l>1?void 0:l?f(a,o):a,n=s.length-1,m;n>=0;n--)(m=s[n])&&(e=(l?m(a,o,e):m(e))||e);return l&&e&&u(a,o,e),e};import{css as c,html as h,LitElement as v,nothing as p}from"lit";import{property as i}from"lit/decorators.js";import{toDate as b}from"../internal/date-value.js";import{customElement as y}from"../internal/define.js";import{optOutBoolean as g}from"../internal/positioning.js";import{hiddenHostStyles as d}from"../internal/styles.js";import{formatAbsolute as D,formatRelative as E}from"./format.js";var t=class extends v{constructor(){super(...arguments);this.relative=!1;this.absoluteTitle=!0}render(){let o=b(this.value,"skdx-time value");if(!o)return p;let l=D(o,this.locale),e=this.relative&&this.absoluteTitle?l:p;return h`<time
+      part="time"
+      datetime=${o.toISOString()}
+      title=${e}
+      ><slot>${this.relative?E(o,this.now,this.locale):l}</slot></time
+    >`}};t.styles=[d,c`
       :host {
         display: inline;
       }
-    `],l([i()],t.prototype,"value",2),l([i({type:Boolean,reflect:!0})],t.prototype,"relative",2),l([i({type:Boolean,attribute:"absolute-title"})],t.prototype,"absoluteTitle",2),l([i({type:String})],t.prototype,"locale",2),l([i({attribute:!1})],t.prototype,"now",2),t=l([y("skdx-time","time","root")],t);export{t as SkdxTime};
+    `],r([i()],t.prototype,"value",2),r([i({type:Boolean})],t.prototype,"relative",2),r([i({converter:g,attribute:"absolute-title"})],t.prototype,"absoluteTitle",2),r([i({type:String})],t.prototype,"locale",2),r([i({attribute:!1})],t.prototype,"now",2),t=r([y("skdx-time","time","root")],t);export{t as SkdxTime};

package/dist/time/format.cjs

@@ -1 +1 @@
-"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var _=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},d=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of l(e))!f.call(t,n)&&n!==r&&a(t,n,{get:()=>e[n],enumerable:!(o=c(e,n))||o.enumerable});return t};var g=t=>d(a({},"__esModule",{value:!0}),t);var h={};_(h,{formatAbsolute:()=>D,formatRelative:()=>T});module.exports=g(h);function s(t){return t??new Intl.DateTimeFormat().resolvedOptions().locale}function D(t,e){return t.toLocaleDateString(s(e),{year:"numeric",month:"long",day:"numeric"})}var y=[["year",31536e6],["month",2592e6],["week",6048e5],["day",864e5],["hour",36e5],["minute",6e4],["second",1e3]];function T(t,e,r){let o=e===void 0?Date.now():e instanceof Date?e.getTime():e,n=t.getTime()-o,i=new Intl.RelativeTimeFormat(s(r),{numeric:"auto"});for(let[u,m]of y)if(Math.abs(n)>=m)return i.format(Math.trunc(n/m),u);return i.format(0,"second")}0&&(module.exports={formatAbsolute,formatRelative});
+"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var _=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},d=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of l(e))!f.call(t,n)&&n!==r&&a(t,n,{get:()=>e[n],enumerable:!(o=c(e,n))||o.enumerable});return t};var g=t=>d(a({},"__esModule",{value:!0}),t);var h={};_(h,{formatAbsolute:()=>D,formatRelative:()=>T});module.exports=g(h);function s(t){return t??new Intl.DateTimeFormat().resolvedOptions().locale}function D(t,e){return t.toLocaleDateString(s(e),{year:"numeric",month:"long",day:"numeric"})}var y=[["year",31536e6],["month",2592e6],["week",6048e5],["day",864e5],["hour",36e5],["minute",6e4],["second",1e3]];function T(t,e,r){let o=Date.now();e instanceof Date?o=e.getTime():e!==void 0&&(o=e);let n=t.getTime()-o,i=new Intl.RelativeTimeFormat(s(r),{numeric:"auto"});for(let[u,m]of y)if(Math.abs(n)>=m)return i.format(Math.trunc(n/m),u);return i.format(0,"second")}0&&(module.exports={formatAbsolute,formatRelative});

package/dist/time/format.js

@@ -1 +1 @@
-function a(t){return t??new Intl.DateTimeFormat().resolvedOptions().locale}function c(t,e){return t.toLocaleDateString(a(e),{year:"numeric",month:"long",day:"numeric"})}var u=[["year",31536e6],["month",2592e6],["week",6048e5],["day",864e5],["hour",36e5],["minute",6e4],["second",1e3]];function l(t,e,i){let m=e===void 0?Date.now():e instanceof Date?e.getTime():e,n=t.getTime()-m,r=new Intl.RelativeTimeFormat(a(i),{numeric:"auto"});for(let[s,o]of u)if(Math.abs(n)>=o)return r.format(Math.trunc(n/o),s);return r.format(0,"second")}export{c as formatAbsolute,l as formatRelative};
+function i(t){return t??new Intl.DateTimeFormat().resolvedOptions().locale}function c(t,e){return t.toLocaleDateString(i(e),{year:"numeric",month:"long",day:"numeric"})}var u=[["year",31536e6],["month",2592e6],["week",6048e5],["day",864e5],["hour",36e5],["minute",6e4],["second",1e3]];function l(t,e,m){let n=Date.now();e instanceof Date?n=e.getTime():e!==void 0&&(n=e);let r=t.getTime()-n,o=new Intl.RelativeTimeFormat(i(m),{numeric:"auto"});for(let[s,a]of u)if(Math.abs(r)>=a)return o.format(Math.trunc(r/a),s);return o.format(0,"second")}export{c as formatAbsolute,l as formatRelative};

package/dist/time-field/TimeField.cjs

@@ -1 +1 @@
-"use strict";var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var C=(u,n)=>{for(var e in n)o(u,e,{get:n[e],enumerable:!0})},_=(u,n,e,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of V(n))!S.call(u,s)&&s!==e&&o(u,s,{get:()=>n[s],enumerable:!(r=c(n,s))||r.enumerable});return u};var L=u=>_(o({},"__esModule",{value:!0}),u),i=(u,n,e,r)=>{for(var s=r>1?void 0:r?c(n,e):n,m=u.length-1,p;m>=0;m--)(p=u[m])&&(s=(r?p(n,e,s):p(s))||s);return r&&s&&o(n,e,s),s};var P={};C(P,{SkdxTimeField:()=>t});module.exports=L(P);var g=require("lit"),a=require("lit/decorators.js"),y=require("../field/field-core.cjs"),l=require("../internal/date-segments.cjs"),h=require("../internal/date-value.cjs"),v=require("../internal/define.cjs"),d=require("../internal/form-associated.cjs"),f=require("../internal/segmented-field.cjs"),b=require("../internal/styles.cjs");var t=class extends(0,d.FormAssociated)(g.LitElement){constructor(){super(...arguments);this._value=null;this.granularity="minute";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.values={};this.buffer={current:0};this.handleValuesChange=e=>{this.values=e;let s=(0,l.isComplete)((0,l.buildSegments)({kind:"time",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?(0,l.valuesToTimeString)(e,this.granularity,this.cycle):null;s!==this.value&&this.setValue(s)}}get value(){return this._value}set value(e){let r=this._value;this._value=(0,h.toTimeValue)(e,"value"),this.requestUpdate("value",r)}get min(){return this._min}set min(e){let r=this._min;this._min=(0,h.toTimeValue)(e,"min")??void 0,this.requestUpdate("min",r)}get max(){return this._max}set max(e){let r=this._max;this._max=(0,h.toTimeValue)(e,"max")??void 0,this.requestUpdate("max",r)}get cycle(){return(0,l.resolveHourCycle)(this.locale,this.hourCycle)}get resolvedStep(){return this.step??(this.granularity==="second"?1:60)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,b.installLightDomStyles)(),this.setAttribute(y.FIELD_CONTROL_ATTRIBUTE,"")}firstUpdated(){this.syncFormState()}willUpdate(e){(e.has("value")||e.has("hourCycle")||e.has("locale")||e.has("granularity"))&&this.syncSegments()}updated(e){(e.has("value")||e.has("required")||e.has("min")||e.has("max")||e.has("step")||e.has("granularity"))&&this.syncFormState()}syncSegments(){let e=this.cycle,r=(0,l.valuesToTimeString)(this.values,this.granularity,e);if(this.value===null){r!==null&&(this.values={});return}r!==this.value&&(this.values=(0,l.timeStringToValues)(this.value,e))}get rangeViolation(){return(0,l.timeRangeViolation)(this.value,this.min,this.max)}syncFormState(){this.setFormValue(this.value??"");let e=this.querySelector("[data-segment]");if(this.required&&this.value===null){this.setValueMissing(!0,"Please enter a time.",e);return}let r=this.rangeViolation;if(r!==null){this.setRangeViolation(r,r==="underflow"?"Please pick a later time.":"Please pick an earlier time.",e);return}this.setStepMismatch((0,l.timeStepMismatch)(this.value,this.resolvedStep,this.min),"Please pick a time on the allowed increment.",e)}formResetCallback(){this.value=this.getAttribute("value")}setValue(e){this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0}))}render(){return(0,f.renderSegmentedField)({host:this,kind:"time",part:"time-field",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:this.values,label:this.ariaLabel,getSegmentLabel:this.getSegmentLabel,emptySegmentText:this.emptySegmentText,getSegmentPlaceholder:this.getSegmentPlaceholder,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid||this.rangeViolation!==null,required:this.required,step:this.resolvedStep,buffer:this.buffer,onValuesChange:this.handleValuesChange,clampEdgeValues:e=>(0,l.clampValuesToTimeRange)(e,this.granularity,this.cycle,this.min,this.max)})}};i([(0,a.property)({type:String})],t.prototype,"value",1),i([(0,a.property)({type:String})],t.prototype,"min",1),i([(0,a.property)({type:String})],t.prototype,"max",1),i([(0,a.property)({type:Number})],t.prototype,"step",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"granularity",2),i([(0,a.property)({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),i([(0,a.property)({type:String})],t.prototype,"locale",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"name",2),i([(0,a.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([(0,a.property)({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),i([(0,a.property)({attribute:!1})],t.prototype,"getSegmentLabel",2),i([(0,a.property)({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),i([(0,a.property)({attribute:!1})],t.prototype,"getSegmentPlaceholder",2),i([(0,a.state)()],t.prototype,"values",2),t=i([(0,v.customElement)("skdx-time-field","time-field","root")],t);0&&(module.exports={SkdxTimeField});
+"use strict";var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var _=(u,n)=>{for(var e in n)o(u,e,{get:n[e],enumerable:!0})},L=(u,n,e,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of S(n))!C.call(u,s)&&s!==e&&o(u,s,{get:()=>n[s],enumerable:!(r=c(n,s))||r.enumerable});return u};var P=u=>L(o({},"__esModule",{value:!0}),u),i=(u,n,e,r)=>{for(var s=r>1?void 0:r?c(n,e):n,m=u.length-1,p;m>=0;m--)(p=u[m])&&(s=(r?p(n,e,s):p(s))||s);return r&&s&&o(n,e,s),s};var R={};_(R,{SkdxTimeField:()=>t});module.exports=P(R);var g=require("lit"),a=require("lit/decorators.js"),l=require("../internal/date-segments.cjs"),h=require("../internal/date-value.cjs"),y=require("../internal/define.cjs"),v=require("../internal/events.cjs"),d=require("../internal/field-core.cjs"),f=require("../internal/form-associated.cjs"),b=require("../internal/light-dom-styles.cjs"),V=require("../internal/segmented-field.cjs");var t=class extends(0,f.FormAssociated)(g.LitElement){constructor(){super(...arguments);this._value=null;this.granularity="minute";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.values={};this.buffer={current:0};this.handleValuesChange=e=>{this.values=e;let s=(0,l.isComplete)((0,l.buildSegments)({kind:"time",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?(0,l.valuesToTimeString)(e,this.granularity,this.cycle):null;s!==this.value&&this.setValue(s)}}get value(){return this._value}set value(e){let r=this._value;this._value=(0,h.toTimeValue)(e,"value"),this.requestUpdate("value",r)}get min(){return this._min}set min(e){let r=this._min;this._min=(0,h.toTimeValue)(e,"min")??void 0,this.requestUpdate("min",r)}get max(){return this._max}set max(e){let r=this._max;this._max=(0,h.toTimeValue)(e,"max")??void 0,this.requestUpdate("max",r)}get cycle(){return(0,l.resolveHourCycle)(this.locale,this.hourCycle)}get resolvedStep(){return this.step??(this.granularity==="second"?1:60)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,b.installLightDomStyles)(),this.setAttribute(d.FIELD_CONTROL_ATTRIBUTE,"")}firstUpdated(){this.syncFormState()}willUpdate(e){(e.has("value")||e.has("hourCycle")||e.has("locale")||e.has("granularity"))&&this.syncSegments()}updated(e){(e.has("value")||e.has("required")||e.has("min")||e.has("max")||e.has("step")||e.has("granularity"))&&this.syncFormState()}syncSegments(){let e=this.cycle,r=(0,l.valuesToTimeString)(this.values,this.granularity,e);if(this.value===null){r!==null&&(this.values={});return}r!==this.value&&(this.values=(0,l.timeStringToValues)(this.value,e))}get rangeViolation(){return(0,l.timeRangeViolation)(this.value,this.min,this.max)}syncFormState(){this.setFormValue(this.value??"");let e=this.querySelector("[data-segment]");if(this.required&&this.value===null){this.setValueMissing(!0,"Please enter a time.",e);return}let r=this.rangeViolation;if(r!==null){this.setRangeViolation(r,r==="underflow"?"Please pick a later time.":"Please pick an earlier time.",e);return}this.setStepMismatch((0,l.timeStepMismatch)(this.value,this.resolvedStep,this.min),"Please pick a time on the allowed increment.",e)}formResetCallback(){this.value=this.getAttribute("value")}setValue(e){this.value=e,(0,v.emit)(this,"value-change",e)}render(){return(0,V.renderSegmentedField)({host:this,kind:"time",part:"time-field",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:this.values,label:this.ariaLabel,getSegmentLabel:this.getSegmentLabel,emptySegmentText:this.emptySegmentText,getSegmentPlaceholder:this.getSegmentPlaceholder,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid||this.rangeViolation!==null,required:this.required,step:this.resolvedStep,buffer:this.buffer,onValuesChange:this.handleValuesChange,clampEdgeValues:e=>(0,l.clampValuesToTimeRange)(e,this.granularity,this.cycle,this.min,this.max)})}};i([(0,a.property)({type:String})],t.prototype,"value",1),i([(0,a.property)({type:String})],t.prototype,"min",1),i([(0,a.property)({type:String})],t.prototype,"max",1),i([(0,a.property)({type:Number})],t.prototype,"step",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"granularity",2),i([(0,a.property)({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),i([(0,a.property)({type:String})],t.prototype,"locale",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"name",2),i([(0,a.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([(0,a.property)({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),i([(0,a.property)({attribute:!1})],t.prototype,"getSegmentLabel",2),i([(0,a.property)({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),i([(0,a.property)({attribute:!1})],t.prototype,"getSegmentPlaceholder",2),i([(0,a.state)()],t.prototype,"values",2),t=i([(0,y.customElement)("skdx-time-field","time-field","root")],t);0&&(module.exports={SkdxTimeField});

package/dist/time-field/TimeField.d.cts

@@ -1,8 +1,8 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../internal/date-segments.cjs';
 /** How far down a `<skdx-time-field>` is editable — `day` is meaningless for a time. */
 export type TimeFieldGranularity = Exclude<Granularity, 'day'>;
-declare const SkdxTimeField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+declare const SkdxTimeField_base: typeof LitElement & (new (...args: any[]) => import("../index.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
@@ -139,13 +139,14 @@ export declare class SkdxTimeField extends SkdxTimeField_base {
     emptySegmentText?: string;
     /**
      * Words the placeholder letters one segment shows before it has been typed,
-     * called per segment type. `Intl` decides the segment order and the literals
-     * between segments; it has no notion of a placeholder, so these letters are
-     * the one visible string in the field a `locale` cannot reach — a `de-DE`
-     * field renders `dd.mm.yyyy` until this property turns it into `TT.MM.JJJJ`.
+     * called per segment type (`'hour'`, `'minute'`, `'dayPeriod'`, …). `Intl`
+     * decides the segment order and the literals between segments; it has no
+     * notion of a placeholder, so these letters are the one visible string in
+     * the field a `locale` cannot reach — a field renders `hh:mm:ss` until this
+     * property turns it into something else.
      *
      * Property only: a function has no attribute form.
-     * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …).
+     * @default undefined — the built-in English letters ('hh', 'mm', 'ss', '--').
      */
     getSegmentPlaceholder?: SegmentPlaceholderResolver;
     /** Per-segment values; the rendered segments are derived from these every render. */
@@ -153,13 +154,6 @@ export declare class SkdxTimeField extends SkdxTimeField_base {
     private readonly buffer;
     /** The hour cycle actually rendered: the explicit `hourCycle`, else the locale's. */
     private get cycle();
-    /**
-     * The step actually applied. A native `<input type="time">` with no `step`
-     * means `step="60"`, so a seconds segment this field deliberately renders
-     * would fail `stepMismatch` for every non-zero second it holds — the default
-     * is one unit of the finest segment the granularity renders, not the
-     * platform's blanket 60.
-     */
     private get resolvedStep();
     /** Light DOM: the host is the `role="group"` and the skin must reach the segments. */
     protected createRenderRoot(): HTMLElement;
@@ -168,26 +162,16 @@ export declare class SkdxTimeField extends SkdxTimeField_base {
     protected firstUpdated(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * Re-seeds the segments whenever the committed time changes from outside this
-     * field's own typing. Values that already describe the committed time are
-     * left alone, so typing is never rewritten mid-entry.
-     */
     private syncSegments;
     /** Which bound the current time crosses, or `null` while it is in range. */
     private get rangeViolation();
     private syncFormState;
     /** Restores the time the `value` attribute declared. A form reset fires no `value-change`, just like a native reset. */
     formResetCallback(): void;
-    /**
-     * @internal Commits `next` as `value` and dispatches `value-change`
-     * synchronously (not via Lit's async `updated()` lifecycle), so a caller
-     * observing the event right after a keystroke sees it without awaiting a
-     * render — same convention as `<skdx-number-field>`.
-     */
+    /** @internal Commits `next` as `value` and dispatches `value-change` synchronously, without waiting for a render. */
     setValue(next: string | null): void;
     private readonly handleValuesChange;
-    render(): import("lit").TemplateResult;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/time-field/TimeField.d.ts

@@ -1,8 +1,8 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../internal/date-segments.js';
 /** How far down a `<skdx-time-field>` is editable — `day` is meaningless for a time. */
 export type TimeFieldGranularity = Exclude<Granularity, 'day'>;
-declare const SkdxTimeField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+declare const SkdxTimeField_base: typeof LitElement & (new (...args: any[]) => import("../index.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
@@ -139,13 +139,14 @@ export declare class SkdxTimeField extends SkdxTimeField_base {
     emptySegmentText?: string;
     /**
      * Words the placeholder letters one segment shows before it has been typed,
-     * called per segment type. `Intl` decides the segment order and the literals
-     * between segments; it has no notion of a placeholder, so these letters are
-     * the one visible string in the field a `locale` cannot reach — a `de-DE`
-     * field renders `dd.mm.yyyy` until this property turns it into `TT.MM.JJJJ`.
+     * called per segment type (`'hour'`, `'minute'`, `'dayPeriod'`, …). `Intl`
+     * decides the segment order and the literals between segments; it has no
+     * notion of a placeholder, so these letters are the one visible string in
+     * the field a `locale` cannot reach — a field renders `hh:mm:ss` until this
+     * property turns it into something else.
      *
      * Property only: a function has no attribute form.
-     * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …).
+     * @default undefined — the built-in English letters ('hh', 'mm', 'ss', '--').
      */
     getSegmentPlaceholder?: SegmentPlaceholderResolver;
     /** Per-segment values; the rendered segments are derived from these every render. */
@@ -153,13 +154,6 @@ export declare class SkdxTimeField extends SkdxTimeField_base {
     private readonly buffer;
     /** The hour cycle actually rendered: the explicit `hourCycle`, else the locale's. */
     private get cycle();
-    /**
-     * The step actually applied. A native `<input type="time">` with no `step`
-     * means `step="60"`, so a seconds segment this field deliberately renders
-     * would fail `stepMismatch` for every non-zero second it holds — the default
-     * is one unit of the finest segment the granularity renders, not the
-     * platform's blanket 60.
-     */
     private get resolvedStep();
     /** Light DOM: the host is the `role="group"` and the skin must reach the segments. */
     protected createRenderRoot(): HTMLElement;
@@ -168,26 +162,16 @@ export declare class SkdxTimeField extends SkdxTimeField_base {
     protected firstUpdated(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * Re-seeds the segments whenever the committed time changes from outside this
-     * field's own typing. Values that already describe the committed time are
-     * left alone, so typing is never rewritten mid-entry.
-     */
     private syncSegments;
     /** Which bound the current time crosses, or `null` while it is in range. */
     private get rangeViolation();
     private syncFormState;
     /** Restores the time the `value` attribute declared. A form reset fires no `value-change`, just like a native reset. */
     formResetCallback(): void;
-    /**
-     * @internal Commits `next` as `value` and dispatches `value-change`
-     * synchronously (not via Lit's async `updated()` lifecycle), so a caller
-     * observing the event right after a keystroke sees it without awaiting a
-     * render — same convention as `<skdx-number-field>`.
-     */
+    /** @internal Commits `next` as `value` and dispatches `value-change` synchronously, without waiting for a render. */
     setValue(next: string | null): void;
     private readonly handleValuesChange;
-    render(): import("lit").TemplateResult;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {