@skdx/web-components 0.26.0

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

@@ -0,0 +1,158 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { type Granularity, type HourCycle, type SegmentType } from '../internal/date-segments.cjs';
+declare const SkdxDateField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-date-field>` — the Web Components implementation of the shared
+ * DateField contract (see `@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 `.skdx-date-field__segment` rules are
+ * document-level and cannot cross a shadow boundary), interleaved with the
+ * locale's own separators — both the segment order and those separators come
+ * from `Intl.DateTimeFormat.formatToParts`, so `en-US` reads `mm/dd/yyyy` and
+ * `de-DE` reads `dd.mm.yyyy` with no bundled locale table.
+ *
+ * Arrow Up/Down step the focused segment (wrapping at its bounds), Arrow
+ * Left/Right move between segments (mirrored under `dir="rtl"`), digits type
+ * with roll-over — typing `1` then `5` into a month gives `05`, not a rejected
+ * keystroke — and Backspace/Delete clear a segment back to its placeholder.
+ * `value-change` only ever fires with a complete date or `null`, never a
+ * half-typed one.
+ *
+ * `value` is the single source of truth — like a native `<input>`'s `value`,
+ * there is no separate controlled/uncontrolled mode. It is a `Date`, so it is a
+ * JS property only (no attribute form); the date the element was connected with
+ * is what a form reset restores.
+ *
+ * Form-associated via `ElementInternals`: with a `name`, the date is submitted
+ * as `YYYY-MM-DD` (or `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity), exactly
+ * like `<input type="date">`. An incomplete field submits an empty entry and is
+ * `valueMissing` while `required`.
+ *
+ * @example
+ * ```html
+ * <skdx-date-field aria-label="Departure" locale="en-US" granularity="minute"></skdx-date-field>
+ * ```
+ *
+ * @fires value-change - Fires with the new `Date`, or `null` as soon as a segment is cleared.
+ * @csspart date-field - The host itself, the `role="group"` wrapping every segment.
+ * @csspart segment - One editable `role="spinbutton"` segment.
+ * @csspart literal - One locale separator between segments.
+ */
+export declare class SkdxDateField extends SkdxDateField_base {
+    /**
+     * Current date, or `null` while any segment is untyped. Property-only — a
+     * `Date` has no attribute form. Listen for `value-change` to observe changes.
+     */
+    value: Date | null;
+    /**
+     * How far down the field is editable. `day` is date-only; `hour`/`minute` add
+     * hour and minute segments; `second` adds seconds. Anything past `day` makes
+     * this the `datetime-local` equivalent.
+     * @default 'day'
+     */
+    granularity: Granularity;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour display of the time
+     * segments. Presentation only — the submitted value is always 24 hour.
+     * @default undefined — whatever the locale resolves to.
+     */
+    hourCycle?: HourCycle;
+    /**
+     * BCP-47 locale deciding segment order, the literals between segments, and
+     * the AM/PM names. @default undefined — the runtime locale.
+     */
+    locale?: string;
+    /** Disables the field and removes every segment from the tab order. */
+    disabled: boolean;
+    /** Segments stay focusable and readable but refuse every edit. */
+    readOnly: boolean;
+    /** Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid: boolean;
+    /** Marks the field required: `valueMissing` while any segment is untyped. */
+    required: boolean;
+    /** Name used as the `FormData` entry key when the field is inside a `<form>`. @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.").
+     * @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.
+     */
+    ariaLabel: string | null;
+    /**
+     * Words the accessible name of one segment. Called per segment type
+     * (`'year'`, `'month'`, `'dayPeriod'`, …); return the built-in
+     * `SEGMENT_LABELS` entry for the ones you do not want to change.
+     *
+     * One of the two strings `locale` cannot translate — segment order, the
+     * literals between segments and the AM/PM names all come from
+     * `Intl.DateTimeFormat`, but these describe the widget rather than the value.
+     * Property only: a function has no attribute form.
+     * @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.
+     * @default 'Empty'
+     */
+    emptySegmentText?: string;
+    /** Per-segment values; the rendered segments are derived from these every render. */
+    private values;
+    private readonly buffer;
+    private defaultValue;
+    /** The hour cycle actually rendered: the explicit `hourCycle`, else the locale's. */
+    private get cycle();
+    /** Light DOM: the host is the `role="group"` and the skin must reach the segments. */
+    protected createRenderRoot(): HTMLElement;
+    /** The host is the `role="group"` itself, so it carries the marker that says "I am the control". */
+    connectedCallback(): void;
+    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 segment is
+     * still untyped. Completeness has to be checked *before* converting:
+     * `valuesToDate` defaults an untyped hour to 0, so a date whose minute the
+     * user just cleared would otherwise still look like a committed date.
+     */
+    private dateOf;
+    /**
+     * Re-seeds the segments whenever the committed date changes from outside this
+     * field's own typing (a property assignment, a date picker's calendar
+     * selection). Values that already describe the committed date are left alone,
+     * so a mid-entry keystroke is never rewritten under the caret — and an
+     * already-incomplete field is left alone on a `null`, so clearing one segment
+     * does not wipe the rest.
+     */
+    private syncSegments;
+    private syncFormState;
+    /** Restores the date the element was connected with. A form reset fires no `value-change`, just like a native reset. */
+    formResetCallback(): void;
+    /**
+     * @internal Commits `next` as `value` and dispatches `value-change`
+     * synchronously (not via Lit's async `updated()` lifecycle), so a caller
+     * observing the event right after a keystroke sees it without awaiting a
+     * render — same convention as `<skdx-number-field>`.
+     */
+    setValue(next: Date | null): void;
+    private readonly handleValuesChange;
+    render(): import("lit").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-field': SkdxDateField;
+    }
+}
+export {};

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

@@ -0,0 +1,158 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { type Granularity, type HourCycle, type SegmentType } from '../internal/date-segments.js';
+declare const SkdxDateField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-date-field>` — the Web Components implementation of the shared
+ * DateField contract (see `@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 `.skdx-date-field__segment` rules are
+ * document-level and cannot cross a shadow boundary), interleaved with the
+ * locale's own separators — both the segment order and those separators come
+ * from `Intl.DateTimeFormat.formatToParts`, so `en-US` reads `mm/dd/yyyy` and
+ * `de-DE` reads `dd.mm.yyyy` with no bundled locale table.
+ *
+ * Arrow Up/Down step the focused segment (wrapping at its bounds), Arrow
+ * Left/Right move between segments (mirrored under `dir="rtl"`), digits type
+ * with roll-over — typing `1` then `5` into a month gives `05`, not a rejected
+ * keystroke — and Backspace/Delete clear a segment back to its placeholder.
+ * `value-change` only ever fires with a complete date or `null`, never a
+ * half-typed one.
+ *
+ * `value` is the single source of truth — like a native `<input>`'s `value`,
+ * there is no separate controlled/uncontrolled mode. It is a `Date`, so it is a
+ * JS property only (no attribute form); the date the element was connected with
+ * is what a form reset restores.
+ *
+ * Form-associated via `ElementInternals`: with a `name`, the date is submitted
+ * as `YYYY-MM-DD` (or `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity), exactly
+ * like `<input type="date">`. An incomplete field submits an empty entry and is
+ * `valueMissing` while `required`.
+ *
+ * @example
+ * ```html
+ * <skdx-date-field aria-label="Departure" locale="en-US" granularity="minute"></skdx-date-field>
+ * ```
+ *
+ * @fires value-change - Fires with the new `Date`, or `null` as soon as a segment is cleared.
+ * @csspart date-field - The host itself, the `role="group"` wrapping every segment.
+ * @csspart segment - One editable `role="spinbutton"` segment.
+ * @csspart literal - One locale separator between segments.
+ */
+export declare class SkdxDateField extends SkdxDateField_base {
+    /**
+     * Current date, or `null` while any segment is untyped. Property-only — a
+     * `Date` has no attribute form. Listen for `value-change` to observe changes.
+     */
+    value: Date | null;
+    /**
+     * How far down the field is editable. `day` is date-only; `hour`/`minute` add
+     * hour and minute segments; `second` adds seconds. Anything past `day` makes
+     * this the `datetime-local` equivalent.
+     * @default 'day'
+     */
+    granularity: Granularity;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour display of the time
+     * segments. Presentation only — the submitted value is always 24 hour.
+     * @default undefined — whatever the locale resolves to.
+     */
+    hourCycle?: HourCycle;
+    /**
+     * BCP-47 locale deciding segment order, the literals between segments, and
+     * the AM/PM names. @default undefined — the runtime locale.
+     */
+    locale?: string;
+    /** Disables the field and removes every segment from the tab order. */
+    disabled: boolean;
+    /** Segments stay focusable and readable but refuse every edit. */
+    readOnly: boolean;
+    /** Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid: boolean;
+    /** Marks the field required: `valueMissing` while any segment is untyped. */
+    required: boolean;
+    /** Name used as the `FormData` entry key when the field is inside a `<form>`. @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.").
+     * @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.
+     */
+    ariaLabel: string | null;
+    /**
+     * Words the accessible name of one segment. Called per segment type
+     * (`'year'`, `'month'`, `'dayPeriod'`, …); return the built-in
+     * `SEGMENT_LABELS` entry for the ones you do not want to change.
+     *
+     * One of the two strings `locale` cannot translate — segment order, the
+     * literals between segments and the AM/PM names all come from
+     * `Intl.DateTimeFormat`, but these describe the widget rather than the value.
+     * Property only: a function has no attribute form.
+     * @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.
+     * @default 'Empty'
+     */
+    emptySegmentText?: string;
+    /** Per-segment values; the rendered segments are derived from these every render. */
+    private values;
+    private readonly buffer;
+    private defaultValue;
+    /** The hour cycle actually rendered: the explicit `hourCycle`, else the locale's. */
+    private get cycle();
+    /** Light DOM: the host is the `role="group"` and the skin must reach the segments. */
+    protected createRenderRoot(): HTMLElement;
+    /** The host is the `role="group"` itself, so it carries the marker that says "I am the control". */
+    connectedCallback(): void;
+    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 segment is
+     * still untyped. Completeness has to be checked *before* converting:
+     * `valuesToDate` defaults an untyped hour to 0, so a date whose minute the
+     * user just cleared would otherwise still look like a committed date.
+     */
+    private dateOf;
+    /**
+     * Re-seeds the segments whenever the committed date changes from outside this
+     * field's own typing (a property assignment, a date picker's calendar
+     * selection). Values that already describe the committed date are left alone,
+     * so a mid-entry keystroke is never rewritten under the caret — and an
+     * already-incomplete field is left alone on a `null`, so clearing one segment
+     * does not wipe the rest.
+     */
+    private syncSegments;
+    private syncFormState;
+    /** Restores the date the element was connected with. A form reset fires no `value-change`, just like a native reset. */
+    formResetCallback(): void;
+    /**
+     * @internal Commits `next` as `value` and dispatches `value-change`
+     * synchronously (not via Lit's async `updated()` lifecycle), so a caller
+     * observing the event right after a keystroke sees it without awaiting a
+     * render — same convention as `<skdx-number-field>`.
+     */
+    setValue(next: Date | null): void;
+    private readonly handleValuesChange;
+    render(): import("lit").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-field': SkdxDateField;
+    }
+}
+export {};

