@skdx/web-components 0.26.0

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

@@ -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;
+    }
+}

package/dist/date-picker/DatePickerCalendar.js

@@ -0,0 +1,7 @@
+var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(e,r,a,n)=>{for(var t=n>1?void 0:n?c(r,a):r,i=e.length-1,o;i>=0;i--)(o=e[i])&&(t=(n?o(r,a,t):o(t))||t);return n&&t&&s(r,a,t),t};import{css as u,html as h,LitElement as p}from"lit";import{isDateRange as m}from"../calendar/Calendar.js";import{closestThroughPortal as k}from"../internal/closest.js";import{customElement as v}from"../internal/define.js";function C(e){return Array.isArray(e)?!1:m(e)?e.end!==null:e!==null}var l=class extends p{constructor(){super(...arguments);this.root=null;this.calendarEl=null;this.handleValueChange=a=>{a.stopPropagation(),this.root?.setValue(a.detail),this.root?.granularity==="day"&&C(a.detail)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=k(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 h`<slot></slot>`}};l.styles=u`
+    /* A box, because .skdx-date-picker__calendar is nothing but padding around
+       the calendar, and padding needs one. */
+    :host {
+      display: block;
+    }
+  `,l=d([v("skdx-date-picker-calendar","date-picker","calendar")],l);export{l as SkdxDatePickerCalendar};

package/dist/date-picker/DatePickerClose.cjs

@@ -0,0 +1,9 @@
+"use strict";var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(o,t)=>{for(var r in t)c(o,r,{get:t[r],enumerable:!0})},f=(o,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of u(t))!v.call(o,e)&&e!==r&&c(o,e,{get:()=>t[e],enumerable:!(l=p(t,e))||l.enumerable});return o};var y=o=>f(c({},"__esModule",{value:!0}),o),m=(o,t,r,l)=>{for(var e=l>1?void 0:l?p(t,r):t,n=o.length-1,d;n>=0;n--)(d=o[n])&&(e=(l?d(t,r,e):d(e))||e);return l&&e&&c(t,r,e),e};var g={};b(g,{SkdxDatePickerClose:()=>s});module.exports=y(g);var i=require("lit"),h=require("../internal/closest.cjs"),k=require("../internal/define.cjs"),a=require("../internal/styles.cjs");var s=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.handleClick=()=>this.root?.setOpen(!1)}connectedCallback(){super.connectedCallback(),this.root=(0,h.closestThroughPortal)(this,"skdx-date-picker")}render(){return i.html`
+      <button part="close" type="button" @click=${this.handleClick}>
+        <slot></slot>
+      </button>
+    `}};s.shadowRootOptions=a.delegatesFocusShadowRootOptions,s.styles=[a.resetNativeControl,i.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],s=m([(0,k.customElement)("skdx-date-picker-close","date-picker","close")],s);0&&(module.exports={SkdxDatePickerClose});

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-date-picker-close>` — closes the closest ancestor `<skdx-date-picker>`'s
+ * popup on click without changing the selected date. Renders a native
+ * `<button type="button">`.
+ *
+ * @csspart close - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxDatePickerClose extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-close': SkdxDatePickerClose;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-date-picker-close>` — closes the closest ancestor `<skdx-date-picker>`'s
+ * popup on click without changing the selected date. Renders a native
+ * `<button type="button">`.
+ *
+ * @csspart close - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxDatePickerClose extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-close': SkdxDatePickerClose;
+    }
+}

package/dist/date-picker/DatePickerClose.js

@@ -0,0 +1,9 @@
+var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var c=(l,o,s,r)=>{for(var t=r>1?void 0:r?d(o,s):o,i=l.length-1,a;i>=0;i--)(a=l[i])&&(t=(r?a(o,s,t):a(t))||t);return r&&t&&n(o,s,t),t};import{css as p,html as m,LitElement as h}from"lit";import{closestThroughPortal as k}from"../internal/closest.js";import{customElement as u}from"../internal/define.js";import{controlBoxOnHost as v,delegatesFocusShadowRootOptions as b,resetNativeControl as f}from"../internal/styles.js";var e=class extends h{constructor(){super(...arguments);this.root=null;this.handleClick=()=>this.root?.setOpen(!1)}connectedCallback(){super.connectedCallback(),this.root=k(this,"skdx-date-picker")}render(){return m`
+      <button part="close" type="button" @click=${this.handleClick}>
+        <slot></slot>
+      </button>
+    `}};e.shadowRootOptions=b,e.styles=[f,p`
+      :host {
+        display: inline-block;
+      }
+    `,v],e=c([u("skdx-date-picker-close","date-picker","close")],e);export{e as SkdxDatePickerClose};

