@skdx/web-components 0.26.0 → 0.28.0

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

@@ -1,61 +1,59 @@
-import { LitElement } from 'lit';
-import { type CalendarSelectionMode, type CalendarValue } from '../calendar/Calendar.cjs';
-import type { Granularity } from '../internal/date-segments.cjs';
+import { LitElement, type PropertyValues } 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) & {
     formAssociated: boolean;
 };
 /**
  * `<skdx-date-picker>` — the Web Components implementation of the shared
- * DatePicker contract (see `@skdx/shared`'s `datePickerContract`). Composes
- * `<skdx-select>`-style popup open/positioning machinery with the `<skdx-calendar>`'s
- * date-grid logic — a date picker is just "a Calendar shown in a floating
- * popup that closes on selection". Renders no visible box of its own
- * (`display: contents`) — it only owns `value`/`open` state and exposes it
- * to descendant `<skdx-date-picker-*>` parts via `closest('skdx-date-picker')`.
+ * 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 is
- * submitted by the surrounding `<form>` as local-time `YYYY-MM-DD` strings,
- * exactly like `<input type="date">` — one entry in `single` mode, one entry
- * per date in `multiple`, and start then end (two entries under the same name)
- * in `range`. With nothing selected it submits an empty entry, and is
- * `valueMissing` when the picker is `required`; a range still anchored on its
- * start counts as nothing selected.
+ * 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.
  *
  * @example
  * ```html
- * <skdx-date-picker id="dp">
- *   <skdx-date-picker-trigger>Pick a date</skdx-date-picker-trigger>
- *   <skdx-date-picker-content>
- *     <skdx-date-picker-calendar>
- *       <skdx-calendar>
- *         <skdx-calendar-grid></skdx-calendar-grid>
- *       </skdx-calendar>
- *     </skdx-date-picker-calendar>
- *     <skdx-date-picker-close>Close</skdx-date-picker-close>
- *   </skdx-date-picker-content>
- * </skdx-date-picker>
+ * <skdx-date-picker></skdx-date-picker>
  * ```
  *
- * @fires value-change - Fired with the *whole* new selection (a `Date`, a `Date[]`, or a `{ start, end }` range, per the calendar's `selection-mode`), not the single date that changed.
+ * @fires value-change - Fired with the whole new selection (`Date`, `Date[]`, or a `{ start, end }` range), not just the date that changed.
  * @fires open-change - Fired with the new open state whenever the calendar popup opens or closes.
- * @fires open-change-complete - Fired with the new open state after `<skdx-date-picker-content>`'s enter or exit animation has finished — as soon as the popup has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ * @fires open-change-complete - Fired with the new open state once `<skdx-date-picker-content>`'s enter/exit animation settles (immediately if it declares none); not cancelable, since the change has already happened.
  */
 export declare class SkdxDatePicker extends SkdxDatePicker_base {
     static styles: import("lit").CSSResult;
     /**
-     * How many dates can be selected at once — forwarded to the composed
-     * `<skdx-calendar>`, so `value` takes the same per-mode shape it does there.
-     * It also decides when the popup auto-closes: immediately in `single`, once
-     * the range is closed in `range`, never in `multiple`.
+     * 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`.
      * @default 'single'
      */
     selectionMode: CalendarSelectionMode;
     /**
-     * Current selection; its shape follows `selectionMode`. Property-only — the
-     * array and range shapes have no attribute form. Listen for `value-change`
-     * to observe or override changes.
+     * 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.
+     * @default undefined — nothing selected, `valueAsString` is `null`, and the
+     * picker submits an empty entry (and is `valueMissing` when `required`).
      */
-    value?: CalendarValue;
+    get value(): CalendarValue | undefined;
+    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
@@ -68,10 +66,36 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     open: boolean;
     /** Disables the trigger, excluding the picker from the tab order and from form submission. */
     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;
+    /**
+     * Makes picker non-editable; trigger opens, cells/segments stay focusable but don't change selection.
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Marks invalid: `data-invalid` on trigger and content, `aria-invalid="true"` on button.
+     * @default false
+     */
+    invalid: boolean;
     /** Marks the picker required for native form validation, until a date is selected. @default false */
     required: boolean;
     /** 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.
+     * @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
@@ -81,7 +105,37 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
      * @default undefined — keeps `'Please select a date.'`
      */
     requiredMessage?: string;
-    readonly contentId: string;
+    /**
+     * Derived trigger placeholder text; ignored when picker has light-DOM children.
+     * @default 'Select date'
+     */
+    placeholder: string;
+    /**
+     * BCP 47 locale for derived trigger; ignored when picker has light-DOM children.
+     * @default undefined — runtime default locale.
+     */
+    locale?: string;
+    /**
+     * Includes typed-entry date field in derived popup; renders only in single-selection mode.
+     * Ignored when picker has light-DOM children.
+     * @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.
+     */
+    get valueAsString(): string | null;
+    contentId: string;
+    /**
+     * Id the trigger takes unless the consumer gave it one, so
+     * `<skdx-date-picker-content>`'s `aria-labelledby` can name the popup dialog
+     * after the button that opened it.
+     */
+    readonly triggerId: string;
     private defaultValue?;
     private hasDefaultValue;
     /** The `<skdx-date-picker-trigger>` descendant — the floating-ui anchor for the popup. @internal */
@@ -96,16 +150,21 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     setOpen(open: boolean): void;
     private emit;
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: Map<string, unknown>): void;
+    /** The `show-input` the generated anatomy was last built for; `''` while nothing has been generated. */
+    private _anatomyFilledFor;
     /**
-     * Every date the current selection submits: empty for no selection, and for
-     * a range still anchored on its start — half a range is not a date the form
-     * can act on, so `required` treats it as nothing selected.
+     * 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;
+    protected updated(changed: Map<string, unknown>): void;
+    /** Every date the current selection submits; empty for no selection or a range still anchored on its start. */
     private selectedDates;
     private syncFormState;
