@skdx/web-components 0.28.0 → 0.30.0

package/dist/command/CommandSeparator.cjs

@@ -1,5 +1,5 @@
-"use strict";var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var f=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},v=(r,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!u.call(r,t)&&t!==o&&a(r,t,{get:()=>e[t],enumerable:!(s=m(e,t))||s.enumerable});return r};var y=r=>v(a({},"__esModule",{value:!0}),r),d=(r,e,o,s)=>{for(var t=s>1?void 0:s?m(e,o):e,c=r.length-1,n;c>=0;c--)(n=r[c])&&(t=(s?n(e,o,t):n(t))||t);return s&&t&&a(e,o,t),t};var E={};f(E,{SkdxCommandSeparator:()=>i});module.exports=y(E);var l=require("lit"),p=require("../internal/define.cjs"),b=require("../internal/styles.cjs");var i=class extends l.LitElement{connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator"),this.setAttribute("aria-orientation","horizontal")}render(){return l.html`<slot></slot>`}};i.styles=[b.hiddenHostStyles,l.css`
+"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var f=(r,e)=>{for(var s in e)i(r,s,{get:e[s],enumerable:!0})},v=(r,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of b(e))!h.call(r,t)&&t!==s&&i(r,t,{get:()=>e[t],enumerable:!(o=m(e,t))||o.enumerable});return r};var y=r=>v(i({},"__esModule",{value:!0}),r),d=(r,e,s,o)=>{for(var t=o>1?void 0:o?m(e,s):e,c=r.length-1,n;c>=0;c--)(n=r[c])&&(t=(o?n(e,s,t):n(t))||t);return o&&t&&i(e,s,t),t};var T={};f(T,{SkdxCommandSeparator:()=>l});module.exports=y(T);var a=require("lit"),p=require("../internal/define.cjs"),u=require("../internal/styles.cjs");var l=class extends a.LitElement{connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator"),this.setAttribute("aria-orientation","horizontal")}render(){return a.html`<slot></slot>`}};l.styles=[u.hiddenHostStyles,a.css`
       :host {
         display: block;
       }
-    `],i=d([(0,p.customElement)("skdx-command-separator","command","separator")],i);0&&(module.exports={SkdxCommandSeparator});
+    `],l=d([(0,p.customElement)("skdx-command-separator","command","separator")],l);0&&(module.exports={SkdxCommandSeparator});

package/dist/command/CommandSeparator.d.cts

@@ -1,12 +1,9 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-command-separator>` — visual divider between items or groups.
- * Renders `role="separator"` with `aria-orientation="horizontal"`.
- */
+import { LitElement, type TemplateResult } from 'lit';
+/** `<skdx-command-separator>` — visual divider between items or groups, rendered `role="separator"`. */
 export declare class SkdxCommandSeparator extends LitElement {
     static styles: import("lit").CSSResult[];
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/command/CommandSeparator.d.ts

@@ -1,12 +1,9 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-command-separator>` — visual divider between items or groups.
- * Renders `role="separator"` with `aria-orientation="horizontal"`.
- */
+import { LitElement, type TemplateResult } from 'lit';
+/** `<skdx-command-separator>` — visual divider between items or groups, rendered `role="separator"`. */
 export declare class SkdxCommandSeparator extends LitElement {
     static styles: import("lit").CSSResult[];
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/command/CommandSeparator.js

@@ -1,5 +1,5 @@
-var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var c=(s,r,i,o)=>{for(var e=o>1?void 0:o?m(r,i):r,l=s.length-1,a;l>=0;l--)(a=s[l])&&(e=(o?a(r,i,e):a(e))||e);return o&&e&&n(r,i,e),e};import{css as d,html as p,LitElement as b}from"lit";import{customElement as h}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";var t=class extends b{connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator"),this.setAttribute("aria-orientation","horizontal")}render(){return p`<slot></slot>`}};t.styles=[u,d`
+var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var c=(o,r,l,s)=>{for(var e=s>1?void 0:s?m(r,l):r,a=o.length-1,i;a>=0;a--)(i=o[a])&&(e=(s?i(r,l,e):i(e))||e);return s&&e&&n(r,l,e),e};import{css as d,html as p,LitElement as u}from"lit";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as h}from"../internal/styles.js";var t=class extends u{connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator"),this.setAttribute("aria-orientation","horizontal")}render(){return p`<slot></slot>`}};t.styles=[h,d`
       :host {
         display: block;
       }
-    `],t=c([h("skdx-command-separator","command","separator")],t);export{t as SkdxCommandSeparator};
+    `],t=c([b("skdx-command-separator","command","separator")],t);export{t as SkdxCommandSeparator};

package/dist/command/family.cjs

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

package/dist/command/family.d.cts

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

package/dist/command/family.d.ts

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

package/dist/command/family.js

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

package/dist/command/types.d.cts

@@ -1,20 +1,20 @@
-/** One command in a `<skdx-command>` group. */
+/** Describes one command rendered in a `<skdx-command>` group. */
 export interface SkdxCommandItemDescriptor {
-    /** Text. */
+    /** Text shown for the command, unless the `item` slot overrides it. */
     label: string;
-    /** Filter/select target. @default label */
+    /** Value used for filtering and selecting this command. @default label */
     value?: string;
-    /** Extra filter strings. */
+    /** Additional strings this command's filter matches against, besides its label. */
     keywords?: readonly string[];
-    /** Exclude from navigation. @default false */
+    /** Excludes this command from keyboard navigation and selection. @default false */
     disabled?: boolean;
-    /** Run hook, before `item-select`. */
+    /** Callback run when this command is selected, before `item-select` fires. */
     onSelect?: () => void;
 }
-/** One section in `<skdx-command>`'s `groups`. */
+/** Describes one labelled section of commands in `<skdx-command>`'s `groups`. */
 export interface SkdxCommandGroupDescriptor {
-    /** Accessible name and heading. @default none — no wrapper */
+    /** Accessible name and heading text for this group of commands. @default none — no wrapper */
     label?: string;
-    /** Commands. */
+    /** The commands rendered within this group. */
     items: readonly SkdxCommandItemDescriptor[];
 }

package/dist/command/types.d.ts

@@ -1,20 +1,20 @@
-/** One command in a `<skdx-command>` group. */
+/** Describes one command rendered in a `<skdx-command>` group. */
 export interface SkdxCommandItemDescriptor {
-    /** Text. */
+    /** Text shown for the command, unless the `item` slot overrides it. */
     label: string;
-    /** Filter/select target. @default label */
+    /** Value used for filtering and selecting this command. @default label */
     value?: string;
-    /** Extra filter strings. */
+    /** Additional strings this command's filter matches against, besides its label. */
     keywords?: readonly string[];
-    /** Exclude from navigation. @default false */
+    /** Excludes this command from keyboard navigation and selection. @default false */
     disabled?: boolean;
-    /** Run hook, before `item-select`. */
+    /** Callback run when this command is selected, before `item-select` fires. */
     onSelect?: () => void;
 }