package/dist/date-picker/DatePickerContent.cjs

@@ -0,0 +1,5 @@
+"use strict";var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var O=Object.prototype.hasOwnProperty;var b=(s,i)=>{for(var t in i)h(s,t,{get:i[t],enumerable:!0})},E=(s,i,t,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of y(i))!O.call(s,e)&&e!==t&&h(s,e,{get:()=>i[e],enumerable:!(n=f(i,e))||n.enumerable});return s};var w=s=>E(h({},"__esModule",{value:!0}),s),r=(s,i,t,n)=>{for(var e=n>1?void 0:n?f(i,t):i,c=s.length-1,u;c>=0;c--)(u=s[c])&&(e=(n?u(i,t,e):u(e))||e);return n&&e&&h(i,t,e),e};var L={};b(L,{SkdxDatePickerContent:()=>o});module.exports=w(L);var l=require("lit"),a=require("lit/decorators.js"),v=require("../internal/closest.cjs"),m=require("../internal/define.cjs"),d=require("../internal/dismiss.cjs"),p=require("../internal/positioning.cjs"),g=require("../internal/styles.cjs");var o=class extends l.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="center";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.handleKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),(0,d.dispatchEscapeKeyDown)(this,t)&&(this.root.setOpen(!1),this.root.triggerHost?.focus?.()))};this.handleOutsidePointerDown=t=>{!this.root?.open||this.isInside(t.target)||(0,d.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let n=(0,d.focusOutsideTarget)(t);n===null||this.isInside(n)||(0,d.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=(0,v.closestThroughPortal)(this,"skdx-date-picker"),this.root&&(this.root.contentEl=this),this.root?.addEventListener("skdx-date-picker-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-date-picker-internal-update",this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),super.disconnectedCallback()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),this.hidden=!t,t?this.activate():this.deactivate()}activate(){this.cleanupPosition||!this.root?.triggerHost||(this.cleanupPosition=(0,p.positionFloating)(this.root.triggerHost,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding}))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}isInside(t){return t?this.contains(t)||this.root?.contains(t)===!0:!1}render(){return l.html`<slot></slot>`}};o.styles=[g.hiddenHostStyles,l.css`
+      :host {
+        display: block;
+      }
+    `],r([(0,a.property)({type:String})],o.prototype,"side",2),r([(0,a.property)({type:String})],o.prototype,"align",2),r([(0,a.property)({type:Number,attribute:"side-offset"})],o.prototype,"sideOffset",2),r([(0,a.property)({type:Number,attribute:"align-offset"})],o.prototype,"alignOffset",2),r([(0,a.property)({converter:p.optOutBoolean,attribute:"avoid-collisions"})],o.prototype,"avoidCollisions",2),r([(0,a.property)({type:Number,attribute:"collision-padding"})],o.prototype,"collisionPadding",2),o=r([(0,m.customElement)("skdx-date-picker-content","date-picker","content")],o);0&&(module.exports={SkdxDatePickerContent});

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

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from '../internal/positioning.cjs';
+/**
+ * `<skdx-date-picker-content>` — popup panel for the closest ancestor
+ * `<skdx-date-picker>`, positioned relative to `<skdx-date-picker-trigger>`
+ * via `@floating-ui/dom`. Sets `data-state` on itself, plus
+ * `data-side`/`data-align` — seeded from the configured `side`/`align`, then
+ * rewritten by `positionFloating` with floating-ui's resolved placement.
+ *
+ * Closes on Escape (returning focus to the trigger) or on an outside
+ * interaction — pointer-down outside, or focus moving outside — each announced
+ * first as `interact-outside` and then as the specific event, so one
+ * `preventDefault()` vetoes either path.
+ *
+ * @fires escape-key-down - Escape was pressed inside the popup while open. Preventable.
+ * @fires pointer-down-outside - A pointer-down landed outside the picker while open. Preventable.
+ * @fires focus-outside - Focus moved outside the picker while open (detail: the original focusin). Preventable.
+ * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
+ */
+export declare class SkdxDatePickerContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred edge of the trigger to place the popup against. */
+    side: PositionOptions['side'];
+    /**
+     * Preferred alignment along that edge relative to the trigger.
+     *
+     * `center`, not `start`: the date-picker contract declares no popper props,
+     * so React's `DatePickerContent` inherits `PopperContent`'s `center`. Vue and
+     * Svelte already default to `center`; this port and Angular had both drifted
+     * to `start`, which moved every panel's x against the React reference.
+     */
+    align: PositionOptions['align'];
+    /** Pixel gap between the popup and the trigger's edge. */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. */
+    alignOffset: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    avoidCollisions: boolean;
+    /** Minimum pixel distance to keep from the viewport edge when avoiding collisions. */
+    collisionPadding: number;
+    private root;
+    private readonly onRootUpdate;
+    private cleanupPosition?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    private activate;
+    private deactivate;
+    /**
+     * The layer is the whole picker, not just this panel: the trigger, and the
+     * `<skdx-date-picker-input>` segments that keep focus while the popup is up,
+     * all sit outside this element but inside the root.
+     */
+    private isInside;
+    private readonly handleKeyDown;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-content': SkdxDatePickerContent;
+    }
+}

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

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from '../internal/positioning.js';
+/**
+ * `<skdx-date-picker-content>` — popup panel for the closest ancestor
+ * `<skdx-date-picker>`, positioned relative to `<skdx-date-picker-trigger>`
+ * via `@floating-ui/dom`. Sets `data-state` on itself, plus
+ * `data-side`/`data-align` — seeded from the configured `side`/`align`, then
+ * rewritten by `positionFloating` with floating-ui's resolved placement.
+ *
+ * Closes on Escape (returning focus to the trigger) or on an outside
+ * interaction — pointer-down outside, or focus moving outside — each announced
+ * first as `interact-outside` and then as the specific event, so one
+ * `preventDefault()` vetoes either path.
+ *
+ * @fires escape-key-down - Escape was pressed inside the popup while open. Preventable.
+ * @fires pointer-down-outside - A pointer-down landed outside the picker while open. Preventable.
+ * @fires focus-outside - Focus moved outside the picker while open (detail: the original focusin). Preventable.
+ * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
+ */
+export declare class SkdxDatePickerContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred edge of the trigger to place the popup against. */
+    side: PositionOptions['side'];
+    /**
+     * Preferred alignment along that edge relative to the trigger.
+     *
+     * `center`, not `start`: the date-picker contract declares no popper props,
+     * so React's `DatePickerContent` inherits `PopperContent`'s `center`. Vue and
+     * Svelte already default to `center`; this port and Angular had both drifted
+     * to `start`, which moved every panel's x against the React reference.
+     */
+    align: PositionOptions['align'];
+    /** Pixel gap between the popup and the trigger's edge. */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. */
+    alignOffset: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    avoidCollisions: boolean;
+    /** Minimum pixel distance to keep from the viewport edge when avoiding collisions. */
+    collisionPadding: number;
+    private root;
+    private readonly onRootUpdate;
+    private cleanupPosition?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    private activate;
+    private deactivate;
+    /**
+     * The layer is the whole picker, not just this panel: the trigger, and the
+     * `<skdx-date-picker-input>` segments that keep focus while the popup is up,
+     * all sit outside this element but inside the root.
+     */
+    private isInside;
+    private readonly handleKeyDown;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-content': SkdxDatePickerContent;
+    }
+}