-    /** Restores the date the picker was connected with. A form reset fires no `value-change`, just like a native reset. */
+    /** 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>;
 }

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

@@ -1,61 +1,59 @@
-import { LitElement } from 'lit';
-import { type CalendarSelectionMode, type CalendarValue } from '../calendar/Calendar.js';
-import type { Granularity } from '../internal/date-segments.js';
+import { LitElement, type PropertyValues } 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) & {
     formAssociated: boolean;
 };
 /**
  * `<skdx-date-picker>` — the Web Components implementation of the shared
- * DatePicker contract (see `@skdx/shared`'s `datePickerContract`). Composes
- * `<skdx-select>`-style popup open/positioning machinery with the `<skdx-calendar>`'s
- * date-grid logic — a date picker is just "a Calendar shown in a floating
- * popup that closes on selection". Renders no visible box of its own
- * (`display: contents`) — it only owns `value`/`open` state and exposes it
- * to descendant `<skdx-date-picker-*>` parts via `closest('skdx-date-picker')`.
+ * 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 is
- * submitted by the surrounding `<form>` as local-time `YYYY-MM-DD` strings,
- * exactly like `<input type="date">` — one entry in `single` mode, one entry
- * per date in `multiple`, and start then end (two entries under the same name)
- * in `range`. With nothing selected it submits an empty entry, and is
- * `valueMissing` when the picker is `required`; a range still anchored on its
- * start counts as nothing selected.
+ * 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.
  *
  * @example
  * ```html
- * <skdx-date-picker id="dp">
- *   <skdx-date-picker-trigger>Pick a date</skdx-date-picker-trigger>
- *   <skdx-date-picker-content>
- *     <skdx-date-picker-calendar>
- *       <skdx-calendar>
- *         <skdx-calendar-grid></skdx-calendar-grid>
- *       </skdx-calendar>
- *     </skdx-date-picker-calendar>
- *     <skdx-date-picker-close>Close</skdx-date-picker-close>
- *   </skdx-date-picker-content>
- * </skdx-date-picker>
+ * <skdx-date-picker></skdx-date-picker>
  * ```
  *
- * @fires value-change - Fired with the *whole* new selection (a `Date`, a `Date[]`, or a `{ start, end }` range, per the calendar's `selection-mode`), not the single date that changed.
+ * @fires value-change - Fired with the whole new selection (`Date`, `Date[]`, or a `{ start, end }` range), not just the date that changed.
  * @fires open-change - Fired with the new open state whenever the calendar popup opens or closes.
- * @fires open-change-complete - Fired with the new open state after `<skdx-date-picker-content>`'s enter or exit animation has finished — as soon as the popup has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ * @fires open-change-complete - Fired with the new open state once `<skdx-date-picker-content>`'s enter/exit animation settles (immediately if it declares none); not cancelable, since the change has already happened.
  */
 export declare class SkdxDatePicker extends SkdxDatePicker_base {
     static styles: import("lit").CSSResult;
     /**
-     * How many dates can be selected at once — forwarded to the composed
-     * `<skdx-calendar>`, so `value` takes the same per-mode shape it does there.
-     * It also decides when the popup auto-closes: immediately in `single`, once
-     * the range is closed in `range`, never in `multiple`.
+     * 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`.
      * @default 'single'
      */
     selectionMode: CalendarSelectionMode;
     /**
-     * Current selection; its shape follows `selectionMode`. Property-only — the
-     * array and range shapes have no attribute form. Listen for `value-change`
-     * to observe or override changes.
+     * 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.
+     * @default undefined — nothing selected, `valueAsString` is `null`, and the
+     * picker submits an empty entry (and is `valueMissing` when `required`).
      */
-    value?: CalendarValue;
+    get value(): CalendarValue | undefined;
+    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
@@ -68,10 +66,36 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     open: boolean;
     /** Disables the trigger, excluding the picker from the tab order and from form submission. */
     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;
+    /**
+     * Makes picker non-editable; trigger opens, cells/segments stay focusable but don't change selection.
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Marks invalid: `data-invalid` on trigger and content, `aria-invalid="true"` on button.
+     * @default false
+     */
+    invalid: boolean;
     /** Marks the picker required for native form validation, until a date is selected. @default false */
     required: boolean;
     /** 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.
+     * @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
@@ -81,7 +105,37 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
      * @default undefined — keeps `'Please select a date.'`
      */
     requiredMessage?: string;
-    readonly contentId: string;
+    /**
+     * Derived trigger placeholder text; ignored when picker has light-DOM children.
+     * @default 'Select date'
+     */
+    placeholder: string;
+    /**
+     * BCP 47 locale for derived trigger; ignored when picker has light-DOM children.
+     * @default undefined — runtime default locale.
+     */
+    locale?: string;
+    /**
+     * Includes typed-entry date field in derived popup; renders only in single-selection mode.
+     * Ignored when picker has light-DOM children.
+     * @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.
+     */
+    get valueAsString(): string | null;
+    contentId: string;
+    /**
+     * Id the trigger takes unless the consumer gave it one, so
+     * `<skdx-date-picker-content>`'s `aria-labelledby` can name the popup dialog
+     * after the button that opened it.
+     */
+    readonly triggerId: string;
     private defaultValue?;
     private hasDefaultValue;
     /** The `<skdx-date-picker-trigger>` descendant — the floating-ui anchor for the popup. @internal */
@@ -96,16 +150,21 @@ export declare class SkdxDatePicker extends SkdxDatePicker_base {
     setOpen(open: boolean): void;
     private emit;
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: Map<string, unknown>): void;
+    /** The `show-input` the generated anatomy was last built for; `''` while nothing has been generated. */
+    private _anatomyFilledFor;
     /**
-     * Every date the current selection submits: empty for no selection, and for
-     * a range still anchored on its start — half a range is not a date the form
-     * can act on, so `required` treats it as nothing selected.
+     * 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;
+    protected updated(changed: Map<string, unknown>): void;
+    /** Every date the current selection submits; empty for no selection or a range still anchored on its start. */
     private selectedDates;
     private syncFormState;
-    /** Restores the date the picker was connected with. A form reset fires no `value-change`, just like a native reset. */
+    /** 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>;
 }

package/dist/date-picker/DatePicker.js

@@ -1,5 +1,5 @@
-var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=(l,i,e,s)=>{for(var n=s>1?void 0:s?h(i,e):i,o=l.length-1,u;o>=0;o--)(u=l[o])&&(n=(s?u(i,e,n):u(n))||n);return s&&n&&p(i,e,n),n};import{css as m,html as c,LitElement as f}from"lit";import{property as r}from"lit/decorators.js";import{isDateRange as v,toISODateString as d}from"../calendar/Calendar.js";import{customElement as g}from"../internal/define.js";import{FormAssociated as C}from"../internal/form-associated.js";import{nextId as b}from"../internal/ids.js";import{notifyOpenChangeComplete as y}from"../internal/open-change-complete.js";var t=class extends C(f){constructor(){super(...arguments);this.selectionMode="single";this.granularity="day";this.open=!1;this.disabled=!1;this.required=!1;this.contentId=b("skdx-date-picker-content");this.hasDefaultValue=!1;this.triggerHost=null;this.contentEl=null;this.hasUpdatedOnce=!1}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,s){this.dispatchEvent(new CustomEvent(e,{detail:s,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)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let s=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(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")&&!s&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=y(()=>this.contentEl,this.open,n=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:n,bubbles:!0,composed:!0}))))}selectedDates(){let e=this.value;return e?Array.isArray(e)?e:v(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(){this.value=this.defaultValue}render(){return c`<slot></slot>`}};t.styles=m`
+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`
     :host {
       display: contents;
     }
-  `,a([r({type:String,reflect:!0,attribute:"selection-mode"})],t.prototype,"selectionMode",2),a([r({attribute:!1})],t.prototype,"value",2),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({type:Boolean,reflect:!0})],t.prototype,"required",2),a([r({type:String,reflect:!0})],t.prototype,"name",2),a([r({attribute:"required-message"})],t.prototype,"requiredMessage",2),t=a([g("skdx-date-picker")],t);export{t as SkdxDatePicker};
+  `,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};

package/dist/date-picker/DatePickerAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var f=(e,t)=>{for(var r in t)d(e,r,{get:t[r],enumerable:!0})},g=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of u(t))!l.call(e,i)&&i!==r&&d(e,i,{get:()=>t[i],enumerable:!(n=k(t,i))||n.enumerable});return e};var x=e=>g(d({},"__esModule",{value:!0}),e);var y={};f(y,{DATE_PICKER_ANATOMY_GENERATED:()=>o,fillDatePickerAnatomy:()=>E,formatDatePickerSelection:()=>m,updateDatePickerTriggerLabel:()=>D});module.exports=x(y);var p=require("../calendar/Calendar.cjs"),s=require("../internal/host-attributes.cjs"),P=require("../calendar/Calendar.cjs"),S=require("./DatePickerTrigger.cjs"),b=require("./DatePickerPortal.cjs"),C=require("./DatePickerContent.cjs"),R=require("./DatePickerInput.cjs"),_=require("./DatePickerCalendar.cjs"),L=require("./DatePickerTimeField.cjs"),o="data-skdx-date-picker-generated";function a(e,t,r){return e.toLocaleString(t,{dateStyle:"medium",...r?{timeStyle:"short"}:{}})}function m(e,t,r){if(!e)return null;if(Array.isArray(e))return e.length?e.map(n=>a(n,t,r)).join(", "):null;if((0,p.isDateRange)(e)){let n=a(e.start,t,r);return e.end?`${n} \u2013 ${a(e.end,t,r)}`:n}return a(e,t,r)}function E(e,t){let r=document.createElement("skdx-date-picker-trigger");r.setAttribute(o,""),(0,s.forwardHostAttributes)(e,r);let n=document.createElement("skdx-date-picker-portal");n.setAttribute(o,"");let i=document.createElement("skdx-date-picker-content");t&&i.append(document.createElement("skdx-date-picker-input"));let c=document.createElement("skdx-date-picker-calendar");c.append(document.createElement("skdx-calendar")),i.append(c,document.createElement("skdx-date-picker-time-field")),n.append(i),e.replaceChildren(r,n)}function D(e,t,r){let n=e.querySelector(":scope > skdx-date-picker-trigger");n&&(n.textContent=m(e.value,r,e.granularity!=="day")??t)}0&&(module.exports={DATE_PICKER_ANATOMY_GENERATED,fillDatePickerAnatomy,formatDatePickerSelection,updateDatePickerTriggerLabel});

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

@@ -0,0 +1,25 @@
+import { type CalendarValue } from '../calendar/Calendar.cjs';
+import '../calendar/Calendar.cjs';
+import type { SkdxDatePicker } from './DatePicker.cjs';
+import './DatePickerTrigger.cjs';
+import './DatePickerPortal.cjs';
+import './DatePickerContent.cjs';
+import './DatePickerInput.cjs';
+import './DatePickerCalendar.cjs';
+import './DatePickerTimeField.cjs';
+/** @internal Marks a direct child of `<skdx-date-picker>` this module generated. */
+export declare const DATE_PICKER_ANATOMY_GENERATED = "data-skdx-date-picker-generated";
+/** @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).
+ * @internal
+ */
+export declare function fillDatePickerAnatomy(root: SkdxDatePicker, showInput: boolean): void;
+/**
+ * Update the trigger's label to match the selection.
+ * @internal
+ */
+export declare function updateDatePickerTriggerLabel(root: SkdxDatePicker, placeholder: string, locale: string | undefined): void;

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

@@ -0,0 +1,25 @@
+import { type CalendarValue } from '../calendar/Calendar.js';
+import '../calendar/Calendar.js';
+import type { SkdxDatePicker } from './DatePicker.js';
+import './DatePickerTrigger.js';
+import './DatePickerPortal.js';
+import './DatePickerContent.js';
+import './DatePickerInput.js';
+import './DatePickerCalendar.js';
+import './DatePickerTimeField.js';
+/** @internal Marks a direct child of `<skdx-date-picker>` this module generated. */
+export declare const DATE_PICKER_ANATOMY_GENERATED = "data-skdx-date-picker-generated";
+/** @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).
+ * @internal
+ */
+export declare function fillDatePickerAnatomy(root: SkdxDatePicker, showInput: boolean): void;
+/**
+ * Update the trigger's label to match the selection.
+ * @internal
+ */
+export declare function updateDatePickerTriggerLabel(root: SkdxDatePicker, placeholder: string, locale: string | undefined): void;

package/dist/date-picker/DatePickerAnatomy.js

@@ -0,0 +1 @@
+import{isDateRange as c}from"../calendar/Calendar.js";import{forwardHostAttributes as p}from"../internal/host-attributes.js";import"../calendar/Calendar.js";import"./DatePickerTrigger.js";import"./DatePickerPortal.js";import"./DatePickerContent.js";import"./DatePickerInput.js";import"./DatePickerCalendar.js";import"./DatePickerTimeField.js";var o="data-skdx-date-picker-generated";function i(e,n,t){return e.toLocaleString(n,{dateStyle:"medium",...t?{timeStyle:"short"}:{}})}function s(e,n,t){if(!e)return null;if(Array.isArray(e))return e.length?e.map(r=>i(r,n,t)).join(", "):null;if(c(e)){let r=i(e.start,n,t);return e.end?`${r} \u2013 ${i(e.end,n,t)}`:r}return i(e,n,t)}function y(e,n){let t=document.createElement("skdx-date-picker-trigger");t.setAttribute(o,""),p(e,t);let r=document.createElement("skdx-date-picker-portal");r.setAttribute(o,"");let a=document.createElement("skdx-date-picker-content");n&&a.append(document.createElement("skdx-date-picker-input"));let d=document.createElement("skdx-date-picker-calendar");d.append(document.createElement("skdx-calendar")),a.append(d,document.createElement("skdx-date-picker-time-field")),r.append(a),e.replaceChildren(t,r)}function A(e,n,t){let r=e.querySelector(":scope > skdx-date-picker-trigger");r&&(r.textContent=s(e.value,t,e.granularity!=="day")??n)}export{o as DATE_PICKER_ANATOMY_GENERATED,y as fillDatePickerAnatomy,s as formatDatePickerSelection,A as updateDatePickerTriggerLabel};

package/dist/date-picker/DatePickerCalendar.cjs

@@ -1,7 +1,5 @@
-"use strict";var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var C=(e,a)=>{for(var r in a)o(e,r,{get:a[r],enumerable:!0})},E=(e,a,r,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of k(a))!v.call(e,t)&&t!==r&&o(e,t,{get:()=>a[t],enumerable:!(l=c(a,t))||l.enumerable});return e};var f=e=>E(o({},"__esModule",{value:!0}),e),u=(e,a,r,l)=>{for(var t=l>1?void 0:l?c(a,r):a,d=e.length-1,s;d>=0;d--)(s=e[d])&&(t=(l?s(a,r,t):s(t))||t);return l&&t&&o(a,r,t),t};var y={};C(y,{SkdxDatePickerCalendar:()=>n});module.exports=f(y);var i=require("lit"),h=require("../calendar/Calendar.cjs"),p=require("../internal/closest.cjs"),m=require("../internal/define.cjs");function g(e){return Array.isArray(e)?!1:(0,h.isDateRange)(e)?e.end!==null:e!==null}var n=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.calendarEl=null;this.handleValueChange=r=>{r.stopPropagation(),this.root?.setValue(r.detail),this.root?.granularity==="day"&&g(r.detail)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=(0,p.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.calendarEl.addEventListener("value-change",this.handleValueChange))}render(){return i.html`<slot></slot>`}};n.styles=i.css`
-    /* A box, because .skdx-date-picker__calendar is nothing but padding around
-       the calendar, and padding needs one. */
+"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`
     :host {
       display: block;
     }
-  `,n=u([(0,m.customElement)("skdx-date-picker-calendar","date-picker","calendar")],n);0&&(module.exports={SkdxDatePickerCalendar});
+  `,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});

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

@@ -1,32 +1,46 @@
 import { LitElement } from 'lit';
+import { type CalendarView } from '../calendar/Calendar.cjs';
 /**
- * `<skdx-date-picker-calendar>` — thin wrapper wiring a nested `<skdx-calendar>`
- * (with all its usual header/grid/cell parts) to the closest ancestor
- * `<skdx-date-picker>`'s `value` and `selection-mode`: selecting a day sets the
- * date picker's value and closes the popup. Compose it with the same
- * `<skdx-calendar-*>` parts you'd use with a standalone `<skdx-calendar>`.
- *
- * The popup closes only on a *complete* selection: right away in `single`
- * mode, once the second date closes the range in `range` mode, and never in
- * `multiple` mode, where the user keeps picking until they dismiss it. It also
- * never closes past `granularity="day"`, where the time is still to be picked.
+ * 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).
  *
  * @example
  * ```html
  * <skdx-date-picker-calendar>
- *   <skdx-calendar>
- *     <skdx-calendar-grid></skdx-calendar-grid>
- *   </skdx-calendar>
+ *   <skdx-calendar><skdx-calendar-grid></skdx-calendar-grid></skdx-calendar>
  * </skdx-date-picker-calendar>
  * ```
  */
 export declare class SkdxDatePickerCalendar extends LitElement {
     static styles: import("lit").CSSResult;
+    /**
+     * Which grid the composed calendar shows. Non-day grid selects nothing (popup never closes).
+     * @default undefined — calendar's own view.
+     */
+    view?: CalendarView;
+    /**
+     * Which grid the composed calendar shows first.
+     * @default undefined — day grid.
+     */
+    defaultView?: CalendarView;
+    /**
+     * Most granular view the composed calendar steps down to.
+     * @default undefined — `'day'`.
+     */
+    minView?: CalendarView;
+    /**
+     * Least granular view the composed calendar steps up to.
+     * @default undefined — `'year'`.
+     */
+    maxView?: CalendarView;
     private root;
     private calendarEl;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private wireCalendar;
+    protected updated(changed: Map<string, unknown>): void;
     private readonly handleValueChange;
     render(): import("lit").TemplateResult<1>;
 }