@skdx/web-components 0.28.0 → 0.30.0

package/dist/date-picker/DatePicker.d.cts

@@ -1,29 +1,11 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import { type CalendarSelectionMode, type CalendarValue, type CalendarValueInput } from '../calendar/Calendar.cjs';
 import { type Granularity } from '../internal/date-segments.cjs';
-declare const SkdxDatePicker_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+declare const SkdxDatePicker_base: typeof LitElement & (new (...args: any[]) => import("../index.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-date-picker>` — the Web Components implementation of the shared
- * DatePicker contract (`@skdx/shared`'s `datePickerContract`), composing
- * `<skdx-select>`'s popup machinery with `<skdx-calendar>`'s date grid.
- * Renders no box of its own (`display: contents`); owns `value`/`open` state
- * and exposes it to descendant `<skdx-date-picker-*>` parts via
- * `closest('skdx-date-picker')`.
- *
- * Form-associated via `ElementInternals`: with a `name`, the selection
- * submits as local-time `YYYY-MM-DD` strings like `<input type="date">` —
- * one entry in `single`, one per date in `multiple`, start then end in
- * `range`. Empty selection submits an empty entry and is `valueMissing`
- * when `required`; a range still anchored on its start counts as nothing
- * selected.
- *
- * Given no light-DOM children, draws its own canonical anatomy — a trigger
- * and a portalled popup holding the calendar (`DatePickerAnatomy.ts`) — out
- * of the same `<skdx-date-picker-*>` elements you would otherwise compose by
- * hand. Any authored children replace it entirely.
- *
+ * `<skdx-date-picker>` — composes `<skdx-select>`'s popup machinery with `<skdx-calendar>`'s date grid.
  * @example
  * ```html
  * <skdx-date-picker></skdx-date-picker>
@@ -36,18 +18,12 @@ declare const SkdxDatePicker_base: typeof LitElement & (new (...args: any[]) =>
 export declare class SkdxDatePicker extends SkdxDatePicker_base {
     static styles: import("lit").CSSResult;
     /**
-     * How many dates can be selected at once, forwarded to `<skdx-calendar>`;
-     * also decides auto-close timing: immediate in `single`, on range-close in
-     * `range`, never in `multiple`.
+     * How many dates can be selected at once, forwarded to `<skdx-calendar>`.
      * @default 'single'
      */
     selectionMode: CalendarSelectionMode;
     /**
-     * Current selection, shaped by `selectionMode`. The property carries
-     * `Date`s; the attribute carries the same local `YYYY-MM-DD` wire form the
-     * picker submits — `2024-01-05` (single), `2024-01-05,2024-01-08`
-     * (multiple), `2024-01-05/2024-01-08` (range, trailing `/` anchored on its
-     * start). Listen for `value-change`; {@link valueAsString} reads it back.
+     * Current selection, shaped by `selectionMode`; listen for `value-change`, or read {@link valueAsString} back.
      * @default undefined — nothing selected, `valueAsString` is `null`, and the
      * picker submits an empty entry (and is `valueMissing` when `required`).
      */
@@ -55,10 +31,7 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     set value(next: CalendarValueInput | undefined);
     private _value?;
     /**
-     * How far down the selection is editable, forwarded to
-     * `<skdx-date-picker-input>` and `<skdx-date-picker-time-field>`. Anything past
-     * `day` is date-time mode, and in that mode the popup does **not** auto-close
-     * on a calendar selection — the user still has to set the time.
+     * How far down the selection is editable, forwarded to the picker's input and time-field parts.
      * @default 'day'
      */
     granularity: Granularity;
@@ -68,7 +41,6 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     disabled: boolean;
     /**
      * Closes popup on selection in `single`/`range` only; ignored past `granularity="day"`.
-     * Parsed as string; only literal `"false"` is falsy.
      * @default true
      */
     closeOnSelect: boolean;
@@ -87,21 +59,12 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     /** Name used as the `FormData` entry key when the picker is inside a `<form>`. @default undefined */
     name?: string;
     /**
-     * Id of the `<form>` this picker submits into, letting it live outside the
-     * form it belongs to. The property is `formId`, not `form` — `form` is
-     * reserved for the platform's own readonly `HTMLFormElement` accessor
-     * (`FormAssociated`'s getter over `ElementInternals.form`); the `form`
-     * content attribute is read natively by the browser's form-owner
-     * algorithm, so no implementation is needed here.
+     * Id of the `<form>` this picker submits into, letting it live outside the form it belongs to.
      * @default undefined — the picker submits into its nearest ancestor form.
      */
     formId?: string;
     /**
-     * Replaces the message the browser shows when a `required` picker is
-     * submitted with no date chosen. Sealed inside the shadow root otherwise, so
-     * this is the only way to translate it or to name the date ("Please pick a
-     * check-in date."). A range picker in particular usually wants its own
-     * wording.
+     * Replaces the browser's validation message for a `required` picker with no date chosen.
      * @default undefined — keeps `'Please select a date.'`
      */
     requiredMessage?: string;
@@ -121,14 +84,9 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
      * @default false
      */
     showInput: boolean;
-    /**
-     * The current selection as the same wire string the `value` attribute
-     * takes and the form submits — `null` while nothing is selected. Reachable
-     * from a `value-change` listener as `event.target.valueAsString`; kept off
-     * the event detail so the payload stays the same `Date`-shaped selection
-     * every other framework's change callback receives.
-     */
+    /** The current selection as the same wire string the `value` attribute and form submission use, or `null`. */
     get valueAsString(): string | null;
+    /** @internal Generated popup id, published as aria-controls on the trigger. */
     contentId: string;
     /**
      * Id the trigger takes unless the consumer gave it one, so
@@ -152,11 +110,6 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     connectedCallback(): void;
     /** The `show-input` the generated anatomy was last built for; `''` while nothing has been generated. */
     private _anatomyFilledFor;
-    /**
-     * Draws the canonical anatomy into the light DOM when this element has no
-     * consumer-authored content — "simple by default" — and hands it straight
-     * back once real content arrives. See `DatePickerAnatomy.ts`.
-     */
     private readonly fillAnatomy;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
@@ -166,7 +119,7 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     private syncFormState;
     /** Restores the `value` attribute's selection, falling back to the value the picker was connected with. Fires no `value-change`, like a native reset. */
     formResetCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/date-picker/DatePicker.d.ts

@@ -1,29 +1,11 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import { type CalendarSelectionMode, type CalendarValue, type CalendarValueInput } from '../calendar/Calendar.js';
 import { type Granularity } from '../internal/date-segments.js';
-declare const SkdxDatePicker_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+declare const SkdxDatePicker_base: typeof LitElement & (new (...args: any[]) => import("../index.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-date-picker>` — the Web Components implementation of the shared
- * DatePicker contract (`@skdx/shared`'s `datePickerContract`), composing
- * `<skdx-select>`'s popup machinery with `<skdx-calendar>`'s date grid.
- * Renders no box of its own (`display: contents`); owns `value`/`open` state
- * and exposes it to descendant `<skdx-date-picker-*>` parts via
- * `closest('skdx-date-picker')`.
- *
- * Form-associated via `ElementInternals`: with a `name`, the selection
- * submits as local-time `YYYY-MM-DD` strings like `<input type="date">` —
- * one entry in `single`, one per date in `multiple`, start then end in
- * `range`. Empty selection submits an empty entry and is `valueMissing`
- * when `required`; a range still anchored on its start counts as nothing
- * selected.
- *
- * Given no light-DOM children, draws its own canonical anatomy — a trigger
- * and a portalled popup holding the calendar (`DatePickerAnatomy.ts`) — out
- * of the same `<skdx-date-picker-*>` elements you would otherwise compose by
- * hand. Any authored children replace it entirely.
- *
+ * `<skdx-date-picker>` — composes `<skdx-select>`'s popup machinery with `<skdx-calendar>`'s date grid.
  * @example
  * ```html
  * <skdx-date-picker></skdx-date-picker>
@@ -36,18 +18,12 @@ declare const SkdxDatePicker_base: typeof LitElement & (new (...args: any[]) =>
 export declare class SkdxDatePicker extends SkdxDatePicker_base {
     static styles: import("lit").CSSResult;
     /**
-     * How many dates can be selected at once, forwarded to `<skdx-calendar>`;
-     * also decides auto-close timing: immediate in `single`, on range-close in
-     * `range`, never in `multiple`.
+     * How many dates can be selected at once, forwarded to `<skdx-calendar>`.
      * @default 'single'
      */
     selectionMode: CalendarSelectionMode;
     /**
-     * Current selection, shaped by `selectionMode`. The property carries
-     * `Date`s; the attribute carries the same local `YYYY-MM-DD` wire form the
-     * picker submits — `2024-01-05` (single), `2024-01-05,2024-01-08`
-     * (multiple), `2024-01-05/2024-01-08` (range, trailing `/` anchored on its
-     * start). Listen for `value-change`; {@link valueAsString} reads it back.
+     * Current selection, shaped by `selectionMode`; listen for `value-change`, or read {@link valueAsString} back.
      * @default undefined — nothing selected, `valueAsString` is `null`, and the
      * picker submits an empty entry (and is `valueMissing` when `required`).
      */
@@ -55,10 +31,7 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     set value(next: CalendarValueInput | undefined);
     private _value?;
     /**
-     * How far down the selection is editable, forwarded to
-     * `<skdx-date-picker-input>` and `<skdx-date-picker-time-field>`. Anything past
-     * `day` is date-time mode, and in that mode the popup does **not** auto-close
-     * on a calendar selection — the user still has to set the time.
+     * How far down the selection is editable, forwarded to the picker's input and time-field parts.
      * @default 'day'
      */
     granularity: Granularity;
@@ -68,7 +41,6 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     disabled: boolean;
     /**
      * Closes popup on selection in `single`/`range` only; ignored past `granularity="day"`.
-     * Parsed as string; only literal `"false"` is falsy.
      * @default true
      */
     closeOnSelect: boolean;
@@ -87,21 +59,12 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     /** Name used as the `FormData` entry key when the picker is inside a `<form>`. @default undefined */
     name?: string;
     /**
-     * Id of the `<form>` this picker submits into, letting it live outside the
-     * form it belongs to. The property is `formId`, not `form` — `form` is
-     * reserved for the platform's own readonly `HTMLFormElement` accessor
-     * (`FormAssociated`'s getter over `ElementInternals.form`); the `form`
-     * content attribute is read natively by the browser's form-owner
-     * algorithm, so no implementation is needed here.
+     * Id of the `<form>` this picker submits into, letting it live outside the form it belongs to.
      * @default undefined — the picker submits into its nearest ancestor form.
      */
     formId?: string;
     /**
-     * Replaces the message the browser shows when a `required` picker is
-     * submitted with no date chosen. Sealed inside the shadow root otherwise, so
-     * this is the only way to translate it or to name the date ("Please pick a
-     * check-in date."). A range picker in particular usually wants its own
-     * wording.
+     * Replaces the browser's validation message for a `required` picker with no date chosen.
      * @default undefined — keeps `'Please select a date.'`
      */
     requiredMessage?: string;
@@ -121,14 +84,9 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
      * @default false
      */
     showInput: boolean;
-    /**
-     * The current selection as the same wire string the `value` attribute
-     * takes and the form submits — `null` while nothing is selected. Reachable
-     * from a `value-change` listener as `event.target.valueAsString`; kept off
-     * the event detail so the payload stays the same `Date`-shaped selection
-     * every other framework's change callback receives.
-     */
+    /** The current selection as the same wire string the `value` attribute and form submission use, or `null`. */
     get valueAsString(): string | null;
+    /** @internal Generated popup id, published as aria-controls on the trigger. */
     contentId: string;
     /**
      * Id the trigger takes unless the consumer gave it one, so
@@ -152,11 +110,6 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     connectedCallback(): void;
     /** The `show-input` the generated anatomy was last built for; `''` while nothing has been generated. */
     private _anatomyFilledFor;
-    /**
-     * Draws the canonical anatomy into the light DOM when this element has no
-     * consumer-authored content — "simple by default" — and hands it straight
-     * back once real content arrives. See `DatePickerAnatomy.ts`.
-     */
     private readonly fillAnatomy;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
@@ -166,7 +119,7 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     private syncFormState;
     /** Restores the `value` attribute's selection, falling back to the value the picker was connected with. Fires no `value-change`, like a native reset. */
     formResetCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/date-picker/DatePicker.js

@@ -1,5 +1,5 @@
-var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(i,o,e,n)=>{for(var l=n>1?void 0:n?v(o,e):o,s=i.length-1,u;s>=0;s--)(u=i[s])&&(l=(n?u(o,e,l):u(l))||l);return n&&l&&m(o,e,l),l};import{css as g,html as y,LitElement as C}from"lit";import{property as r}from"lit/decorators.js";import{isDateRange as b,toISODateString as d}from"../calendar/Calendar.js";import{hasAuthoredContent as V,removeGeneratedContent as A}from"../internal/authored.js";import{toCalendarString as E,toCalendarValue as f}from"../internal/date-value.js";import{customElement as w}from"../internal/define.js";import{FormAssociated as I}from"../internal/form-associated.js";import{nextId as p}from"../internal/ids.js";import{notifyOpenChangeComplete as M}from"../internal/open-change-complete.js";import{DATE_PICKER_ANATOMY_GENERATED as h,fillDatePickerAnatomy as F,updateDatePickerTriggerLabel as O}from"./DatePickerAnatomy.js";var c={fromAttribute(i){if(i!==null)return f(i,"single","value")},toAttribute(){}},t=class extends I(C){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=p("skdx-date-picker-content");this.triggerId=p("skdx-date-picker-trigger");this.hasDefaultValue=!1;this.triggerHost=null;this.contentEl=null;this.hasUpdatedOnce=!1;this._anatomyFilledFor="";this.fillAnatomy=()=>{if(V(this,h)){A(this,h),this._anatomyFilledFor="";return}let e=String(this.showInput);(e!==this._anatomyFilledFor||this.children.length===0)&&(this._anatomyFilledFor=e,F(this,this.showInput)),O(this,this.placeholder,this.locale)}}get value(){return this._value}set value(e){let n=this._value;this._value=f(e,"single","value"),this.requestUpdate("value",n)}get valueAsString(){return E(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,n){this.dispatchEvent(new CustomEvent(e,{detail:n,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 n=!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")&&!n&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=M(()=>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:b(e)?e.end===null?[]:[e.start,e.end]:[e]:[]}syncFormState(){let e=this.selectedDates();this.setFormValue(e.length===0?"":this.value instanceof Date?d(this.value):this.multiFormValue(e.map(d))),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:c.fromAttribute(e)}render(){return y`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=g`
+var g=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var r=(n,o,e,l)=>{for(var a=l>1?void 0:l?y(o,e):o,s=n.length-1,u;s>=0;s--)(u=n[s])&&(a=(l?u(o,e,a):u(a))||a);return l&&a&&g(o,e,a),a};import{css as C,html as V,LitElement as b}from"lit";import{property as i}from"lit/decorators.js";import{isDateRange as A,toISODateString as d}from"../calendar/Calendar.js";import{hasAuthoredContent as F,removeGeneratedContent as I}from"../internal/authored.js";import"../internal/date-segments.js";import{toCalendarString as M,toCalendarValue as v}from"../internal/date-value.js";import{customElement as E}from"../internal/define.js";import{emit as h}from"../internal/events.js";import{FormAssociated as O}from"../internal/form-associated.js";import{nextId as p}from"../internal/ids.js";import{notifyOpenChangeComplete as _}from"../internal/open-change-complete.js";import{DATE_PICKER_ANATOMY_GENERATED as f,fillDatePickerAnatomy as w,updateDatePickerTriggerLabel as T}from"./DatePickerAnatomy.js";import{DATE_PICKER_FAMILY as m}from"./family.js";var c={fromAttribute(n){if(n!==null)return v(n,"single","value")},toAttribute(){}},t=class extends O(b){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=p("skdx-date-picker-content");this.triggerId=p("skdx-date-picker-trigger");this.hasDefaultValue=!1;this.triggerHost=null;this.contentEl=null;this.hasUpdatedOnce=!1;this._anatomyFilledFor="";this.fillAnatomy=()=>{if(F(this,f)){I(this,f),this._anatomyFilledFor="";return}let e=String(this.showInput);(e!==this._anatomyFilledFor||this.children.length===0)&&(this._anatomyFilledFor=e,w(this,this.showInput)),T(this,this.placeholder,this.locale)}}get value(){return this._value}set value(e){let l=this._value;this._value=v(e,"single","value"),this.requestUpdate("value",l)}get valueAsString(){return M(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,l){h(this,e,l),m.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 l=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.fillAnatomy(),(e.has("value")||e.has("required"))&&this.syncFormState(),e.size>0&&m.notify(this),e.has("open")&&!l&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=_(()=>this.contentEl,this.open,a=>h(this,"open-change-complete",a)))}selectedDates(){let e=this.value;return e?Array.isArray(e)?e:A(e)?e.end===null?[]:[e.start,e.end]:[e]:[]}syncFormState(){let e=this.selectedDates(),l="";this.value instanceof Date?l=d(this.value):e.length>0&&(l=this.multiFormValue(e.map(d))),this.setFormValue(l),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:c.fromAttribute(e)}render(){return V`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=C`
     :host {
       display: contents;
     }
-  `,a([r({type:String,reflect:!0,attribute:"selection-mode"})],t.prototype,"selectionMode",2),a([r({converter:c})],t.prototype,"value",1),a([r({type:String,reflect:!0})],t.prototype,"granularity",2),a([r({type:Boolean,reflect:!0})],t.prototype,"open",2),a([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),a([r({attribute:"close-on-select",converter:{fromAttribute:e=>e!=="false",toAttribute:e=>e?"true":"false"}})],t.prototype,"closeOnSelect",2),a([r({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),a([r({type:Boolean,reflect:!0})],t.prototype,"invalid",2),a([r({type:Boolean,reflect:!0})],t.prototype,"required",2),a([r({type:String,reflect:!0})],t.prototype,"name",2),a([r({type:String,attribute:"form",reflect:!0})],t.prototype,"formId",2),a([r({attribute:"required-message"})],t.prototype,"requiredMessage",2),a([r({type:String})],t.prototype,"placeholder",2),a([r({type:String})],t.prototype,"locale",2),a([r({type:Boolean,reflect:!0,attribute:"show-input"})],t.prototype,"showInput",2),t=a([w("skdx-date-picker")],t);export{t as SkdxDatePicker};
+  `,r([i({type:String,reflect:!0,attribute:"selection-mode"})],t.prototype,"selectionMode",2),r([i({converter:c})],t.prototype,"value",1),r([i({type:String,reflect:!0})],t.prototype,"granularity",2),r([i({type:Boolean,reflect:!0})],t.prototype,"open",2),r([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([i({attribute:"close-on-select",converter:{fromAttribute:e=>e!=="false",toAttribute:e=>e?"true":"false"}})],t.prototype,"closeOnSelect",2),r([i({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),r([i({type:Boolean,reflect:!0})],t.prototype,"invalid",2),r([i({type:Boolean,reflect:!0})],t.prototype,"required",2),r([i({type:String,reflect:!0})],t.prototype,"name",2),r([i({type:String,attribute:"form",reflect:!0})],t.prototype,"formId",2),r([i({attribute:"required-message"})],t.prototype,"requiredMessage",2),r([i({type:String})],t.prototype,"placeholder",2),r([i({type:String})],t.prototype,"locale",2),r([i({type:Boolean,reflect:!0,attribute:"show-input"})],t.prototype,"showInput",2),t=r([E("skdx-date-picker")],t);export{t as SkdxDatePicker};

package/dist/date-picker/DatePickerAnatomy.d.cts

@@ -12,9 +12,7 @@ export declare const DATE_PICKER_ANATOMY_GENERATED = "data-skdx-date-picker-gene
 /** @internal Selection as locale-specific text, or null if empty. */
 export declare function formatDatePickerSelection(value: CalendarValue | undefined, locale: string | undefined, withTime: boolean): string | null;
 /**
- * Build the canonical anatomy: trigger, portal with input/calendar/time-field.
- * The host's attributes move onto the Trigger, not the Input (which is hidden
- * when the popup closes).
+ * Builds the canonical anatomy: trigger, and a portal holding input/calendar/time-field.
  * @internal
  */
 export declare function fillDatePickerAnatomy(root: SkdxDatePicker, showInput: boolean): void;

package/dist/date-picker/DatePickerAnatomy.d.ts

@@ -12,9 +12,7 @@ export declare const DATE_PICKER_ANATOMY_GENERATED = "data-skdx-date-picker-gene
 /** @internal Selection as locale-specific text, or null if empty. */
 export declare function formatDatePickerSelection(value: CalendarValue | undefined, locale: string | undefined, withTime: boolean): string | null;
 /**
- * Build the canonical anatomy: trigger, portal with input/calendar/time-field.
- * The host's attributes move onto the Trigger, not the Input (which is hidden
- * when the popup closes).
+ * Builds the canonical anatomy: trigger, and a portal holding input/calendar/time-field.
  * @internal
  */
 export declare function fillDatePickerAnatomy(root: SkdxDatePicker, showInput: boolean): void;

package/dist/date-picker/DatePickerCalendar.cjs

@@ -1,5 +1,5 @@
-"use strict";var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var v=(i,t)=>{for(var e in t)o(i,e,{get:t[e],enumerable:!0})},C=(i,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of m(t))!p.call(i,n)&&n!==e&&o(i,n,{get:()=>t[n],enumerable:!(a=c(t,n))||a.enumerable});return i};var E=i=>C(o({},"__esModule",{value:!0}),i),r=(i,t,e,a)=>{for(var n=a>1?void 0:a?c(t,e):t,u=i.length-1,h;u>=0;u--)(h=i[u])&&(n=(a?h(t,e,n):h(n))||n);return a&&n&&o(t,e,n),n};var g={};v(g,{SkdxDatePickerCalendar:()=>l});module.exports=E(g);var d=require("lit"),s=require("lit/decorators.js"),w=require("../calendar/Calendar.cjs"),f=require("../internal/closest.cjs"),V=require("../internal/define.cjs");function y(i){return Array.isArray(i)?!1:(0,w.isDateRange)(i)?i.end!==null:i!==null}var l=class extends d.LitElement{constructor(){super(...arguments);this.root=null;this.calendarEl=null;this.handleValueChange=e=>{e.stopPropagation(),this.root?.setValue(e.detail),this.root?.closeOnSelect&&this.root.granularity==="day"&&y(e.detail)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=(0,f.closestThroughPortal)(this,"skdx-date-picker"),queueMicrotask(()=>this.wireCalendar())}disconnectedCallback(){this.calendarEl?.removeEventListener("value-change",this.handleValueChange),super.disconnectedCallback()}wireCalendar(){this.calendarEl=this.querySelector("skdx-calendar"),!(!this.calendarEl||!this.root)&&(this.calendarEl.selectionMode=this.root.selectionMode,this.calendarEl.value=this.root.value??null,this.root.readOnly&&(this.calendarEl.readOnly=!0),this.defaultView!==void 0&&(this.calendarEl.defaultView=this.defaultView),this.minView!==void 0&&(this.calendarEl.minView=this.minView),this.maxView!==void 0&&(this.calendarEl.maxView=this.maxView),this.view!==void 0&&(this.calendarEl.view=this.view),this.calendarEl.addEventListener("value-change",this.handleValueChange))}updated(e){let a=this.calendarEl;a&&(e.has("defaultView")&&this.defaultView!==void 0&&(a.defaultView=this.defaultView),e.has("minView")&&this.minView!==void 0&&(a.minView=this.minView),e.has("maxView")&&this.maxView!==void 0&&(a.maxView=this.maxView),e.has("view")&&this.view!==void 0&&(a.view=this.view))}render(){return d.html`<slot></slot>`}};l.styles=d.css`
+"use strict";var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var V=(n,i)=>{for(var o in i)c(n,o,{get:i[o],enumerable:!0})},E=(n,i,o,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of w(i))!g.call(n,r)&&r!==o&&c(n,r,{get:()=>i[r],enumerable:!(l=f(i,r))||l.enumerable});return n};var M=n=>E(c({},"__esModule",{value:!0}),n),t=(n,i,o,l)=>{for(var r=l>1?void 0:l?f(i,o):i,u=n.length-1,m;u>=0;u--)(m=n[u])&&(r=(l?m(i,o,r):m(r))||r);return l&&r&&c(i,o,r),r};var L={};V(L,{SkdxDatePickerCalendar:()=>e});module.exports=M(L);var d=require("lit"),a=require("lit/decorators.js"),p=require("../calendar/Calendar.cjs"),b=require("../internal/closest.cjs"),h=require("../internal/date-value.cjs"),v=require("../internal/define.cjs"),y=require("./family.cjs");var s={fromAttribute(n){if(n!=null)return(0,h.toDate)(n,"a date attribute")??void 0},toAttribute(){}},O=["month","defaultMonth","numberOfMonths","locale","weekStartsOn","minDate","maxDate","disabled","isDateDisabled","isDateUnavailable","weekNumbers","today","pageBehavior","outsideDaySelectable","focusedDate","defaultFocusedDate","getSelectionAnnouncement","getMonthAnnouncement","defaultView","minView","maxView","view"];function A(n){return Array.isArray(n)?!1:(0,p.isDateRange)(n)?n.end!==null:n!==null}var e=class extends d.LitElement{constructor(){super(...arguments);this.root=null;this.calendarEl=null;this.handleValueChange=o=>{o.stopPropagation(),this.root?.setValue(o.detail),this.root?.closeOnSelect&&this.root.granularity==="day"&&A(o.detail)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=(0,b.closestThroughPortal)(this,y.DATE_PICKER_FAMILY.selector),queueMicrotask(()=>this.wireCalendar())}disconnectedCallback(){this.calendarEl?.removeEventListener("value-change",this.handleValueChange),super.disconnectedCallback()}wireCalendar(){this.calendarEl=this.querySelector("skdx-calendar"),!(!this.calendarEl||!this.root)&&(this.calendarEl.selectionMode=this.root.selectionMode,this.calendarEl.value=this.root.value??null,this.forwardProps(),this.calendarEl.addEventListener("value-change",this.handleValueChange))}forwardProps(){let o=this.calendarEl;if(!o)return;let l=o;for(let r of O){let u=this[r];u!==void 0&&(l[r]=u)}(this.readOnly||this.root?.readOnly)&&(o.readOnly=!0)}updated(){this.forwardProps()}render(){return d.html`<slot></slot>`}};e.styles=d.css`
     :host {
       display: block;
     }
-  `,r([(0,s.property)({type:String})],l.prototype,"view",2),r([(0,s.property)({type:String,attribute:"default-view"})],l.prototype,"defaultView",2),r([(0,s.property)({type:String,attribute:"min-view"})],l.prototype,"minView",2),r([(0,s.property)({type:String,attribute:"max-view"})],l.prototype,"maxView",2),l=r([(0,V.customElement)("skdx-date-picker-calendar","date-picker","calendar")],l);0&&(module.exports={SkdxDatePickerCalendar});
+  `,t([(0,a.property)({type:String})],e.prototype,"view",2),t([(0,a.property)({type:String,attribute:"default-view"})],e.prototype,"defaultView",2),t([(0,a.property)({type:String,attribute:"min-view"})],e.prototype,"minView",2),t([(0,a.property)({type:String,attribute:"max-view"})],e.prototype,"maxView",2),t([(0,a.property)({converter:s})],e.prototype,"month",2),t([(0,a.property)({converter:s,attribute:"default-month"})],e.prototype,"defaultMonth",2),t([(0,a.property)({type:Number,attribute:"number-of-months"})],e.prototype,"numberOfMonths",2),t([(0,a.property)({type:String})],e.prototype,"locale",2),t([(0,a.property)({type:Number,attribute:"week-starts-on"})],e.prototype,"weekStartsOn",2),t([(0,a.property)({converter:s,attribute:"min-date"})],e.prototype,"minDate",2),t([(0,a.property)({converter:s,attribute:"max-date"})],e.prototype,"maxDate",2),t([(0,a.property)({type:Boolean})],e.prototype,"disabled",2),t([(0,a.property)({type:Boolean,attribute:"read-only"})],e.prototype,"readOnly",2),t([(0,a.property)({attribute:!1})],e.prototype,"isDateDisabled",2),t([(0,a.property)({attribute:!1})],e.prototype,"isDateUnavailable",2),t([(0,a.property)({type:Boolean,attribute:"week-numbers"})],e.prototype,"weekNumbers",2),t([(0,a.property)({converter:s})],e.prototype,"today",2),t([(0,a.property)({type:String,attribute:"page-behavior"})],e.prototype,"pageBehavior",2),t([(0,a.property)({type:Boolean,attribute:"outside-day-selectable"})],e.prototype,"outsideDaySelectable",2),t([(0,a.property)({converter:s,attribute:"focused-date"})],e.prototype,"focusedDate",2),t([(0,a.property)({converter:s,attribute:"default-focused-date"})],e.prototype,"defaultFocusedDate",2),t([(0,a.property)({attribute:!1})],e.prototype,"getSelectionAnnouncement",2),t([(0,a.property)({attribute:!1})],e.prototype,"getMonthAnnouncement",2),e=t([(0,v.customElement)("skdx-date-picker-calendar","date-picker","calendar")],e);0&&(module.exports={SkdxDatePickerCalendar});

package/dist/date-picker/DatePickerCalendar.d.cts

@@ -1,11 +1,10 @@
-import { LitElement } from 'lit';
-import { type CalendarView } from '../calendar/Calendar.cjs';
+import { LitElement, type TemplateResult } from 'lit';
+import { type CalendarPageBehavior, type CalendarValue, type CalendarView } from '../calendar/Calendar.cjs';
 /**
- * Wires nested `<skdx-calendar>` to closest `<skdx-date-picker>`'s value/mode.
- * Selecting a day sets the picker's value. Popup closes only on complete
- * selection (immediate in `single`, after second date in `range`, never in `multiple`)
- * and not before `granularity="day"` (time still to pick).
- *
+ * Wires a nested `<skdx-calendar>` to the closest `<skdx-date-picker>`'s value and selection mode.
+ * @fires month-change - First day of the newly displayed month, from the composed calendar
+ * @fires focus-change - Newly focused date, from the composed calendar
+ * @fires view-change - View now showing, from the composed calendar
  * @example
  * ```html
  * <skdx-date-picker-calendar>
@@ -35,14 +34,110 @@ export declare class SkdxDatePickerCalendar extends LitElement {
      * @default undefined — `'year'`.
      */
     maxView?: CalendarView;
+    /**
+     * Month the composed calendar displays, for controlled navigation.
+     * @default undefined — the calendar's own month.
+     */
+    month?: Date;
+    /**
+     * Month the composed calendar displays first, for uncontrolled navigation.
+     * @default undefined — the calendar's own default.
+     */
+    defaultMonth?: Date;
+    /**
+     * How many consecutive months the composed calendar renders.
+     * @default undefined — one month.
+     */
+    numberOfMonths?: number;
+    /**
+     * BCP 47 tag for the composed calendar's month and weekday names.
+     * @default undefined — the runtime's locale.
+     */
+    locale?: string;
+    /**
+     * Day of the week the grid's first column represents (0 = Sunday).
+     * @default undefined — derived from the locale.
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Earliest selectable date; earlier days render disabled.
+     * @default undefined — no lower bound.
+     */
+    minDate?: Date;
+    /**
+     * Latest selectable date; later days render disabled.
+     * @default undefined — no upper bound.
+     */
+    maxDate?: Date;
+    /**
+     * Disables every cell of the composed calendar and removes its tab stop.
+     * @default undefined — the calendar stays editable.
+     */
+    disabled?: boolean;
+    /**
+     * Makes the composed calendar non-editable, OR'd with the picker's own.
+     * @default undefined — the picker decides.
+     */
+    readOnly?: boolean;
+    /**
+     * Predicate marking individual dates unselectable, independent of the bounds.
+     * @default undefined — every in-range date is selectable.
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Predicate marking dates unavailable: focusable and `aria-disabled`, not removed.
+     * @default undefined — every date is available.
+     */
+    isDateUnavailable?: (date: Date) => boolean;
+    /**
+     * Whether each week row is labelled with its ISO-8601 week number.
+     * @default undefined — no week numbers.
+     */
+    weekNumbers?: boolean;
+    /**
+     * Date the composed calendar treats as today, for stable server rendering.
+     * @default undefined — the calendar reads the clock.
+     */
+    today?: Date;
+    /**
+     * Navigation step: `visible` pages the whole span, `single` one month.
+     * @default undefined — the calendar's own default.
+     */
+    pageBehavior?: CalendarPageBehavior;
+    /**
+     * Whether adjacent-month days shown in the grid can be picked.
+     * @default undefined — they cannot.
+     */
+    outsideDaySelectable?: boolean;
+    /**
+     * The grid's roving tab stop date, for controlled focus.
+     * @default undefined — the calendar owns it.
+     */
+    focusedDate?: Date;
+    /**
+     * Date the grid focuses first, for uncontrolled focus.
+     * @default undefined — the selection anchor or displayed month.
+     */
+    defaultFocusedDate?: Date;
+    /**
+     * Words the selection-change announcement in multiple and range modes.
+     * @default undefined — the built-in English wording.
+     */
+    getSelectionAnnouncement?: (value: CalendarValue, locale?: string) => string;
+    /**
+     * Words the announcement made when a navigation button pages the grid.
+     * @default undefined — the built-in month label.
+     */
+    getMonthAnnouncement?: (month: Date, locale: string | undefined) => string;
     private root;
     private calendarEl;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private wireCalendar;
-    protected updated(changed: Map<string, unknown>): void;
+    private forwardProps;
+    protected updated(): void;
     private readonly handleValueChange;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/date-picker/DatePickerCalendar.d.ts

@@ -1,11 +1,10 @@
-import { LitElement } from 'lit';
-import { type CalendarView } from '../calendar/Calendar.js';
+import { LitElement, type TemplateResult } from 'lit';
+import { type CalendarPageBehavior, type CalendarValue, type CalendarView } from '../calendar/Calendar.js';
 /**
- * Wires nested `<skdx-calendar>` to closest `<skdx-date-picker>`'s value/mode.
- * Selecting a day sets the picker's value. Popup closes only on complete
- * selection (immediate in `single`, after second date in `range`, never in `multiple`)
- * and not before `granularity="day"` (time still to pick).
- *
+ * Wires a nested `<skdx-calendar>` to the closest `<skdx-date-picker>`'s value and selection mode.
+ * @fires month-change - First day of the newly displayed month, from the composed calendar
+ * @fires focus-change - Newly focused date, from the composed calendar
+ * @fires view-change - View now showing, from the composed calendar
  * @example
  * ```html
  * <skdx-date-picker-calendar>
@@ -35,14 +34,110 @@ export declare class SkdxDatePickerCalendar extends LitElement {
      * @default undefined — `'year'`.
      */
     maxView?: CalendarView;
+    /**
+     * Month the composed calendar displays, for controlled navigation.
+     * @default undefined — the calendar's own month.
+     */
+    month?: Date;
+    /**
+     * Month the composed calendar displays first, for uncontrolled navigation.
+     * @default undefined — the calendar's own default.
+     */
+    defaultMonth?: Date;
+    /**
+     * How many consecutive months the composed calendar renders.
+     * @default undefined — one month.
+     */
+    numberOfMonths?: number;
+    /**
+     * BCP 47 tag for the composed calendar's month and weekday names.
+     * @default undefined — the runtime's locale.
+     */
+    locale?: string;
+    /**
+     * Day of the week the grid's first column represents (0 = Sunday).
+     * @default undefined — derived from the locale.
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Earliest selectable date; earlier days render disabled.
+     * @default undefined — no lower bound.
+     */
+    minDate?: Date;
+    /**
+     * Latest selectable date; later days render disabled.
+     * @default undefined — no upper bound.
+     */
+    maxDate?: Date;
+    /**
+     * Disables every cell of the composed calendar and removes its tab stop.
+     * @default undefined — the calendar stays editable.
+     */
+    disabled?: boolean;
+    /**
+     * Makes the composed calendar non-editable, OR'd with the picker's own.
+     * @default undefined — the picker decides.
+     */
+    readOnly?: boolean;
+    /**
+     * Predicate marking individual dates unselectable, independent of the bounds.
+     * @default undefined — every in-range date is selectable.
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Predicate marking dates unavailable: focusable and `aria-disabled`, not removed.
+     * @default undefined — every date is available.
+     */
+    isDateUnavailable?: (date: Date) => boolean;
+    /**
+     * Whether each week row is labelled with its ISO-8601 week number.
+     * @default undefined — no week numbers.
+     */
+    weekNumbers?: boolean;
+    /**
+     * Date the composed calendar treats as today, for stable server rendering.
+     * @default undefined — the calendar reads the clock.
+     */
+    today?: Date;
+    /**
+     * Navigation step: `visible` pages the whole span, `single` one month.
+     * @default undefined — the calendar's own default.
+     */
+    pageBehavior?: CalendarPageBehavior;
+    /**
+     * Whether adjacent-month days shown in the grid can be picked.
+     * @default undefined — they cannot.
+     */
+    outsideDaySelectable?: boolean;
+    /**
+     * The grid's roving tab stop date, for controlled focus.
+     * @default undefined — the calendar owns it.
+     */
+    focusedDate?: Date;
+    /**
+     * Date the grid focuses first, for uncontrolled focus.
+     * @default undefined — the selection anchor or displayed month.
+     */
+    defaultFocusedDate?: Date;
+    /**
+     * Words the selection-change announcement in multiple and range modes.
+     * @default undefined — the built-in English wording.
+     */
+    getSelectionAnnouncement?: (value: CalendarValue, locale?: string) => string;
+    /**
+     * Words the announcement made when a navigation button pages the grid.
+     * @default undefined — the built-in month label.
+     */
+    getMonthAnnouncement?: (month: Date, locale: string | undefined) => string;
     private root;
     private calendarEl;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private wireCalendar;
-    protected updated(changed: Map<string, unknown>): void;
+    private forwardProps;
+    protected updated(): void;
     private readonly handleValueChange;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {