@skdx/vue 0.28.0 → 0.30.0

package/dist/utils/SegmentedField.vue.d.ts

@@ -1,10 +1,7 @@
-import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType, type SegmentValues } from './dateSegments.js';
+import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType, type SegmentValues } from './date-segments.js';
 import { type Direction } from './direction.js';
 type __VLS_Props = {
-    /**
-     * @internal Field family name for segment part classes, since shared code
-     * cannot hard-code one family.
-     */
+    /** @internal Field family name used for segment part classes. */
     family: 'date-field' | 'time-field';
     /** `'date'` renders year/month/day ahead of the time segments. */
     kind: 'date' | 'time';
@@ -17,87 +14,68 @@ type __VLS_Props = {
      * hour renders zero-padded.
      * @default true
      */
-    shouldForceLeadingZeros?: boolean;
+    shouldForceLeadingZeros?: boolean | undefined;
     /**
      * The root's `step`, in seconds — it drives both the finest segment's arrow
      * increment and the mirrored input's `step` attribute.
      * @default undefined — every segment steps by one unit and nothing constrains the grid.
      */
-    step?: number;
+    step?: number | undefined;
     /** Value submitted by the hidden input; `null` submits an empty entry. */
     formValue: string | null;
-    /**
-     * Input type (`date` / `datetime-local` / `time`); not cosmetic—enables
-     * native browser validation of `min`/`max` via `rangeUnderflow`/`rangeOverflow`.
-     */
+    /** Input type (`date`/`datetime-local`/`time`); enables native min/max validation. */
     formType: 'date' | 'datetime-local' | 'time';
     /** BCP-47 locale deciding segment order, literals and AM/PM names. */
-    locale?: string;
+    locale?: string | undefined;
     /** Forced hour cycle; omitted follows the locale. */
-    hourCycle?: HourCycle;
+    hourCycle?: HourCycle | undefined;
     /** `min` of the mirrored input, in the same wire shape as `formValue`. */
-    formMin?: string;
+    formMin?: string | undefined;
     /** `max` of the mirrored input, in the same wire shape as `formValue`. */
-    formMax?: string;
-    /**
-     * Callback to clamp Home/End values inside the field's own `min`/`max`;
-     * typing and arrow-stepping must reach out-of-range values for validation.
-     */
-    clampEdgeValues?: (values: SegmentValues) => SegmentValues;
-    disabled?: boolean;
-    readOnly?: boolean;
-    invalid?: boolean;
-    required?: boolean;
-    name?: string;
-    /**
-     * Form id for a field rendered outside its form; bound to the hidden
-     * input's `form` attribute, resolved via that input's `.form` property.
-     */
-    form?: string;
+    formMax?: string | undefined;
+    /** Callback to clamp Home/End values inside the field's own `min`/`max`. */
+    clampEdgeValues?: ((values: SegmentValues) => SegmentValues) | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    invalid?: boolean | undefined;
+    required?: boolean | undefined;
+    name?: string | undefined;
+    /** Form id for a field rendered outside its `<form>`; bound to the hidden input's `form` attribute. */
+    form?: string | undefined;
     /** Writing direction override; without it, direction is read off the DOM. */
-    dir?: Direction;
+    dir?: Direction | undefined;
     /**
      * The root's `getSegmentLabel`, which words the accessible name of one
      * segment from its type.
      * @default undefined — the built-in English names ('year', 'month', 'AM/PM', …).
      */
-    getSegmentLabel?: (type: SegmentType) => string;
+    getSegmentLabel?: ((type: SegmentType) => string) | undefined;
     /**
      * The root's `emptySegmentText`, the `aria-valuetext` an untyped segment
      * announces instead of a number it does not have.
      * @default 'Empty'
      */
-    emptySegmentText?: string;
+    emptySegmentText?: string | undefined;
     /**
      * The root's `getSegmentPlaceholder`, which words the letters a segment
      * shows before it has been typed.
      * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …).
      */
-    getSegmentPlaceholder?: SegmentPlaceholderResolver;
+    getSegmentPlaceholder?: SegmentPlaceholderResolver | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
     inputEl: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "values-change": (values: Partial<Record<SegmentType, number | null>>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onValues-change"?: ((values: Partial<Record<SegmentType, number | null>>) => any) | undefined;
+    "onValues-change"?: (values: Partial<Record<SegmentType, number | null>>) => any;
 }>, {
-    form: string;
-    disabled: boolean;
-    dir: Direction;
-    readOnly: boolean;
-    required: boolean;
-    name: string;
-    invalid: boolean;
-    step: number;
-    locale: string;
-    hourCycle: HourCycle;
-    shouldForceLeadingZeros: boolean;
-    formMin: string;
-    formMax: string;
-    clampEdgeValues: (values: SegmentValues) => SegmentValues;
-    getSegmentLabel: (type: SegmentType) => string;
-    emptySegmentText: string;
-    getSegmentPlaceholder: SegmentPlaceholderResolver;
+    disabled: boolean | undefined;
+    name: string | undefined;
+    readOnly: boolean | undefined;
+    required: boolean | undefined;
+    invalid: boolean | undefined;
+    shouldForceLeadingZeros: boolean | undefined;
+    emptySegmentText: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/utils/SegmentedField.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const S=require("./direction.cjs"),n=require("./dateSegments.cjs");let t=require("vue");var B=["aria-disabled","aria-invalid","data-disabled","data-readonly","data-invalid","dir"],w=["tabindex","aria-label","aria-valuenow","aria-valuemin","aria-valuemax","aria-valuetext","aria-disabled","aria-readonly","aria-required","data-segment","data-placeholder","onKeydown"],F=["type","min","max","step","name","form","^value","required","disabled"],q=(0,t.defineComponent)({__name:"SegmentedField",props:{family:{},kind:{},granularity:{},values:{},shouldForceLeadingZeros:{type:Boolean,default:!0},step:{default:void 0},formValue:{},formType:{},locale:{default:void 0},hourCycle:{default:void 0},formMin:{default:void 0},formMax:{default:void 0},clampEdgeValues:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:n.EMPTY_VALUE_TEXT},getSegmentPlaceholder:{type:Function,default:void 0}},emits:["values-change"],setup(l,{expose:v,emit:g}){const r=l,k=g;function b(e){const d=e.type;return r.getSegmentLabel?r.getSegmentLabel(d):n.SEGMENT_LABELS[d]}const y=(0,t.ref)(null),m=(0,t.ref)(null);v({inputEl:m});const h=(0,t.computed)(()=>n.buildSegments({kind:r.kind,granularity:r.granularity,locale:r.locale,hourCycle:r.hourCycle,values:r.values,getSegmentPlaceholder:r.getSegmentPlaceholder,shouldForceLeadingZeros:r.shouldForceLeadingZeros}));let o=0;function p(){o=0}function c(e,d,a=!1){if(r.readOnly)return;let i={...r.values,[e]:d};(e==="month"||e==="year")&&i.day!=null&&(i.day=Math.min(i.day,n.daysInMonth(i.year,i.month))),a&&r.clampEdgeValues&&(i=r.clampEdgeValues(i)),k("values-change",i),(0,t.nextTick)(()=>{y.value?.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))})}function x(){return y.value?Array.from(y.value.querySelectorAll('[role="spinbutton"][data-segment]')):[]}function s(e,d){const a=x(),i=a[a.indexOf(e)+d];i&&(o=0,i.focus())}function E(e,d){const a=d.type,i=e.currentTarget,f=S.directionalKey(e.key,i,r.dir);if(f==="ArrowLeft"||f==="ArrowRight"){e.preventDefault(),s(i,f==="ArrowRight"?1:-1);return}if(!r.readOnly){if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault(),o=0,c(a,n.stepSegment(d,e.key==="ArrowUp"?1:-1,n.segmentStepFor(a,r.granularity,r.step)));return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),o=0,c(a,e.key==="Home"?d.min:d.max,!0);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),o=0,c(a,null);return}if(a==="dayPeriod"){const u=n.dayPeriodFromKey(e.key,r.locale);u!==null&&(e.preventDefault(),c(a,u));return}if(/^\d$/.test(e.key)){e.preventDefault();const u=n.typeDigit(d,o,Number(e.key));o=u.buffer,c(a,u.value),u.advance&&s(i,1)}}}return(e,d)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{ref_key:"rootRef",ref:y,role:"group","data-skdx-field-control":"","aria-disabled":l.disabled?!0:void 0,"aria-invalid":l.invalid?!0:void 0,"data-disabled":l.disabled?"":void 0,"data-readonly":l.readOnly?"":void 0,"data-invalid":l.invalid?"":void 0,dir:l.dir},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(h.value,(a,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:a.isEditable?a.type:`literal-${i}`},[a.isEditable?((0,t.openBlock)(),(0,t.createElementBlock)("span",{key:0,class:(0,t.normalizeClass)(`skdx-${l.family}__segment`),"data-part":"segment",role:"spinbutton",tabindex:l.disabled?-1:0,"aria-label":b(a),"aria-valuenow":(0,t.unref)(n.segmentValueNow)(a),"aria-valuemin":a.min,"aria-valuemax":a.max,"aria-valuetext":a.isPlaceholder?l.emptySegmentText:a.text,"aria-disabled":l.disabled?!0:void 0,"aria-readonly":l.readOnly?!0:void 0,"aria-required":l.required?!0:void 0,"data-segment":a.type,"data-placeholder":a.isPlaceholder?"":void 0,onKeydown:f=>E(f,a),onFocus:p},(0,t.toDisplayString)(a.text),43,w)):((0,t.openBlock)(),(0,t.createElementBlock)("span",{key:1,class:(0,t.normalizeClass)(`skdx-${l.family}__segment`),"data-part":"segment","aria-hidden":"true","data-segment":"literal"},(0,t.toDisplayString)(a.text),3))],64))),128)),l.name||l.required?((0,t.openBlock)(),(0,t.createElementBlock)("input",{key:0,ref_key:"inputEl",ref:m,"aria-hidden":"true",tabindex:"-1",type:l.formType,min:l.formMin,max:l.formMax,step:l.step,name:l.name,form:l.form,"^value":l.formValue??"",required:l.required,disabled:l.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,F)):(0,t.createCommentVNode)("",!0)],8,B))}});exports.default=q;
+const q=require("./direction.cjs"),d=require("./date-segments.cjs");let t=require("vue");var D=["aria-disabled","aria-invalid","data-disabled","data-readonly","data-invalid","dir"],F=["tabindex","aria-label","aria-valuenow","aria-valuemin","aria-valuemax","aria-valuetext","aria-disabled","aria-readonly","aria-required","data-segment","data-placeholder","onKeydown"],L=["type","min","max","step","name","form","^value","required","disabled"],A=(0,t.defineComponent)({__name:"SegmentedField",props:{family:{},kind:{},granularity:{},values:{},shouldForceLeadingZeros:{type:Boolean,default:!0},step:{},formValue:{},formType:{},locale:{},hourCycle:{},formMin:{},formMax:{},clampEdgeValues:{},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},form:{},dir:{},getSegmentLabel:{},emptySegmentText:{default:d.EMPTY_VALUE_TEXT},getSegmentPlaceholder:{}},emits:["values-change"],setup(l,{expose:m,emit:g}){const n=l,k=g;function v(e){const r=e.type;return n.getSegmentLabel?n.getSegmentLabel(r):d.SEGMENT_LABELS[r]}const y=(0,t.ref)(null),f=(0,t.ref)(null);m({inputEl:f});const b=(0,t.computed)(()=>d.buildSegments({kind:n.kind,granularity:n.granularity,locale:n.locale,hourCycle:n.hourCycle,values:n.values,getSegmentPlaceholder:n.getSegmentPlaceholder,shouldForceLeadingZeros:n.shouldForceLeadingZeros}));let o=0;function h(){o=0}function u(e,r,a=!1){if(n.disabled||n.readOnly)return;let i={...n.values,[e]:r};(e==="month"||e==="year")&&i.day!=null&&(i.day=Math.min(i.day,d.daysInMonth(i.year,i.month))),a&&n.clampEdgeValues&&(i=n.clampEdgeValues(i)),k("values-change",i),(0,t.nextTick)(()=>{y.value?.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))})}function p(){return y.value?Array.from(y.value.querySelectorAll('[role="spinbutton"][data-segment]')):[]}function s(e,r){const a=p(),i=a[a.indexOf(e)+r];i&&(o=0,i.focus())}function x(e,r,a){e.preventDefault(),o=0,u(a,d.stepSegment(r,e.key==="ArrowUp"?1:-1,d.segmentStepFor(a,n.granularity,n.step)))}function E(e,r,a){e.preventDefault(),o=0,u(a,e.key==="Home"?r.min:r.max,!0)}function S(e,r){const a=d.dayPeriodFromKey(e.key,n.locale);a!==null&&(e.preventDefault(),u(r,a))}function B(e,r,a){e.preventDefault();const i=d.typeDigit(r,o,Number(e.key));o=i.buffer,u(r.type,i.value),i.advance&&s(a,1)}function w(e,r){const a=r.type,i=e.currentTarget,c=q.directionalKey(e.key,i,n.dir);if(c==="ArrowLeft"||c==="ArrowRight"){e.preventDefault(),s(i,c==="ArrowRight"?1:-1);return}if(!(n.disabled||n.readOnly)){if(e.key==="ArrowUp"||e.key==="ArrowDown"){x(e,r,a);return}if(e.key==="Home"||e.key==="End"){E(e,r,a);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),o=0,u(a,null);return}if(a==="dayPeriod"){S(e,a);return}/^\d$/.test(e.key)&&B(e,r,i)}}return(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{ref_key:"rootRef",ref:y,role:"group","data-skdx-field-control":"","aria-disabled":l.disabled?!0:void 0,"aria-invalid":l.invalid?!0:void 0,"data-disabled":l.disabled?"":void 0,"data-readonly":l.readOnly?"":void 0,"data-invalid":l.invalid?"":void 0,dir:l.dir},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(b.value,(a,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:a.isEditable?a.type:`literal-${i}`},[a.isEditable?((0,t.openBlock)(),(0,t.createElementBlock)("span",{key:0,class:(0,t.normalizeClass)(`skdx-${l.family}__segment`),"data-part":"segment",role:"spinbutton",tabindex:l.disabled?-1:0,"aria-label":v(a),"aria-valuenow":(0,t.unref)(d.segmentValueNow)(a),"aria-valuemin":a.min,"aria-valuemax":a.max,"aria-valuetext":a.isPlaceholder?l.emptySegmentText:a.text,"aria-disabled":l.disabled?!0:void 0,"aria-readonly":l.readOnly?!0:void 0,"aria-required":l.required?!0:void 0,"data-segment":a.type,"data-placeholder":a.isPlaceholder?"":void 0,onKeydown:c=>w(c,a),onFocus:h},(0,t.toDisplayString)(a.text),43,F)):((0,t.openBlock)(),(0,t.createElementBlock)("span",{key:1,class:(0,t.normalizeClass)(`skdx-${l.family}__segment`),"data-part":"literal","aria-hidden":"true","data-segment":"literal"},(0,t.toDisplayString)(a.text),3))],64))),128)),l.name||l.required?((0,t.openBlock)(),(0,t.createElementBlock)("input",{key:0,ref_key:"inputEl",ref:f,"aria-hidden":"true",tabindex:"-1",type:l.formType,min:l.formMin,max:l.formMax,step:l.step,name:l.name,form:l.form,"^value":l.formValue??"",required:l.required,disabled:l.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,L)):(0,t.createCommentVNode)("",!0)],8,D))}});exports.default=A;

package/dist/utils/SegmentedField.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e}from"./direction.js";import{EMPTY_VALUE_TEXT as a,SEGMENT_LABELS as t,buildSegments as i,dayPeriodFromKey as l,daysInMonth as r,segmentStepFor as d,segmentValueNow as n,stepSegment as o,typeDigit as s}from"./dateSegments.js";import{Fragment as u,computed as m,createCommentVNode as y,createElementBlock as f,defineComponent as p,nextTick as v,normalizeClass as c,openBlock as g,ref as b,renderList as k,toDisplayString as h,unref as x}from"vue";var E=["aria-disabled","aria-invalid","data-disabled","data-readonly","data-invalid","dir"],S=["tabindex","aria-label","aria-valuenow","aria-valuemin","aria-valuemax","aria-valuetext","aria-disabled","aria-readonly","aria-required","data-segment","data-placeholder","onKeydown"],w=["type","min","max","step","name","form","^value","required","disabled"],F=/* @__PURE__ */p({__name:"SegmentedField",props:{family:{},kind:{},granularity:{},values:{},shouldForceLeadingZeros:{type:Boolean,default:!0},step:{default:void 0},formValue:{},formType:{},locale:{default:void 0},hourCycle:{default:void 0},formMin:{default:void 0},formMax:{default:void 0},clampEdgeValues:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:a},getSegmentPlaceholder:{type:Function,default:void 0}},emits:["values-change"],setup(a,{expose:p,emit:F}){const L=a,_=F;function A(e){const a=e.type;return L.getSegmentLabel?L.getSegmentLabel(a):t[a]}const D=b(null),T=b(null);p({inputEl:T});const q=m(()=>i({kind:L.kind,granularity:L.granularity,locale:L.locale,hourCycle:L.hourCycle,values:L.values,getSegmentPlaceholder:L.getSegmentPlaceholder,shouldForceLeadingZeros:L.shouldForceLeadingZeros}));let B=0;function M(){B=0}function P(e,a,t=!1){if(L.readOnly)return;let i={...L.values,[e]:a};("month"===e||"year"===e)&&null!=i.day&&(i.day=Math.min(i.day,r(i.year,i.month))),t&&L.clampEdgeValues&&(i=L.clampEdgeValues(i)),_("values-change",i),v(()=>{D.value?.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))})}function V(e,a){const t=D.value?Array.from(D.value.querySelectorAll('[role="spinbutton"][data-segment]')):[],i=t[t.indexOf(e)+a];i&&(B=0,i.focus())}return(t,i)=>(g(),f("div",{ref_key:"rootRef",ref:D,role:"group","data-skdx-field-control":"","aria-disabled":!!a.disabled||void 0,"aria-invalid":!!a.invalid||void 0,"data-disabled":a.disabled?"":void 0,"data-readonly":a.readOnly?"":void 0,"data-invalid":a.invalid?"":void 0,dir:a.dir},[(g(!0),f(u,null,k(q.value,(t,i)=>(g(),f(u,{key:t.isEditable?t.type:`literal-${i}`},[t.isEditable?(g(),f("span",{key:0,class:c(`skdx-${a.family}__segment`),"data-part":"segment",role:"spinbutton",tabindex:a.disabled?-1:0,"aria-label":A(t),"aria-valuenow":x(n)(t),"aria-valuemin":t.min,"aria-valuemax":t.max,"aria-valuetext":t.isPlaceholder?a.emptySegmentText:t.text,"aria-disabled":!!a.disabled||void 0,"aria-readonly":!!a.readOnly||void 0,"aria-required":!!a.required||void 0,"data-segment":t.type,"data-placeholder":t.isPlaceholder?"":void 0,onKeydown:a=>function(a,t){const i=t.type,r=a.currentTarget,n=e(a.key,r,L.dir);if("ArrowLeft"===n||"ArrowRight"===n)return a.preventDefault(),void V(r,"ArrowRight"===n?1:-1);if(!L.readOnly){if("ArrowUp"===a.key||"ArrowDown"===a.key)return a.preventDefault(),B=0,void P(i,o(t,"ArrowUp"===a.key?1:-1,d(i,L.granularity,L.step)));if("Home"===a.key||"End"===a.key)return a.preventDefault(),B=0,void P(i,"Home"===a.key?t.min:t.max,!0);if("Backspace"===a.key||"Delete"===a.key)return a.preventDefault(),B=0,void P(i,null);if("dayPeriod"===i){const e=l(a.key,L.locale);return void(null!==e&&(a.preventDefault(),P(i,e)))}if(/^\d$/.test(a.key)){a.preventDefault();const e=s(t,B,Number(a.key));B=e.buffer,P(i,e.value),e.advance&&V(r,1)}}}(a,t),onFocus:M},h(t.text),43,S)):(g(),f("span",{key:1,class:c(`skdx-${a.family}__segment`),"data-part":"segment","aria-hidden":"true","data-segment":"literal"},h(t.text),3))],64))),128)),a.name||a.required?(g(),f("input",{key:0,ref_key:"inputEl",ref:T,"aria-hidden":"true",tabindex:"-1",type:a.formType,min:a.formMin,max:a.formMax,step:a.step,name:a.name,form:a.form,"^value":a.formValue??"",required:a.required,disabled:a.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,w)):y("",!0)],8,E))}});export{F as default};
+import{directionalKey as e}from"./direction.js";import{EMPTY_VALUE_TEXT as a,SEGMENT_LABELS as t,buildSegments as r,dayPeriodFromKey as i,daysInMonth as l,segmentStepFor as n,segmentValueNow as d,stepSegment as o,typeDigit as s}from"./date-segments.js";import{Fragment as u,computed as m,createCommentVNode as y,createElementBlock as p,defineComponent as f,nextTick as c,normalizeClass as v,openBlock as g,ref as b,renderList as k,toDisplayString as h,unref as x}from"vue";var E=["aria-disabled","aria-invalid","data-disabled","data-readonly","data-invalid","dir"],S=["tabindex","aria-label","aria-valuenow","aria-valuemin","aria-valuemax","aria-valuetext","aria-disabled","aria-readonly","aria-required","data-segment","data-placeholder","onKeydown"],w=["type","min","max","step","name","form","^value","required","disabled"],L=/* @__PURE__ */f({__name:"SegmentedField",props:{family:{},kind:{},granularity:{},values:{},shouldForceLeadingZeros:{type:Boolean,default:!0},step:{},formValue:{},formType:{},locale:{},hourCycle:{},formMin:{},formMax:{},clampEdgeValues:{},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},form:{},dir:{},getSegmentLabel:{},emptySegmentText:{default:a},getSegmentPlaceholder:{}},emits:["values-change"],setup(a,{expose:f,emit:L}){const _=a,A=L;function D(e){const a=e.type;return _.getSegmentLabel?_.getSegmentLabel(a):t[a]}const T=b(null),q=b(null);f({inputEl:q});const B=m(()=>r({kind:_.kind,granularity:_.granularity,locale:_.locale,hourCycle:_.hourCycle,values:_.values,getSegmentPlaceholder:_.getSegmentPlaceholder,shouldForceLeadingZeros:_.shouldForceLeadingZeros}));let F=0;function M(){F=0}function P(e,a,t=!1){if(_.disabled||_.readOnly)return;let r={..._.values,[e]:a};("month"===e||"year"===e)&&null!=r.day&&(r.day=Math.min(r.day,l(r.year,r.month))),t&&_.clampEdgeValues&&(r=_.clampEdgeValues(r)),A("values-change",r),c(()=>{T.value?.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))})}function V(e,a){const t=T.value?Array.from(T.value.querySelectorAll('[role="spinbutton"][data-segment]')):[],r=t[t.indexOf(e)+a];r&&(F=0,r.focus())}return(t,r)=>(g(),p("div",{ref_key:"rootRef",ref:T,role:"group","data-skdx-field-control":"","aria-disabled":!!a.disabled||void 0,"aria-invalid":!!a.invalid||void 0,"data-disabled":a.disabled?"":void 0,"data-readonly":a.readOnly?"":void 0,"data-invalid":a.invalid?"":void 0,dir:a.dir},[(g(!0),p(u,null,k(B.value,(t,r)=>(g(),p(u,{key:t.isEditable?t.type:`literal-${r}`},[t.isEditable?(g(),p("span",{key:0,class:v(`skdx-${a.family}__segment`),"data-part":"segment",role:"spinbutton",tabindex:a.disabled?-1:0,"aria-label":D(t),"aria-valuenow":x(d)(t),"aria-valuemin":t.min,"aria-valuemax":t.max,"aria-valuetext":t.isPlaceholder?a.emptySegmentText:t.text,"aria-disabled":!!a.disabled||void 0,"aria-readonly":!!a.readOnly||void 0,"aria-required":!!a.required||void 0,"data-segment":t.type,"data-placeholder":t.isPlaceholder?"":void 0,onKeydown:a=>function(a,t){const r=t.type,l=a.currentTarget,d=e(a.key,l,_.dir);if("ArrowLeft"===d||"ArrowRight"===d)return a.preventDefault(),void V(l,"ArrowRight"===d?1:-1);if(!_.disabled&&!_.readOnly){if("ArrowUp"===a.key||"ArrowDown"===a.key)return void function(e,a,t){e.preventDefault(),F=0,P(t,o(a,"ArrowUp"===e.key?1:-1,n(t,_.granularity,_.step)))}(a,t,r);if("Home"===a.key||"End"===a.key)return void function(e,a,t){e.preventDefault(),F=0,P(t,"Home"===e.key?a.min:a.max,!0)}(a,t,r);if("Backspace"===a.key||"Delete"===a.key)return a.preventDefault(),F=0,void P(r,null);if("dayPeriod"===r)return void function(e,a){const t=i(e.key,_.locale);null!==t&&(e.preventDefault(),P(a,t))}(a,r);/^\d$/.test(a.key)&&function(e,a,t){e.preventDefault();const r=s(a,F,Number(e.key));F=r.buffer,P(a.type,r.value),r.advance&&V(t,1)}(a,t,l)}}(a,t),onFocus:M},h(t.text),43,S)):(g(),p("span",{key:1,class:v(`skdx-${a.family}__segment`),"data-part":"literal","aria-hidden":"true","data-segment":"literal"},h(t.text),3))],64))),128)),a.name||a.required?(g(),p("input",{key:0,ref_key:"inputEl",ref:q,"aria-hidden":"true",tabindex:"-1",type:a.formType,min:a.formMin,max:a.formMax,step:a.step,name:a.name,form:a.form,"^value":a.formValue??"",required:a.required,disabled:a.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,w)):y("",!0)],8,E))}});export{L as default};

package/dist/utils/announcer.cjs

@@ -0,0 +1 @@
+var i=150,r="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal;",d=class{constructor(){this.regions=new Map}announce(t,o="polite"){if(typeof document>"u")return;const e=t.trim();if(!e)return;const n=this.regionFor(o);n.pending=e,n.node.textContent="",clearTimeout(n.timer),n.timer=setTimeout(()=>{n.timer=void 0,n.node.textContent=n.pending},150)}clear(t){for(const[o,e]of this.regions)t!==void 0&&o!==t||(clearTimeout(e.timer),e.timer=void 0,e.node.textContent="")}destroy(){this.clear();for(const t of this.regions.values())t.node.remove();this.regions.clear()}regionFor(t){const o=this.regions.get(t);if(o?.node.isConnected)return o;const e=document.createElement("div");e.setAttribute("aria-live",t),e.setAttribute("aria-atomic","true"),e.setAttribute("data-skdx-live-announcer",t),e.style.cssText=r,document.body.appendChild(e);const n={node:e,pending:"",timer:void 0};return this.regions.set(t,n),n}};exports.ANNOUNCE_DEBOUNCE_MS=i;exports.Announcer=d;

package/dist/utils/announcer.d.cts

@@ -0,0 +1,17 @@
+/** Which of the two singleton live regions a message is routed to. */
+export type AnnouncePoliteness = 'polite' | 'assertive';
+/** How long successive announcements keep merging into one write before the region updates. */
+export declare const ANNOUNCE_DEBOUNCE_MS = 150;
+/** Owns the `aria-live` regions and their debounced writes; one instance per process (or per Angular injector). */
+export declare class Announcer {
+    private readonly regions;
+    /**
+     * Schedules `message` for the region; a burst inside one debounce window collapses to its last message, and a repeat of the text already shown is re-announced.
+     */
+    announce(message: string, politeness?: AnnouncePoliteness): void;
+    /** Empties the region(s) and drops anything still pending; pass a politeness to clear just one. */
+    clear(politeness?: AnnouncePoliteness): void;
+    /** Clears and removes the regions from the document. */
+    destroy(): void;
+    private regionFor;
+}

package/dist/utils/announcer.d.ts

@@ -0,0 +1,17 @@
+/** Which of the two singleton live regions a message is routed to. */
+export type AnnouncePoliteness = 'polite' | 'assertive';
+/** How long successive announcements keep merging into one write before the region updates. */
+export declare const ANNOUNCE_DEBOUNCE_MS = 150;
+/** Owns the `aria-live` regions and their debounced writes; one instance per process (or per Angular injector). */
+export declare class Announcer {
+    private readonly regions;
+    /**
+     * Schedules `message` for the region; a burst inside one debounce window collapses to its last message, and a repeat of the text already shown is re-announced.
+     */
+    announce(message: string, politeness?: AnnouncePoliteness): void;
+    /** Empties the region(s) and drops anything still pending; pass a politeness to clear just one. */
+    clear(politeness?: AnnouncePoliteness): void;
+    /** Clears and removes the regions from the document. */
+    destroy(): void;
+    private regionFor;
+}

package/dist/utils/announcer.js

@@ -0,0 +1 @@
+var e=150,t=class{constructor(){this.regions=/* @__PURE__ */new Map}announce(e,t="polite"){if(typeof document>"u")return;const o=e.trim();if(!o)return;const n=this.regionFor(t);n.pending=o,n.node.textContent="",clearTimeout(n.timer),n.timer=setTimeout(()=>{n.timer=void 0,n.node.textContent=n.pending},150)}clear(e){for(const[t,o]of this.regions)void 0!==e&&t!==e||(clearTimeout(o.timer),o.timer=void 0,o.node.textContent="")}destroy(){this.clear();for(const e of this.regions.values())e.node.remove();this.regions.clear()}regionFor(e){const t=this.regions.get(e);if(t?.node.isConnected)return t;const o=document.createElement("div");o.setAttribute("aria-live",e),o.setAttribute("aria-atomic","true"),o.setAttribute("data-skdx-live-announcer",e),o.style.cssText="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal;",document.body.appendChild(o);const n={node:o,pending:"",timer:void 0};return this.regions.set(e,n),n}};export{e as ANNOUNCE_DEBOUNCE_MS,t as Announcer};

package/dist/utils/appearance.cjs

@@ -0,0 +1 @@
+function c(r,o={}){const e={};for(const n of Object.keys(r)){const a=`data-${n.replace(/[A-Z]/g,s=>`-${s.toLowerCase()}`)}`,t=r[n]??o[a];t==null||t===!1?e[a]=void 0:e[a]=t===!0?"":String(t)}return e}exports.appearanceAttrs=c;

package/dist/utils/appearance.d.cts

@@ -0,0 +1,14 @@
+/** One appearance axis value as a consumer may pass it: a rung name, a presence flag, or nothing. */
+export type AppearanceValue = string | boolean | null | undefined;
+/**
+ * Resolves appearance axes to the `data-*` attributes the skin reads, so a
+ * consumer may set either the prop (`size="lg"`) or the attribute
+ * (`data-size="lg"`) and both render the same. The prop wins when both are
+ * given; `false`, `null` and `undefined` leave the attribute off; `true`
+ * writes a bare presence attribute.
+ *
+ * @param values - Axis name to prop value, e.g. `{ size, iconOnly }`; camelCase keys map to kebab-case attributes.
+ * @param attrs - The pass-through attributes the consumer supplied, read for `data-<axis>` fallbacks.
+ * @returns A `data-<axis>` record to spread after the pass-through attributes.
+ */
+export declare function appearanceAttrs(values: Record<string, AppearanceValue>, attrs?: Record<string, unknown>): Record<string, string | undefined>;

package/dist/utils/appearance.d.ts

@@ -0,0 +1,14 @@
+/** One appearance axis value as a consumer may pass it: a rung name, a presence flag, or nothing. */
+export type AppearanceValue = string | boolean | null | undefined;
+/**
+ * Resolves appearance axes to the `data-*` attributes the skin reads, so a
+ * consumer may set either the prop (`size="lg"`) or the attribute
+ * (`data-size="lg"`) and both render the same. The prop wins when both are
+ * given; `false`, `null` and `undefined` leave the attribute off; `true`
+ * writes a bare presence attribute.
+ *
+ * @param values - Axis name to prop value, e.g. `{ size, iconOnly }`; camelCase keys map to kebab-case attributes.
+ * @param attrs - The pass-through attributes the consumer supplied, read for `data-<axis>` fallbacks.
+ * @returns A `data-<axis>` record to spread after the pass-through attributes.
+ */
+export declare function appearanceAttrs(values: Record<string, AppearanceValue>, attrs?: Record<string, unknown>): Record<string, string | undefined>;

package/dist/utils/appearance.js

@@ -0,0 +1 @@
+function t(t,e={}){const o={};for(const n of Object.keys(t)){const r=`data-${n.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}`,a=t[n]??e[r];o[r]=null==a||!1===a?void 0:!0===a?"":String(a)}return o}export{t as appearanceAttrs};

package/dist/utils/arrow-keys.d.cts

@@ -0,0 +1,7 @@
+/**
+ * Whether the carousel root should ignore this Arrow keypress, leaving it to whatever inside the carousel owns it.
+ *
+ * @param target the event's target
+ * @param root the carousel root the handler is attached to
+ */
+export declare function arrowKeyBelongsToDescendant(target: EventTarget | null, root: Element): boolean;

package/dist/utils/arrow-keys.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether the carousel root should ignore this Arrow keypress, leaving it to whatever inside the carousel owns it.
+ *
+ * @param target the event's target
+ * @param root the carousel root the handler is attached to
+ */
+export declare function arrowKeyBelongsToDescendant(target: EventTarget | null, root: Element): boolean;

package/dist/utils/calendar-locale.d.cts

@@ -0,0 +1,35 @@
+/** How much of a name to render — the `Intl.DateTimeFormat` `month`/`weekday` widths. */
+export type NameWidth = 'narrow' | 'short' | 'long';
+/** The runtime's own locale, used whenever `locale` is omitted — matches what `toLocaleDateString()` would pick. */
+export declare function resolveLocale(locale?: string): string;
+/**
+ * The twelve month names of `locale`, January first, at the requested width.
+ *
+ * @example
+ * ```ts
+ * getMonthNames('fr-FR')[0]; // 'janvier'
+ * ```
+ */
+export declare function getMonthNames(locale?: string, width?: NameWidth): string[];
+/**
+ * The seven weekday names of `locale` at the requested width, rotated so index
+ * `0` is `weekStartsOn` (`0` = Sunday … `6` = Saturday).
+ *
+ * @example
+ * ```ts
+ * getWeekDayNames('en-GB', 1, 'short'); // ['Mon', 'Tue', … 'Sun']
+ * ```
+ */
+export declare function getWeekDayNames(locale?: string, weekStartsOn?: number, width?: NameWidth): string[];
+/** The first day of the week `locale` uses (`0` = Sunday … `6` = Saturday), read from `Intl.Locale`'s week info, falling back to `0` on engines without it. */
+export declare function getLocaleWeekStartsOn(locale?: string): 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** The month heading label for `month` (e.g. `'janvier 2026'`), formatted for `locale`. */
+export declare function formatMonthLabel(month: Date, locale?: string): string;
+/** A bare year formatted for `locale` (e.g. `'2026'`, `'٢٠٢٦'` in `ar-EG`) using `Intl.NumberFormat` with grouping off, since a grouped `2,026` is not a year. */
+export declare function formatYear(year: number, locale?: string): string;
+/** A year page label (e.g. `'2020 – 2039'`), the year view's heading and grid name. */
+export declare function formatYearRange(start: number, end: number, locale?: string): string;
+/** A full, spoken-friendly date label (e.g. `'Monday, January 5, 2026'`) for live-region announcements. */
+export declare function formatDateLabel(date: Date, locale?: string): string;
+/** @internal Drops every memoized name list. */
+export declare function clearLocaleNameCache(): void;

package/dist/utils/calendar-locale.d.ts

@@ -0,0 +1,35 @@
+/** How much of a name to render — the `Intl.DateTimeFormat` `month`/`weekday` widths. */
+export type NameWidth = 'narrow' | 'short' | 'long';
+/** The runtime's own locale, used whenever `locale` is omitted — matches what `toLocaleDateString()` would pick. */
+export declare function resolveLocale(locale?: string): string;
+/**
+ * The twelve month names of `locale`, January first, at the requested width.
+ *
+ * @example
+ * ```ts
+ * getMonthNames('fr-FR')[0]; // 'janvier'
+ * ```
+ */
+export declare function getMonthNames(locale?: string, width?: NameWidth): string[];
+/**
+ * The seven weekday names of `locale` at the requested width, rotated so index
+ * `0` is `weekStartsOn` (`0` = Sunday … `6` = Saturday).
+ *
+ * @example
+ * ```ts
+ * getWeekDayNames('en-GB', 1, 'short'); // ['Mon', 'Tue', … 'Sun']
+ * ```
+ */
+export declare function getWeekDayNames(locale?: string, weekStartsOn?: number, width?: NameWidth): string[];
+/** The first day of the week `locale` uses (`0` = Sunday … `6` = Saturday), read from `Intl.Locale`'s week info, falling back to `0` on engines without it. */
+export declare function getLocaleWeekStartsOn(locale?: string): 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** The month heading label for `month` (e.g. `'janvier 2026'`), formatted for `locale`. */
+export declare function formatMonthLabel(month: Date, locale?: string): string;
+/** A bare year formatted for `locale` (e.g. `'2026'`, `'٢٠٢٦'` in `ar-EG`) using `Intl.NumberFormat` with grouping off, since a grouped `2,026` is not a year. */
+export declare function formatYear(year: number, locale?: string): string;
+/** A year page label (e.g. `'2020 – 2039'`), the year view's heading and grid name. */
+export declare function formatYearRange(start: number, end: number, locale?: string): string;
+/** A full, spoken-friendly date label (e.g. `'Monday, January 5, 2026'`) for live-region announcements. */
+export declare function formatDateLabel(date: Date, locale?: string): string;
+/** @internal Drops every memoized name list. */
+export declare function clearLocaleNameCache(): void;

package/dist/utils/cardNesting.cjs

@@ -1 +1 @@
-const i=require("./tabbable.cjs"),a=require("./is-dev-mode.cjs");var o='input[type="checkbox"], input[type="radio"]';function c(r,n){if(!n)return;const e=Array.from(n.querySelectorAll(i.TABBABLE_SELECTOR)).filter(t=>!t.matches(o));e.length!==0&&a.isDevMode()&&console.warn(`[skdx] ${r}: found ${e.length} focusable element(s) nested inside the card — ${e.map(t=>`<${t.localName}>`).join(", ")}. The card root is a <label>, so clicking one of these also toggles the card, and a <label> may not contain interactive content. Put actions beside the card, never inside it.`)}exports.warnOnNestedInteractive=c;
+const a=require("./dev-mode.cjs"),i=require("./tabbable.cjs");var o='input[type="checkbox"], input[type="radio"]';function c(r,n){if(!n)return;const e=Array.from(n.querySelectorAll(i.TABBABLE_SELECTOR)).filter(t=>!t.matches(o));e.length!==0&&a.isDevMode()&&console.warn(`[skdx] ${r}: found ${e.length} focusable element(s) nested inside the card — ${e.map(t=>`<${t.localName}>`).join(", ")}. The card root is a <label>, so clicking one of these also toggles the card, and a <label> may not contain interactive content. Put actions beside the card, never inside it.`)}exports.warnOnNestedInteractive=c;

package/dist/utils/cardNesting.d.cts

