@skdx/vue 0.27.0 → 0.29.0

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

@@ -1,12 +1,6 @@
+import { type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../utils/date-segments.cjs';
 /**
- * The time half of a date-time `SkdxDatePicker`: an `SkdxTimeField` that edits
- * only the time-of-day of the picker's selected date, leaving the calendar to
- * own the day. Renders nothing at all at `granularity="day"` — a picker with no
- * time granularity has no time to edit — and stays empty (but mounted) until a
- * date has been picked. Must be used inside `SkdxDatePicker`.
- *
- * Only meaningful in `selection-mode="single"`, for the same reason as
- * `SkdxDatePickerInput`.
+ * Time field for date-time `SkdxDatePicker`, hidden at `granularity="day"`.
  *
  * @example
  * ```vue
@@ -21,6 +15,88 @@
  * </SkdxDatePicker>
  * ```
  */
-type __VLS_Props = {};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = {
+    /**
+     * Disables the field and drops every segment out of the tab order.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Segments stay focusable and readable but refuse every edit, OR'd with the picker's.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid` and `data-invalid`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the field required; an incomplete field reports `valueMissing`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Form field name; with it the time submits as the 24-hour string.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Id of the form this field submits into, for a field rendered outside it.
+     * @default undefined
+     */
+    form?: string | undefined;
+    /**
+     * BCP 47 tag deciding segment order and the AM/PM names.
+     * @default undefined
+     */
+    locale?: string | undefined;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour display.
+     * @default undefined
+     */
+    hourCycle?: HourCycle | undefined;
+    /**
+     * Writing direction deciding which segment ArrowLeft moves to.
+     * @default undefined
+     */
+    dir?: 'ltr' | 'rtl' | undefined;
+    /**
+     * Earliest accepted time as `HH:mm[:ss]`; earlier values fail validation.
+     * @default undefined
+     */
+    min?: string | Date | undefined;
+    /**
+     * Latest accepted time as `HH:mm[:ss]`; later values fail validation.
+     * @default undefined
+     */
+    max?: string | Date | undefined;
+    /**
+     * Increment the finest segment steps by, in seconds.
+     * @default undefined
+     */
+    step?: number | undefined;
+    /**
+     * Words the accessible name of one segment.
+     * @default undefined
+     */
+    getSegmentLabel?: ((type: SegmentType) => string) | undefined;
+    /**
+     * Words the placeholder letters one segment shows before typing.
+     * @default undefined
+     */
+    getSegmentPlaceholder?: SegmentPlaceholderResolver | undefined;
+    /**
+     * The `aria-valuetext` an untyped segment announces.
+     * @default 'Empty'
+     */
+    emptySegmentText?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    invalid: boolean;
+    emptySegmentText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,12 +1,6 @@
+import { type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../utils/date-segments.js';
 /**
- * The time half of a date-time `SkdxDatePicker`: an `SkdxTimeField` that edits
- * only the time-of-day of the picker's selected date, leaving the calendar to
- * own the day. Renders nothing at all at `granularity="day"` — a picker with no
- * time granularity has no time to edit — and stays empty (but mounted) until a
- * date has been picked. Must be used inside `SkdxDatePicker`.
- *
- * Only meaningful in `selection-mode="single"`, for the same reason as
- * `SkdxDatePickerInput`.
+ * Time field for date-time `SkdxDatePicker`, hidden at `granularity="day"`.
  *
  * @example
  * ```vue
@@ -21,6 +15,88 @@
  * </SkdxDatePicker>
  * ```
  */
-type __VLS_Props = {};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = {
+    /**
+     * Disables the field and drops every segment out of the tab order.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Segments stay focusable and readable but refuse every edit, OR'd with the picker's.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid` and `data-invalid`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the field required; an incomplete field reports `valueMissing`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Form field name; with it the time submits as the 24-hour string.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Id of the form this field submits into, for a field rendered outside it.
+     * @default undefined
+     */
+    form?: string | undefined;
+    /**
+     * BCP 47 tag deciding segment order and the AM/PM names.
+     * @default undefined
+     */
+    locale?: string | undefined;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour display.
+     * @default undefined
+     */
+    hourCycle?: HourCycle | undefined;
+    /**
+     * Writing direction deciding which segment ArrowLeft moves to.
+     * @default undefined
+     */
+    dir?: 'ltr' | 'rtl' | undefined;
+    /**
+     * Earliest accepted time as `HH:mm[:ss]`; earlier values fail validation.
+     * @default undefined
+     */
+    min?: string | Date | undefined;
+    /**
+     * Latest accepted time as `HH:mm[:ss]`; later values fail validation.
+     * @default undefined
+     */
+    max?: string | Date | undefined;
+    /**
+     * Increment the finest segment steps by, in seconds.
+     * @default undefined
+     */
+    step?: number | undefined;
+    /**
+     * Words the accessible name of one segment.
+     * @default undefined
+     */
+    getSegmentLabel?: ((type: SegmentType) => string) | undefined;
+    /**
+     * Words the placeholder letters one segment shows before typing.
+     * @default undefined
+     */
+    getSegmentPlaceholder?: SegmentPlaceholderResolver | undefined;
+    /**
+     * The `aria-valuetext` an untyped segment announces.
+     * @default 'Empty'
+     */
+    emptySegmentText?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    invalid: boolean;
+    emptySegmentText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/date-picker/DatePickerTimeField.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const v=require("./context.cjs"),_=require("../time-field/TimeField.vue.cjs");let e=require("vue");var g=(0,e.defineComponent)({inheritAttrs:!1,__name:"DatePickerTimeField",setup(f){const r=(0,e.inject)(v.DATE_PICKER_CONTEXT);if(!r)throw new Error("SkdxDatePickerTimeField must be used within SkdxDatePicker.");const a=(0,e.computed)(()=>r.granularity),c=(0,e.computed)(()=>a.value!=="day"&&r.selectionMode==="single"),l=(0,e.computed)(()=>r.value.value??null),s=(0,e.computed)(()=>a.value==="day"?"minute":a.value),d=(0,e.computed)(()=>{const t=l.value;if(!t)return null;const u=i=>String(i).padStart(2,"0"),n=`${u(t.getHours())}:${u(t.getMinutes())}`;return a.value==="second"?`${n}:${u(t.getSeconds())}`:n});function m(t){const u=l.value;if(!u||t===null)return;const[n,i,p]=t.split(":").map(Number),o=new Date(u);o.setHours(n,i,p??0,0),r.onValueChange(o)}return(t,u)=>c.value?((0,e.openBlock)(),(0,e.createBlock)(_.default,(0,e.mergeProps)({key:0,class:"skdx-date-picker__time-field","data-part":"time-field"},t.$attrs,{granularity:s.value,value:d.value,onValueChange:m}),null,16,["granularity","value"])):(0,e.createCommentVNode)("",!0)}});exports.default=g;
+const f=require("../utils/injectRequired.cjs"),v=require("../utils/date-segments.cjs"),_=require("./context.cjs"),q=require("../time-field/TimeField.vue.cjs");let t=require("vue");var h=(0,t.defineComponent)({inheritAttrs:!1,__name:"DatePickerTimeField",props:{disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},form:{},locale:{},hourCycle:{},dir:{},min:{},max:{},step:{},getSegmentLabel:{},getSegmentPlaceholder:{},emptySegmentText:{default:v.EMPTY_VALUE_TEXT}},setup(s){const e=s,r=f.injectRequired(_.DATE_PICKER_CONTEXT,"SkdxDatePickerTimeField must be used within SkdxDatePicker."),n=(0,t.computed)(()=>r.granularity),c=(0,t.computed)(()=>n.value!=="day"&&r.selectionMode==="single"),o=(0,t.computed)(()=>r.value.value??null),m=(0,t.computed)(()=>n.value==="day"?"minute":n.value),p=(0,t.computed)(()=>{const a=o.value;if(!a)return null;const l=i=>String(i).padStart(2,"0"),u=`${l(a.getHours())}:${l(a.getMinutes())}`;return n.value==="second"?`${u}:${l(a.getSeconds())}`:u});function g(a){const l=o.value;if(!l||a===null)return;const[u,i,y]=a.split(":").map(Number),d=new Date(l);d.setHours(u,i,y??0,0),r.onValueChange(d)}return(a,l)=>c.value?((0,t.openBlock)(),(0,t.createBlock)(q.default,(0,t.mergeProps)({key:0,class:"skdx-date-picker__time-field","data-part":"time-field"},a.$attrs,{disabled:e.disabled,invalid:e.invalid,required:e.required,name:e.name,form:e.form,locale:e.locale,"hour-cycle":e.hourCycle,dir:e.dir,min:e.min,max:e.max,step:e.step,"get-segment-label":e.getSegmentLabel,"get-segment-placeholder":e.getSegmentPlaceholder,"empty-segment-text":e.emptySegmentText,"read-only":e.readOnly||(0,t.unref)(r).readOnly.value,granularity:m.value,value:p.value,onValueChange:g}),null,16,["disabled","invalid","required","name","form","locale","hour-cycle","dir","min","max","step","get-segment-label","get-segment-placeholder","empty-segment-text","read-only","granularity","value"])):(0,t.createCommentVNode)("",!0)}});exports.default=h;

package/dist/date-picker/DatePickerTimeField.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{DATE_PICKER_CONTEXT as e}from"./context.js";import t from"../time-field/TimeField.vue.js";import{computed as a,createBlock as r,createCommentVNode as n,defineComponent as l,inject as u,mergeProps as i,openBlock as s}from"vue";var o=/* @__PURE__ */l({inheritAttrs:!1,__name:"DatePickerTimeField",setup(l){const o=u(e);if(!o)throw new Error("SkdxDatePickerTimeField must be used within SkdxDatePicker.");const c=a(()=>o.granularity),d=a(()=>"day"!==c.value&&"single"===o.selectionMode),m=a(()=>o.value.value??null),v=a(()=>"day"===c.value?"minute":c.value),p=a(()=>{const e=m.value;if(!e)return null;const t=e=>String(e).padStart(2,"0"),a=`${t(e.getHours())}:${t(e.getMinutes())}`;return"second"===c.value?`${a}:${t(e.getSeconds())}`:a});function f(e){const t=m.value;if(!t||null===e)return;const[a,r,n]=e.split(":").map(Number),l=new Date(t);l.setHours(a,r,n??0,0),o.onValueChange(l)}return(e,a)=>d.value?(s(),r(t,i({key:0,class:"skdx-date-picker__time-field","data-part":"time-field"},e.$attrs,{granularity:v.value,value:p.value,onValueChange:f}),null,16,["granularity","value"])):n("",!0)}});export{o as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{EMPTY_VALUE_TEXT as t}from"../utils/date-segments.js";import{DATE_PICKER_CONTEXT as a}from"./context.js";import l from"../time-field/TimeField.vue.js";import{computed as n,createBlock as r,createCommentVNode as i,defineComponent as o,mergeProps as d,openBlock as m,unref as u}from"vue";var s=/* @__PURE__ */o({inheritAttrs:!1,__name:"DatePickerTimeField",props:{disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},form:{},locale:{},hourCycle:{},dir:{},min:{},max:{},step:{},getSegmentLabel:{},getSegmentPlaceholder:{},emptySegmentText:{default:t}},setup(t){const o=t,s=e(a,"SkdxDatePickerTimeField must be used within SkdxDatePicker."),c=n(()=>s.granularity),g=n(()=>"day"!==c.value&&"single"===s.selectionMode),p=n(()=>s.value.value??null),f=n(()=>"day"===c.value?"minute":c.value),y=n(()=>{const e=p.value;if(!e)return null;const t=e=>String(e).padStart(2,"0"),a=`${t(e.getHours())}:${t(e.getMinutes())}`;return"second"===c.value?`${a}:${t(e.getSeconds())}`:a});function v(e){const t=p.value;if(!t||null===e)return;const[a,l,n]=e.split(":").map(Number),r=new Date(t);r.setHours(a,l,n??0,0),s.onValueChange(r)}return(e,t)=>g.value?(m(),r(l,d({key:0,class:"skdx-date-picker__time-field","data-part":"time-field"},e.$attrs,{disabled:o.disabled,invalid:o.invalid,required:o.required,name:o.name,form:o.form,locale:o.locale,"hour-cycle":o.hourCycle,dir:o.dir,min:o.min,max:o.max,step:o.step,"get-segment-label":o.getSegmentLabel,"get-segment-placeholder":o.getSegmentPlaceholder,"empty-segment-text":o.emptySegmentText,"read-only":o.readOnly||u(s).readOnly.value,granularity:f.value,value:y.value,onValueChange:v}),null,16,["disabled","invalid","required","name","form","locale","hour-cycle","dir","min","max","step","get-segment-label","get-segment-placeholder","empty-segment-text","read-only","granularity","value"])):i("",!0)}});export{s as default};

package/dist/date-picker/DatePickerTrigger.vue.d.cts

@@ -1,16 +1,6 @@
-/**
- * Opens/closes the `SkdxDatePicker` popup on click, and doubles as the
- * popper anchor the popup positions against. Renders a
- * `<button type="button">` with `aria-haspopup="dialog"`, `aria-expanded`,
- * `aria-controls` pointing at the content, and `data-state`. Must be used
- * inside `SkdxDatePicker`.
- */
+/** Opens/closes the `SkdxDatePicker` popup on click and serves as the popper anchor. */
 type __VLS_Props = {
-    /**
-     * Disables this trigger. Root-or-own, the same way Select's and
-     * TreeSelect's resolve it: the DatePicker's own `disabled` disables every
-     * trigger under it, and a trigger may also disable itself.
-     */
+    /** Disables this trigger; otherwise inherits from the root. */
     disabled?: boolean;
 };
 declare var __VLS_1: {};

package/dist/date-picker/DatePickerTrigger.vue.d.ts

@@ -1,16 +1,6 @@
-/**
- * Opens/closes the `SkdxDatePicker` popup on click, and doubles as the
- * popper anchor the popup positions against. Renders a
- * `<button type="button">` with `aria-haspopup="dialog"`, `aria-expanded`,
- * `aria-controls` pointing at the content, and `data-state`. Must be used
- * inside `SkdxDatePicker`.
- */
+/** Opens/closes the `SkdxDatePicker` popup on click and serves as the popper anchor. */
 type __VLS_Props = {
-    /**
-     * Disables this trigger. Root-or-own, the same way Select's and
-     * TreeSelect's resolve it: the DatePicker's own `disabled` disables every
-     * trigger under it, and a trigger may also disable itself.
-     */
+    /** Disables this trigger; otherwise inherits from the root. */
     disabled?: boolean;
 };
 declare var __VLS_1: {};

package/dist/date-picker/DatePickerTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const s=require("../utils/popper.cjs"),c=require("./context.cjs");let e=require("vue");var p=["aria-expanded","aria-controls","data-state","data-disabled","disabled"],_=(0,e.defineComponent)({__name:"DatePickerTrigger",props:{disabled:{type:Boolean,default:!1}},setup(i){const d=i,n=(0,e.inject)(c.DATE_PICKER_CONTEXT);if(!n)throw new Error("SkdxDatePickerTrigger must be used within SkdxDatePicker.");const t=n,o=(0,e.computed)(()=>t.disabled.value||d.disabled),r=(0,e.inject)(s.POPPER_CONTEXT);if(!r)throw new Error("SkdxDatePickerTrigger must be used within SkdxDatePicker.");const a=(0,e.ref)(null);(0,e.onMounted)(()=>{t.triggerRef.value=a.value,r.setAnchor(a.value)}),(0,e.onBeforeUnmount)(()=>{r.anchor.value===a.value&&r.setAnchor(null)});function l(){t.setOpen(!t.open.value)}return(u,f)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-date-picker__trigger","data-part":"trigger",ref_key:"elRef",ref:a,type:"button","aria-haspopup":"dialog","aria-expanded":(0,e.unref)(t).open.value,"aria-controls":(0,e.unref)(t).contentId,"data-state":(0,e.unref)(t).open.value?"open":"closed","data-disabled":o.value?"":void 0,disabled:o.value,onClick:l},[(0,e.renderSlot)(u.$slots,"default")],8,p))}});exports.default=_;
+const l=require("../utils/injectRequired.cjs"),s=require("../utils/popper.cjs"),c=require("./context.cjs");let e=require("vue");var p=["id","aria-expanded","aria-controls","data-state","data-disabled","aria-invalid","data-invalid","disabled"],v=(0,e.defineComponent)({__name:"DatePickerTrigger",props:{disabled:{type:Boolean,default:!1}},setup(n){const d=n,a=l.injectRequired(c.DATE_PICKER_CONTEXT,"SkdxDatePickerTrigger must be used within SkdxDatePicker."),i=(0,e.computed)(()=>a.disabled.value||d.disabled),r=(0,e.inject)(s.POPPER_CONTEXT);if(!r)throw new Error("SkdxDatePickerTrigger must be used within SkdxDatePicker.");const t=(0,e.ref)(null);(0,e.onMounted)(()=>{a.triggerRef.value=t.value,r.setAnchor(t.value)}),(0,e.onBeforeUnmount)(()=>{r.anchor.value===t.value&&r.setAnchor(null)});function o(){a.setOpen(!a.open.value)}return(u,f)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{id:(0,e.unref)(a).triggerId,ref_key:"elRef",ref:t,class:"skdx-date-picker__trigger","data-part":"trigger",type:"button","aria-haspopup":"dialog","aria-expanded":(0,e.unref)(a).open.value,"aria-controls":(0,e.unref)(a).contentId,"data-state":(0,e.unref)(a).open.value?"open":"closed","data-disabled":i.value?"":void 0,"aria-invalid":(0,e.unref)(a).invalid.value?"true":void 0,"data-invalid":(0,e.unref)(a).invalid.value?"":void 0,disabled:i.value,onClick:o},[(0,e.renderSlot)(u.$slots,"default")],8,p))}});exports.default=v;

package/dist/date-picker/DatePickerTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{POPPER_CONTEXT as e}from"../utils/popper.js";import{DATE_PICKER_CONTEXT as a}from"./context.js";import{computed as t,createElementBlock as r,defineComponent as o,inject as s,onBeforeUnmount as n,onMounted as d,openBlock as i,ref as l,renderSlot as u,unref as p}from"vue";var c=["aria-expanded","aria-controls","data-state","data-disabled","disabled"],f=/* @__PURE__ */o({__name:"DatePickerTrigger",props:{disabled:{type:Boolean,default:!1}},setup(o){const f=o,k=s(a);if(!k)throw new Error("SkdxDatePickerTrigger must be used within SkdxDatePicker.");const v=k,g=t(()=>v.disabled.value||f.disabled),m=s(e);if(!m)throw new Error("SkdxDatePickerTrigger must be used within SkdxDatePicker.");const b=l(null);function x(){v.setOpen(!v.open.value)}return d(()=>{v.triggerRef.value=b.value,m.setAnchor(b.value)}),n(()=>{m.anchor.value===b.value&&m.setAnchor(null)}),(e,a)=>(i(),r("button",{class:"skdx-date-picker__trigger","data-part":"trigger",ref_key:"elRef",ref:b,type:"button","aria-haspopup":"dialog","aria-expanded":p(v).open.value,"aria-controls":p(v).contentId,"data-state":p(v).open.value?"open":"closed","data-disabled":g.value?"":void 0,disabled:g.value,onClick:x},[u(e.$slots,"default")],8,c))}});export{f as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{POPPER_CONTEXT as a}from"../utils/popper.js";import{DATE_PICKER_CONTEXT as t}from"./context.js";import{computed as i,createElementBlock as r,defineComponent as d,inject as o,onBeforeUnmount as n,onMounted as l,openBlock as s,ref as u,renderSlot as p,unref as c}from"vue";var v=["id","aria-expanded","aria-controls","data-state","data-disabled","aria-invalid","data-invalid","disabled"],f=/* @__PURE__ */d({__name:"DatePickerTrigger",props:{disabled:{type:Boolean,default:!1}},setup(d){const f=d,g=e(t,"SkdxDatePickerTrigger must be used within SkdxDatePicker."),k=i(()=>g.disabled.value||f.disabled),m=o(a);if(!m)throw new Error("SkdxDatePickerTrigger must be used within SkdxDatePicker.");const b=u(null);function x(){g.setOpen(!g.open.value)}return l(()=>{g.triggerRef.value=b.value,m.setAnchor(b.value)}),n(()=>{m.anchor.value===b.value&&m.setAnchor(null)}),(e,a)=>(s(),r("button",{id:c(g).triggerId,ref_key:"elRef",ref:b,class:"skdx-date-picker__trigger","data-part":"trigger",type:"button","aria-haspopup":"dialog","aria-expanded":c(g).open.value,"aria-controls":c(g).contentId,"data-state":c(g).open.value?"open":"closed","data-disabled":k.value?"":void 0,"aria-invalid":c(g).invalid.value?"true":void 0,"data-invalid":c(g).invalid.value?"":void 0,disabled:k.value,onClick:x},[p(e.$slots,"default")],8,v))}});export{f as default};

package/dist/date-picker/autoFocus.cjs

@@ -0,0 +1 @@
+const n=require("../utils/tabbable.cjs"),c=require("../calendar/dateMath.cjs");function u(e,r){return e.querySelector(`[data-skdx-calendar-cell="${r}"]:not([disabled])`)}function a(e){const r=document.activeElement;return r!==null&&r!==document.body&&e.contains(r)}function l(e,r){const i=[r?u(e,r):null,u(e,c.toISODateString(new Date)),e.querySelector('[role="gridcell"][tabindex="0"]'),e.querySelector(n.TABBABLE_SELECTOR)];for(const t of i)if(t&&(t.focus({preventScroll:!0}),a(e)))return document.activeElement;return e.hasAttribute("tabindex")||(e.tabIndex=-1),e.focus({preventScroll:!0}),a(e)?e:null}exports.focusDatePickerContent=l;

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

@@ -0,0 +1,8 @@
+/**
+ * Moves focus into the open popup: selected date → today → roving tab stop → first tabbable → panel itself.
+ * @param content Popup panel, mounted and positioned.
+ * @param selectedISO Current selection as YYYY-MM-DD or null.
+ * @returns Element that took focus, or null.
+ * @internal
+ */
+export declare function focusDatePickerContent(content: HTMLElement, selectedISO: string | null): HTMLElement | null;

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

@@ -0,0 +1,8 @@
+/**
+ * Moves focus into the open popup: selected date → today → roving tab stop → first tabbable → panel itself.
+ * @param content Popup panel, mounted and positioned.
+ * @param selectedISO Current selection as YYYY-MM-DD or null.
+ * @returns Element that took focus, or null.
+ * @internal
+ */
+export declare function focusDatePickerContent(content: HTMLElement, selectedISO: string | null): HTMLElement | null;

package/dist/date-picker/autoFocus.js

@@ -0,0 +1 @@
+import{TABBABLE_SELECTOR as e}from"../utils/tabbable.js";import{toISODateString as t}from"../calendar/dateMath.js";function n(e,t){return e.querySelector(`[data-skdx-calendar-cell="${t}"]:not([disabled])`)}function r(e){const t=document.activeElement;return null!==t&&t!==document.body&&e.contains(t)}function o(o,c){const l=[c?n(o,c):null,n(o,t(/* @__PURE__ */new Date)),o.querySelector('[role="gridcell"][tabindex="0"]'),o.querySelector(e)];for(const e of l)if(e&&(e.focus({preventScroll:!0}),r(o)))return document.activeElement;return o.hasAttribute("tabindex")||(o.tabIndex=-1),o.focus({preventScroll:!0}),r(o)?o:null}export{o as focusDatePickerContent};

package/dist/date-picker/context.cjs

@@ -1 +1 @@
-const e=require("../utils/id.cjs");var t=Symbol("skdx-date-picker-context");function n(){return e.nextId("date-picker-content")}exports.DATE_PICKER_CONTEXT=t;exports.nextDatePickerContentId=n;
+const e=require("../utils/id.cjs");var t=Symbol("skdx-date-picker-context");function r(){return e.nextId("date-picker-content")}function n(){return e.nextId("date-picker-trigger")}exports.DATE_PICKER_CONTEXT=t;exports.nextDatePickerContentId=r;exports.nextDatePickerTriggerId=n;

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

@@ -1,26 +1,32 @@
 import type { InjectionKey, Ref } from 'vue';
 import type { CalendarSelectionMode, CalendarValue } from '../calendar/dateMath.cjs';
-import type { Granularity } from '../utils/dateSegments.cjs';
+import type { Granularity } from '../utils/date-segments.cjs';
 /** @internal Injection key a DatePicker provides so its parts can read/drive shared state. */
 export interface DatePickerContext {
     triggerRef: Ref<HTMLElement | null>;
     contentRef: Ref<HTMLElement | null>;
     contentId: string;
+    /** Id on trigger (Content's aria-labelledby names dialog after button). */
+    triggerId: string;
     value: Readonly<Ref<CalendarValue>>;
     selectionMode: CalendarSelectionMode;
-    /**
-     * How far down `SkdxDatePickerInput`/`SkdxDatePickerTimeField` are editable.
-     * Anything past `'day'` is date-time mode, in which the popup does not
-     * auto-close on a calendar selection — the user still has a time to set.
-     */
+    /** How far down `SkdxDatePickerInput`/`SkdxDatePickerTimeField` are editable; past `'day'` is date-time mode. */
     granularity: Granularity;
+    /** Whether a completed selection dismisses the popup. */
+    closeOnSelect: Readonly<Ref<boolean>>;
     onValueChange(value: CalendarValue): void;
     open: Readonly<Ref<boolean>>;
     setOpen(open: boolean): void;
     /** Disables every trigger under this root and prevents the popup opening. */
     disabled: Readonly<Ref<boolean>>;
+    /** Whether every editable part refuses edits while staying focusable. */
+    readOnly: Readonly<Ref<boolean>>;
+    /** Whether the picker paints itself as failing validation. */
+    invalid: Readonly<Ref<boolean>>;
 }
 /** @internal Injection key the DatePicker root provides so its Trigger and Content share open state and the selected date. */
 export declare const DATE_PICKER_CONTEXT: InjectionKey<DatePickerContext>;
 /** @internal Generates a unique id for a DatePicker's content. */
 export declare function nextDatePickerContentId(): string;
+/** @internal Generates a unique id for a DatePicker's trigger, which names the popup dialog. */
+export declare function nextDatePickerTriggerId(): string;

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

@@ -1,26 +1,32 @@
 import type { InjectionKey, Ref } from 'vue';
 import type { CalendarSelectionMode, CalendarValue } from '../calendar/dateMath.js';
-import type { Granularity } from '../utils/dateSegments.js';
+import type { Granularity } from '../utils/date-segments.js';
 /** @internal Injection key a DatePicker provides so its parts can read/drive shared state. */
 export interface DatePickerContext {
     triggerRef: Ref<HTMLElement | null>;
     contentRef: Ref<HTMLElement | null>;
     contentId: string;
+    /** Id on trigger (Content's aria-labelledby names dialog after button). */
+    triggerId: string;
     value: Readonly<Ref<CalendarValue>>;
     selectionMode: CalendarSelectionMode;
-    /**
-     * How far down `SkdxDatePickerInput`/`SkdxDatePickerTimeField` are editable.
-     * Anything past `'day'` is date-time mode, in which the popup does not
-     * auto-close on a calendar selection — the user still has a time to set.
-     */
+    /** How far down `SkdxDatePickerInput`/`SkdxDatePickerTimeField` are editable; past `'day'` is date-time mode. */
     granularity: Granularity;
+    /** Whether a completed selection dismisses the popup. */
+    closeOnSelect: Readonly<Ref<boolean>>;
     onValueChange(value: CalendarValue): void;
     open: Readonly<Ref<boolean>>;
     setOpen(open: boolean): void;
     /** Disables every trigger under this root and prevents the popup opening. */
     disabled: Readonly<Ref<boolean>>;
+    /** Whether every editable part refuses edits while staying focusable. */
+    readOnly: Readonly<Ref<boolean>>;
+    /** Whether the picker paints itself as failing validation. */
+    invalid: Readonly<Ref<boolean>>;
 }
 /** @internal Injection key the DatePicker root provides so its Trigger and Content share open state and the selected date. */
 export declare const DATE_PICKER_CONTEXT: InjectionKey<DatePickerContext>;
 /** @internal Generates a unique id for a DatePicker's content. */
 export declare function nextDatePickerContentId(): string;
+/** @internal Generates a unique id for a DatePicker's trigger, which names the popup dialog. */
+export declare function nextDatePickerTriggerId(): string;

package/dist/date-picker/context.js

@@ -1 +1 @@
-import{nextId as t}from"../utils/id.js";var e=/* @__PURE__ */Symbol("skdx-date-picker-context");function n(){return t("date-picker-content")}export{e as DATE_PICKER_CONTEXT,n as nextDatePickerContentId};
+import{nextId as t}from"../utils/id.js";var e=/* @__PURE__ */Symbol("skdx-date-picker-context");function r(){return t("date-picker-content")}function n(){return t("date-picker-trigger")}export{e as DATE_PICKER_CONTEXT,r as nextDatePickerContentId,n as nextDatePickerTriggerId};

package/dist/date-picker/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DatePicker.vue.cjs"),r=require("./DatePickerCalendar.vue.cjs"),t=require("./DatePickerClose.vue.cjs"),i=require("./DatePickerContent.vue.cjs"),a=require("./DatePickerInput.vue.cjs"),u=require("./DatePickerPortal.vue.cjs"),c=require("./DatePickerTimeField.vue.cjs"),k=require("./DatePickerTrigger.vue.cjs");exports.SkdxDatePicker=e.default;exports.SkdxDatePickerCalendar=r.default;exports.SkdxDatePickerClose=t.default;exports.SkdxDatePickerContent=i.default;exports.SkdxDatePickerInput=a.default;exports.SkdxDatePickerPortal=u.default;exports.SkdxDatePickerTimeField=c.default;exports.SkdxDatePickerTrigger=k.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DatePicker.vue.cjs");exports.SkdxDatePicker=e.default;

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

@@ -1,8 +1 @@
 export { default as SkdxDatePicker } from './DatePicker.vue.cjs';
-export { default as SkdxDatePickerCalendar } from './DatePickerCalendar.vue.cjs';
-export { default as SkdxDatePickerClose } from './DatePickerClose.vue.cjs';
-export { default as SkdxDatePickerContent } from './DatePickerContent.vue.cjs';
-export { default as SkdxDatePickerInput } from './DatePickerInput.vue.cjs';
-export { default as SkdxDatePickerPortal } from './DatePickerPortal.vue.cjs';
-export { default as SkdxDatePickerTimeField } from './DatePickerTimeField.vue.cjs';
-export { default as SkdxDatePickerTrigger } from './DatePickerTrigger.vue.cjs';

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

@@ -1,8 +1 @@
 export { default as SkdxDatePicker } from './DatePicker.vue.js';
-export { default as SkdxDatePickerCalendar } from './DatePickerCalendar.vue.js';
-export { default as SkdxDatePickerClose } from './DatePickerClose.vue.js';
-export { default as SkdxDatePickerContent } from './DatePickerContent.vue.js';
-export { default as SkdxDatePickerInput } from './DatePickerInput.vue.js';
-export { default as SkdxDatePickerPortal } from './DatePickerPortal.vue.js';
-export { default as SkdxDatePickerTimeField } from './DatePickerTimeField.vue.js';
-export { default as SkdxDatePickerTrigger } from './DatePickerTrigger.vue.js';

package/dist/date-picker/index.js

@@ -1 +1 @@
-import e from"./DatePicker.vue.js";import r from"./DatePickerCalendar.vue.js";import t from"./DatePickerClose.vue.js";import a from"./DatePickerContent.vue.js";import i from"./DatePickerInput.vue.js";import k from"./DatePickerPortal.vue.js";import o from"./DatePickerTimeField.vue.js";import m from"./DatePickerTrigger.vue.js";export{e as SkdxDatePicker,r as SkdxDatePickerCalendar,t as SkdxDatePickerClose,a as SkdxDatePickerContent,i as SkdxDatePickerInput,k as SkdxDatePickerPortal,o as SkdxDatePickerTimeField,m as SkdxDatePickerTrigger};
+import e from"./DatePicker.vue.js";export{e as SkdxDatePicker};

package/dist/date-picker/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DatePickerCalendar.vue.cjs"),r=require("./DatePickerContent.vue.cjs"),t=require("./DatePickerInput.vue.cjs"),i=require("./DatePickerPortal.vue.cjs"),a=require("./DatePickerTimeField.vue.cjs"),u=require("./DatePickerTrigger.vue.cjs"),c=require("./DatePicker.vue.cjs"),k=require("./DatePickerClose.vue.cjs");exports.SkdxDatePicker=c.default;exports.SkdxDatePickerCalendar=e.default;exports.SkdxDatePickerClose=k.default;exports.SkdxDatePickerContent=r.default;exports.SkdxDatePickerInput=t.default;exports.SkdxDatePickerPortal=i.default;exports.SkdxDatePickerTimeField=a.default;exports.SkdxDatePickerTrigger=u.default;

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

@@ -0,0 +1,30 @@
+/**
+ * Primitives for `SkdxDatePicker` — composable building blocks for a custom layout.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxDatePicker, SkdxDatePickerCalendar, SkdxDatePickerClose, SkdxDatePickerContent, SkdxDatePickerPortal, SkdxDatePickerTrigger } from '@skdx/vue/primitives/date-picker';
+ * </script>
+ *
+ * <template>
+ *   <SkdxDatePicker v-model:value="date">
+ *     <SkdxDatePickerTrigger>Pick a date</SkdxDatePickerTrigger>
+ *     <SkdxDatePickerPortal>
+ *       <SkdxDatePickerContent>
+ *         <SkdxDatePickerCalendar />
+ *         <SkdxDatePickerClose>Done</SkdxDatePickerClose>
+ *       </SkdxDatePickerContent>
+ *     </SkdxDatePickerPortal>
+ *   </SkdxDatePicker>
+ * </template>
+ * ```
+ */
+export { default as SkdxDatePicker } from './DatePicker.vue.cjs';
+export { default as SkdxDatePickerCalendar } from './DatePickerCalendar.vue.cjs';
+export { default as SkdxDatePickerClose } from './DatePickerClose.vue.cjs';
+export { default as SkdxDatePickerContent } from './DatePickerContent.vue.cjs';
+export { default as SkdxDatePickerInput } from './DatePickerInput.vue.cjs';
+export { default as SkdxDatePickerPortal } from './DatePickerPortal.vue.cjs';
+export { default as SkdxDatePickerTimeField } from './DatePickerTimeField.vue.cjs';
+export { default as SkdxDatePickerTrigger } from './DatePickerTrigger.vue.cjs';

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

@@ -0,0 +1,30 @@
+/**
+ * Primitives for `SkdxDatePicker` — composable building blocks for a custom layout.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxDatePicker, SkdxDatePickerCalendar, SkdxDatePickerClose, SkdxDatePickerContent, SkdxDatePickerPortal, SkdxDatePickerTrigger } from '@skdx/vue/primitives/date-picker';
+ * </script>
+ *
+ * <template>
+ *   <SkdxDatePicker v-model:value="date">
+ *     <SkdxDatePickerTrigger>Pick a date</SkdxDatePickerTrigger>
+ *     <SkdxDatePickerPortal>
+ *       <SkdxDatePickerContent>
+ *         <SkdxDatePickerCalendar />
+ *         <SkdxDatePickerClose>Done</SkdxDatePickerClose>
+ *       </SkdxDatePickerContent>
+ *     </SkdxDatePickerPortal>
+ *   </SkdxDatePicker>
+ * </template>
+ * ```
+ */
+export { default as SkdxDatePicker } from './DatePicker.vue.js';
+export { default as SkdxDatePickerCalendar } from './DatePickerCalendar.vue.js';
+export { default as SkdxDatePickerClose } from './DatePickerClose.vue.js';
+export { default as SkdxDatePickerContent } from './DatePickerContent.vue.js';
+export { default as SkdxDatePickerInput } from './DatePickerInput.vue.js';
+export { default as SkdxDatePickerPortal } from './DatePickerPortal.vue.js';
+export { default as SkdxDatePickerTimeField } from './DatePickerTimeField.vue.js';
+export { default as SkdxDatePickerTrigger } from './DatePickerTrigger.vue.js';

package/dist/date-picker/primitives.js

@@ -0,0 +1 @@
+import e from"./DatePickerCalendar.vue.js";import r from"./DatePickerContent.vue.js";import t from"./DatePickerInput.vue.js";import a from"./DatePickerPortal.vue.js";import i from"./DatePickerTimeField.vue.js";import k from"./DatePickerTrigger.vue.js";import o from"./DatePicker.vue.js";import m from"./DatePickerClose.vue.js";export{o as SkdxDatePicker,e as SkdxDatePickerCalendar,m as SkdxDatePickerClose,r as SkdxDatePickerContent,t as SkdxDatePickerInput,a as SkdxDatePickerPortal,i as SkdxDatePickerTimeField,k as SkdxDatePickerTrigger};