@skdx/web-components 0.27.0 → 0.28.0

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

@@ -1,32 +1,46 @@
 import { LitElement } from 'lit';
+import { type CalendarView } from '../calendar/Calendar.js';
 /**
- * `<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>;
 }

package/dist/date-picker/DatePickerCalendar.js

@@ -1,7 +1,5 @@
-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. */
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(a,r,e,i)=>{for(var n=i>1?void 0:i?h(r,e):r,s=a.length-1,o;s>=0;s--)(o=a[s])&&(n=(i?o(r,e,n):o(n))||n);return i&&n&&u(r,e,n),n};import{css as c,html as w,LitElement as f}from"lit";import{property as d}from"lit/decorators.js";import{isDateRange as V}from"../calendar/Calendar.js";import{closestThroughPortal as m}from"../internal/closest.js";import{customElement as p}from"../internal/define.js";function v(a){return Array.isArray(a)?!1:V(a)?a.end!==null:a!==null}var t=class extends f{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"&&v(e.detail)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=m(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 i=this.calendarEl;i&&(e.has("defaultView")&&this.defaultView!==void 0&&(i.defaultView=this.defaultView),e.has("minView")&&this.minView!==void 0&&(i.minView=this.minView),e.has("maxView")&&this.maxView!==void 0&&(i.maxView=this.maxView),e.has("view")&&this.view!==void 0&&(i.view=this.view))}render(){return w`<slot></slot>`}};t.styles=c`
     :host {
       display: block;
     }
-  `,l=d([v("skdx-date-picker-calendar","date-picker","calendar")],l);export{l as SkdxDatePickerCalendar};
+  `,l([d({type:String})],t.prototype,"view",2),l([d({type:String,attribute:"default-view"})],t.prototype,"defaultView",2),l([d({type:String,attribute:"min-view"})],t.prototype,"minView",2),l([d({type:String,attribute:"max-view"})],t.prototype,"maxView",2),t=l([p("skdx-date-picker-calendar","date-picker","calendar")],t);export{t as SkdxDatePickerCalendar};

package/dist/date-picker/DatePickerContent.cjs

@@ -1,5 +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`
+"use strict";var h=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var F=(r,e)=>{for(var t in e)h(r,t,{get:e[t],enumerable:!0})},w=(r,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of y(e))!E.call(r,i)&&i!==t&&h(r,i,{get:()=>e[i],enumerable:!(s=v(e,i))||s.enumerable});return r};var L=r=>w(h({},"__esModule",{value:!0}),r),a=(r,e,t,s)=>{for(var i=s>1?void 0:s?v(e,t):e,u=r.length-1,m;u>=0;u--)(m=r[u])&&(i=(s?m(e,t,i):m(i))||i);return s&&i&&h(e,t,i),i};var A={};F(A,{SkdxDatePickerContent:()=>o});module.exports=L(A);var l=require("lit"),d=require("lit/decorators.js"),c=require("../calendar/Calendar.cjs"),g=require("../internal/closest.cjs"),O=require("../internal/define.cjs"),n=require("../internal/dismiss.cjs"),p=require("../internal/positioning.cjs"),b=require("../internal/styles.cjs"),f=require("./auto-focus.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.authoredLabel=!1;this.wasOpen=!1;this.dismissedOutside=!1;this.focusFrame=0;this.handleKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),(0,n.dispatchEscapeKeyDown)(this,t)&&this.root.setOpen(!1))};this.handleOutsidePointerDown=t=>{!this.root?.open||this.isInside(t.target)||(0,n.dispatchOutside)(this,"pointer-down-outside",t)&&(this.dismissedOutside=!0,this.root.setOpen(!1))};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let s=(0,n.focusOutsideTarget)(t);s===null||this.isInside(s)||(0,n.dispatchOutside)(this,"focus-outside",t)&&(this.dismissedOutside=!0,this.root.setOpen(!1))}}get anchorISO(){let t=(0,c.anchorOf)(this.root?.value??null);return t?(0,c.toISODateString)(t):null}connectedCallback(){super.connectedCallback(),this.root=(0,g.closestThroughPortal)(this,"skdx-date-picker"),this.root&&(this.root.contentEl=this),this.authoredLabel=this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"),this.setAttribute("role","dialog"),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.id: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?.(),cancelAnimationFrame(this.focusFrame),super.disconnectedCallback()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed");for(let[i,u]of[["data-invalid",this.root?.invalid??!1],["data-readonly",this.root?.readOnly??!1]])u?this.setAttribute(i,""):this.removeAttribute(i);this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start");let s=this.root?.triggerHost?.id||this.root?.triggerId;!this.authoredLabel&&s&&this.setAttribute("aria-labelledby",s),this.hidden=!t,t?this.activate():this.deactivate(),t!==this.wasOpen&&(this.wasOpen=t,t?this.autoFocusIn():this.autoFocusOut())}autoFocusIn(){this.dismissedOutside=!1,this.focusFrame=requestAnimationFrame(()=>{this.root?.open&&(this.contains(document.activeElement)||(0,n.dispatchAutoFocus)(this,"open-auto-focus")&&(0,n.focusOnOpen)(()=>(0,f.focusDatePickerContent)(this,this.anchorISO)))})}autoFocusOut(){if(cancelAnimationFrame(this.focusFrame),this.dismissedOutside||!(0,n.dispatchAutoFocus)(this,"close-auto-focus"))return;let t=this.root?.triggerHost;t&&(0,f.focusDelegate)(t).focus({preventScroll:!0})}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,collisionBoundary:this.collisionBoundary}))}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=[b.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});
+    `],a([(0,d.property)({type:String})],o.prototype,"side",2),a([(0,d.property)({type:String})],o.prototype,"align",2),a([(0,d.property)({type:Number,attribute:"side-offset"})],o.prototype,"sideOffset",2),a([(0,d.property)({type:Number,attribute:"align-offset"})],o.prototype,"alignOffset",2),a([(0,d.property)({converter:p.optOutBoolean,attribute:"avoid-collisions"})],o.prototype,"avoidCollisions",2),a([(0,d.property)({type:Number,attribute:"collision-padding"})],o.prototype,"collisionPadding",2),a([(0,d.property)({attribute:!1})],o.prototype,"collisionBoundary",2),o=a([(0,O.customElement)("skdx-date-picker-content","date-picker","content")],o);0&&(module.exports={SkdxDatePickerContent});

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