@@ -1,8 +1,5 @@
 /**
- * Warns when card root contains focusable descendant that's not its Control.
- * Root is <label>, so nested interactive elements are HTML violations and
- * usability bugs (clicking inner control toggles label). Warning post-mount
- * so it sees rendered subtree.
+ * Warns when the card root contains a focusable descendant that isn't its Control.
  * @param family Card family.
  * @param root Card root element.
  * @internal

package/dist/utils/cardNesting.d.ts

@@ -1,8 +1,5 @@
 /**
- * Warns when card root contains focusable descendant that's not its Control.
- * Root is <label>, so nested interactive elements are HTML violations and
- * usability bugs (clicking inner control toggles label). Warning post-mount
- * so it sees rendered subtree.
+ * Warns when the card root contains a focusable descendant that isn't its Control.
  * @param family Card family.
  * @param root Card root element.
  * @internal

package/dist/utils/cardNesting.js

@@ -1 +1 @@
-import{TABBABLE_SELECTOR as e}from"./tabbable.js";import{isDevMode as t}from"./is-dev-mode.js";function n(n,o){if(!o)return;const a=Array.from(o.querySelectorAll(e)).filter(e=>!e.matches('input[type="checkbox"], input[type="radio"]'));0!==a.length&&t()&&console.warn(`[skdx] ${n}: found ${a.length} focusable element(s) nested inside the card — ${a.map(e=>`<${e.localName}>`).join(", ")}. The card root is a <label>, so clicking one of these also toggles the card, and a <label> may not contain interactive content. Put actions beside the card, never inside it.`)}export{n as warnOnNestedInteractive};
+import{isDevMode as e}from"./dev-mode.js";import{TABBABLE_SELECTOR as t}from"./tabbable.js";function n(n,o){if(!o)return;const a=Array.from(o.querySelectorAll(t)).filter(e=>!e.matches('input[type="checkbox"], input[type="radio"]'));0!==a.length&&e()&&console.warn(`[skdx] ${n}: found ${a.length} focusable element(s) nested inside the card — ${a.map(e=>`<${e.localName}>`).join(", ")}. The card root is a <label>, so clicking one of these also toggles the card, and a <label> may not contain interactive content. Put actions beside the card, never inside it.`)}export{n as warnOnNestedInteractive};

package/dist/utils/color.cjs

@@ -1 +1 @@
-const l=require("./clamp.cjs");function u(n,t=0){const r=10**t;return Math.round(n*r)/r}function h(n){return(n%360+360)%360}function f(n){return l.clamp(Math.round(n),0,255).toString(16).padStart(2,"0")}function M(n,t,r,s,c){return c?h((s===n?(t-r)/c:s===t?(r-n)/c+2:(n-t)/c+4)*60):0}function R(n,t,r,s,c){const o=Math.floor(h(n)/60)%6,[a,e,i]=[[t,r,0],[r,t,0],[0,t,r],[0,r,t],[r,0,t],[t,0,r]][o]??[0,0,0];return{r:u((a+s)*255),g:u((e+s)*255),b:u((i+s)*255),a:c}}function C(n,t=!1){const r=`#${f(n.r)}${f(n.g)}${f(n.b)}`;return t?`${r}${f(l.clamp(n.a,0,1)*255)}`:r}var A=/^#?([\da-f]{3,8})$/i;function x(n){const t=A.exec(n.trim());if(!t)return null;let r=t[1];if((r.length===3||r.length===4)&&(r=r.split("").map(c=>c+c).join("")),r.length!==6&&r.length!==8)return null;const s=c=>parseInt(r.slice(c,c+2),16);return{r:s(0),g:s(2),b:s(4),a:r.length===8?u(s(6)/255,3):1}}function g(n){const t=l.clamp(n.r,0,255)/255,r=l.clamp(n.g,0,255)/255,s=l.clamp(n.b,0,255)/255,c=Math.max(t,r,s),o=c-Math.min(t,r,s);return{h:M(t,r,s,c,o),s:c?o/c*100:0,b:c*100,a:l.clamp(n.a,0,1)}}function T(n){const t=h(n.h),r=l.clamp(n.s,0,100)/100,s=l.clamp(n.b,0,100)/100,c=s*r;return R(t,c,c*(1-Math.abs(t/60%2-1)),s-c,l.clamp(n.a,0,1))}function E(n){const t=l.clamp(n.r,0,255)/255,r=l.clamp(n.g,0,255)/255,s=l.clamp(n.b,0,255)/255,c=Math.max(t,r,s),o=Math.min(t,r,s),a=c-o,e=(c+o)/2,i=a?a/(1-Math.abs(2*e-1)):0;return{h:M(t,r,s,c,a),s:l.clamp(i*100,0,100),l:e*100,a:l.clamp(n.a,0,1)}}function F(n){const t=h(n.h),r=l.clamp(n.s,0,100)/100,s=l.clamp(n.l,0,100)/100,c=(1-Math.abs(2*s-1))*r;return R(t,c,c*(1-Math.abs(t/60%2-1)),s-c/2,l.clamp(n.a,0,1))}function N(n){const t=l.clamp(n.s,0,100)/100,r=l.clamp(n.b,0,100)/100,s=r*(1-t/2),c=Math.min(s,1-s);return{h:h(n.h),s:c?(r-s)/c*100:0,l:s*100,a:l.clamp(n.a,0,1)}}function O(n){const t=l.clamp(n.s,0,100)/100,r=l.clamp(n.l,0,100)/100,s=r+t*Math.min(r,1-r);return{h:h(n.h),s:s?2*(1-r/s)*100:0,b:s*100,a:l.clamp(n.a,0,1)}}var _=/^(rgba?|hsla?|hsba?|hsva?)\(([^()]*)\)$/;function d(n){if(n===void 0)return null;const t=n.endsWith("%"),r=t?n.slice(0,-1):n.replace(/deg$/,"");if(r.trim()==="")return null;const s=Number(r);return Number.isFinite(s)?{value:s,percent:t}:null}function b(n){const t=d(n);return t&&(t.percent?t.value/100*255:t.value)}function $(n){const t=d(n);return t&&t.value}function q(n){if(n===void 0)return 1;const t=d(n);return t&&(t.percent?t.value/100:t.value)}function m(n){return{h:u(h(n.h),2),s:u(l.clamp(n.s,0,100),2),b:u(l.clamp(n.b,0,100),2),a:u(l.clamp(n.a,0,1),3)}}function w(n){if(typeof n!="string")return null;const t=n.trim().toLowerCase();if(!t)return null;const r=_.exec(t);if(!r){const p=x(t);return p?m(g(p)):null}const s=r[1].replace(/a$/,""),c=r[2].replace(/\//g," ").split(/[\s,]+/).filter(Boolean);if(c.length!==3&&c.length!==4)return null;const o=q(c[3]);if(o===null)return null;if(s==="rgb"){const p=b(c[0]),v=b(c[1]),H=b(c[2]);return p===null||v===null||H===null?null:m(g({r:p,g:v,b:H,a:o}))}const a=$(c[0]),e=$(c[1]),i=$(c[2]);return a===null||e===null||i===null?null:m(s==="hsl"?O({h:a,s:e,l:i,a:o}):{h:a,s:e,b:i,a:o})}function y(n,t,r=!0){const s=u(l.clamp(n.a,0,1),3),c=r&&s<1;if(t==="rgb"){const{r:o,g:a,b:e}=T(n);return c?`rgba(${o}, ${a}, ${e}, ${s})`:`rgb(${o}, ${a}, ${e})`}if(t==="hsl"){const o=N(n),a=u(o.h),e=u(o.s),i=u(o.l);return c?`hsla(${a}, ${e}%, ${i}%, ${s})`:`hsl(${a}, ${e}%, ${i}%)`}if(t==="hsb"){const o=u(h(n.h)),a=u(l.clamp(n.s,0,100)),e=u(l.clamp(n.b,0,100));return c?`hsba(${o}, ${a}%, ${e}%, ${s})`:`hsb(${o}, ${a}%, ${e}%)`}return C(T(n),c)}exports.formatColor=y;exports.hexToRgb=x;exports.hsbToHsl=N;exports.hsbToRgb=T;exports.hslToHsb=O;exports.hslToRgb=F;exports.parseColor=w;exports.rgbToHex=C;exports.rgbToHsb=g;exports.rgbToHsl=E;
+function u(n,t,r){return Math.min(Math.max(n,t),r)}function a(n,t=0){const r=10**t;return Math.round(n*r)/r}function h(n){return(n%360+360)%360}function f(n){return u(Math.round(n),0,255).toString(16).padStart(2,"0")}function M(n,t,r,s,o){if(!o)return 0;let e;return s===n?e=(t-r)/o:s===t?e=(r-n)/o+2:e=(n-t)/o+4,h(e*60)}function v(n,t,r,s,o){const e=Math.floor(h(n)/60)%6,[c,l,i]=[[t,r,0],[r,t,0],[0,t,r],[0,r,t],[r,0,t],[t,0,r]][e]??[0,0,0];return{r:a((c+s)*255),g:a((l+s)*255),b:a((i+s)*255),a:o}}function d(n,t=!1){const r=`#${f(n.r)}${f(n.g)}${f(n.b)}`;return t?`${r}${f(u(n.a,0,1)*255)}`:r}var C=/^#?([\da-f]{3,8})$/i;function H(n){const t=C.exec(n.trim());if(!t)return null;let r=t[1];if((r.length===3||r.length===4)&&(r=r.split("").map(o=>o+o).join("")),r.length!==6&&r.length!==8)return null;const s=o=>parseInt(r.slice(o,o+2),16);return{r:s(0),g:s(2),b:s(4),a:r.length===8?a(s(6)/255,3):1}}function T(n){const t=u(n.r,0,255)/255,r=u(n.g,0,255)/255,s=u(n.b,0,255)/255,o=Math.max(t,r,s),e=o-Math.min(t,r,s);return{h:M(t,r,s,o,e),s:o?e/o*100:0,b:o*100,a:u(n.a,0,1)}}function m(n){const t=h(n.h),r=u(n.s,0,100)/100,s=u(n.b,0,100)/100,o=s*r;return v(t,o,o*(1-Math.abs(t/60%2-1)),s-o,u(n.a,0,1))}function N(n){const t=u(n.r,0,255)/255,r=u(n.g,0,255)/255,s=u(n.b,0,255)/255,o=Math.max(t,r,s),e=Math.min(t,r,s),c=o-e,l=(o+e)/2,i=c?c/(1-Math.abs(2*l-1)):0;return{h:M(t,r,s,o,c),s:u(i*100,0,100),l:l*100,a:u(n.a,0,1)}}function O(n){const t=h(n.h),r=u(n.s,0,100)/100,s=u(n.l,0,100)/100,o=(1-Math.abs(2*s-1))*r;return v(t,o,o*(1-Math.abs(t/60%2-1)),s-o/2,u(n.a,0,1))}function R(n){const t=u(n.s,0,100)/100,r=u(n.b,0,100)/100,s=r*(1-t/2),o=Math.min(s,1-s);return{h:h(n.h),s:o?(r-s)/o*100:0,l:s*100,a:u(n.a,0,1)}}function x(n){const t=u(n.s,0,100)/100,r=u(n.l,0,100)/100,s=r+t*Math.min(r,1-r);return{h:h(n.h),s:s?2*(1-r/s)*100:0,b:s*100,a:u(n.a,0,1)}}var A=/^(rgba?|hsla?|hsba?|hsva?)\(([^()]*)\)$/;function p(n){if(n===void 0)return null;const t=n.endsWith("%"),r=t?n.slice(0,-1):n.replace(/deg$/,"");if(r.trim()==="")return null;const s=Number(r);return Number.isFinite(s)?{value:s,percent:t}:null}function $(n){const t=p(n);return t&&(t.percent?t.value/100*255:t.value)}function g(n){const t=p(n);return t&&t.value}function F(n){if(n===void 0)return 1;const t=p(n);return t&&(t.percent?t.value/100:t.value)}function b(n){return{h:a(h(n.h),2),s:a(u(n.s,0,100),2),b:a(u(n.b,0,100),2),a:a(u(n.a,0,1),3)}}function E(n){if(typeof n!="string")return null;const t=n.trim().toLowerCase();if(!t)return null;const r=A.exec(t);if(!r){const e=H(t);return e?b(T(e)):null}const s=r[1].replace(/a$/,""),o=r[2].replace(/\//g," ").split(/[\s,]+/).filter(Boolean);return o.length!==3&&o.length!==4?null:P(s,o)}function P(n,t){const r=F(t[3]);if(r===null)return null;if(n==="rgb"){const c=$(t[0]),l=$(t[1]),i=$(t[2]);return c===null||l===null||i===null?null:b(T({r:c,g:l,b:i,a:r}))}const s=g(t[0]),o=g(t[1]),e=g(t[2]);return s===null||o===null||e===null?null:b(n==="hsl"?x({h:s,s:o,l:e,a:r}):{h:s,s:o,b:e,a:r})}function w(n,t,r=!0){const s=a(u(n.a,0,1),3),o=r&&s<1;if(t==="rgb"){const{r:e,g:c,b:l}=m(n);return o?`rgba(${e}, ${c}, ${l}, ${s})`:`rgb(${e}, ${c}, ${l})`}if(t==="hsl"){const e=R(n),c=a(e.h),l=a(e.s),i=a(e.l);return o?`hsla(${c}, ${l}%, ${i}%, ${s})`:`hsl(${c}, ${l}%, ${i}%)`}if(t==="hsb"){const e=a(h(n.h)),c=a(u(n.s,0,100)),l=a(u(n.b,0,100));return o?`hsba(${e}, ${c}%, ${l}%, ${s})`:`hsb(${e}, ${c}%, ${l}%)`}return d(m(n),o)}exports.formatColor=w;exports.hexToRgb=H;exports.hsbToHsl=R;exports.hsbToRgb=m;exports.hslToHsb=x;exports.hslToRgb=O;exports.parseColor=E;exports.rgbToHex=d;exports.rgbToHsb=T;exports.rgbToHsl=N;

package/dist/utils/color.d.cts

@@ -1,20 +1,3 @@
-/**
- * Colour maths for pickers, swatches and contrast checks — parsing, the four
- * model conversions, and serialisation back to a string.
- *
- * Deliberately dependency-free and Vue-free: it is imported by
- * `SkdxColorPicker`, but nothing here knows what a component is, so it can be
- * unit-tested as plain arithmetic and reused by a Node-side token pipeline.
- * Mirrors `packages/react/src/utils/color.ts` exactly — a behavioural
- * difference between the two is a bug in one of them.
- *
- * **HSB is the canonical model** for anything that stores a colour over time.
- * RGB and hex cannot represent the hue of a black or a white — every fully
- * dark colour is `#000000` regardless of which hue it came from — so a picker
- * that round-trips through RGB on every drag loses the user's hue the moment
- * they drag brightness to zero. Convert to RGB/hex at the edges, not in the
- * middle.
- */
 /** sRGB colour: `r`/`g`/`b` in `0–255`, `a` in `0–1`. */
 export interface RgbColor {
     r: number;
@@ -29,30 +12,17 @@ export interface HslColor {
     l: number;
     a: number;
 }
-/**
- * HSB (a.k.a. HSV) colour: `h` in `0–360` degrees, `s` (saturation) and `b`
- * (brightness) in `0–100` percent, `a` in `0–1`.
- *
- * Note `b` is **brightness**, not blue — the field names follow the model's
- * own initials, the way `RgbColor.b` follows RGB's.
- */
+/** HSB (a.k.a. HSV) colour: `h` in `0–360` degrees, `s`/`b` in `0–100` percent, `a` in `0–1`; `b` is brightness, not blue. */
 export interface HsbColor {
     h: number;
     s: number;
     b: number;
     a: number;
 }
-/**
- * Serialisation targets for {@link formatColor}. `'hsb'` is this library's own
- * notation (`hsb(210, 60%, 85%)`) rather than a CSS colour — CSS has no HSB
- * function — so it round-trips through {@link parseColor} but must not be
- * dropped into a stylesheet.
- */
+/** Serialisation targets for {@link formatColor}; `'hsb'` is this library's own notation, not CSS, so it round-trips through {@link parseColor} but must not go in a stylesheet. */
 export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsb';
 /**
- * Serialises an sRGB colour as `#rrggbb`, or `#rrggbbaa` when `includeAlpha`
- * is set. Channels are clamped and rounded, so a computed colour with
- * `r: 255.4` still produces valid hex rather than `#ff.6…`.
+ * Serialises an sRGB colour as `#rrggbb`, or `#rrggbbaa` when `includeAlpha` is set, clamping and rounding channels so a computed colour with `r: 255.4` still produces valid hex.
  *
  * @example
  * ```ts
@@ -62,9 +32,7 @@ export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsb';
  */
 export declare function rgbToHex(rgb: RgbColor, includeAlpha?: boolean): string;
 /**
- * Parses `#rgb`, `#rgba`, `#rrggbb` or `#rrggbbaa` (leading `#` optional,
- * case-insensitive) into sRGB. Returns `null` for anything else — including
- * 5- and 7-digit strings, which look like hex but are not a colour.
+ * Parses `#rgb`, `#rgba`, `#rrggbb` or `#rrggbbaa` into sRGB, returning `null` for anything else, including 5- and 7-digit strings that look like hex but aren't a colour.
  *
  * @example
  * ```ts
@@ -74,11 +42,7 @@ export declare function rgbToHex(rgb: RgbColor, includeAlpha?: boolean): string;
  * ```
  */
 export declare function hexToRgb(hex: string): RgbColor | null;
-/**
- * sRGB → HSB. A greyscale colour reports hue `0`, because it genuinely has
- * none — see the module note on why that makes HSB, not RGB, the model to
- * store.
- */
+/** sRGB → HSB. A greyscale colour reports hue `0`, because it genuinely has none. */
 export declare function rgbToHsb(rgb: RgbColor): HsbColor;
 /** HSB → sRGB. */
 export declare function hsbToRgb(hsb: HsbColor): RgbColor;
@@ -86,33 +50,12 @@ export declare function hsbToRgb(hsb: HsbColor): RgbColor;
 export declare function rgbToHsl(rgb: RgbColor): HslColor;
 /** HSL → sRGB. */
 export declare function hslToRgb(hsl: HslColor): RgbColor;
-/**
- * HSB → HSL, computed directly rather than via RGB. The detour would quantise
- * to 8 bits and flatten the hue of any near-black colour, which is exactly the
- * loss this module exists to avoid.
- */
+/** HSB → HSL, computed directly rather than via RGB, since the detour would quantise to 8 bits and flatten near-black hues. */
 export declare function hsbToHsl(hsb: HsbColor): HslColor;
 /** HSL → HSB, the exact inverse of {@link hsbToHsl}, also without an RGB detour. */
 export declare function hslToHsb(hsl: HslColor): HsbColor;
 /**
- * Parses a colour string into the canonical {@link HsbColor}, returning
- * **`null` rather than throwing** for anything it does not understand — this
- * is fed by user-typed text and by whatever a consumer passes as `value`, so
- * "unparseable" is a normal outcome, not an exception.
- *
- * Tolerant about *formatting*, not about vocabulary. It accepts:
- *
- * - hex, with or without `#`, in 3/4/6/8 digits;
- * - `rgb()` / `rgba()`, with numeric or `%` channels;
- * - `hsl()` / `hsla()`, with or without the `%` on saturation/lightness and
- *   with or without `deg` on the hue;
- * - `hsb()` / `hsba()` / `hsv()` / `hsva()`, this library's own notation;
- * - comma-separated *or* space-separated arguments, with the modern
- *   `rgb(255 0 0 / 50%)` slash-alpha form.
- *
- * It does **not** know named colours (`red`, `transparent`), `color()`,
- * `lab()`/`oklch()`, or `turn`/`rad` hue units. Those all return `null`; a
- * 148-entry name table is a dependency's job, not a picker's.
+ * Parses a colour string (hex, `rgb()`, `hsl()`, or this library's own `hsb()`) into the canonical {@link HsbColor}, returning `null` rather than throwing for anything unrecognized, including named colours.
  *
  * @example
  * ```ts
@@ -124,17 +67,7 @@ export declare function hslToHsb(hsl: HslColor): HsbColor;
  */
 export declare function parseColor(input: string): HsbColor | null;
 /**
- * Serialises the canonical {@link HsbColor} back to a string in `format`.
- *
- * Alpha appears **only when it is not 1** — `#ff0000` rather than `#ff0000ff`,
- * `rgb(…)` rather than `rgba(…, 1)` — because that is what every consumer's
- * stylesheet, design tool and clipboard expects, and appending a redundant
- * `ff` to every hex is the fastest way to make a picker's output look wrong.
- * Pass `alpha: false` to drop it unconditionally, for a picker that does not
- * offer transparency at all.
- *
- * `parseColor(formatColor(c, f))` returns `c` to within the precision `f` can
- * carry: exact for `'hsb'`, and 8-bit-quantised for `'hex'` and `'rgb'`.
+ * Serialises the canonical {@link HsbColor} back to a string in `format`, omitting alpha only when it equals 1 unless `alpha: false` forces it off; round-trips through {@link parseColor} to the precision `format` can carry.
  *
  * @example
  * ```ts