-/** One section in `<skdx-command>`'s `groups`. */
+/** Describes one labelled section of commands in `<skdx-command>`'s `groups`. */
 export interface SkdxCommandGroupDescriptor {
-    /** Accessible name and heading. @default none — no wrapper */
+    /** Accessible name and heading text for this group of commands. @default none — no wrapper */
     label?: string;
-    /** Commands. */
+    /** The commands rendered within this group. */
     items: readonly SkdxCommandItemDescriptor[];
 }

package/dist/date-field/DateField.cjs

@@ -1 +1 @@
-"use strict";var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var L=(u,s)=>{for(var e in s)o(u,e,{get:s[e],enumerable:!0})},P=(u,s,e,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of C(s))!D.call(u,i)&&i!==e&&o(u,i,{get:()=>s[i],enumerable:!(a=d(s,i))||a.enumerable});return u};var q=u=>P(o({},"__esModule",{value:!0}),u),r=(u,s,e,a)=>{for(var i=a>1?void 0:a?d(s,e):s,m=u.length-1,c;m>=0;m--)(c=u[m])&&(i=(a?c(s,e,i):c(i))||i);return a&&i&&o(s,e,i),i};var S={};L(S,{SkdxDateField:()=>t});module.exports=q(S);var p=require("lit"),l=require("lit/decorators.js"),g=require("../field/field-core.cjs"),n=require("../internal/date-segments.cjs"),h=require("../internal/date-value.cjs"),y=require("../internal/define.cjs"),f=require("../internal/form-associated.cjs"),b=require("../internal/positioning.cjs"),V=require("../internal/segmented-field.cjs"),T=require("../internal/styles.cjs");var v={fromAttribute(u){return u===null?null:(0,h.toDate)(u,"a date attribute")},toAttribute(){}},t=class extends(0,f.FormAssociated)(p.LitElement){constructor(){super(...arguments);this._value=null;this._minDate=null;this.maxDate=null;this.granularity="day";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.shouldForceLeadingZeros=!0;this.values={};this.buffer={current:0};this.defaultValue=null;this.handleValuesChange=e=>{this.values=e;let a=this.dateOf(e),i=this.value?this.value.getTime():null;(a?a.getTime():null)!==i&&this.setValue(a)}}get value(){return this._value}set value(e){let a=this._value;this._value=(0,h.toDate)(e,"value"),this.requestUpdate("value",a)}get minDate(){return this._minDate}set minDate(e){let a=this._minDate;this._minDate=(0,h.toDate)(e,"minDate"),this.requestUpdate("minDate",a)}get cycle(){return(0,n.resolveHourCycle)(this.locale,this.hourCycle)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,T.installLightDomStyles)(),this.setAttribute(g.FIELD_CONTROL_ATTRIBUTE,"")}firstUpdated(){this.defaultValue=this.value,this.syncFormState()}willUpdate(e){(e.has("value")||e.has("hourCycle")||e.has("locale"))&&this.syncSegments()}updated(e){(e.has("value")||e.has("required")||e.has("granularity")||e.has("minDate")||e.has("maxDate"))&&this.syncFormState()}dateOf(e){return(0,n.isComplete)((0,n.buildSegments)({kind:"date",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?(0,n.valuesToDate)(e,this.cycle):null}syncSegments(){let e=this.cycle,a=this.value?this.value.getTime():null,i=this.dateOf(this.values);if(a===null){i!==null&&(this.values={});return}i!==null&&i.getTime()===a||(this.values=(0,n.dateToValues)(new Date(a),e))}get rangeViolation(){return(0,n.dateRangeViolation)(this.value,this.granularity,this.minDate??void 0,this.maxDate??void 0)}syncFormState(){this.setFormValue(this.value?(0,n.dateToFormValue)(this.value,this.granularity):"");let e=this.querySelector("[data-segment]");if(this.required&&this.value===null){this.setValueMissing(!0,"Please enter a date.",e);return}let a=this.rangeViolation;this.setRangeViolation(a,a==="underflow"?"Please pick a later date.":"Please pick an earlier date.",e)}formResetCallback(){let e=this.getAttribute("value");this.value=e===null?this.defaultValue:(0,n.parseDateFormValue)(e)}setValue(e){this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0}))}render(){return(0,V.renderSegmentedField)({host:this,kind:"date",part:"date-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,shouldForceLeadingZeros:this.shouldForceLeadingZeros,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid||this.rangeViolation!==null||this.value!==null&&(this.isDateUnavailable?.(this.value)??!1),required:this.required,buffer:this.buffer,onValuesChange:this.handleValuesChange})}};r([(0,l.property)({converter:v})],t.prototype,"value",1),r([(0,l.property)({converter:v,attribute:"min-date"})],t.prototype,"minDate",1),r([(0,l.property)({converter:v,attribute:"max-date"})],t.prototype,"maxDate",2),r([(0,l.property)({type:String,reflect:!0})],t.prototype,"granularity",2),r([(0,l.property)({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),r([(0,l.property)({type:String})],t.prototype,"locale",2),r([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([(0,l.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),r([(0,l.property)({attribute:!1})],t.prototype,"isDateUnavailable",2),r([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),r([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),r([(0,l.property)({type:String,reflect:!0})],t.prototype,"name",2),r([(0,l.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),r([(0,l.property)({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),r([(0,l.property)({attribute:!1})],t.prototype,"getSegmentLabel",2),r([(0,l.property)({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),r([(0,l.property)({attribute:!1})],t.prototype,"getSegmentPlaceholder",2),r([(0,l.property)({converter:b.optOutBoolean,attribute:"should-force-leading-zeros"})],t.prototype,"shouldForceLeadingZeros",2),r([(0,l.state)()],t.prototype,"values",2),t=r([(0,y.customElement)("skdx-date-field","date-field","root")],t);0&&(module.exports={SkdxDateField});
+"use strict";var o=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var P=(u,s)=>{for(var e in s)o(u,e,{get:s[e],enumerable:!0})},R=(u,s,e,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of L(s))!D.call(u,i)&&i!==e&&o(u,i,{get:()=>s[i],enumerable:!(a=v(s,i))||a.enumerable});return u};var q=u=>R(o({},"__esModule",{value:!0}),u),r=(u,s,e,a)=>{for(var i=a>1?void 0:a?v(s,e):s,m=u.length-1,c;m>=0;m--)(c=u[m])&&(i=(a?c(s,e,i):c(i))||i);return a&&i&&o(s,e,i),i};var S={};P(S,{SkdxDateField:()=>t});module.exports=q(S);var d=require("lit"),l=require("lit/decorators.js"),n=require("../internal/date-segments.cjs"),h=require("../internal/date-value.cjs"),g=require("../internal/define.cjs"),y=require("../internal/events.cjs"),f=require("../internal/field-core.cjs"),b=require("../internal/form-associated.cjs"),V=require("../internal/light-dom-styles.cjs"),T=require("../internal/positioning.cjs"),C=require("../internal/segmented-field.cjs");var p={fromAttribute(u){return u===null?null:(0,h.toDate)(u,"a date attribute")},toAttribute(){}},t=class extends(0,b.FormAssociated)(d.LitElement){constructor(){super(...arguments);this._value=null;this._minDate=null;this.maxDate=null;this.granularity="day";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.shouldForceLeadingZeros=!0;this.values={};this.buffer={current:0};this.defaultValue=null;this.handleValuesChange=e=>{this.values=e;let a=this.dateOf(e),i=this.value?this.value.getTime():null;(a?a.getTime():null)!==i&&this.setValue(a)}}get value(){return this._value}set value(e){let a=this._value;this._value=(0,h.toDate)(e,"value"),this.requestUpdate("value",a)}get minDate(){return this._minDate}set minDate(e){let a=this._minDate;this._minDate=(0,h.toDate)(e,"minDate"),this.requestUpdate("minDate",a)}get cycle(){return(0,n.resolveHourCycle)(this.locale,this.hourCycle)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,V.installLightDomStyles)(),this.setAttribute(f.FIELD_CONTROL_ATTRIBUTE,"")}firstUpdated(){this.defaultValue=this.value,this.syncFormState()}willUpdate(e){(e.has("value")||e.has("hourCycle")||e.has("locale"))&&this.syncSegments()}updated(e){(e.has("value")||e.has("required")||e.has("granularity")||e.has("minDate")||e.has("maxDate"))&&this.syncFormState()}dateOf(e){return(0,n.isComplete)((0,n.buildSegments)({kind:"date",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?(0,n.valuesToDate)(e,this.cycle):null}syncSegments(){let e=this.cycle,a=this.value?this.value.getTime():null,i=this.dateOf(this.values);if(a===null){i!==null&&(this.values={});return}i!==null&&i.getTime()===a||(this.values=(0,n.dateToValues)(new Date(a),e))}get rangeViolation(){return(0,n.dateRangeViolation)(this.value,this.granularity,this.minDate??void 0,this.maxDate??void 0)}syncFormState(){this.setFormValue(this.value?(0,n.dateToFormValue)(this.value,this.granularity):"");let e=this.querySelector("[data-segment]");if(this.required&&this.value===null){this.setValueMissing(!0,"Please enter a date.",e);return}let a=this.rangeViolation;this.setRangeViolation(a,a==="underflow"?"Please pick a later date.":"Please pick an earlier date.",e)}formResetCallback(){let e=this.getAttribute("value");this.value=e===null?this.defaultValue:(0,n.parseDateFormValue)(e)}setValue(e){this.value=e,(0,y.emit)(this,"value-change",e)}render(){return(0,C.renderSegmentedField)({host:this,kind:"date",part:"date-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,shouldForceLeadingZeros:this.shouldForceLeadingZeros,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid||this.rangeViolation!==null||this.value!==null&&(this.isDateUnavailable?.(this.value)??!1),required:this.required,buffer:this.buffer,onValuesChange:this.handleValuesChange})}};r([(0,l.property)({converter:p})],t.prototype,"value",1),r([(0,l.property)({converter:p,attribute:"min-date"})],t.prototype,"minDate",1),r([(0,l.property)({converter:p,attribute:"max-date"})],t.prototype,"maxDate",2),r([(0,l.property)({type:String,reflect:!0})],t.prototype,"granularity",2),r([(0,l.property)({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),r([(0,l.property)({type:String})],t.prototype,"locale",2),r([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([(0,l.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),r([(0,l.property)({attribute:!1})],t.prototype,"isDateUnavailable",2),r([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),r([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),r([(0,l.property)({type:String,reflect:!0})],t.prototype,"name",2),r([(0,l.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),r([(0,l.property)({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),r([(0,l.property)({attribute:!1})],t.prototype,"getSegmentLabel",2),r([(0,l.property)({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),r([(0,l.property)({attribute:!1})],t.prototype,"getSegmentPlaceholder",2),r([(0,l.property)({converter:T.optOutBoolean,attribute:"should-force-leading-zeros"})],t.prototype,"shouldForceLeadingZeros",2),r([(0,l.state)()],t.prototype,"values",2),t=r([(0,g.customElement)("skdx-date-field","date-field","root")],t);0&&(module.exports={SkdxDateField});

package/dist/date-field/DateField.d.cts

@@ -1,34 +1,11 @@
-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';
 import { type DateInput } from '../internal/date-value.cjs';
-declare const SkdxDateField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+declare const SkdxDateField_base: typeof LitElement & (new (...args: any[]) => import("../index.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-date-field>` — the Web Components implementation of the shared
- * DateField contract (`@skdx/shared`'s `dateFieldContract`). Segmented
- * keyboard entry of a date: the typed counterpart of `<skdx-calendar>`, and
- * the typed-input part of `<skdx-date-picker>`. The host itself is the
- * `role="group"`, holding one `role="spinbutton"` per segment in its
- * **light DOM** (no shadow root — the skin's segment rules are document-level
- * and can't cross a shadow boundary), interleaved with the locale's own
- * separators from `Intl.DateTimeFormat.formatToParts`.
- *
- * Arrow Up/Down step the focused segment (wrapping); Arrow Left/Right move
- * between segments (mirrored under `dir="rtl"`); digits type with roll-over
- * (`1` then `5` into a month gives `05`); Backspace/Delete clear a segment.
- * `value-change` only ever fires with a complete date or `null`.
- *
- * `value` is the single source of truth — like a native `<input>`'s `value`,
- * there is no separate controlled/uncontrolled mode. The property is a
- * `Date`; the attribute is the same `YYYY-MM-DD`/`YYYY-MM-DDTHH:mm[:ss]`
- * string the field submits, and what a form reset restores.
- *
- * Form-associated via `ElementInternals`: with a `name`, the date submits as
- * that wire string, like `<input type="date">`. An incomplete field submits
- * empty and is `valueMissing` while `required`; a date outside
- * `min-date`/`max-date` is `rangeUnderflow`/`rangeOverflow`.
- *
+ * `<skdx-date-field>` — segmented keyboard entry of a date, one `role="spinbutton"` per segment in the host's light DOM.
  * @example
  * ```html
  * <skdx-date-field aria-label="Departure" locale="en-US" granularity="minute"></skdx-date-field>
@@ -41,31 +18,31 @@ declare const SkdxDateField_base: typeof LitElement & (new (...args: any[]) => i
  */
 export declare class SkdxDateField extends SkdxDateField_base {
     /**
-     * Current date, for controlled usage. Pair with `on-value-change`; `null` while any segment is still untyped. Takes a `Date` or ISO-8601 string, read as local time.
+     * Current date, for controlled usage; takes a `Date` or ISO-8601 string, read as local time.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
     get value(): Date | null;
     set value(next: DateInput | null);
     private _value;
     /**
-     * Earliest accepted date. A value before it marks the field `aria-invalid`/`data-invalid` and fails constraint validation with `rangeUnderflow`. Takes a `Date` or ISO-8601 string.
+     * Earliest accepted date; a value before it fails constraint validation with `rangeUnderflow`.
      * @default undefined — no minimum; any year from 1 to 9999.
      */
     get minDate(): Date | null;
     set minDate(next: DateInput | null);
     private _minDate;
     /**
-     * Latest accepted date. A value after it fails constraint validation with `rangeOverflow`. Takes `Date` or ISO-8601 string.
+     * Latest accepted date; a value after it fails constraint validation with `rangeOverflow`.
      * @default undefined — no maximum; any year from 1 to 9999.
      */
     maxDate: Date | null;
     /**
-     * How far down the field is editable. `'day'` is date-only; anything past it appends hour/minute (and, at `'second'`, seconds) — the `datetime-local` equivalent.
+     * How far down the field is editable, from date-only `'day'` up through hour/minute/second segments.
      * @default 'day'
      */
     granularity: Granularity;
     /**
-     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments. Display only — the submitted value is always 24 hour.
+     * Forces 12-hour or 24-hour time segments for display; the submitted value is always 24-hour.
      * @default undefined — whatever the locale resolves to.
      */
     hourCycle?: HourCycle;
@@ -85,7 +62,7 @@ export declare class SkdxDateField extends SkdxDateField_base {
      */
     readOnly: boolean;
     /**
-     * Predicate marking dates as unavailable, receiving the typed `Date`. An unavailable date marks the field `aria-invalid`/`data-invalid` without changing what the field submits.
+     * Predicate marking dates as unavailable; an unavailable date marks the field invalid without changing what it submits.
      * @default undefined — every date is available.
      */
     isDateUnavailable?: (date: Date) => boolean;
@@ -100,49 +77,34 @@ export declare class SkdxDateField extends SkdxDateField_base {
      */
     required: boolean;
     /**
-     * Form field name. With it the date submits as `YYYY-MM-DD`, or `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity. Without it the field submits nothing.
+     * Form field name; with it the date submits as `YYYY-MM-DD` (or with time, past `day` granularity).
      * @default undefined
      */
     name?: string;
     /**
-     * Replaces the message the browser shows when a `required` field is
-     * submitted with any segment still blank. Sealed inside the shadow root
-     * otherwise, so this is the only way to translate it or to name the date
-     * ("Please enter a departure date.").
+     * Replaces the browser's validation message for an incomplete `required` field.
      * @default undefined — keeps `'Please enter a date.'`
      */
     requiredMessage?: string;
-    /**
-     * Accessible name for the whole field. The host itself is the `role="group"`,
-     * so the attribute names the control directly; the property exists so an
-     * assignment (`field.ariaLabel = …`) reaches the attribute too.
-     */
+    /** Accessible name for the whole field, since the host itself is the `role="group"`. */
     ariaLabel: string | null;
     /**
      * Words the accessible name of one segment, called per segment type.
-     * Return the built-in `SEGMENT_LABELS` entry for ones you don't want to
-     * change — one of the two strings `locale` can't translate, since segment
-     * order and separators come from `Intl.DateTimeFormat` but this describes
-     * the widget rather than the value.
      * @default undefined — the built-in English names ('year', 'month', 'AM/PM', …).
      */
     getSegmentLabel?: (type: SegmentType) => string;
     /**
-     * The `aria-valuetext` an untyped segment announces instead of a number it
-     * does not have. The other string `locale` cannot translate.
+     * The `aria-valuetext` an untyped segment announces instead of a number it doesn't have.
      * @default 'Empty'
      */
     emptySegmentText?: string;
     /**
-     * Words the placeholder letters one segment shows before typing, called
-     * per segment type — the one visible string a `locale` can't reach, since
-     * `Intl` has no notion of a placeholder. A `de-DE` field renders
-     * `dd.mm.yyyy` until this turns it into `TT.MM.JJJJ`.
+     * Words the placeholder letters one segment shows before typing, called per segment type.
      * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …).
      */
     getSegmentPlaceholder?: SegmentPlaceholderResolver;
     /**
-     * Whether a one-digit month, day or hour renders zero-padded — `05/09/2026` rather than `5/9/2026`. Turned off, only those three segments change: year keeps four digits (separating a typed `0042` from `42`), minute/second keep two — the same split `Intl.DateTimeFormat` draws between `numeric` and `2-digit`.
+     * Whether a one-digit month, day, or hour renders zero-padded (`05` rather than `5`).
      * @default true
      */
     shouldForceLeadingZeros: boolean;
@@ -159,36 +121,17 @@ export declare class SkdxDateField extends SkdxDateField_base {
     protected firstUpdated(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * The `Date` a set of segment values describes, or `null` while any is
-     * untyped. Completeness must be checked before converting: `valuesToDate`
-     * defaults an untyped hour to 0, which would otherwise look committed.
-     */
     private dateOf;
-    /**
-     * Re-seeds the segments whenever the committed date changes from outside
-     * this field's own typing. Values already describing the committed date
-     * are left alone, so a mid-entry keystroke isn't rewritten under the caret
-     * — and an incomplete field stays alone on `null`.
-     */
     private syncSegments;
     /** Which bound the current date crosses, or `null` while it is in range. */
     private get rangeViolation();
     private syncFormState;
-    /**
-     * Restores the date the `value` attribute declared, falling back to the
-     * `Date` first rendered with when there's no attribute. Fires no
-     * `value-change`, like a native reset.
-     */
+    /** Restores the date the `value` attribute declared, or the first-rendered `Date` otherwise. Fires no `value-change`. */
     formResetCallback(): void;
-    /**
-     * @internal Commits `next` as `value` and dispatches `value-change`
-     * synchronously rather than via Lit's async `updated()` lifecycle, so a
-     * listener right after a keystroke sees it without awaiting a render.
-     */
+    /** @internal Commits `next` as `value` and dispatches `value-change` synchronously. */
     setValue(next: Date | null): void;
     private readonly handleValuesChange;
-    render(): import("lit").TemplateResult;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/date-field/DateField.d.ts

@@ -1,34 +1,11 @@
-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';
 import { type DateInput } from '../internal/date-value.js';
-declare const SkdxDateField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+declare const SkdxDateField_base: typeof LitElement & (new (...args: any[]) => import("../index.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-date-field>` — the Web Components implementation of the shared
- * DateField contract (`@skdx/shared`'s `dateFieldContract`). Segmented
- * keyboard entry of a date: the typed counterpart of `<skdx-calendar>`, and
- * the typed-input part of `<skdx-date-picker>`. The host itself is the
- * `role="group"`, holding one `role="spinbutton"` per segment in its
- * **light DOM** (no shadow root — the skin's segment rules are document-level
- * and can't cross a shadow boundary), interleaved with the locale's own
- * separators from `Intl.DateTimeFormat.formatToParts`.
- *
- * Arrow Up/Down step the focused segment (wrapping); Arrow Left/Right move
- * between segments (mirrored under `dir="rtl"`); digits type with roll-over
- * (`1` then `5` into a month gives `05`); Backspace/Delete clear a segment.
- * `value-change` only ever fires with a complete date or `null`.
- *
- * `value` is the single source of truth — like a native `<input>`'s `value`,
- * there is no separate controlled/uncontrolled mode. The property is a
- * `Date`; the attribute is the same `YYYY-MM-DD`/`YYYY-MM-DDTHH:mm[:ss]`
- * string the field submits, and what a form reset restores.
- *
- * Form-associated via `ElementInternals`: with a `name`, the date submits as
- * that wire string, like `<input type="date">`. An incomplete field submits
- * empty and is `valueMissing` while `required`; a date outside
- * `min-date`/`max-date` is `rangeUnderflow`/`rangeOverflow`.
- *
+ * `<skdx-date-field>` — segmented keyboard entry of a date, one `role="spinbutton"` per segment in the host's light DOM.
  * @example
  * ```html
  * <skdx-date-field aria-label="Departure" locale="en-US" granularity="minute"></skdx-date-field>
@@ -41,31 +18,31 @@ declare const SkdxDateField_base: typeof LitElement & (new (...args: any[]) => i
  */
 export declare class SkdxDateField extends SkdxDateField_base {
     /**
-     * Current date, for controlled usage. Pair with `on-value-change`; `null` while any segment is still untyped. Takes a `Date` or ISO-8601 string, read as local time.
+     * Current date, for controlled usage; takes a `Date` or ISO-8601 string, read as local time.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
     get value(): Date | null;
     set value(next: DateInput | null);
     private _value;
     /**
-     * Earliest accepted date. A value before it marks the field `aria-invalid`/`data-invalid` and fails constraint validation with `rangeUnderflow`. Takes a `Date` or ISO-8601 string.
+     * Earliest accepted date; a value before it fails constraint validation with `rangeUnderflow`.
      * @default undefined — no minimum; any year from 1 to 9999.
      */
     get minDate(): Date | null;
     set minDate(next: DateInput | null);
     private _minDate;
     /**
-     * Latest accepted date. A value after it fails constraint validation with `rangeOverflow`. Takes `Date` or ISO-8601 string.
+     * Latest accepted date; a value after it fails constraint validation with `rangeOverflow`.
      * @default undefined — no maximum; any year from 1 to 9999.
      */
     maxDate: Date | null;
     /**
-     * How far down the field is editable. `'day'` is date-only; anything past it appends hour/minute (and, at `'second'`, seconds) — the `datetime-local` equivalent.
+     * How far down the field is editable, from date-only `'day'` up through hour/minute/second segments.
      * @default 'day'
      */
     granularity: Granularity;
     /**
-     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments. Display only — the submitted value is always 24 hour.
+     * Forces 12-hour or 24-hour time segments for display; the submitted value is always 24-hour.
      * @default undefined — whatever the locale resolves to.
      */
     hourCycle?: HourCycle;
@@ -85,7 +62,7 @@ export declare class SkdxDateField extends SkdxDateField_base {
      */
     readOnly: boolean;
     /**
-     * Predicate marking dates as unavailable, receiving the typed `Date`. An unavailable date marks the field `aria-invalid`/`data-invalid` without changing what the field submits.
+     * Predicate marking dates as unavailable; an unavailable date marks the field invalid without changing what it submits.
      * @default undefined — every date is available.
      */
     isDateUnavailable?: (date: Date) => boolean;
@@ -100,49 +77,34 @@ export declare class SkdxDateField extends SkdxDateField_base {
      */
     required: boolean;
     /**
-     * Form field name. With it the date submits as `YYYY-MM-DD`, or `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity. Without it the field submits nothing.
+     * Form field name; with it the date submits as `YYYY-MM-DD` (or with time, past `day` granularity).
      * @default undefined
      */
     name?: string;
     /**
-     * Replaces the message the browser shows when a `required` field is
-     * submitted with any segment still blank. Sealed inside the shadow root
-     * otherwise, so this is the only way to translate it or to name the date
-     * ("Please enter a departure date.").
+     * Replaces the browser's validation message for an incomplete `required` field.
      * @default undefined — keeps `'Please enter a date.'`
      */
     requiredMessage?: string;
-    /**
-     * Accessible name for the whole field. The host itself is the `role="group"`,
-     * so the attribute names the control directly; the property exists so an
-     * assignment (`field.ariaLabel = …`) reaches the attribute too.
-     */
+    /** Accessible name for the whole field, since the host itself is the `role="group"`. */
     ariaLabel: string | null;
     /**
      * Words the accessible name of one segment, called per segment type.
-     * Return the built-in `SEGMENT_LABELS` entry for ones you don't want to
-     * change — one of the two strings `locale` can't translate, since segment
-     * order and separators come from `Intl.DateTimeFormat` but this describes
-     * the widget rather than the value.
      * @default undefined — the built-in English names ('year', 'month', 'AM/PM', …).
      */
     getSegmentLabel?: (type: SegmentType) => string;
     /**
-     * The `aria-valuetext` an untyped segment announces instead of a number it
-     * does not have. The other string `locale` cannot translate.
+     * The `aria-valuetext` an untyped segment announces instead of a number it doesn't have.
      * @default 'Empty'
      */
     emptySegmentText?: string;
     /**
-     * Words the placeholder letters one segment shows before typing, called
-     * per segment type — the one visible string a `locale` can't reach, since
-     * `Intl` has no notion of a placeholder. A `de-DE` field renders
-     * `dd.mm.yyyy` until this turns it into `TT.MM.JJJJ`.
+     * Words the placeholder letters one segment shows before typing, called per segment type.
      * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …).
      */
     getSegmentPlaceholder?: SegmentPlaceholderResolver;
     /**
-     * Whether a one-digit month, day or hour renders zero-padded — `05/09/2026` rather than `5/9/2026`. Turned off, only those three segments change: year keeps four digits (separating a typed `0042` from `42`), minute/second keep two — the same split `Intl.DateTimeFormat` draws between `numeric` and `2-digit`.
+     * Whether a one-digit month, day, or hour renders zero-padded (`05` rather than `5`).
      * @default true
      */
     shouldForceLeadingZeros: boolean;
@@ -159,36 +121,17 @@ export declare class SkdxDateField extends SkdxDateField_base {
     protected firstUpdated(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * The `Date` a set of segment values describes, or `null` while any is
-     * untyped. Completeness must be checked before converting: `valuesToDate`
-     * defaults an untyped hour to 0, which would otherwise look committed.
-     */
     private dateOf;
-    /**
-     * Re-seeds the segments whenever the committed date changes from outside
-     * this field's own typing. Values already describing the committed date
-     * are left alone, so a mid-entry keystroke isn't rewritten under the caret
-     * — and an incomplete field stays alone on `null`.
-     */
     private syncSegments;
     /** Which bound the current date crosses, or `null` while it is in range. */
     private get rangeViolation();
     private syncFormState;
-    /**
-     * Restores the date the `value` attribute declared, falling back to the
-     * `Date` first rendered with when there's no attribute. Fires no
-     * `value-change`, like a native reset.
-     */
+    /** Restores the date the `value` attribute declared, or the first-rendered `Date` otherwise. Fires no `value-change`. */
     formResetCallback(): void;
-    /**
-     * @internal Commits `next` as `value` and dispatches `value-change`
-     * synchronously rather than via Lit's async `updated()` lifecycle, so a
-     * listener right after a keystroke sees it without awaiting a render.
-     */
+    /** @internal Commits `next` as `value` and dispatches `value-change` synchronously. */
     setValue(next: Date | null): void;
     private readonly handleValuesChange;
-    render(): import("lit").TemplateResult;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/date-field/DateField.js

@@ -1 +1 @@
-var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(n,s,e,r)=>{for(var i=r>1?void 0:r?v(s,e):s,u=n.length-1,o;u>=0;u--)(o=n[u])&&(i=(r?o(s,e,i):o(i))||i);return r&&i&&c(s,e,i),i};import{LitElement as d}from"lit";import{property as l,state as p}from"lit/decorators.js";import{FIELD_CONTROL_ATTRIBUTE as g}from"../field/field-core.js";import{buildSegments as y,dateRangeViolation as f,dateToFormValue as b,dateToValues as V,isComplete as T,parseDateFormValue as C,resolveHourCycle as D,valuesToDate as L}from"../internal/date-segments.js";import{toDate as m}from"../internal/date-value.js";import{customElement as P}from"../internal/define.js";import{FormAssociated as q}from"../internal/form-associated.js";import{optOutBoolean as S}from"../internal/positioning.js";import{renderSegmentedField as _}from"../internal/segmented-field.js";import{installLightDomStyles as E}from"../internal/styles.js";var h={fromAttribute(n){return n===null?null:m(n,"a date attribute")},toAttribute(){}},t=class extends q(d){constructor(){super(...arguments);this._value=null;this._minDate=null;this.maxDate=null;this.granularity="day";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.shouldForceLeadingZeros=!0;this.values={};this.buffer={current:0};this.defaultValue=null;this.handleValuesChange=e=>{this.values=e;let r=this.dateOf(e),i=this.value?this.value.getTime():null;(r?r.getTime():null)!==i&&this.setValue(r)}}get value(){return this._value}set value(e){let r=this._value;this._value=m(e,"value"),this.requestUpdate("value",r)}get minDate(){return this._minDate}set minDate(e){let r=this._minDate;this._minDate=m(e,"minDate"),this.requestUpdate("minDate",r)}get cycle(){return D(this.locale,this.hourCycle)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),E(),this.setAttribute(g,"")}firstUpdated(){this.defaultValue=this.value,this.syncFormState()}willUpdate(e){(e.has("value")||e.has("hourCycle")||e.has("locale"))&&this.syncSegments()}updated(e){(e.has("value")||e.has("required")||e.has("granularity")||e.has("minDate")||e.has("maxDate"))&&this.syncFormState()}dateOf(e){return T(y({kind:"date",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?L(e,this.cycle):null}syncSegments(){let e=this.cycle,r=this.value?this.value.getTime():null,i=this.dateOf(this.values);if(r===null){i!==null&&(this.values={});return}i!==null&&i.getTime()===r||(this.values=V(new Date(r),e))}get rangeViolation(){return f(this.value,this.granularity,this.minDate??void 0,this.maxDate??void 0)}syncFormState(){this.setFormValue(this.value?b(this.value,this.granularity):"");let e=this.querySelector("[data-segment]");if(this.required&&this.value===null){this.setValueMissing(!0,"Please enter a date.",e);return}let r=this.rangeViolation;this.setRangeViolation(r,r==="underflow"?"Please pick a later date.":"Please pick an earlier date.",e)}formResetCallback(){let e=this.getAttribute("value");this.value=e===null?this.defaultValue:C(e)}setValue(e){this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0}))}render(){return _({host:this,kind:"date",part:"date-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,shouldForceLeadingZeros:this.shouldForceLeadingZeros,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid||this.rangeViolation!==null||this.value!==null&&(this.isDateUnavailable?.(this.value)??!1),required:this.required,buffer:this.buffer,onValuesChange:this.handleValuesChange})}};a([l({converter:h})],t.prototype,"value",1),a([l({converter:h,attribute:"min-date"})],t.prototype,"minDate",1),a([l({converter:h,attribute:"max-date"})],t.prototype,"maxDate",2),a([l({type:String,reflect:!0})],t.prototype,"granularity",2),a([l({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),a([l({type:String})],t.prototype,"locale",2),a([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),a([l({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),a([l({attribute:!1})],t.prototype,"isDateUnavailable",2),a([l({type:Boolean,reflect:!0})],t.prototype,"invalid",2),a([l({type:Boolean,reflect:!0})],t.prototype,"required",2),a([l({type:String,reflect:!0})],t.prototype,"name",2),a([l({attribute:"required-message"})],t.prototype,"requiredMessage",2),a([l({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),a([l({attribute:!1})],t.prototype,"getSegmentLabel",2),a([l({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),a([l({attribute:!1})],t.prototype,"getSegmentPlaceholder",2),a([l({converter:S,attribute:"should-force-leading-zeros"})],t.prototype,"shouldForceLeadingZeros",2),a([p()],t.prototype,"values",2),t=a([P("skdx-date-field","date-field","root")],t);export{t as SkdxDateField};
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(n,s,e,r)=>{for(var i=r>1?void 0:r?p(s,e):s,u=n.length-1,o;u>=0;u--)(o=n[u])&&(i=(r?o(s,e,i):o(i))||i);return r&&i&&c(s,e,i),i};import{LitElement as v}from"lit";import{property as l,state as d}from"lit/decorators.js";import{buildSegments as g,dateRangeViolation as y,dateToFormValue as f,dateToValues as b,isComplete as V,parseDateFormValue as T,resolveHourCycle as C,valuesToDate as L}from"../internal/date-segments.js";import{toDate as m}from"../internal/date-value.js";import{customElement as D}from"../internal/define.js";import{emit as P}from"../internal/events.js";import{FIELD_CONTROL_ATTRIBUTE as R}from"../internal/field-core.js";import{FormAssociated as q}from"../internal/form-associated.js";import{installLightDomStyles as S}from"../internal/light-dom-styles.js";import{optOutBoolean as _}from"../internal/positioning.js";import{renderSegmentedField as O}from"../internal/segmented-field.js";var h={fromAttribute(n){return n===null?null:m(n,"a date attribute")},toAttribute(){}},t=class extends q(v){constructor(){super(...arguments);this._value=null;this._minDate=null;this.maxDate=null;this.granularity="day";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.shouldForceLeadingZeros=!0;this.values={};this.buffer={current:0};this.defaultValue=null;this.handleValuesChange=e=>{this.values=e;let r=this.dateOf(e),i=this.value?this.value.getTime():null;(r?r.getTime():null)!==i&&this.setValue(r)}}get value(){return this._value}set value(e){let r=this._value;this._value=m(e,"value"),this.requestUpdate("value",r)}get minDate(){return this._minDate}set minDate(e){let r=this._minDate;this._minDate=m(e,"minDate"),this.requestUpdate("minDate",r)}get cycle(){return C(this.locale,this.hourCycle)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),S(),this.setAttribute(R,"")}firstUpdated(){this.defaultValue=this.value,this.syncFormState()}willUpdate(e){(e.has("value")||e.has("hourCycle")||e.has("locale"))&&this.syncSegments()}updated(e){(e.has("value")||e.has("required")||e.has("granularity")||e.has("minDate")||e.has("maxDate"))&&this.syncFormState()}dateOf(e){return V(g({kind:"date",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?L(e,this.cycle):null}syncSegments(){let e=this.cycle,r=this.value?this.value.getTime():null,i=this.dateOf(this.values);if(r===null){i!==null&&(this.values={});return}i!==null&&i.getTime()===r||(this.values=b(new Date(r),e))}get rangeViolation(){return y(this.value,this.granularity,this.minDate??void 0,this.maxDate??void 0)}syncFormState(){this.setFormValue(this.value?f(this.value,this.granularity):"");let e=this.querySelector("[data-segment]");if(this.required&&this.value===null){this.setValueMissing(!0,"Please enter a date.",e);return}let r=this.rangeViolation;this.setRangeViolation(r,r==="underflow"?"Please pick a later date.":"Please pick an earlier date.",e)}formResetCallback(){let e=this.getAttribute("value");this.value=e===null?this.defaultValue:T(e)}setValue(e){this.value=e,P(this,"value-change",e)}render(){return O({host:this,kind:"date",part:"date-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,shouldForceLeadingZeros:this.shouldForceLeadingZeros,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid||this.rangeViolation!==null||this.value!==null&&(this.isDateUnavailable?.(this.value)??!1),required:this.required,buffer:this.buffer,onValuesChange:this.handleValuesChange})}};a([l({converter:h})],t.prototype,"value",1),a([l({converter:h,attribute:"min-date"})],t.prototype,"minDate",1),a([l({converter:h,attribute:"max-date"})],t.prototype,"maxDate",2),a([l({type:String,reflect:!0})],t.prototype,"granularity",2),a([l({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),a([l({type:String})],t.prototype,"locale",2),a([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),a([l({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),a([l({attribute:!1})],t.prototype,"isDateUnavailable",2),a([l({type:Boolean,reflect:!0})],t.prototype,"invalid",2),a([l({type:Boolean,reflect:!0})],t.prototype,"required",2),a([l({type:String,reflect:!0})],t.prototype,"name",2),a([l({attribute:"required-message"})],t.prototype,"requiredMessage",2),a([l({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),a([l({attribute:!1})],t.prototype,"getSegmentLabel",2),a([l({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),a([l({attribute:!1})],t.prototype,"getSegmentPlaceholder",2),a([l({converter:_,attribute:"should-force-leading-zeros"})],t.prototype,"shouldForceLeadingZeros",2),a([d()],t.prototype,"values",2),t=a([D("skdx-date-field","date-field","root")],t);export{t as SkdxDateField};

package/dist/date-picker/DatePicker.cjs

@@ -1,5 +1,5 @@
-"use strict";var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var w=(i,n)=>{for(var e in n)h(i,e,{get:n[e],enumerable:!0})},I=(i,n,e,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of A(n))!E.call(i,l)&&l!==e&&h(i,l,{get:()=>n[l],enumerable:!(o=g(n,l))||o.enumerable});return i};var M=i=>I(h({},"__esModule",{value:!0}),i),a=(i,n,e,o)=>{for(var l=o>1?void 0:o?g(n,e):n,f=i.length-1,m;f>=0;f--)(m=i[f])&&(l=(o?m(n,e,l):m(l))||l);return o&&l&&h(n,e,l),l};var F={};w(F,{SkdxDatePicker:()=>t});module.exports=M(F);var u=require("lit"),r=require("lit/decorators.js"),d=require("../calendar/Calendar.cjs"),c=require("../internal/authored.cjs"),p=require("../internal/date-value.cjs"),C=require("../internal/define.cjs"),b=require("../internal/form-associated.cjs"),v=require("../internal/ids.cjs"),V=require("../internal/open-change-complete.cjs"),s=require("./DatePickerAnatomy.cjs");var y={fromAttribute(i){if(i!==null)return(0,p.toCalendarValue)(i,"single","value")},toAttribute(){}},t=class extends(0,b.FormAssociated)(u.LitElement){constructor(){super(...arguments);this.selectionMode="single";this.granularity="day";this.open=!1;this.disabled=!1;this.closeOnSelect=!0;this.readOnly=!1;this.invalid=!1;this.required=!1;this.placeholder="Select date";this.showInput=!1;this.contentId=(0,v.nextId)("skdx-date-picker-content");this.triggerId=(0,v.nextId)("skdx-date-picker-trigger");this.hasDefaultValue=!1;this.triggerHost=null;this.contentEl=null;this.hasUpdatedOnce=!1;this._anatomyFilledFor="";this.fillAnatomy=()=>{if((0,c.hasAuthoredContent)(this,s.DATE_PICKER_ANATOMY_GENERATED)){(0,c.removeGeneratedContent)(this,s.DATE_PICKER_ANATOMY_GENERATED),this._anatomyFilledFor="";return}let e=String(this.showInput);(e!==this._anatomyFilledFor||this.children.length===0)&&(this._anatomyFilledFor=e,(0,s.fillDatePickerAnatomy)(this,this.showInput)),(0,s.updateDatePickerTriggerLabel)(this,this.placeholder,this.locale)}}get value(){return this._value}set value(e){let o=this._value;this._value=(0,p.toCalendarValue)(e,"single","value"),this.requestUpdate("value",o)}get valueAsString(){return(0,p.toCalendarString)(this.value)}setValue(e){this.value!==e&&(this.value=e,this.emit("value-change",e))}setOpen(e){this.open!==e&&(this.open=e,this.emit("open-change",e))}emit(e,o){this.dispatchEvent(new CustomEvent(e,{detail:o,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("skdx-date-picker-internal-update",{bubbles:!0,composed:!0})),this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.hasDefaultValue||(this.defaultValue=this.value,this.hasDefaultValue=!0);let e=this.querySelector("skdx-date-picker-content")?.id;e&&(this.contentId=e),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}willUpdate(e){(e.has("value")||e.has("selectionMode"))&&this.selectionMode==="multiple"&&this.value instanceof Date&&(this.value=[this.value])}updated(e){let o=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.fillAnatomy(),(e.has("value")||e.has("required"))&&this.syncFormState(),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-date-picker-internal-update",{bubbles:!0,composed:!0})),e.has("open")&&!o&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,V.notifyOpenChangeComplete)(()=>this.contentEl,this.open,l=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:l,bubbles:!0,composed:!0}))))}selectedDates(){let e=this.value;return e?Array.isArray(e)?e:(0,d.isDateRange)(e)?e.end===null?[]:[e.start,e.end]:[e]:[]}syncFormState(){let e=this.selectedDates();this.setFormValue(e.length===0?"":this.value instanceof Date?(0,d.toISODateString)(this.value):this.multiFormValue(e.map(d.toISODateString))),this.setValueMissing(this.required&&e.length===0,"Please select a date.",this.triggerHost?.shadowRoot?.querySelector("button"))}formResetCallback(){let e=this.getAttribute("value");this.value=e===null?this.defaultValue:y.fromAttribute(e)}render(){return u.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=u.css`
+"use strict";var p=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var E=(o,a)=>{for(var e in a)p(o,e,{get:a[e],enumerable:!0})},O=(o,a,e,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of I(a))!M.call(o,n)&&n!==e&&p(o,n,{get:()=>a[n],enumerable:!(r=C(a,n))||r.enumerable});return o};var _=o=>O(p({},"__esModule",{value:!0}),o),i=(o,a,e,r)=>{for(var n=r>1?void 0:r?C(a,e):a,m=o.length-1,c;m>=0;m--)(c=o[m])&&(n=(r?c(a,e,n):c(n))||n);return r&&n&&p(a,e,n),n};var w={};E(w,{SkdxDatePicker:()=>t});module.exports=_(w);var u=require("lit"),l=require("lit/decorators.js"),d=require("../calendar/Calendar.cjs"),f=require("../internal/authored.cjs"),q=require("../internal/date-segments.cjs"),h=require("../internal/date-value.cjs"),b=require("../internal/define.cjs"),v=require("../internal/events.cjs"),A=require("../internal/form-associated.cjs"),g=require("../internal/ids.cjs"),F=require("../internal/open-change-complete.cjs"),s=require("./DatePickerAnatomy.cjs"),y=require("./family.cjs");var V={fromAttribute(o){if(o!==null)return(0,h.toCalendarValue)(o,"single","value")},toAttribute(){}},t=class extends(0,A.FormAssociated)(u.LitElement){constructor(){super(...arguments);this.selectionMode="single";this.granularity="day";this.open=!1;this.disabled=!1;this.closeOnSelect=!0;this.readOnly=!1;this.invalid=!1;this.required=!1;this.placeholder="Select date";this.showInput=!1;this.contentId=(0,g.nextId)("skdx-date-picker-content");this.triggerId=(0,g.nextId)("skdx-date-picker-trigger");this.hasDefaultValue=!1;this.triggerHost=null;this.contentEl=null;this.hasUpdatedOnce=!1;this._anatomyFilledFor="";this.fillAnatomy=()=>{if((0,f.hasAuthoredContent)(this,s.DATE_PICKER_ANATOMY_GENERATED)){(0,f.removeGeneratedContent)(this,s.DATE_PICKER_ANATOMY_GENERATED),this._anatomyFilledFor="";return}let e=String(this.showInput);(e!==this._anatomyFilledFor||this.children.length===0)&&(this._anatomyFilledFor=e,(0,s.fillDatePickerAnatomy)(this,this.showInput)),(0,s.updateDatePickerTriggerLabel)(this,this.placeholder,this.locale)}}get value(){return this._value}set value(e){let r=this._value;this._value=(0,h.toCalendarValue)(e,"single","value"),this.requestUpdate("value",r)}get valueAsString(){return(0,h.toCalendarString)(this.value)}setValue(e){this.value!==e&&(this.value=e,this.emit("value-change",e))}setOpen(e){this.disabled&&e||this.open!==e&&(this.open=e,this.emit("open-change",e))}emit(e,r){(0,v.emit)(this,e,r),y.DATE_PICKER_FAMILY.notify(this),this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.hasDefaultValue||(this.defaultValue=this.value,this.hasDefaultValue=!0);let e=this.querySelector("skdx-date-picker-content")?.id;e&&(this.contentId=e),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}willUpdate(e){this.disabled&&this.open&&(this.open=!1),(e.has("value")||e.has("selectionMode"))&&this.selectionMode==="multiple"&&this.value instanceof Date&&(this.value=[this.value])}updated(e){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.fillAnatomy(),(e.has("value")||e.has("required"))&&this.syncFormState(),e.size>0&&y.DATE_PICKER_FAMILY.notify(this),e.has("open")&&!r&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,F.notifyOpenChangeComplete)(()=>this.contentEl,this.open,n=>(0,v.emit)(this,"open-change-complete",n)))}selectedDates(){let e=this.value;return e?Array.isArray(e)?e:(0,d.isDateRange)(e)?e.end===null?[]:[e.start,e.end]:[e]:[]}syncFormState(){let e=this.selectedDates(),r="";this.value instanceof Date?r=(0,d.toISODateString)(this.value):e.length>0&&(r=this.multiFormValue(e.map(d.toISODateString))),this.setFormValue(r),this.setValueMissing(this.required&&e.length===0,"Please select a date.",this.triggerHost?.shadowRoot?.querySelector("button")??this.triggerHost??void 0)}formResetCallback(){let e=this.getAttribute("value");this.value=e===null?this.defaultValue:V.fromAttribute(e)}render(){return u.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=u.css`
     :host {
       display: contents;
     }
-  `,a([(0,r.property)({type:String,reflect:!0,attribute:"selection-mode"})],t.prototype,"selectionMode",2),a([(0,r.property)({converter:y})],t.prototype,"value",1),a([(0,r.property)({type:String,reflect:!0})],t.prototype,"granularity",2),a([(0,r.property)({type:Boolean,reflect:!0})],t.prototype,"open",2),a([(0,r.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),a([(0,r.property)({attribute:"close-on-select",converter:{fromAttribute:e=>e!=="false",toAttribute:e=>e?"true":"false"}})],t.prototype,"closeOnSelect",2),a([(0,r.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),a([(0,r.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),a([(0,r.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),a([(0,r.property)({type:String,reflect:!0})],t.prototype,"name",2),a([(0,r.property)({type:String,attribute:"form",reflect:!0})],t.prototype,"formId",2),a([(0,r.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),a([(0,r.property)({type:String})],t.prototype,"placeholder",2),a([(0,r.property)({type:String})],t.prototype,"locale",2),a([(0,r.property)({type:Boolean,reflect:!0,attribute:"show-input"})],t.prototype,"showInput",2),t=a([(0,C.customElement)("skdx-date-picker")],t);0&&(module.exports={SkdxDatePicker});
+  `,i([(0,l.property)({type:String,reflect:!0,attribute:"selection-mode"})],t.prototype,"selectionMode",2),i([(0,l.property)({converter:V})],t.prototype,"value",1),i([(0,l.property)({type:String,reflect:!0})],t.prototype,"granularity",2),i([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"open",2),i([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([(0,l.property)({attribute:"close-on-select",converter:{fromAttribute:e=>e!=="false",toAttribute:e=>e?"true":"false"}})],t.prototype,"closeOnSelect",2),i([(0,l.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([(0,l.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),i([(0,l.property)({type:String,reflect:!0})],t.prototype,"name",2),i([(0,l.property)({type:String,attribute:"form",reflect:!0})],t.prototype,"formId",2),i([(0,l.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([(0,l.property)({type:String})],t.prototype,"placeholder",2),i([(0,l.property)({type:String})],t.prototype,"locale",2),i([(0,l.property)({type:Boolean,reflect:!0,attribute:"show-input"})],t.prototype,"showInput",2),t=i([(0,b.customElement)("skdx-date-picker")],t);0&&(module.exports={SkdxDatePicker});