@@ -1,34 +1,20 @@
 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.
+ * `<skdx-date-picker-content>` — popup `role="dialog"` for the ancestor `<skdx-date-picker>`.
+ * Focus moves into calendar on open, returns to trigger on inside close. Closes on Escape / outside interaction.
+ * @fires escape-key-down - Escape pressed inside while open. Preventable.
+ * @fires pointer-down-outside - Fires on pointer-down outside the popup and trigger; preventDefault() keeps it open.
+ * @fires focus-outside - Focus moved outside while open. Preventable.
+ * @fires interact-outside - Either outside event, fired before the specific event. Preventable.
+ * @fires open-auto-focus - Before focus moves into calendar on open. Prevent to leave focus unchanged.
+ * @fires close-auto-focus - Before focus returns to trigger on inside close. Prevent to suppress return.
  */
 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.
-     */
+    /** Preferred alignment along that edge relative to the trigger. */
     align: PositionOptions['align'];
     /** Pixel gap between the popup and the trigger's edge. */
     sideOffset: number;
@@ -38,19 +24,24 @@ export declare class SkdxDatePickerContent extends LitElement {
     avoidCollisions: boolean;
     /** Minimum pixel distance to keep from the viewport edge when avoiding collisions. */
     collisionPadding: number;
+    /** Element(s) collisions are measured against instead of the clipping ancestors. Property-only: an `Element` can't come from an attribute string. */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
     private root;
     private readonly onRootUpdate;
     private cleanupPosition?;
+    private authoredLabel;
+    private wasOpen;
+    private dismissedOutside;
+    /** Frame handle for the deferred open-time focus move, cancelled if the popup shuts first. */
+    private focusFrame;
+    private get anchorISO();
     connectedCallback(): void;
     disconnectedCallback(): void;
     private syncHostState;
+    private autoFocusIn;
+    private autoFocusOut;
     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;

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

@@ -1,34 +1,20 @@
 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.
+ * `<skdx-date-picker-content>` — popup `role="dialog"` for the ancestor `<skdx-date-picker>`.
+ * Focus moves into calendar on open, returns to trigger on inside close. Closes on Escape / outside interaction.
+ * @fires escape-key-down - Escape pressed inside while open. Preventable.
+ * @fires pointer-down-outside - Fires on pointer-down outside the popup and trigger; preventDefault() keeps it open.
+ * @fires focus-outside - Focus moved outside while open. Preventable.
+ * @fires interact-outside - Either outside event, fired before the specific event. Preventable.
+ * @fires open-auto-focus - Before focus moves into calendar on open. Prevent to leave focus unchanged.
+ * @fires close-auto-focus - Before focus returns to trigger on inside close. Prevent to suppress return.
  */
 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.
-     */
+    /** Preferred alignment along that edge relative to the trigger. */
     align: PositionOptions['align'];
     /** Pixel gap between the popup and the trigger's edge. */
     sideOffset: number;
@@ -38,19 +24,24 @@ export declare class SkdxDatePickerContent extends LitElement {
     avoidCollisions: boolean;
     /** Minimum pixel distance to keep from the viewport edge when avoiding collisions. */
     collisionPadding: number;
+    /** Element(s) collisions are measured against instead of the clipping ancestors. Property-only: an `Element` can't come from an attribute string. */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
     private root;
     private readonly onRootUpdate;
     private cleanupPosition?;
+    private authoredLabel;
+    private wasOpen;
+    private dismissedOutside;
+    /** Frame handle for the deferred open-time focus move, cancelled if the popup shuts first. */
+    private focusFrame;
+    private get anchorISO();
     connectedCallback(): void;
     disconnectedCallback(): void;
     private syncHostState;
+    private autoFocusIn;
+    private autoFocusOut;
     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;

package/dist/date-picker/DatePickerContent.js

@@ -1,5 +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`
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(d,r,t,e)=>{for(var s=e>1?void 0:e?p(r,t):r,a=d.length-1,l;a>=0;a--)(l=d[a])&&(s=(e?l(r,t,s):l(s))||s);return e&&s&&c(r,t,s),s};import{css as f,html as m,LitElement as v}from"lit";import{property as n}from"lit/decorators.js";import{anchorOf as g,toISODateString as O}from"../calendar/Calendar.js";import{closestThroughPortal as b}from"../internal/closest.js";import{customElement as y}from"../internal/define.js";import{dispatchAutoFocus as u,dispatchEscapeKeyDown as E,dispatchOutside as h,focusOnOpen as F,focusOutsideTarget as w}from"../internal/dismiss.js";import{optOutBoolean as L,positionFloating as A}from"../internal/positioning.js";import{hiddenHostStyles as I}from"../internal/styles.js";import{focusDatePickerContent as P,focusDelegate as H}from"./auto-focus.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.authoredLabel=!1;this.wasOpen=!1;this.dismissedOutside=!1;this.focusFrame=0;this.handleKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),E(this,t)&&this.root.setOpen(!1))};this.handleOutsidePointerDown=t=>{!this.root?.open||this.isInside(t.target)||h(this,"pointer-down-outside",t)&&(this.dismissedOutside=!0,this.root.setOpen(!1))};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=w(t);e===null||this.isInside(e)||h(this,"focus-outside",t)&&(this.dismissedOutside=!0,this.root.setOpen(!1))}}get anchorISO(){let t=g(this.root?.value??null);return t?O(t):null}connectedCallback(){super.connectedCallback(),this.root=b(this,"skdx-date-picker"),this.root&&(this.root.contentEl=this),this.authoredLabel=this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"),this.setAttribute("role","dialog"),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.id: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?.(),cancelAnimationFrame(this.focusFrame),super.disconnectedCallback()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed");for(let[s,a]of[["data-invalid",this.root?.invalid??!1],["data-readonly",this.root?.readOnly??!1]])a?this.setAttribute(s,""):this.removeAttribute(s);this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start");let e=this.root?.triggerHost?.id||this.root?.triggerId;!this.authoredLabel&&e&&this.setAttribute("aria-labelledby",e),this.hidden=!t,t?this.activate():this.deactivate(),t!==this.wasOpen&&(this.wasOpen=t,t?this.autoFocusIn():this.autoFocusOut())}autoFocusIn(){this.dismissedOutside=!1,this.focusFrame=requestAnimationFrame(()=>{this.root?.open&&(this.contains(document.activeElement)||u(this,"open-auto-focus")&&F(()=>P(this,this.anchorISO)))})}autoFocusOut(){if(cancelAnimationFrame(this.focusFrame),this.dismissedOutside||!u(this,"close-auto-focus"))return;let t=this.root?.triggerHost;t&&H(t).focus({preventScroll:!0})}activate(){this.cleanupPosition||!this.root?.triggerHost||(this.cleanupPosition=A(this.root.triggerHost,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary}))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}isInside(t){return t?this.contains(t)||this.root?.contains(t)===!0:!1}render(){return m`<slot></slot>`}};i.styles=[I,f`
       :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};
+    `],o([n({type:String})],i.prototype,"side",2),o([n({type:String})],i.prototype,"align",2),o([n({type:Number,attribute:"side-offset"})],i.prototype,"sideOffset",2),o([n({type:Number,attribute:"align-offset"})],i.prototype,"alignOffset",2),o([n({converter:L,attribute:"avoid-collisions"})],i.prototype,"avoidCollisions",2),o([n({type:Number,attribute:"collision-padding"})],i.prototype,"collisionPadding",2),o([n({attribute:!1})],i.prototype,"collisionBoundary",2),i=o([y("skdx-date-picker-content","date-picker","content")],i);export{i as SkdxDatePickerContent};

package/dist/date-picker/DatePickerInput.cjs

@@ -1,10 +1,11 @@
-"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`
+"use strict";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(a,e)=>{for(var t in e)n(a,t,{get:e[t],enumerable:!0})},f=(a,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!b.call(a,r)&&r!==t&&n(a,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return a};var L=a=>f(n({},"__esModule",{value:!0}),a),h=(a,e,t,o)=>{for(var r=o>1?void 0:o?p(e,t):e,s=a.length-1,d;s>=0;s--)(d=a[s])&&(r=(o?d(e,t,r):d(r))||r);return o&&r&&n(e,t,r),r};var x={};g(x,{SkdxDatePickerInput:()=>l});module.exports=L(x);var i=require("lit"),c=require("lit/decorators.js"),u=require("../internal/aria-label.cjs"),m=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),E=require("../date-field/DateField.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.hostLabel=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,v.installLightDomStyles)(),this.hostLabel=(0,u.takeHostAriaLabel)(this),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 i.nothing;let t=this.root.value;return i.html`
       <skdx-date-field
         .value=${t instanceof Date?t:null}
         granularity=${this.root.granularity}
         ?disabled=${this.root.disabled}
+        ?read-only=${this.root.readOnly}
         ?required=${this.root.required}
-        aria-label=${this.ariaLabel??o.nothing}
+        aria-label=${this.hostLabel??i.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});
+    `}};h([(0,c.state)()],l.prototype,"hostLabel",2),l=h([(0,m.customElement)("skdx-date-picker-input","date-picker","input")],l);0&&(module.exports={SkdxDatePickerInput});

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

@@ -1,19 +1,7 @@
 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.
+ * Typed-entry field for single-selection mode: a `<skdx-date-field>` pre-wired to the picker's `value` and `granularity`. Renders to light DOM so `.skdx-date-field__segment` rules apply.
  *
  * @example
  * ```html
@@ -24,34 +12,10 @@ import '../date-field/DateField.cjs';
  * ```
  */
 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.
-     */
+    /** No shadow root — field renders to light DOM so `.skdx-date-field__segment` reaches segments. React inlines the field; both drop shadow for geometry parity. */
     protected createRenderRoot(): HTMLElement;
-    /** Accessible name forwarded to the nested `<skdx-date-field>`'s group. */
-    ariaLabel: string | null;
+    /** Accessible name for the inner `<skdx-date-field>`, moved off this host — see `takeHostAriaLabel`. */
+    private hostLabel;
     private root;
     private readonly onUpdate;
     connectedCallback(): void;

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

@@ -1,19 +1,7 @@
 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.
+ * Typed-entry field for single-selection mode: a `<skdx-date-field>` pre-wired to the picker's `value` and `granularity`. Renders to light DOM so `.skdx-date-field__segment` rules apply.
  *
  * @example
  * ```html
@@ -24,34 +12,10 @@ import '../date-field/DateField.js';
  * ```
  */
 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.
-     */
+    /** No shadow root — field renders to light DOM so `.skdx-date-field__segment` reaches segments. React inlines the field; both drop shadow for geometry parity. */
     protected createRenderRoot(): HTMLElement;
-    /** Accessible name forwarded to the nested `<skdx-date-field>`'s group. */
-    ariaLabel: string | null;
+    /** Accessible name for the inner `<skdx-date-field>`, moved off this host — see `takeHostAriaLabel`. */
+    private hostLabel;
     private root;
     private readonly onUpdate;
     connectedCallback(): void;

package/dist/date-picker/DatePickerInput.js

@@ -1,10 +1,11 @@
-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`
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=(i,r,e,o)=>{for(var t=o>1?void 0:o?p(r,e):r,l=i.length-1,n;l>=0;l--)(n=i[l])&&(t=(o?n(r,e,t):n(t))||t);return o&&t&&h(r,e,t),t};import{html as c,LitElement as u,nothing as d}from"lit";import{state as m}from"lit/decorators.js";import{takeHostAriaLabel as v}from"../internal/aria-label.js";import{customElement as k}from"../internal/define.js";import{installLightDomStyles as b}from"../internal/styles.js";import"../date-field/DateField.js";var a=class extends u{constructor(){super(...arguments);this.hostLabel=null;this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleValueChange=e=>{e.stopPropagation(),this.root?.setValue(e.detail)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),b(),this.hostLabel=v(this),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 d;let e=this.root.value;return c`
       <skdx-date-field
         .value=${e instanceof Date?e:null}
         granularity=${this.root.granularity}
         ?disabled=${this.root.disabled}
+        ?read-only=${this.root.readOnly}
         ?required=${this.root.required}
-        aria-label=${this.ariaLabel??s}
+        aria-label=${this.hostLabel??d}
         @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};
+    `}};s([m()],a.prototype,"hostLabel",2),a=s([k("skdx-date-picker-input","date-picker","input")],a);export{a as SkdxDatePickerInput};

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

@@ -1,18 +1,12 @@
 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.
+ * `document.body` (or a custom `container`), escaping clipping and `overflow`
+ * from ancestors of the field.
  *
- * 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.
+ * The host stays in place; children move into a `<div data-skdx-portal>`. Removing
+ * the root removes portalled content with it. Never unmounts; parts hide via
+ * `hidden`, so `force-mount` is a no-op.
  *
  * @example
  * ```html

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

@@ -1,18 +1,12 @@
 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.
+ * `document.body` (or a custom `container`), escaping clipping and `overflow`
+ * from ancestors of the field.
  *
- * 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.
+ * The host stays in place; children move into a `<div data-skdx-portal>`. Removing
+ * the root removes portalled content with it. Never unmounts; parts hide via
+ * `hidden`, so `force-mount` is a no-op.
  *
  * @example
  * ```html

package/dist/date-picker/DatePickerTimeField.cjs

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

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

@@ -1,16 +1,7 @@
 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.
+ * Time half of `<skdx-date-picker>`. Edits time-of-day only, leaving day to calendar. Renders nothing at `granularity="day"` or outside `selection-mode="single"`. Renders to light DOM so skin's `.skdx-time-field__segment` rules reach segments.
  *
  * @example
  * ```html
@@ -24,15 +15,15 @@ import '../time-field/TimeField.cjs';
  * ```
  */
 export declare class SkdxDatePickerTimeField extends LitElement {
-    /** No shadow root, for the reasons `<skdx-date-picker-input>` records at length. */
+    /** No shadow root (see `<skdx-date-picker-input>` for reasons). */
     protected createRenderRoot(): HTMLElement;
-    /** Accessible name forwarded to the nested `<skdx-time-field>`'s group. */
-    ariaLabel: string | null;
+    /** Accessible name for the inner `<skdx-time-field>`, moved off this host — see `takeHostAriaLabel`. */
+    private hostLabel;
     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. */
+    /** The picker's selection if it's a single `Date`. */
     private get date();
     private readonly handleValueChange;
     render(): import("lit").TemplateResult<1> | typeof nothing;