package/dist/date-field/DateField.js

@@ -0,0 +1 @@
+var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var r=(u,s,e,l)=>{for(var a=l>1?void 0:l?c(s,e):s,n=u.length-1,o;n>=0;n--)(o=u[n])&&(a=(l?o(s,e,a):o(a))||a);return l&&a&&h(s,e,a),a};import{LitElement as m}from"lit";import{property as i,state as y}from"lit/decorators.js";import{FIELD_CONTROL_ATTRIBUTE as p}from"../field/field-core.js";import{buildSegments as d,dateToFormValue as g,dateToValues as v,isComplete as f,resolveHourCycle as b,valuesToDate as T}from"../internal/date-segments.js";import{customElement as V}from"../internal/define.js";import{FormAssociated as C}from"../internal/form-associated.js";import{renderSegmentedField as L}from"../internal/segmented-field.js";import{installLightDomStyles as S}from"../internal/styles.js";var t=class extends C(m){constructor(){super(...arguments);this.value=null;this.granularity="day";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.values={};this.buffer={current:0};this.defaultValue=null;this.handleValuesChange=e=>{this.values=e;let l=this.dateOf(e),a=this.value?this.value.getTime():null;(l?l.getTime():null)!==a&&this.setValue(l)}}get cycle(){return b(this.locale,this.hourCycle)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),S(),this.setAttribute(p,"")}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"))&&this.syncFormState()}dateOf(e){return f(d({kind:"date",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?T(e,this.cycle):null}syncSegments(){let e=this.cycle,l=this.value?this.value.getTime():null,a=this.dateOf(this.values);if(l===null){a!==null&&(this.values={});return}a!==null&&a.getTime()===l||(this.values=v(new Date(l),e))}syncFormState(){this.setFormValue(this.value?g(this.value,this.granularity):""),this.setValueMissing(this.required&&this.value===null,"Please enter a date.",this.querySelector("[data-segment]"))}formResetCallback(){this.value=this.defaultValue}setValue(e){this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0}))}render(){return L({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,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid,required:this.required,buffer:this.buffer,onValuesChange:this.handleValuesChange})}};r([i({attribute:!1})],t.prototype,"value",2),r([i({type:String,reflect:!0})],t.prototype,"granularity",2),r([i({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),r([i({type:String})],t.prototype,"locale",2),r([i({type:Boolean,reflect:!0})],t.prototype,"disabled",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({attribute:"required-message"})],t.prototype,"requiredMessage",2),r([i({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),r([i({attribute:!1})],t.prototype,"getSegmentLabel",2),r([i({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),r([y()],t.prototype,"values",2),t=r([V("skdx-date-field","date-field","root")],t);export{t as SkdxDateField};

package/dist/date-field/index.cjs

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

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

@@ -0,0 +1 @@
+export { SkdxDateField } from './DateField.cjs';

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

@@ -0,0 +1 @@
+export { SkdxDateField } from './DateField.js';

package/dist/date-field/index.js

@@ -0,0 +1 @@
+import{SkdxDateField as o}from"./DateField.js";export{o as SkdxDateField};

package/dist/date-picker/DatePicker.cjs

@@ -0,0 +1,5 @@
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var y=(s,t)=>{for(var e in t)d(s,e,{get:t[e],enumerable:!0})},E=(s,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of C(t))!b.call(s,a)&&a!==e&&d(s,a,{get:()=>t[a],enumerable:!(r=m(t,a))||r.enumerable});return s};var V=s=>E(d({},"__esModule",{value:!0}),s),i=(s,t,e,r)=>{for(var a=r>1?void 0:r?m(t,e):t,p=s.length-1,h;p>=0;p--)(h=s[p])&&(a=(r?h(t,e,a):h(a))||a);return r&&a&&d(t,e,a),a};var w={};y(w,{SkdxDatePicker:()=>n});module.exports=V(w);var o=require("lit"),l=require("lit/decorators.js"),u=require("../calendar/Calendar.cjs"),c=require("../internal/define.cjs"),f=require("../internal/form-associated.cjs"),v=require("../internal/ids.cjs"),g=require("../internal/open-change-complete.cjs");var n=class extends(0,f.FormAssociated)(o.LitElement){constructor(){super(...arguments);this.selectionMode="single";this.granularity="day";this.open=!1;this.disabled=!1;this.required=!1;this.contentId=(0,v.nextId)("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,r){this.dispatchEvent(new CustomEvent(e,{detail:r,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 r=!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")&&!r&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,g.notifyOpenChangeComplete)(()=>this.contentEl,this.open,a=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:a,bubbles:!0,composed:!0}))))}selectedDates(){let e=this.value;return e?Array.isArray(e)?e:(0,u.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,u.toISODateString)(this.value):this.multiFormValue(e.map(u.toISODateString))),this.setValueMissing(this.required&&e.length===0,"Please select a date.",this.triggerHost?.shadowRoot?.querySelector("button"))}formResetCallback(){this.value=this.defaultValue}render(){return o.html`<slot></slot>`}};n.styles=o.css`
+    :host {
+      display: contents;
+    }
+  `,i([(0,l.property)({type:String,reflect:!0,attribute:"selection-mode"})],n.prototype,"selectionMode",2),i([(0,l.property)({attribute:!1})],n.prototype,"value",2),i([(0,l.property)({type:String,reflect:!0})],n.prototype,"granularity",2),i([(0,l.property)({type:Boolean,reflect:!0})],n.prototype,"open",2),i([(0,l.property)({type:Boolean,reflect:!0})],n.prototype,"disabled",2),i([(0,l.property)({type:Boolean,reflect:!0})],n.prototype,"required",2),i([(0,l.property)({type:String,reflect:!0})],n.prototype,"name",2),i([(0,l.property)({attribute:"required-message"})],n.prototype,"requiredMessage",2),n=i([(0,c.customElement)("skdx-date-picker")],n);0&&(module.exports={SkdxDatePicker});

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

@@ -0,0 +1,117 @@
+import { LitElement } from 'lit';
+import { type CalendarSelectionMode, type CalendarValue } 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')`.
+ *
+ * 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.
+ *
+ * @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>
+ * ```
+ *
+ * @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 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.
+ */
+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`.
+     * @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.
+     */
+    value?: CalendarValue;
+    /**
+     * 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.
+     * @default 'day'
+     */
+    granularity: Granularity;
+    /** Whether the popup is open. Listen for `open-change`. */
+    open: boolean;
+    /** Disables the trigger, excluding the picker from the tab order and from form submission. */
+    disabled: 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;
+    /**
+     * 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.
+     * @default undefined — keeps `'Please select a date.'`
+     */
+    requiredMessage?: string;
+    readonly contentId: string;
+    private defaultValue?;
+    private hasDefaultValue;
+    /** The `<skdx-date-picker-trigger>` descendant — the floating-ui anchor for the popup. @internal */
+    triggerHost: HTMLElement | null;
+    /** The mounted `<skdx-date-picker-content>`, whose motion `open-change-complete` waits on. @internal */
+    contentEl: HTMLElement | null;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    /** Sets `value` — the whole selection, not one date — and dispatches `value-change`. A selection equal to the current one is a no-op. */
+    setValue(value: CalendarValue | undefined): void;
+    /** Sets `open` and dispatches `open-change`. An unchanged state is a no-op. */
+    setOpen(open: boolean): void;
+    private emit;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * 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.
+     */
+    private selectedDates;
+    private syncFormState;
+    /** Restores the date the picker was connected with. A form reset fires no `value-change`, just like a native reset. */
+    formResetCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker': SkdxDatePicker;
+    }
+}
+export {};

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

@@ -0,0 +1,117 @@
+import { LitElement } from 'lit';
+import { type CalendarSelectionMode, type CalendarValue } 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')`.
+ *
+ * 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.
+ *
+ * @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>
+ * ```
+ *
+ * @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 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.
+ */
+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`.
+     * @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.
+     */
+    value?: CalendarValue;
+    /**
+     * 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.
+     * @default 'day'
+     */
+    granularity: Granularity;
+    /** Whether the popup is open. Listen for `open-change`. */
+    open: boolean;
+    /** Disables the trigger, excluding the picker from the tab order and from form submission. */
+    disabled: 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;
+    /**
+     * 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.
+     * @default undefined — keeps `'Please select a date.'`
+     */
+    requiredMessage?: string;
+    readonly contentId: string;
+    private defaultValue?;
+    private hasDefaultValue;
+    /** The `<skdx-date-picker-trigger>` descendant — the floating-ui anchor for the popup. @internal */
+    triggerHost: HTMLElement | null;
+    /** The mounted `<skdx-date-picker-content>`, whose motion `open-change-complete` waits on. @internal */
+    contentEl: HTMLElement | null;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    /** Sets `value` — the whole selection, not one date — and dispatches `value-change`. A selection equal to the current one is a no-op. */
+    setValue(value: CalendarValue | undefined): void;
+    /** Sets `open` and dispatches `open-change`. An unchanged state is a no-op. */
+    setOpen(open: boolean): void;
+    private emit;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * 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.
+     */
+    private selectedDates;
+    private syncFormState;
+    /** Restores the date the picker was connected with. A form reset fires no `value-change`, just like a native reset. */
+    formResetCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker': SkdxDatePicker;
+    }
+}
+export {};

package/dist/date-picker/DatePicker.js

@@ -0,0 +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`
+    :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};

package/dist/date-picker/DatePickerCalendar.cjs

@@ -0,0 +1,7 @@
+"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. */
+    :host {
+      display: block;
+    }
+  `,n=u([(0,m.customElement)("skdx-date-picker-calendar","date-picker","calendar")],n);0&&(module.exports={SkdxDatePickerCalendar});

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

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+/**
+ * `<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.
+ *
+ * @example
+ * ```html
+ * <skdx-date-picker-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;
+    private root;
+    private calendarEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private wireCalendar;
+    private readonly handleValueChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-calendar': SkdxDatePickerCalendar;
+    }
+}