package/dist/date-picker/DatePickerContent.js

@@ -0,0 +1,5 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var e=(a,r,t,o)=>{for(var s=o>1?void 0:o?c(r,t):r,d=a.length-1,l;d>=0;d--)(l=a[d])&&(s=(o?l(r,t,s):l(s))||s);return o&&s&&p(r,t,s),s};import{css as u,html as f,LitElement as v}from"lit";import{property as n}from"lit/decorators.js";import{closestThroughPortal as m}from"../internal/closest.js";import{customElement as g}from"../internal/define.js";import{dispatchEscapeKeyDown as y,dispatchOutside as h,focusOutsideTarget as O}from"../internal/dismiss.js";import{optOutBoolean as b,positionFloating as E}from"../internal/positioning.js";import{hiddenHostStyles as w}from"../internal/styles.js";var i=class extends v{constructor(){super(...arguments);this.side="bottom";this.align="center";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.handleKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),y(this,t)&&(this.root.setOpen(!1),this.root.triggerHost?.focus?.()))};this.handleOutsidePointerDown=t=>{!this.root?.open||this.isInside(t.target)||h(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let o=O(t);o===null||this.isInside(o)||h(this,"focus-outside",t)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=m(this,"skdx-date-picker"),this.root&&(this.root.contentEl=this),this.root?.addEventListener("skdx-date-picker-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-date-picker-internal-update",this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),super.disconnectedCallback()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),this.hidden=!t,t?this.activate():this.deactivate()}activate(){this.cleanupPosition||!this.root?.triggerHost||(this.cleanupPosition=E(this.root.triggerHost,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding}))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}isInside(t){return t?this.contains(t)||this.root?.contains(t)===!0:!1}render(){return f`<slot></slot>`}};i.styles=[w,u`
+      :host {
+        display: block;
+      }
+    `],e([n({type:String})],i.prototype,"side",2),e([n({type:String})],i.prototype,"align",2),e([n({type:Number,attribute:"side-offset"})],i.prototype,"sideOffset",2),e([n({type:Number,attribute:"align-offset"})],i.prototype,"alignOffset",2),e([n({converter:b,attribute:"avoid-collisions"})],i.prototype,"avoidCollisions",2),e([n({type:Number,attribute:"collision-padding"})],i.prototype,"collisionPadding",2),i=e([g("skdx-date-picker-content","date-picker","content")],i);export{i as SkdxDatePickerContent};

package/dist/date-picker/DatePickerInput.cjs

@@ -0,0 +1,10 @@
+"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var g=(a,e)=>{for(var t in e)n(a,t,{get:e[t],enumerable:!0})},b=(a,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of v(e))!k.call(a,r)&&r!==t&&n(a,r,{get:()=>e[r],enumerable:!(i=c(e,r))||i.enumerable});return a};var f=a=>b(n({},"__esModule",{value:!0}),a),p=(a,e,t,i)=>{for(var r=i>1?void 0:i?c(e,t):e,d=a.length-1,s;d>=0;d--)(s=a[d])&&(r=(i?s(e,t,r):s(r))||r);return i&&r&&n(e,t,r),r};var x={};g(x,{SkdxDatePickerInput:()=>l});module.exports=f(x);var o=require("lit"),u=require("lit/decorators.js"),h=require("../internal/define.cjs"),m=require("../internal/styles.cjs"),E=require("../date-field/DateField.cjs");var l=class extends o.LitElement{constructor(){super(...arguments);this.ariaLabel=null;this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleValueChange=t=>{t.stopPropagation(),this.root?.setValue(t.detail)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,m.installLightDomStyles)(),this.root=this.closest("skdx-date-picker"),this.root?.addEventListener("skdx-date-picker-internal-update",this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-date-picker-internal-update",this.onUpdate),super.disconnectedCallback()}render(){if(!this.root||this.root.selectionMode!=="single")return o.nothing;let t=this.root.value;return o.html`
+      <skdx-date-field
+        .value=${t instanceof Date?t:null}
+        granularity=${this.root.granularity}
+        ?disabled=${this.root.disabled}
+        ?required=${this.root.required}
+        aria-label=${this.ariaLabel??o.nothing}
+        @value-change=${this.handleValueChange}
+      ></skdx-date-field>
+    `}};p([(0,u.property)({type:String,attribute:"aria-label"})],l.prototype,"ariaLabel",2),l=p([(0,h.customElement)("skdx-date-picker-input","date-picker","input")],l);0&&(module.exports={SkdxDatePickerInput});

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

@@ -0,0 +1,66 @@
+import { LitElement, nothing } from 'lit';
+import '../date-field/DateField.cjs';
+/**
+ * `<skdx-date-picker-input>` — the typed-entry half of a `<skdx-date-picker>`: a
+ * `<skdx-date-field>` pre-wired to the picker's `value` and `granularity`, so a
+ * date can be typed instead of clicked without the two halves drifting apart.
+ * Editing a segment updates the same selection the popup calendar reads, and
+ * picking a date in the calendar re-seeds the segments.
+ *
+ * Only meaningful in `selection-mode="single"` — a segmented field cannot
+ * express a range or a multi-selection, so it renders nothing in the other two
+ * modes rather than silently editing the wrong date.
+ *
+ * The nested field renders into the light DOM, so the skin's own
+ * `.skdx-date-field__segment` rules reach the segments directly — there are no
+ * shadow parts to re-export.
+ *
+ * @example
+ * ```html
+ * <skdx-date-picker granularity="minute">
+ *   <skdx-date-picker-input aria-label="Departure"></skdx-date-picker-input>
+ *   <skdx-date-picker-trigger>Pick</skdx-date-picker-trigger>
+ * </skdx-date-picker>
+ * ```
+ */
+export declare class SkdxDatePickerInput extends LitElement {
+    /**
+     * No shadow root.
+     *
+     * `<skdx-date-field>` renders its segments into *its* light DOM so that
+     * `.skdx-date-field__segment` — a document-level rule, unable to cross a
+     * shadow boundary — reaches them. Wrapping it in a shadow root here put that
+     * whole subtree back behind a boundary, which cost two things:
+     *
+     *   - the skin stopped reaching the nested field at all: neither
+     *     `.skdx-date-field` nor `.skdx-date-field__segment` applied, so a date
+     *     field inside a picker rendered unskinned where a standalone one did
+     *     not;
+     *   - every segment retargeted to this host, so `document.activeElement`
+     *     reported the same element for all three of them. Tab still moved, but
+     *     nothing outside the boundary could tell — and the sequential-focus
+     *     probe in `packages/skins/e2e/interaction-states.spec.ts` reads it as
+     *     focus that did not move and stops walking the page there.
+     *
+     * React has no element here at all — `DatePickerInput.tsx:32` *is* the
+     * `DateField`, with `.skdx-date-picker__input` merged onto its root. Keeping
+     * the host and dropping the shadow root is the closest this package gets to
+     * that without changing the box tree the geometry parity spec measures.
+     *
+     * Host display (and the reset) come from the shared light-DOM sheet.
+     */
+    protected createRenderRoot(): HTMLElement;
+    /** Accessible name forwarded to the nested `<skdx-date-field>`'s group. */
+    ariaLabel: string | null;
+    private root;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleValueChange;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-input': SkdxDatePickerInput;
+    }
+}

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

@@ -0,0 +1,66 @@
+import { LitElement, nothing } from 'lit';
+import '../date-field/DateField.js';
+/**
+ * `<skdx-date-picker-input>` — the typed-entry half of a `<skdx-date-picker>`: a
+ * `<skdx-date-field>` pre-wired to the picker's `value` and `granularity`, so a
+ * date can be typed instead of clicked without the two halves drifting apart.
+ * Editing a segment updates the same selection the popup calendar reads, and
+ * picking a date in the calendar re-seeds the segments.
+ *
+ * Only meaningful in `selection-mode="single"` — a segmented field cannot
+ * express a range or a multi-selection, so it renders nothing in the other two
+ * modes rather than silently editing the wrong date.
+ *
+ * The nested field renders into the light DOM, so the skin's own
+ * `.skdx-date-field__segment` rules reach the segments directly — there are no
+ * shadow parts to re-export.
+ *
+ * @example
+ * ```html
+ * <skdx-date-picker granularity="minute">
+ *   <skdx-date-picker-input aria-label="Departure"></skdx-date-picker-input>
+ *   <skdx-date-picker-trigger>Pick</skdx-date-picker-trigger>
+ * </skdx-date-picker>
+ * ```
+ */
+export declare class SkdxDatePickerInput extends LitElement {
+    /**
+     * No shadow root.
+     *
+     * `<skdx-date-field>` renders its segments into *its* light DOM so that
+     * `.skdx-date-field__segment` — a document-level rule, unable to cross a
+     * shadow boundary — reaches them. Wrapping it in a shadow root here put that
+     * whole subtree back behind a boundary, which cost two things:
+     *
+     *   - the skin stopped reaching the nested field at all: neither
+     *     `.skdx-date-field` nor `.skdx-date-field__segment` applied, so a date
+     *     field inside a picker rendered unskinned where a standalone one did
+     *     not;
+     *   - every segment retargeted to this host, so `document.activeElement`
+     *     reported the same element for all three of them. Tab still moved, but
+     *     nothing outside the boundary could tell — and the sequential-focus
+     *     probe in `packages/skins/e2e/interaction-states.spec.ts` reads it as
+     *     focus that did not move and stops walking the page there.
+     *
+     * React has no element here at all — `DatePickerInput.tsx:32` *is* the
+     * `DateField`, with `.skdx-date-picker__input` merged onto its root. Keeping
+     * the host and dropping the shadow root is the closest this package gets to
+     * that without changing the box tree the geometry parity spec measures.
+     *
+     * Host display (and the reset) come from the shared light-DOM sheet.
+     */
+    protected createRenderRoot(): HTMLElement;
+    /** Accessible name forwarded to the nested `<skdx-date-field>`'s group. */
+    ariaLabel: string | null;
+    private root;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleValueChange;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-input': SkdxDatePickerInput;
+    }
+}

package/dist/date-picker/DatePickerInput.js

@@ -0,0 +1,10 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(o,r,e,i)=>{for(var t=i>1?void 0:i?c(r,e):r,l=o.length-1,n;l>=0;l--)(n=o[l])&&(t=(i?n(r,e,t):n(t))||t);return i&&t&&p(r,e,t),t};import{html as u,LitElement as h,nothing as s}from"lit";import{property as m}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{installLightDomStyles as k}from"../internal/styles.js";import"../date-field/DateField.js";var a=class extends h{constructor(){super(...arguments);this.ariaLabel=null;this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleValueChange=e=>{e.stopPropagation(),this.root?.setValue(e.detail)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),k(),this.root=this.closest("skdx-date-picker"),this.root?.addEventListener("skdx-date-picker-internal-update",this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-date-picker-internal-update",this.onUpdate),super.disconnectedCallback()}render(){if(!this.root||this.root.selectionMode!=="single")return s;let e=this.root.value;return u`
+      <skdx-date-field
+        .value=${e instanceof Date?e:null}
+        granularity=${this.root.granularity}
+        ?disabled=${this.root.disabled}
+        ?required=${this.root.required}
+        aria-label=${this.ariaLabel??s}
+        @value-change=${this.handleValueChange}
+      ></skdx-date-field>
+    `}};d([m({type:String,attribute:"aria-label"})],a.prototype,"ariaLabel",2),a=d([v("skdx-date-picker-input","date-picker","input")],a);export{a as SkdxDatePickerInput};

package/dist/date-picker/DatePickerPortal.cjs

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var g=(a,e)=>{for(var m in e)r(a,m,{get:e[m],enumerable:!0})},E=(a,e,m,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of i(e))!x.call(a,t)&&t!==m&&r(a,t,{get:()=>e[t],enumerable:!(o=d(e,t))||o.enumerable});return a};var M=a=>E(r({},"__esModule",{value:!0}),a),c=(a,e,m,o)=>{for(var t=o>1?void 0:o?d(e,m):e,l=a.length-1,s;l>=0;l--)(s=a[l])&&(t=(o?s(e,m,t):s(t))||t);return o&&t&&r(e,m,t),t};var T={};g(T,{SkdxDatePickerPortal:()=>p});module.exports=M(T);var n=require("../internal/define.cjs"),f=require("../utils/portal.cjs");var p=class extends f.SkdxPortal{};p=c([(0,n.customElement)("skdx-date-picker-portal")],p);0&&(module.exports={SkdxDatePickerPortal});

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

@@ -0,0 +1,36 @@
+import { SkdxPortal } from '../utils/portal.cjs';
+/**
+ * `<skdx-date-picker-portal>` — teleports `<skdx-date-picker-content>` to
+ * `document.body` (or a custom `container`), so the calendar popup escapes
+ * clipping and `overflow` from ancestors of the field it is anchored to.
+ *
+ * The **host element stays where you wrote it** and the *children* are the
+ * things that move, into a `<div data-skdx-portal>` — so removing the family
+ * root removes the portalled content with it, and the parts inside still
+ * resolve that root through `closestThroughPortal()`.
+ *
+ * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's
+ * `DatePickerPortal` it takes no `force-mount` and does not unmount on close: the
+ * parts here never unmount, they hide via `hidden`, so there is nothing to
+ * force and nothing to keep alive for an exit animation.
+ *
+ * @example
+ * ```html
+ * <skdx-date-picker>
+ *   <skdx-date-picker-input></skdx-date-picker-input>
+ *   <skdx-date-picker-trigger>Pick</skdx-date-picker-trigger>
+ *   <skdx-date-picker-portal>
+ *     <skdx-date-picker-content>
+ *       <skdx-date-picker-calendar></skdx-date-picker-calendar>
+ *     </skdx-date-picker-content>
+ *   </skdx-date-picker-portal>
+ * </skdx-date-picker>
+ * ```
+ */
+export declare class SkdxDatePickerPortal extends SkdxPortal {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-portal': SkdxDatePickerPortal;
+    }
+}

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

@@ -0,0 +1,36 @@
+import { SkdxPortal } from '../utils/portal.js';
+/**
+ * `<skdx-date-picker-portal>` — teleports `<skdx-date-picker-content>` to
+ * `document.body` (or a custom `container`), so the calendar popup escapes
+ * clipping and `overflow` from ancestors of the field it is anchored to.
+ *
+ * The **host element stays where you wrote it** and the *children* are the
+ * things that move, into a `<div data-skdx-portal>` — so removing the family
+ * root removes the portalled content with it, and the parts inside still
+ * resolve that root through `closestThroughPortal()`.
+ *
+ * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's
+ * `DatePickerPortal` it takes no `force-mount` and does not unmount on close: the
+ * parts here never unmount, they hide via `hidden`, so there is nothing to
+ * force and nothing to keep alive for an exit animation.
+ *
+ * @example
+ * ```html
+ * <skdx-date-picker>
+ *   <skdx-date-picker-input></skdx-date-picker-input>
+ *   <skdx-date-picker-trigger>Pick</skdx-date-picker-trigger>
+ *   <skdx-date-picker-portal>
+ *     <skdx-date-picker-content>
+ *       <skdx-date-picker-calendar></skdx-date-picker-calendar>
+ *     </skdx-date-picker-content>
+ *   </skdx-date-picker-portal>
+ * </skdx-date-picker>
+ * ```
+ */
+export declare class SkdxDatePickerPortal extends SkdxPortal {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-portal': SkdxDatePickerPortal;
+    }
+}

package/dist/date-picker/DatePickerPortal.js

@@ -0,0 +1 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(o,t,p,a)=>{for(var e=a>1?void 0:a?c(t,p):t,r=o.length-1,l;r>=0;r--)(l=o[r])&&(e=(a?l(t,p,e):l(e))||e);return a&&e&&d(t,p,e),e};import{customElement as n}from"../internal/define.js";import{SkdxPortal as f}from"../utils/portal.js";var m=class extends f{};m=s([n("skdx-date-picker-portal")],m);export{m as SkdxDatePickerPortal};

package/dist/date-picker/DatePickerTimeField.cjs

@@ -0,0 +1,10 @@
+"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(i,r)=>{for(var e in r)d(i,e,{get:r[e],enumerable:!0})},$=(i,r,e,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of k(r))!v.call(i,t)&&t!==e&&d(i,t,{get:()=>r[t],enumerable:!(n=p(r,t))||n.enumerable});return i};var x=i=>$(d({},"__esModule",{value:!0}),i),u=(i,r,e,n)=>{for(var t=n>1?void 0:n?p(r,e):r,l=i.length-1,s;l>=0;l--)(s=i[l])&&(t=(n?s(r,e,t):s(t))||t);return n&&t&&d(r,e,t),t};var L={};y(L,{SkdxDatePickerTimeField:()=>o});module.exports=x(L);var a=require("lit"),m=require("lit/decorators.js"),h=require("../internal/closest.cjs"),g=require("../internal/define.cjs"),f=require("../internal/styles.cjs"),D=require("../time-field/TimeField.cjs");function E(i,r){if(!i)return null;let e=t=>String(t).padStart(2,"0"),n=`${e(i.getHours())}:${e(i.getMinutes())}`;return r?`${n}:${e(i.getSeconds())}`:n}var o=class extends a.LitElement{constructor(){super(...arguments);this.ariaLabel=null;this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleValueChange=e=>{e.stopPropagation();let n=e.detail,t=this.date;if(!t||n===null)return;let[l=0,s=0,b=0]=n.split(":").map(Number),c=new Date(t);c.setHours(l,s,b,0),this.root?.setValue(c)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,f.installLightDomStyles)(),this.root=(0,h.closestThroughPortal)(this,"skdx-date-picker"),this.root?.addEventListener("skdx-date-picker-internal-update",this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-date-picker-internal-update",this.onUpdate),super.disconnectedCallback()}get date(){let e=this.root?.value;return e instanceof Date?e:null}render(){let e=this.root?.granularity;return!this.root||e===void 0||e==="day"?a.nothing:this.root.selectionMode!=="single"?a.nothing:a.html`
+      <skdx-time-field
+        granularity=${e}
+        .value=${E(this.date,e==="second")}
+        ?disabled=${this.root.disabled}
+        ?required=${this.root.required}
+        aria-label=${this.ariaLabel??a.nothing}
+        @value-change=${this.handleValueChange}
+      ></skdx-time-field>
+    `}};u([(0,m.property)({type:String,attribute:"aria-label"})],o.prototype,"ariaLabel",2),o=u([(0,g.customElement)("skdx-date-picker-time-field","date-picker","time-field")],o);0&&(module.exports={SkdxDatePickerTimeField});

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

@@ -0,0 +1,44 @@
+import { LitElement, nothing } from 'lit';
+import '../time-field/TimeField.cjs';
+/**
+ * `<skdx-date-picker-time-field>` — the time half of a date-time
+ * `<skdx-date-picker>`: a `<skdx-time-field>` that edits only the time-of-day of
+ * the picker's selected date, leaving the calendar to own the day. Renders
+ * nothing at `granularity="day"` — a picker with no time granularity has no
+ * time to edit — and nothing outside `selection-mode="single"`, for the same
+ * reason as `<skdx-date-picker-input>`.
+ *
+ * The nested field renders into the light DOM, so the skin's own
+ * `.skdx-time-field__segment` rules reach the segments directly — there are no
+ * shadow parts to re-export.
+ *
+ * @example
+ * ```html
+ * <skdx-date-picker granularity="minute">
+ *   <skdx-date-picker-trigger>Pick</skdx-date-picker-trigger>
+ *   <skdx-date-picker-content>
+ *     <skdx-date-picker-calendar>…</skdx-date-picker-calendar>
+ *     <skdx-date-picker-time-field aria-label="Time"></skdx-date-picker-time-field>
+ *   </skdx-date-picker-content>
+ * </skdx-date-picker>
+ * ```
+ */
+export declare class SkdxDatePickerTimeField extends LitElement {
+    /** No shadow root, for the reasons `<skdx-date-picker-input>` records at length. */
+    protected createRenderRoot(): HTMLElement;
+    /** Accessible name forwarded to the nested `<skdx-time-field>`'s group. */
+    ariaLabel: string | null;
+    private root;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The picker's selection, but only when it is a single `Date` this field can edit. */
+    private get date();
+    private readonly handleValueChange;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-time-field': SkdxDatePickerTimeField;
+    }
+}

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

@@ -0,0 +1,44 @@
+import { LitElement, nothing } from 'lit';
+import '../time-field/TimeField.js';
+/**
+ * `<skdx-date-picker-time-field>` — the time half of a date-time
+ * `<skdx-date-picker>`: a `<skdx-time-field>` that edits only the time-of-day of
+ * the picker's selected date, leaving the calendar to own the day. Renders
+ * nothing at `granularity="day"` — a picker with no time granularity has no
+ * time to edit — and nothing outside `selection-mode="single"`, for the same
+ * reason as `<skdx-date-picker-input>`.
+ *
+ * The nested field renders into the light DOM, so the skin's own
+ * `.skdx-time-field__segment` rules reach the segments directly — there are no
+ * shadow parts to re-export.
+ *
+ * @example
+ * ```html
+ * <skdx-date-picker granularity="minute">
+ *   <skdx-date-picker-trigger>Pick</skdx-date-picker-trigger>
+ *   <skdx-date-picker-content>
+ *     <skdx-date-picker-calendar>…</skdx-date-picker-calendar>
+ *     <skdx-date-picker-time-field aria-label="Time"></skdx-date-picker-time-field>
+ *   </skdx-date-picker-content>
+ * </skdx-date-picker>
+ * ```
+ */
+export declare class SkdxDatePickerTimeField extends LitElement {
+    /** No shadow root, for the reasons `<skdx-date-picker-input>` records at length. */
+    protected createRenderRoot(): HTMLElement;
+    /** Accessible name forwarded to the nested `<skdx-time-field>`'s group. */
+    ariaLabel: string | null;
+    private root;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The picker's selection, but only when it is a single `Date` this field can edit. */
+    private get date();
+    private readonly handleValueChange;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-date-picker-time-field': SkdxDatePickerTimeField;
+    }
+}

package/dist/date-picker/DatePickerTimeField.js

@@ -0,0 +1,10 @@
+var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(i,n,e,r)=>{for(var t=r>1?void 0:r?m(n,e):n,a=i.length-1,o;a>=0;a--)(o=i[a])&&(t=(r?o(n,e,t):o(t))||t);return r&&t&&p(n,e,t),t};import{html as h,LitElement as g,nothing as d}from"lit";import{property as f}from"lit/decorators.js";import{closestThroughPortal as b}from"../internal/closest.js";import{customElement as k}from"../internal/define.js";import{installLightDomStyles as v}from"../internal/styles.js";import"../time-field/TimeField.js";function y(i,n){if(!i)return null;let e=t=>String(t).padStart(2,"0"),r=`${e(i.getHours())}:${e(i.getMinutes())}`;return n?`${r}:${e(i.getSeconds())}`:r}var l=class extends g{constructor(){super(...arguments);this.ariaLabel=null;this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleValueChange=e=>{e.stopPropagation();let r=e.detail,t=this.date;if(!t||r===null)return;let[a=0,o=0,c=0]=r.split(":").map(Number),u=new Date(t);u.setHours(a,o,c,0),this.root?.setValue(u)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),v(),this.root=b(this,"skdx-date-picker"),this.root?.addEventListener("skdx-date-picker-internal-update",this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-date-picker-internal-update",this.onUpdate),super.disconnectedCallback()}get date(){let e=this.root?.value;return e instanceof Date?e:null}render(){let e=this.root?.granularity;return!this.root||e===void 0||e==="day"?d:this.root.selectionMode!=="single"?d:h`
+      <skdx-time-field
+        granularity=${e}
+        .value=${y(this.date,e==="second")}
+        ?disabled=${this.root.disabled}
+        ?required=${this.root.required}
+        aria-label=${this.ariaLabel??d}
+        @value-change=${this.handleValueChange}
+      ></skdx-time-field>
+    `}};s([f({type:String,attribute:"aria-label"})],l.prototype,"ariaLabel",2),l=s([k("skdx-date-picker-time-field","date-picker","time-field")],l);export{l as SkdxDatePickerTimeField};