@skdx/web-components 0.26.0 → 0.28.0

package/dist/textarea/Textarea.js

@@ -1,19 +1,27 @@
-var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(n,s,e,o)=>{for(var r=o>1?void 0:o?p(s,e):s,h=n.length-1,u;h>=0;h--)(u=n[h])&&(r=(o?u(s,e,r):u(r))||r);return o&&r&&d(s,e,r),r};import{css as m,html as v,LitElement as y,nothing as l}from"lit";import{property as a}from"lit/decorators.js";import{customElement as c}from"../internal/define.js";import{FormAssociated as f}from"../internal/form-associated.js";import{reflectHostState as g}from"../internal/part.js";import{delegatesFocusShadowRootOptions as b,hiddenHostStyles as R,resetNativeControl as $}from"../internal/styles.js";var t=class extends f(y){constructor(){super(...arguments);this.autoResize=!1;this.invalid=!1;this.readOnly=!1;this.disabled=!1;this.value="";this.required=!1;this.resize=()=>{let e=this.textareaEl;if(!e||!this.autoResize)return;e.style.height="auto";let o=e.scrollHeight;if(this.maxRows!=null){let r=parseFloat(getComputedStyle(e).lineHeight||"0")||0;r>0&&(o=Math.min(o,r*this.maxRows))}e.style.height=`${o}px`};this.handleInput=e=>{this.value=e.target.value,this.resize(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}}get textareaEl(){return this.shadowRoot?.querySelector("textarea")}updated(e){(e.has("value")||e.has("autoResize")||e.has("maxRows"))&&this.resize(),this.syncFormState(),g(this,{"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}syncFormState(){this.setFormValue(this.value);let e=this.textareaEl;e&&this.mirrorValidity(e)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return v`
+var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var e=(d,u,i,s)=>{for(var l=s>1?void 0:s?f(u,i):u,a=d.length-1,n;a>=0;a--)(n=d[a])&&(l=(s?n(u,i,l):n(l))||l);return s&&l&&v(u,i,l),l};import{css as y,html as g,LitElement as w,nothing as o}from"lit";import{property as r,state as $}from"lit/decorators.js";import{takeHostAriaLabel as R}from"../internal/aria-label.js";import{customElement as E}from"../internal/define.js";import{FormAssociated as L}from"../internal/form-associated.js";import{reflectHostState as z}from"../internal/part.js";import{delegatesFocusShadowRootOptions as H,hiddenHostStyles as M,resetNativeControl as B}from"../internal/styles.js";var t=class extends L(w){constructor(){super(...arguments);this.autoResize=!1;this.minRows=2;this.invalid=!1;this.readOnly=!1;this.disabled=!1;this.value="";this.defaultValue="";this.required=!1;this.inputMode="";this.hostLabel=null;this.seeded=!1;this.resize=()=>{let i=this.textareaEl;if(!i||!this.autoResize)return;let s=getComputedStyle(i),l=m=>parseFloat(m)||0,a=l(s.borderTopWidth)+l(s.borderBottomWidth),n=l(s.paddingTop)+l(s.paddingBottom),c=s.boxSizing==="border-box",p=l(s.lineHeight),b=m=>m*p+(c?n+a:0);i.style.height="auto";let h=i.scrollHeight+(c?a:-n);this.minRows!=null&&p>0&&(h=Math.max(h,b(this.minRows))),this.maxRows!=null&&p>0&&(h=Math.min(h,b(this.maxRows))),i.style.height=`${h}px`};this.handleInput=i=>{let s=i.target.value;this.value!==s&&(this.value=s,this.resize(),this.dispatchEvent(new CustomEvent("value-change",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),this.hostLabel=R(this)??this.hostLabel}get textareaEl(){return this.shadowRoot?.querySelector("textarea")}updated(i){(i.has("value")||i.has("autoResize")||i.has("maxRows")||i.has("minRows"))&&this.resize(),this.syncFormState(),z(this,{"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}syncFormState(){this.setFormValue(this.value);let i=this.textareaEl;i&&this.mirrorValidity(i)}formResetCallback(){this.value=this.defaultValue}render(){return g`
       <textarea
         part="textarea"
-        placeholder=${this.placeholder??l}
+        placeholder=${this.placeholder??o}
+        aria-label=${this.hostLabel??o}
+        maxlength=${this.maxLength??o}
+        minlength=${this.minLength??o}
+        rows=${this.rows??(this.autoResize?o:this.minRows)}
+        wrap=${this.wrap??o}
+        autocomplete=${this.autocomplete??o}
+        spellcheck=${this.spellCheck??o}
+        inputmode=${this.inputMode||o}
         ?disabled=${this.disabled}
         ?readonly=${this.readOnly}
         ?required=${this.required}
-        aria-invalid=${this.invalid?"true":l}
-        aria-readonly=${this.readOnly?"true":l}
-        data-invalid=${this.invalid?"":l}
-        data-readonly=${this.readOnly?"":l}
-        style=${this.autoResize?"overflow: hidden; resize: none":l}
+        aria-invalid=${this.invalid?"true":o}
+        aria-readonly=${this.readOnly?"true":o}
+        data-invalid=${this.invalid?"":o}
+        data-readonly=${this.readOnly?"":o}
+        style=${this.autoResize?"overflow: hidden; resize: none":o}
         .value=${this.value}
         @input=${this.handleInput}
       ></textarea>
-    `}};t.shadowRootOptions=b,t.styles=[$,R,m`
+    `}};t.shadowRootOptions=H,t.styles=[B,M,y`
       :host {
         display: inline-block;
       }
@@ -21,4 +29,4 @@ var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(n,s,e,o
       textarea {
         flex: 1 1 auto;
       }
-    `],i([a({type:Boolean,reflect:!0,attribute:"auto-resize"})],t.prototype,"autoResize",2),i([a({type:Number,attribute:"max-rows"})],t.prototype,"maxRows",2),i([a({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([a({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([a({type:String})],t.prototype,"placeholder",2),i([a({type:String})],t.prototype,"value",2),i([a({type:Boolean,reflect:!0})],t.prototype,"required",2),i([a({type:String,reflect:!0})],t.prototype,"name",2),t=i([c("skdx-textarea","textarea","root")],t);export{t as SkdxTextarea};
+    `],e([r({type:Boolean,reflect:!0,attribute:"auto-resize"})],t.prototype,"autoResize",2),e([r({type:Number,attribute:"max-rows"})],t.prototype,"maxRows",2),e([r({type:Number,attribute:"min-rows"})],t.prototype,"minRows",2),e([r({type:Boolean,reflect:!0})],t.prototype,"invalid",2),e([r({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),e([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([r({type:String})],t.prototype,"placeholder",2),e([r({type:String})],t.prototype,"value",2),e([r({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),e([r({type:Boolean,reflect:!0})],t.prototype,"required",2),e([r({type:String,reflect:!0})],t.prototype,"name",2),e([r({type:Number,reflect:!0,attribute:"maxlength"})],t.prototype,"maxLength",2),e([r({type:Number,reflect:!0,attribute:"minlength"})],t.prototype,"minLength",2),e([r({type:Number,reflect:!0})],t.prototype,"rows",2),e([r({type:String,reflect:!0})],t.prototype,"wrap",2),e([r({type:String,reflect:!0})],t.prototype,"autocomplete",2),e([r({type:String,attribute:"spellcheck"})],t.prototype,"spellCheck",2),e([r({type:String,attribute:"inputmode"})],t.prototype,"inputMode",2),e([$()],t.prototype,"hostLabel",2),t=e([E("skdx-textarea","textarea","root")],t);export{t as SkdxTextarea};

package/dist/time/Time.cjs

@@ -0,0 +1,7 @@
+"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var d=(r,t)=>{for(var o in t)m(r,o,{get:t[o],enumerable:!0})},D=(r,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!g.call(r,e)&&e!==o&&m(r,e,{get:()=>t[e],enumerable:!(a=f(t,e))||a.enumerable});return r};var E=r=>D(m({},"__esModule",{value:!0}),r),s=(r,t,o,a)=>{for(var e=a>1?void 0:a?f(t,o):t,u=r.length-1,c;u>=0;u--)(c=r[u])&&(e=(a?c(t,o,e):c(e))||e);return a&&e&&m(t,o,e),e};var I={};d(I,{SkdxTime:()=>l});module.exports=E(I);var i=require("lit"),n=require("lit/decorators.js"),h=require("../internal/date-value.cjs"),b=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),p=require("./format.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.relative=!1;this.absoluteTitle=!0}render(){let o=(0,h.toDate)(this.value,"skdx-time value");if(!o)return i.nothing;let a=(0,p.formatAbsolute)(o,this.locale),e=this.relative&&this.absoluteTitle?a:i.nothing;return i.html`<time part="time" datetime=${o.toISOString()} title=${e}
+      ><slot>${this.relative?(0,p.formatRelative)(o,this.now,this.locale):a}</slot></time
+    >`}};l.styles=[v.hiddenHostStyles,i.css`
+      :host {
+        display: inline;
+      }
+    `],s([(0,n.property)()],l.prototype,"value",2),s([(0,n.property)({type:Boolean,reflect:!0})],l.prototype,"relative",2),s([(0,n.property)({type:Boolean,attribute:"absolute-title"})],l.prototype,"absoluteTitle",2),s([(0,n.property)({type:String})],l.prototype,"locale",2),s([(0,n.property)({attribute:!1})],l.prototype,"now",2),l=s([(0,b.customElement)("skdx-time","time","root")],l);0&&(module.exports={SkdxTime});

package/dist/time/Time.d.cts

@@ -0,0 +1,53 @@
+import { LitElement, nothing } from 'lit';
+import { type DateInput } from '../internal/date-value.cjs';
+/**
+ * `<skdx-time>` renders a `<time>` whose `datetime` is the machine-readable
+ * instant and whose text is that same instant written for a reader.
+ *
+ * With `relative`, the text becomes "3 hours ago" and the absolute date moves
+ * to `title`. No internal timer: a relative label renders once, from `now`;
+ * drive `now` yourself to re-render on an interval.
+ *
+ * An unrecognised `value` renders nothing and warns once in development.
+ *
+ * @example
+ * ```html
+ * <skdx-time value="2026-08-10"></skdx-time>
+ * <skdx-time value="2026-08-10T09:00:00" relative></skdx-time>
+ * ```
+ *
+ * @csspart time - The `<time>` element inside the shadow root.
+ */
+export declare class SkdxTime extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The instant to render, as a `Date` or ISO-8601 string.
+     */
+    value: DateInput;
+    /**
+     * Renders the text as a relative label ("3 hours ago") measured from `now`; `datetime` stays the absolute instant.
+     * @default false
+     */
+    relative: boolean;
+    /**
+     * While `relative` is set, also put the absolute formatted date in `title`.
+     * @default true
+     */
+    absoluteTitle: boolean;
+    /**
+     * BCP-47 locale for the formatted text.
+     * @default undefined — the runtime's own locale, the one `toLocaleDateString()` would pick.
+     */
+    locale?: string;
+    /**
+     * The instant a relative label is measured from; property-only, since a static attribute would freeze at parse time.
+     * @default undefined — read once at render; this component starts no timer.
+     */
+    now?: Date | number;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-time': SkdxTime;
+    }
+}

package/dist/time/Time.d.ts

@@ -0,0 +1,53 @@
+import { LitElement, nothing } from 'lit';
+import { type DateInput } from '../internal/date-value.js';
+/**
+ * `<skdx-time>` renders a `<time>` whose `datetime` is the machine-readable
+ * instant and whose text is that same instant written for a reader.
+ *
+ * With `relative`, the text becomes "3 hours ago" and the absolute date moves
+ * to `title`. No internal timer: a relative label renders once, from `now`;
+ * drive `now` yourself to re-render on an interval.
+ *
+ * An unrecognised `value` renders nothing and warns once in development.
+ *
+ * @example
+ * ```html
+ * <skdx-time value="2026-08-10"></skdx-time>
+ * <skdx-time value="2026-08-10T09:00:00" relative></skdx-time>
+ * ```
+ *
+ * @csspart time - The `<time>` element inside the shadow root.
+ */
+export declare class SkdxTime extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The instant to render, as a `Date` or ISO-8601 string.
+     */
+    value: DateInput;
+    /**
+     * Renders the text as a relative label ("3 hours ago") measured from `now`; `datetime` stays the absolute instant.
+     * @default false
+     */
+    relative: boolean;
+    /**
+     * While `relative` is set, also put the absolute formatted date in `title`.
+     * @default true
+     */
+    absoluteTitle: boolean;
+    /**
+     * BCP-47 locale for the formatted text.
+     * @default undefined — the runtime's own locale, the one `toLocaleDateString()` would pick.
+     */
+    locale?: string;
+    /**
+     * The instant a relative label is measured from; property-only, since a static attribute would freeze at parse time.
+     * @default undefined — read once at render; this component starts no timer.
+     */
+    now?: Date | number;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-time': SkdxTime;
+    }
+}

package/dist/time/Time.js

@@ -0,0 +1,7 @@
+var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(s,a,o,r)=>{for(var e=r>1?void 0:r?c(a,o):a,n=s.length-1,m;n>=0;n--)(m=s[n])&&(e=(r?m(a,o,e):m(e))||e);return r&&e&&u(a,o,e),e};import{css as f,html as h,LitElement as b,nothing as p}from"lit";import{property as i}from"lit/decorators.js";import{toDate as v}from"../internal/date-value.js";import{customElement as y}from"../internal/define.js";import{hiddenHostStyles as g}from"../internal/styles.js";import{formatAbsolute as d,formatRelative as D}from"./format.js";var t=class extends b{constructor(){super(...arguments);this.relative=!1;this.absoluteTitle=!0}render(){let o=v(this.value,"skdx-time value");if(!o)return p;let r=d(o,this.locale),e=this.relative&&this.absoluteTitle?r:p;return h`<time part="time" datetime=${o.toISOString()} title=${e}
+      ><slot>${this.relative?D(o,this.now,this.locale):r}</slot></time
+    >`}};t.styles=[g,f`
+      :host {
+        display: inline;
+      }
+    `],l([i()],t.prototype,"value",2),l([i({type:Boolean,reflect:!0})],t.prototype,"relative",2),l([i({type:Boolean,attribute:"absolute-title"})],t.prototype,"absoluteTitle",2),l([i({type:String})],t.prototype,"locale",2),l([i({attribute:!1})],t.prototype,"now",2),t=l([y("skdx-time","time","root")],t);export{t as SkdxTime};

package/dist/time/format.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var _=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},d=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of l(e))!f.call(t,n)&&n!==r&&a(t,n,{get:()=>e[n],enumerable:!(o=c(e,n))||o.enumerable});return t};var g=t=>d(a({},"__esModule",{value:!0}),t);var h={};_(h,{formatAbsolute:()=>D,formatRelative:()=>T});module.exports=g(h);function s(t){return t??new Intl.DateTimeFormat().resolvedOptions().locale}function D(t,e){return t.toLocaleDateString(s(e),{year:"numeric",month:"long",day:"numeric"})}var y=[["year",31536e6],["month",2592e6],["week",6048e5],["day",864e5],["hour",36e5],["minute",6e4],["second",1e3]];function T(t,e,r){let o=e===void 0?Date.now():e instanceof Date?e.getTime():e,n=t.getTime()-o,i=new Intl.RelativeTimeFormat(s(r),{numeric:"auto"});for(let[u,m]of y)if(Math.abs(n)>=m)return i.format(Math.trunc(n/m),u);return i.format(0,"second")}0&&(module.exports={formatAbsolute,formatRelative});

package/dist/time/format.d.cts

@@ -0,0 +1,4 @@
+/** A full date label, e.g. `'January 5, 2026'`. */
+export declare function formatAbsolute(date: Date, locale?: string): string;
+/** A relative label, e.g. `'3 hours ago'` or `'in 2 days'`. */
+export declare function formatRelative(date: Date, now: Date | number | undefined, locale?: string): string;

package/dist/time/format.d.ts

@@ -0,0 +1,4 @@
+/** A full date label, e.g. `'January 5, 2026'`. */
+export declare function formatAbsolute(date: Date, locale?: string): string;
+/** A relative label, e.g. `'3 hours ago'` or `'in 2 days'`. */
+export declare function formatRelative(date: Date, now: Date | number | undefined, locale?: string): string;

package/dist/time/format.js

@@ -0,0 +1 @@
+function a(t){return t??new Intl.DateTimeFormat().resolvedOptions().locale}function c(t,e){return t.toLocaleDateString(a(e),{year:"numeric",month:"long",day:"numeric"})}var u=[["year",31536e6],["month",2592e6],["week",6048e5],["day",864e5],["hour",36e5],["minute",6e4],["second",1e3]];function l(t,e,i){let m=e===void 0?Date.now():e instanceof Date?e.getTime():e,n=t.getTime()-m,r=new Intl.RelativeTimeFormat(a(i),{numeric:"auto"});for(let[s,o]of u)if(Math.abs(n)>=o)return r.format(Math.trunc(n/o),s);return r.format(0,"second")}export{c as formatAbsolute,l as formatRelative};

package/dist/time/index.cjs

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

package/dist/time/index.d.cts

@@ -0,0 +1 @@
+export { SkdxTime } from './Time.cjs';

package/dist/time/index.d.ts

@@ -0,0 +1 @@
+export { SkdxTime } from './Time.js';

package/dist/time/index.js

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

package/dist/time-field/TimeField.cjs

@@ -1 +1 @@
-"use strict";var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var V=(s,i)=>{for(var e in i)o(s,e,{get:i[e],enumerable:!0})},L=(s,i,e,u)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of b(i))!C.call(s,r)&&r!==e&&o(s,r,{get:()=>i[r],enumerable:!(u=h(i,r))||u.enumerable});return s};var S=s=>L(o({},"__esModule",{value:!0}),s),l=(s,i,e,u)=>{for(var r=u>1?void 0:u?h(i,e):i,y=s.length-1,c;y>=0;y--)(c=s[y])&&(r=(u?c(i,e,r):c(r))||r);return u&&r&&o(i,e,r),r};var E={};V(E,{SkdxTimeField:()=>t});module.exports=S(E);var p=require("lit"),a=require("lit/decorators.js"),m=require("../field/field-core.cjs"),n=require("../internal/date-segments.cjs"),g=require("../internal/define.cjs"),v=require("../internal/form-associated.cjs"),d=require("../internal/segmented-field.cjs"),f=require("../internal/styles.cjs");var t=class extends(0,v.FormAssociated)(p.LitElement){constructor(){super(...arguments);this.value=null;this.granularity="minute";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.values={};this.buffer={current:0};this.handleValuesChange=e=>{this.values=e;let r=(0,n.isComplete)((0,n.buildSegments)({kind:"time",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?(0,n.valuesToTimeString)(e,this.granularity,this.cycle):null;r!==this.value&&this.setValue(r)}}get cycle(){return(0,n.resolveHourCycle)(this.locale,this.hourCycle)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,f.installLightDomStyles)(),this.setAttribute(m.FIELD_CONTROL_ATTRIBUTE,"")}firstUpdated(){this.syncFormState()}willUpdate(e){(e.has("value")||e.has("hourCycle")||e.has("locale")||e.has("granularity"))&&this.syncSegments()}updated(e){(e.has("value")||e.has("required"))&&this.syncFormState()}syncSegments(){let e=this.cycle,u=(0,n.valuesToTimeString)(this.values,this.granularity,e);if(this.value===null){u!==null&&(this.values={});return}u!==this.value&&(this.values=(0,n.timeStringToValues)(this.value,e))}syncFormState(){this.setFormValue(this.value??""),this.setValueMissing(this.required&&this.value===null,"Please enter a time.",this.querySelector("[data-segment]"))}formResetCallback(){this.value=this.getAttribute("value")}setValue(e){this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0}))}render(){return(0,d.renderSegmentedField)({host:this,kind:"time",part:"time-field",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:this.values,label:this.ariaLabel,getSegmentLabel:this.getSegmentLabel,emptySegmentText:this.emptySegmentText,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid,required:this.required,buffer:this.buffer,onValuesChange:this.handleValuesChange})}};l([(0,a.property)({type:String})],t.prototype,"value",2),l([(0,a.property)({type:String,reflect:!0})],t.prototype,"granularity",2),l([(0,a.property)({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),l([(0,a.property)({type:String})],t.prototype,"locale",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),l([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),l([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),l([(0,a.property)({type:String,reflect:!0})],t.prototype,"name",2),l([(0,a.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),l([(0,a.property)({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),l([(0,a.property)({attribute:!1})],t.prototype,"getSegmentLabel",2),l([(0,a.property)({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),l([(0,a.state)()],t.prototype,"values",2),t=l([(0,g.customElement)("skdx-time-field","time-field","root")],t);0&&(module.exports={SkdxTimeField});
+"use strict";var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var C=(u,n)=>{for(var e in n)o(u,e,{get:n[e],enumerable:!0})},_=(u,n,e,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of V(n))!S.call(u,s)&&s!==e&&o(u,s,{get:()=>n[s],enumerable:!(r=c(n,s))||r.enumerable});return u};var L=u=>_(o({},"__esModule",{value:!0}),u),i=(u,n,e,r)=>{for(var s=r>1?void 0:r?c(n,e):n,m=u.length-1,p;m>=0;m--)(p=u[m])&&(s=(r?p(n,e,s):p(s))||s);return r&&s&&o(n,e,s),s};var P={};C(P,{SkdxTimeField:()=>t});module.exports=L(P);var g=require("lit"),a=require("lit/decorators.js"),y=require("../field/field-core.cjs"),l=require("../internal/date-segments.cjs"),h=require("../internal/date-value.cjs"),v=require("../internal/define.cjs"),d=require("../internal/form-associated.cjs"),f=require("../internal/segmented-field.cjs"),b=require("../internal/styles.cjs");var t=class extends(0,d.FormAssociated)(g.LitElement){constructor(){super(...arguments);this._value=null;this.granularity="minute";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.values={};this.buffer={current:0};this.handleValuesChange=e=>{this.values=e;let s=(0,l.isComplete)((0,l.buildSegments)({kind:"time",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?(0,l.valuesToTimeString)(e,this.granularity,this.cycle):null;s!==this.value&&this.setValue(s)}}get value(){return this._value}set value(e){let r=this._value;this._value=(0,h.toTimeValue)(e,"value"),this.requestUpdate("value",r)}get min(){return this._min}set min(e){let r=this._min;this._min=(0,h.toTimeValue)(e,"min")??void 0,this.requestUpdate("min",r)}get max(){return this._max}set max(e){let r=this._max;this._max=(0,h.toTimeValue)(e,"max")??void 0,this.requestUpdate("max",r)}get cycle(){return(0,l.resolveHourCycle)(this.locale,this.hourCycle)}get resolvedStep(){return this.step??(this.granularity==="second"?1:60)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,b.installLightDomStyles)(),this.setAttribute(y.FIELD_CONTROL_ATTRIBUTE,"")}firstUpdated(){this.syncFormState()}willUpdate(e){(e.has("value")||e.has("hourCycle")||e.has("locale")||e.has("granularity"))&&this.syncSegments()}updated(e){(e.has("value")||e.has("required")||e.has("min")||e.has("max")||e.has("step")||e.has("granularity"))&&this.syncFormState()}syncSegments(){let e=this.cycle,r=(0,l.valuesToTimeString)(this.values,this.granularity,e);if(this.value===null){r!==null&&(this.values={});return}r!==this.value&&(this.values=(0,l.timeStringToValues)(this.value,e))}get rangeViolation(){return(0,l.timeRangeViolation)(this.value,this.min,this.max)}syncFormState(){this.setFormValue(this.value??"");let e=this.querySelector("[data-segment]");if(this.required&&this.value===null){this.setValueMissing(!0,"Please enter a time.",e);return}let r=this.rangeViolation;if(r!==null){this.setRangeViolation(r,r==="underflow"?"Please pick a later time.":"Please pick an earlier time.",e);return}this.setStepMismatch((0,l.timeStepMismatch)(this.value,this.resolvedStep,this.min),"Please pick a time on the allowed increment.",e)}formResetCallback(){this.value=this.getAttribute("value")}setValue(e){this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0}))}render(){return(0,f.renderSegmentedField)({host:this,kind:"time",part:"time-field",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:this.values,label:this.ariaLabel,getSegmentLabel:this.getSegmentLabel,emptySegmentText:this.emptySegmentText,getSegmentPlaceholder:this.getSegmentPlaceholder,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid||this.rangeViolation!==null,required:this.required,step:this.resolvedStep,buffer:this.buffer,onValuesChange:this.handleValuesChange,clampEdgeValues:e=>(0,l.clampValuesToTimeRange)(e,this.granularity,this.cycle,this.min,this.max)})}};i([(0,a.property)({type:String})],t.prototype,"value",1),i([(0,a.property)({type:String})],t.prototype,"min",1),i([(0,a.property)({type:String})],t.prototype,"max",1),i([(0,a.property)({type:Number})],t.prototype,"step",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"granularity",2),i([(0,a.property)({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),i([(0,a.property)({type:String})],t.prototype,"locale",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"name",2),i([(0,a.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([(0,a.property)({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),i([(0,a.property)({attribute:!1})],t.prototype,"getSegmentLabel",2),i([(0,a.property)({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),i([(0,a.property)({attribute:!1})],t.prototype,"getSegmentPlaceholder",2),i([(0,a.state)()],t.prototype,"values",2),t=i([(0,v.customElement)("skdx-time-field","time-field","root")],t);0&&(module.exports={SkdxTimeField});

package/dist/time-field/TimeField.d.cts

@@ -1,5 +1,5 @@
 import { LitElement, type PropertyValues } from 'lit';
-import { type Granularity, type HourCycle, type SegmentType } from '../internal/date-segments.cjs';
+import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../internal/date-segments.cjs';
 /** How far down a `<skdx-time-field>` is editable — `day` is meaningless for a time. */
 export type TimeFieldGranularity = Exclude<Granularity, 'day'>;
 declare const SkdxTimeField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
@@ -46,12 +46,37 @@ declare const SkdxTimeField_base: typeof LitElement & (new (...args: any[]) => i
  */
 export declare class SkdxTimeField extends SkdxTimeField_base {
     /**
-     * Current time as a 24-hour `HH:mm` (or `HH:mm:ss`) string, or `null` while
-     * any segment is untyped. Independent of `hourCycle`, which is display only.
-     * The `value` attribute declares the initial time and is what a form reset
-     * restores, exactly like a native `<input type="time" value>`.
+     * Current time as 24-hour `HH:mm` (or `HH:mm:ss`) string, like `<input type="time">`.
+     * Accepts `Date` (reads local wall-clock time); date part is discarded. `null` while
+     * any segment is untyped. The attribute declares initial time and is what form reset restores.
+     * @default null — every segment starts on its placeholder.
      */
-    value: string | null;
+    get value(): string | null;
+    set value(next: string | Date | null);
+    private _value;
+    /**
+     * Earliest accepted time in 24-hour `HH:mm[:ss]` shape. Values before it
+     * fail constraint validation with `rangeUnderflow`. Accepts `Date`.
+     * @default undefined — any time of day.
+     */
+    get min(): string | undefined;
+    set min(next: string | Date | undefined);
+    private _min?;
+    /**
+     * Latest accepted time in 24-hour `HH:mm[:ss]` shape. Values after it
+     * fail constraint validation with `rangeOverflow`. Accepts `Date`.
+     * @default undefined — any time of day.
+     */
+    get max(): string | undefined;
+    set max(next: string | Date | undefined);
+    private _max?;
+    /**
+     * Step increment in seconds, like `<input type="time" step>`. Arrow Up/Down
+     * on the finest segment step by one; coarser segments step by one. Times
+     * missing the grid fail constraint validation with `stepMismatch`.
+     * @default undefined — one unit of the finest segment: 60 on `minute`, 1 on `second`.
+     */
+    step?: number;
     /**
      * How far down the field is editable. `second` adds a seconds segment;
      * `hour` and `minute` both render hour and minute (a bare hour field would
@@ -112,11 +137,30 @@ export declare class SkdxTimeField extends SkdxTimeField_base {
      * @default 'Empty'
      */
     emptySegmentText?: string;
+    /**
+     * Words the placeholder letters one segment shows before it has been typed,
+     * called per segment type. `Intl` decides the segment order and the literals
+     * between segments; it has no notion of a placeholder, so these letters are
+     * the one visible string in the field a `locale` cannot reach — a `de-DE`
+     * field renders `dd.mm.yyyy` until this property turns it into `TT.MM.JJJJ`.
+     *
+     * Property only: a function has no attribute form.
+     * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …).
+     */
+    getSegmentPlaceholder?: SegmentPlaceholderResolver;
     /** Per-segment values; the rendered segments are derived from these every render. */
     private values;
     private readonly buffer;
     /** The hour cycle actually rendered: the explicit `hourCycle`, else the locale's. */
     private get cycle();
+    /**
+     * The step actually applied. A native `<input type="time">` with no `step`
+     * means `step="60"`, so a seconds segment this field deliberately renders
+     * would fail `stepMismatch` for every non-zero second it holds — the default
+     * is one unit of the finest segment the granularity renders, not the
+     * platform's blanket 60.
+     */
+    private get resolvedStep();
     /** Light DOM: the host is the `role="group"` and the skin must reach the segments. */
     protected createRenderRoot(): HTMLElement;
     /** The host is the `role="group"` itself, so it carries the marker that says "I am the control". */
@@ -130,6 +174,8 @@ export declare class SkdxTimeField extends SkdxTimeField_base {
      * left alone, so typing is never rewritten mid-entry.
      */
     private syncSegments;
+    /** Which bound the current time crosses, or `null` while it is in range. */
+    private get rangeViolation();
     private syncFormState;
     /** Restores the time the `value` attribute declared. A form reset fires no `value-change`, just like a native reset. */
     formResetCallback(): void;

package/dist/time-field/TimeField.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, type PropertyValues } from 'lit';
-import { type Granularity, type HourCycle, type SegmentType } from '../internal/date-segments.js';
+import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../internal/date-segments.js';
 /** How far down a `<skdx-time-field>` is editable — `day` is meaningless for a time. */
 export type TimeFieldGranularity = Exclude<Granularity, 'day'>;
 declare const SkdxTimeField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
@@ -46,12 +46,37 @@ declare const SkdxTimeField_base: typeof LitElement & (new (...args: any[]) => i
  */
 export declare class SkdxTimeField extends SkdxTimeField_base {
     /**
-     * Current time as a 24-hour `HH:mm` (or `HH:mm:ss`) string, or `null` while
-     * any segment is untyped. Independent of `hourCycle`, which is display only.
-     * The `value` attribute declares the initial time and is what a form reset
-     * restores, exactly like a native `<input type="time" value>`.
+     * Current time as 24-hour `HH:mm` (or `HH:mm:ss`) string, like `<input type="time">`.
+     * Accepts `Date` (reads local wall-clock time); date part is discarded. `null` while
+     * any segment is untyped. The attribute declares initial time and is what form reset restores.
+     * @default null — every segment starts on its placeholder.
      */
-    value: string | null;
+    get value(): string | null;
+    set value(next: string | Date | null);
+    private _value;
+    /**
+     * Earliest accepted time in 24-hour `HH:mm[:ss]` shape. Values before it
+     * fail constraint validation with `rangeUnderflow`. Accepts `Date`.
+     * @default undefined — any time of day.
+     */
+    get min(): string | undefined;
+    set min(next: string | Date | undefined);
+    private _min?;
+    /**
+     * Latest accepted time in 24-hour `HH:mm[:ss]` shape. Values after it
+     * fail constraint validation with `rangeOverflow`. Accepts `Date`.
+     * @default undefined — any time of day.
+     */
+    get max(): string | undefined;
+    set max(next: string | Date | undefined);
+    private _max?;
+    /**
+     * Step increment in seconds, like `<input type="time" step>`. Arrow Up/Down
+     * on the finest segment step by one; coarser segments step by one. Times
+     * missing the grid fail constraint validation with `stepMismatch`.
+     * @default undefined — one unit of the finest segment: 60 on `minute`, 1 on `second`.
+     */
+    step?: number;
     /**
      * How far down the field is editable. `second` adds a seconds segment;
      * `hour` and `minute` both render hour and minute (a bare hour field would
@@ -112,11 +137,30 @@ export declare class SkdxTimeField extends SkdxTimeField_base {
      * @default 'Empty'
      */
     emptySegmentText?: string;
+    /**
+     * Words the placeholder letters one segment shows before it has been typed,
+     * called per segment type. `Intl` decides the segment order and the literals
+     * between segments; it has no notion of a placeholder, so these letters are
+     * the one visible string in the field a `locale` cannot reach — a `de-DE`
+     * field renders `dd.mm.yyyy` until this property turns it into `TT.MM.JJJJ`.
+     *
+     * Property only: a function has no attribute form.
+     * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …).
+     */
+    getSegmentPlaceholder?: SegmentPlaceholderResolver;
     /** Per-segment values; the rendered segments are derived from these every render. */
     private values;
     private readonly buffer;
     /** The hour cycle actually rendered: the explicit `hourCycle`, else the locale's. */
     private get cycle();
+    /**
+     * The step actually applied. A native `<input type="time">` with no `step`
+     * means `step="60"`, so a seconds segment this field deliberately renders
+     * would fail `stepMismatch` for every non-zero second it holds — the default
+     * is one unit of the finest segment the granularity renders, not the
+     * platform's blanket 60.
+     */
+    private get resolvedStep();
     /** Light DOM: the host is the `role="group"` and the skin must reach the segments. */
     protected createRenderRoot(): HTMLElement;
     /** The host is the `role="group"` itself, so it carries the marker that says "I am the control". */
@@ -130,6 +174,8 @@ export declare class SkdxTimeField extends SkdxTimeField_base {
      * left alone, so typing is never rewritten mid-entry.
      */
     private syncSegments;
+    /** Which bound the current time crosses, or `null` while it is in range. */
+    private get rangeViolation();
     private syncFormState;
     /** Restores the time the `value` attribute declared. A form reset fires no `value-change`, just like a native reset. */
     formResetCallback(): void;

package/dist/time-field/TimeField.js

@@ -1 +1 @@
-var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(u,s,e,i)=>{for(var a=i>1?void 0:i?h(s,e):s,n=u.length-1,o;n>=0;n--)(o=u[n])&&(a=(i?o(s,e,a):o(a))||a);return i&&a&&c(s,e,a),a};import{LitElement as p}from"lit";import{property as l,state as m}from"lit/decorators.js";import{FIELD_CONTROL_ATTRIBUTE as g}from"../field/field-core.js";import{buildSegments as v,isComplete as d,resolveHourCycle as f,timeStringToValues as b,valuesToTimeString as y}from"../internal/date-segments.js";import{customElement as C}from"../internal/define.js";import{FormAssociated as V}from"../internal/form-associated.js";import{renderSegmentedField as L}from"../internal/segmented-field.js";import{installLightDomStyles as S}from"../internal/styles.js";var t=class extends V(p){constructor(){super(...arguments);this.value=null;this.granularity="minute";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.values={};this.buffer={current:0};this.handleValuesChange=e=>{this.values=e;let a=d(v({kind:"time",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?y(e,this.granularity,this.cycle):null;a!==this.value&&this.setValue(a)}}get cycle(){return f(this.locale,this.hourCycle)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),S(),this.setAttribute(g,"")}firstUpdated(){this.syncFormState()}willUpdate(e){(e.has("value")||e.has("hourCycle")||e.has("locale")||e.has("granularity"))&&this.syncSegments()}updated(e){(e.has("value")||e.has("required"))&&this.syncFormState()}syncSegments(){let e=this.cycle,i=y(this.values,this.granularity,e);if(this.value===null){i!==null&&(this.values={});return}i!==this.value&&(this.values=b(this.value,e))}syncFormState(){this.setFormValue(this.value??""),this.setValueMissing(this.required&&this.value===null,"Please enter a time.",this.querySelector("[data-segment]"))}formResetCallback(){this.value=this.getAttribute("value")}setValue(e){this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0}))}render(){return L({host:this,kind:"time",part:"time-field",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:this.values,label:this.ariaLabel,getSegmentLabel:this.getSegmentLabel,emptySegmentText:this.emptySegmentText,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid,required:this.required,buffer:this.buffer,onValuesChange:this.handleValuesChange})}};r([l({type:String})],t.prototype,"value",2),r([l({type:String,reflect:!0})],t.prototype,"granularity",2),r([l({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),r([l({type:String})],t.prototype,"locale",2),r([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([l({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),r([l({type:Boolean,reflect:!0})],t.prototype,"invalid",2),r([l({type:Boolean,reflect:!0})],t.prototype,"required",2),r([l({type:String,reflect:!0})],t.prototype,"name",2),r([l({attribute:"required-message"})],t.prototype,"requiredMessage",2),r([l({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),r([l({attribute:!1})],t.prototype,"getSegmentLabel",2),r([l({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),r([m()],t.prototype,"values",2),t=r([C("skdx-time-field","time-field","root")],t);export{t as SkdxTimeField};
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var r=(n,s,e,i)=>{for(var l=i>1?void 0:i?c(s,e):s,u=n.length-1,o;u>=0;u--)(o=n[u])&&(l=(i?o(s,e,l):o(l))||l);return i&&l&&p(s,e,l),l};import{LitElement as g}from"lit";import{property as a,state as y}from"lit/decorators.js";import{FIELD_CONTROL_ATTRIBUTE as v}from"../field/field-core.js";import{buildSegments as d,clampValuesToTimeRange as f,isComplete as b,resolveHourCycle as V,timeRangeViolation as S,timeStepMismatch as C,timeStringToValues as _,valuesToTimeString as m}from"../internal/date-segments.js";import{toTimeValue as h}from"../internal/date-value.js";import{customElement as L}from"../internal/define.js";import{FormAssociated as P}from"../internal/form-associated.js";import{renderSegmentedField as q}from"../internal/segmented-field.js";import{installLightDomStyles as E}from"../internal/styles.js";var t=class extends P(g){constructor(){super(...arguments);this._value=null;this.granularity="minute";this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.ariaLabel=null;this.values={};this.buffer={current:0};this.handleValuesChange=e=>{this.values=e;let l=b(d({kind:"time",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:e}))?m(e,this.granularity,this.cycle):null;l!==this.value&&this.setValue(l)}}get value(){return this._value}set value(e){let i=this._value;this._value=h(e,"value"),this.requestUpdate("value",i)}get min(){return this._min}set min(e){let i=this._min;this._min=h(e,"min")??void 0,this.requestUpdate("min",i)}get max(){return this._max}set max(e){let i=this._max;this._max=h(e,"max")??void 0,this.requestUpdate("max",i)}get cycle(){return V(this.locale,this.hourCycle)}get resolvedStep(){return this.step??(this.granularity==="second"?1:60)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),E(),this.setAttribute(v,"")}firstUpdated(){this.syncFormState()}willUpdate(e){(e.has("value")||e.has("hourCycle")||e.has("locale")||e.has("granularity"))&&this.syncSegments()}updated(e){(e.has("value")||e.has("required")||e.has("min")||e.has("max")||e.has("step")||e.has("granularity"))&&this.syncFormState()}syncSegments(){let e=this.cycle,i=m(this.values,this.granularity,e);if(this.value===null){i!==null&&(this.values={});return}i!==this.value&&(this.values=_(this.value,e))}get rangeViolation(){return S(this.value,this.min,this.max)}syncFormState(){this.setFormValue(this.value??"");let e=this.querySelector("[data-segment]");if(this.required&&this.value===null){this.setValueMissing(!0,"Please enter a time.",e);return}let i=this.rangeViolation;if(i!==null){this.setRangeViolation(i,i==="underflow"?"Please pick a later time.":"Please pick an earlier time.",e);return}this.setStepMismatch(C(this.value,this.resolvedStep,this.min),"Please pick a time on the allowed increment.",e)}formResetCallback(){this.value=this.getAttribute("value")}setValue(e){this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0}))}render(){return q({host:this,kind:"time",part:"time-field",granularity:this.granularity,locale:this.locale,hourCycle:this.cycle,values:this.values,label:this.ariaLabel,getSegmentLabel:this.getSegmentLabel,emptySegmentText:this.emptySegmentText,getSegmentPlaceholder:this.getSegmentPlaceholder,disabled:this.disabled,readOnly:this.readOnly,invalid:this.invalid||this.rangeViolation!==null,required:this.required,step:this.resolvedStep,buffer:this.buffer,onValuesChange:this.handleValuesChange,clampEdgeValues:e=>f(e,this.granularity,this.cycle,this.min,this.max)})}};r([a({type:String})],t.prototype,"value",1),r([a({type:String})],t.prototype,"min",1),r([a({type:String})],t.prototype,"max",1),r([a({type:Number})],t.prototype,"step",2),r([a({type:String,reflect:!0})],t.prototype,"granularity",2),r([a({type:Number,attribute:"hour-cycle"})],t.prototype,"hourCycle",2),r([a({type:String})],t.prototype,"locale",2),r([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([a({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),r([a({type:Boolean,reflect:!0})],t.prototype,"invalid",2),r([a({type:Boolean,reflect:!0})],t.prototype,"required",2),r([a({type:String,reflect:!0})],t.prototype,"name",2),r([a({attribute:"required-message"})],t.prototype,"requiredMessage",2),r([a({type:String,attribute:"aria-label"})],t.prototype,"ariaLabel",2),r([a({attribute:!1})],t.prototype,"getSegmentLabel",2),r([a({type:String,attribute:"empty-segment-text"})],t.prototype,"emptySegmentText",2),r([a({attribute:!1})],t.prototype,"getSegmentPlaceholder",2),r([y()],t.prototype,"values",2),t=r([L("skdx-time-field","time-field","root")],t);export{t as SkdxTimeField};

package/dist/timeline/Timeline.cjs

@@ -1,7 +1,7 @@
-"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var r in t)n(o,r,{get:t[r],enumerable:!0})},g=(o,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of h(t))!v.call(o,e)&&e!==r&&n(o,e,{get:()=>t[e],enumerable:!(i=c(t,e))||i.enumerable});return o};var E=o=>g(n({},"__esModule",{value:!0}),o),p=(o,t,r,i)=>{for(var e=i>1?void 0:i?c(t,r):t,s=o.length-1,m;s>=0;s--)(m=o[s])&&(e=(i?m(t,r,e):m(e))||e);return i&&e&&n(t,r,e),e};var u={};y(u,{SkdxTimeline:()=>a});module.exports=E(u);var l=require("lit"),d=require("lit/decorators.js"),f=require("../internal/define.cjs");var a=class extends l.LitElement{constructor(){super(...arguments);this.orientation="vertical"}render(){return l.html`<ol part="timeline" data-orientation=${this.orientation}>
-      <slot></slot>
-    </ol>`}};a.styles=l.css`
+"use strict";var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var A=(r,t)=>{for(var i in t)l(r,i,{get:t[i],enumerable:!0})},E=(r,t,i,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!g.call(r,e)&&e!==i&&l(r,e,{get:()=>t[e],enumerable:!(n=f(t,e))||n.enumerable});return r};var b=r=>E(l({},"__esModule",{value:!0}),r),s=(r,t,i,n)=>{for(var e=n>1?void 0:n?f(t,i):t,c=r.length-1,d;c>=0;c--)(d=r[c])&&(e=(n?d(t,i,e):d(e))||e);return n&&e&&l(t,i,e),e};var M={};A(M,{SkdxTimeline:()=>o});module.exports=b(M);var a=require("lit"),m=require("lit/decorators.js"),u=require("../internal/authored.cjs"),h=require("../internal/define.cjs"),y=require("../internal/part.cjs"),p=require("./TimelineAnatomy.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.orientation="vertical";this.fillAnatomy=()=>{(0,u.hasAuthoredParts)(this,p.TIMELINE_ANATOMY_GENERATED)||(0,p.fillTimelineAnatomy)(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(i){(0,y.reflectHostState)(this,{"data-orientation":this.orientation}),(i.has("items")||i.has("renderContent"))&&this.fillAnatomy()}render(){return a.html`<ol part="timeline" role="list" data-orientation=${this.orientation}>
+      <slot @slotchange=${this.fillAnatomy}></slot>
+    </ol>`}};o.styles=a.css`
     :host {
       display: contents;
     }
-  `,p([(0,d.property)({type:String})],a.prototype,"orientation",2),a=p([(0,f.customElement)("skdx-timeline","timeline","root")],a);0&&(module.exports={SkdxTimeline});
+  `,s([(0,m.property)({type:String})],o.prototype,"orientation",2),s([(0,m.property)({attribute:!1})],o.prototype,"items",2),s([(0,m.property)({attribute:!1})],o.prototype,"renderContent",2),o=s([(0,h.customElement)("skdx-timeline","timeline","root")],o);0&&(module.exports={SkdxTimeline});

package/dist/timeline/Timeline.d.cts

@@ -1,22 +1,38 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+/** One event on a derived `<skdx-timeline>`: the whole of what `items` takes. */
+export interface SkdxTimelineItemDescriptor {
+    /** The event itself — the Item's body text. */
+    content: string;
+    /** Metadata on the far side of the marker: a timestamp, an actor, an elapsed time. */
+    opposite?: string;
+    /**
+     * Text, a glyph, or a rendered icon inside the marker. An Indicator given
+     * content is announced and names itself by that text; left empty it is
+     * decorative and hidden.
+     * @default undefined — a decorative, aria-hidden marker.
+     */
+    indicator?: string | TemplateResult;
+    /**
+     * Accessible name for a non-decorative `indicator`, where its glyph is not
+     * one — a `✓` reads as "check mark" and a `2` as "2".
+     * @default undefined — the indicator is named by its own text.
+     */
+    indicatorLabel?: string;
+    /** Where this event sits in the sequence, emitted as `data-state`. @default undefined — `complete`, the resting state. */
+    state?: 'complete' | 'current' | 'pending';
+}
 /**
- * `<skdx-timeline>` — the Web Components implementation of the shared
- * Timeline contract (see `@skdx/shared`'s `timelineContract`). Purely
- * structural: renders a real `<ol>` inside shadow DOM (`:host { display:
- * contents }`, the same technique `<skdx-table>` uses for its `<table>`) with
- * `data-orientation` for styling. No ARIA role or keyboard behavior beyond
- * the semantic ordered list — layout and connecting lines are entirely up
- * to your CSS.
+ * Renders an `<ol role="list">` inside shadow DOM with no keyboard interaction
+ * — layout and lines are CSS-only. Pass `items` for auto-derived entries or
+ * write child parts for manual composition. The role is explicit: `list-style: none`
+ * and `display: grid` cause Safari/VoiceOver to drop list semantics from that combination.
  *
  * @example
  * ```html
- * <skdx-timeline>
- *   <skdx-timeline-item>
- *     <skdx-timeline-indicator></skdx-timeline-indicator>
- *     <skdx-timeline-separator></skdx-timeline-separator>
- *     <skdx-timeline-content>Order placed</skdx-timeline-content>
- *   </skdx-timeline-item>
- * </skdx-timeline>
+ * <skdx-timeline></skdx-timeline>
+ * ```
+ * ```ts
+ * timeline.items = [{ content: 'Order placed', opposite: '09:41' }];
  * ```
  *
  * @csspart timeline - The native `<ol>` element inside the shadow root.
@@ -30,7 +46,40 @@ export declare class SkdxTimeline extends LitElement {
      * @default 'vertical'
      */
     orientation: 'vertical' | 'horizontal';
-    render(): import("lit").TemplateResult<1>;
+    /**
+     * The events, in order — one Item/Opposite/Indicator/Separator/Content set
+     * is derived per entry. Property only: an array of objects has no attribute
+     * form.
+     * @default undefined — nothing is derived, and hand-composed children stand.
+     */
+    items?: readonly SkdxTimelineItemDescriptor[];
+    /**
+     * Renders each event's body, in place of its `content` string — return
+     * anything Lit can render. Property only: a function has no attribute form.
+     * @default undefined — the entry's `content` is rendered as text.
+     */
+    renderContent?: (item: SkdxTimelineItemDescriptor, index: number) => unknown;
+    connectedCallback(): void;
+    /**
+     * Draws the canonical anatomy into the light DOM when this element has no
+     * consumer-authored part, and hands it straight back once one appears.
+     */
+    private readonly fillAnatomy;
+    /**
+     * Mirrors `data-orientation` onto the **host** as well as onto the shadow
+     * `<ol>`.
+     *
+     * `applyHostPart` puts `.skdx-timeline` on the host, and every `@sdxui/skins`
+     * selector is written `:where(.skdx-timeline)…`. With the attribute only on
+     * the inner `<ol>`, the class and the hook lived on different elements and
+     * `:where(.skdx-timeline)[data-orientation='horizontal']` matched nothing in
+     * this package alone — so implementing the horizontal axis would have fixed
+     * four packages and silently skipped the fifth.
+     *
+     * `<skdx-data-list>` solves the identical problem the identical way.
+     */
+    protected updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {