@skdx/web-components 0.26.0

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

@@ -0,0 +1,151 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { type Granularity, type HourCycle, 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) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-time-field>` — the Web Components implementation of the shared
+ * TimeField contract (see `@skdx/shared`'s `timeFieldContract`).
+ * `<skdx-date-field>`'s segment machinery restricted to the time segments: the
+ * host itself is the `role="group"`, holding one `role="spinbutton"` per
+ * segment in its **light DOM** (no shadow root — the skin's
+ * `.skdx-time-field__segment` rules are document-level and cannot cross a
+ * shadow boundary), ordered by `Intl.DateTimeFormat.formatToParts` for the
+ * active locale, with an AM/PM segment whenever the resolved hour cycle is 12.
+ *
+ * `value` is a 24-hour `HH:mm[:ss]` string, exactly like `<input type="time">` —
+ * a time is not a date, and a `Date` carrying a meaningless epoch day is a
+ * trap. `hourCycle` only changes what is rendered, so a value round-trips
+ * unchanged through a cycle switch.
+ *
+ * `value` is the single source of truth — like a native `<input>`'s `value`,
+ * there is no separate controlled/uncontrolled mode, so there is no
+ * `default-value` either: `<skdx-time-field value="09:30">` *is* the initial
+ * time, and that attribute is what a form reset restores.
+ *
+ * Arrow Up/Down step the focused segment (wrapping), Arrow Left/Right move
+ * between segments (mirrored under `dir="rtl"`), digits type with roll-over,
+ * `A`/`P` set the AM/PM segment, and Backspace/Delete clear back to the
+ * placeholder.
+ *
+ * Form-associated via `ElementInternals`: with a `name`, the 24-hour string is
+ * submitted. An incomplete field submits an empty entry and is `valueMissing`
+ * while `required`.
+ *
+ * @example
+ * ```html
+ * <skdx-time-field aria-label="Start time" value="09:30" hour-cycle="12"></skdx-time-field>
+ * ```
+ *
+ * @fires value-change - Fires with the new `HH:mm[:ss]` string, or `null` as soon as a segment is cleared.
+ * @csspart time-field - The host itself, the `role="group"` wrapping every segment.
+ * @csspart segment - One editable `role="spinbutton"` segment.
+ * @csspart literal - One locale separator between segments.
+ */
+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>`.
+     */
+    value: string | null;
+    /**
+     * 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
+     * still submit `HH:00`).
+     * @default 'minute'
+     */
+    granularity: TimeFieldGranularity;
+    /**
+     * Forces 12-hour (with an AM/PM segment) or 24-hour display. Presentation
+     * only — `value` is always 24 hour.
+     * @default undefined — whatever the locale resolves to.
+     */
+    hourCycle?: HourCycle;
+    /**
+     * BCP-47 locale deciding segment order, the literals between segments, and
+     * the AM/PM names. @default undefined — the runtime locale.
+     */
+    locale?: string;
+    /** Disables the field and removes every segment from the tab order. */
+    disabled: boolean;
+    /** Segments stay focusable and readable but refuse every edit. */
+    readOnly: boolean;
+    /** Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid: boolean;
+    /** Marks the field required: `valueMissing` while any segment is untyped. */
+    required: boolean;
+    /** Name used as the `FormData` entry key when the field is inside a `<form>`. @default undefined */
+    name?: string;
+    /**
+     * Replaces the message the browser shows when a `required` field is
+     * submitted with any segment still blank. Sealed inside the shadow root
+     * otherwise, so this is the only way to translate it or to name the time
+     * ("Please enter a start time.").
+     * @default undefined — keeps `'Please enter a time.'`
+     */
+    requiredMessage?: string;
+    /**
+     * Accessible name for the whole field. The host itself is the `role="group"`,
+     * so the attribute names the control directly; the property exists so an
+     * assignment (`field.ariaLabel = …`) reaches the attribute too.
+     */
+    ariaLabel: string | null;
+    /**
+     * Words the accessible name of one segment. Called per segment type
+     * (`'hour'`, `'minute'`, `'dayPeriod'`, …); return the built-in
+     * `SEGMENT_LABELS` entry for the ones you do not want to change.
+     *
+     * One of the two strings `locale` cannot translate — segment order, the
+     * literals between segments and the AM/PM names all come from
+     * `Intl.DateTimeFormat`, but these describe the widget rather than the value.
+     * Property only: a function has no attribute form.
+     * @default undefined — the built-in English names ('hour', 'minute', 'AM/PM', …).
+     */
+    getSegmentLabel?: (type: SegmentType) => string;
+    /**
+     * The `aria-valuetext` an untyped segment announces instead of a number it
+     * does not have. The other string `locale` cannot translate.
+     * @default 'Empty'
+     */
+    emptySegmentText?: string;
+    /** 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();
+    /** 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". */
+    connectedCallback(): void;
+    protected firstUpdated(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Re-seeds the segments whenever the committed time changes from outside this
+     * field's own typing. Values that already describe the committed time are
+     * left alone, so typing is never rewritten mid-entry.
+     */
+    private syncSegments;
+    private syncFormState;
+    /** Restores the time the `value` attribute declared. A form reset fires no `value-change`, just like a native reset. */
+    formResetCallback(): void;
+    /**
+     * @internal Commits `next` as `value` and dispatches `value-change`
+     * synchronously (not via Lit's async `updated()` lifecycle), so a caller
+     * observing the event right after a keystroke sees it without awaiting a
+     * render — same convention as `<skdx-number-field>`.
+     */
+    setValue(next: string | null): void;
+    private readonly handleValuesChange;
+    render(): import("lit").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-time-field': SkdxTimeField;
+    }
+}
+export {};

package/dist/time-field/TimeField.js

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

package/dist/time-field/index.cjs

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

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

@@ -0,0 +1 @@
+export { SkdxTimeField, type TimeFieldGranularity } from './TimeField.cjs';

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

@@ -0,0 +1 @@
+export { SkdxTimeField, type TimeFieldGranularity } from './TimeField.js';

package/dist/time-field/index.js

@@ -0,0 +1 @@
+import{SkdxTimeField as r}from"./TimeField.js";export{r as SkdxTimeField};

package/dist/timeline/Timeline.cjs

@@ -0,0 +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`
+    :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});

package/dist/timeline/Timeline.d.cts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * `<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.
+ *
+ * @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>
+ * ```
+ *
+ * @csspart timeline - The native `<ol>` element inside the shadow root.
+ */
+export declare class SkdxTimeline extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Layout axis, exposed as `data-orientation` on the real `<ol>` for
+     * styling only — this component sets no ARIA orientation and does no
+     * keyboard handling.
+     * @default 'vertical'
+     */
+    orientation: 'vertical' | 'horizontal';
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline': SkdxTimeline;
+    }
+}

package/dist/timeline/Timeline.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * `<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.
+ *
+ * @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>
+ * ```
+ *
+ * @csspart timeline - The native `<ol>` element inside the shadow root.
+ */
+export declare class SkdxTimeline extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Layout axis, exposed as `data-orientation` on the real `<ol>` for
+     * styling only — this component sets no ARIA orientation and does no
+     * keyboard handling.
+     * @default 'vertical'
+     */
+    orientation: 'vertical' | 'horizontal';
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline': SkdxTimeline;
+    }
+}

package/dist/timeline/Timeline.js

@@ -0,0 +1,7 @@
+var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=(i,o,a,r)=>{for(var t=r>1?void 0:r?p(o,a):o,l=i.length-1,n;l>=0;l--)(n=i[l])&&(t=(r?n(o,a,t):n(t))||t);return r&&t&&m(o,a,t),t};import{css as c,html as d,LitElement as f}from"lit";import{property as h}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";var e=class extends f{constructor(){super(...arguments);this.orientation="vertical"}render(){return d`<ol part="timeline" data-orientation=${this.orientation}>
+      <slot></slot>
+    </ol>`}};e.styles=c`
+    :host {
+      display: contents;
+    }
+  `,s([h({type:String})],e.prototype,"orientation",2),e=s([v("skdx-timeline","timeline","root")],e);export{e as SkdxTimeline};

package/dist/timeline/TimelineContent.cjs

@@ -0,0 +1,5 @@
+"use strict";var c=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var E=(r,e)=>{for(var s in e)c(r,s,{get:e[s],enumerable:!0})},b=(r,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!y.call(r,t)&&t!==s&&c(r,t,{get:()=>e[t],enumerable:!(o=n(e,t))||o.enumerable});return r};var g=r=>b(c({},"__esModule",{value:!0}),r),d=(r,e,s,o)=>{for(var t=o>1?void 0:o?n(e,s):e,i=r.length-1,a;i>=0;i--)(a=r[i])&&(t=(o?a(e,s,t):a(t))||t);return o&&t&&c(e,s,t),t};var u={};E(u,{SkdxTimelineContent:()=>l});module.exports=g(u);var m=require("lit"),p=require("../internal/define.cjs"),f=require("../internal/styles.cjs");var l=class extends m.LitElement{render(){return m.html`<slot></slot>`}};l.styles=[f.hiddenHostStyles,m.css`
+      :host {
+        display: block;
+      }
+    `],l=d([(0,p.customElement)("skdx-timeline-content","timeline","content")],l);0&&(module.exports={SkdxTimelineContent});

package/dist/timeline/TimelineContent.d.cts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+/** `<skdx-timeline-content>` — the body content of a `<skdx-timeline-item>` (title, description, timestamp, etc.). */
+export declare class SkdxTimelineContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline-content': SkdxTimelineContent;
+    }
+}

package/dist/timeline/TimelineContent.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+/** `<skdx-timeline-content>` — the body content of a `<skdx-timeline-item>` (title, description, timestamp, etc.). */
+export declare class SkdxTimelineContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline-content': SkdxTimelineContent;
+    }
+}

package/dist/timeline/TimelineContent.js

@@ -0,0 +1,5 @@
+var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var i=(o,r,l,s)=>{for(var e=s>1?void 0:s?n(r,l):r,m=o.length-1,c;m>=0;m--)(c=o[m])&&(e=(s?c(r,l,e):c(e))||e);return s&&e&&a(r,l,e),e};import{css as d,html as p,LitElement as f}from"lit";import{customElement as h}from"../internal/define.js";import{hiddenHostStyles as y}from"../internal/styles.js";var t=class extends f{render(){return p`<slot></slot>`}};t.styles=[y,d`
+      :host {
+        display: block;
+      }
+    `],t=i([h("skdx-timeline-content","timeline","content")],t);export{t as SkdxTimelineContent};

package/dist/timeline/TimelineIndicator.cjs

@@ -0,0 +1,5 @@
+"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var E=(r,e)=>{for(var s in e)m(r,s,{get:e[s],enumerable:!0})},b=(r,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!y.call(r,t)&&t!==s&&m(r,t,{get:()=>e[t],enumerable:!(o=c(e,t))||o.enumerable});return r};var g=r=>b(m({},"__esModule",{value:!0}),r),d=(r,e,s,o)=>{for(var t=o>1?void 0:o?c(e,s):e,a=r.length-1,n;a>=0;a--)(n=r[a])&&(t=(o?n(e,s,t):n(t))||t);return o&&t&&m(e,s,t),t};var u={};E(u,{SkdxTimelineIndicator:()=>l});module.exports=g(u);var i=require("lit"),p=require("../internal/define.cjs"),f=require("../internal/styles.cjs");var l=class extends i.LitElement{render(){return i.html`<slot></slot>`}};l.styles=[f.hiddenHostStyles,i.css`
+      :host {
+        display: block;
+      }
+    `],l=d([(0,p.customElement)("skdx-timeline-indicator","timeline","indicator")],l);0&&(module.exports={SkdxTimelineIndicator});

package/dist/timeline/TimelineIndicator.d.cts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+/** `<skdx-timeline-indicator>` — the dot/icon marker for a `<skdx-timeline-item>`. Purely presentational. */
+export declare class SkdxTimelineIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline-indicator': SkdxTimelineIndicator;
+    }
+}

package/dist/timeline/TimelineIndicator.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+/** `<skdx-timeline-indicator>` — the dot/icon marker for a `<skdx-timeline-item>`. Purely presentational. */
+export declare class SkdxTimelineIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline-indicator': SkdxTimelineIndicator;
+    }
+}

package/dist/timeline/TimelineIndicator.js

@@ -0,0 +1,5 @@
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(o,r,l,s)=>{for(var e=s>1?void 0:s?c(r,l):r,i=o.length-1,m;i>=0;i--)(m=o[i])&&(e=(s?m(r,l,e):m(e))||e);return s&&e&&n(r,l,e),e};import{css as d,html as p,LitElement as f}from"lit";import{customElement as h}from"../internal/define.js";import{hiddenHostStyles as y}from"../internal/styles.js";var t=class extends f{render(){return p`<slot></slot>`}};t.styles=[y,d`
+      :host {
+        display: block;
+      }
+    `],t=a([h("skdx-timeline-indicator","timeline","indicator")],t);export{t as SkdxTimelineIndicator};

package/dist/timeline/TimelineItem.cjs

@@ -0,0 +1,5 @@
+"use strict";var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var u=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},v=(r,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!h.call(r,t)&&t!==o&&a(r,t,{get:()=>e[t],enumerable:!(s=n(e,t))||s.enumerable});return r};var y=r=>v(a({},"__esModule",{value:!0}),r),d=(r,e,o,s)=>{for(var t=s>1?void 0:s?n(e,o):e,c=r.length-1,m;c>=0;c--)(m=r[c])&&(t=(s?m(e,o,t):m(t))||t);return s&&t&&a(e,o,t),t};var E={};u(E,{SkdxTimelineItem:()=>l});module.exports=y(E);var i=require("lit"),p=require("../internal/define.cjs"),b=require("../internal/styles.cjs");var l=class extends i.LitElement{connectedCallback(){super.connectedCallback(),this.setAttribute("role","listitem")}render(){return i.html`<slot></slot>`}};l.styles=[b.hiddenHostStyles,i.css`
+      :host {
+        display: block;
+      }
+    `],l=d([(0,p.customElement)("skdx-timeline-item","timeline","item")],l);0&&(module.exports={SkdxTimelineItem});

package/dist/timeline/TimelineItem.d.cts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-timeline-item>` — a single entry in the timeline, typically
+ * composing a `<skdx-timeline-indicator>`, an optional
+ * `<skdx-timeline-separator>`, and `<skdx-timeline-content>`. Sets
+ * `role="listitem"` on the host (it isn't a real `<li>`, since the ancestor
+ * `<skdx-timeline>`'s real `<ol>` lives inside that element's own shadow
+ * root and this element is merely slotted into it).
+ */
+export declare class SkdxTimelineItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline-item': SkdxTimelineItem;
+    }
+}

package/dist/timeline/TimelineItem.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-timeline-item>` — a single entry in the timeline, typically
+ * composing a `<skdx-timeline-indicator>`, an optional
+ * `<skdx-timeline-separator>`, and `<skdx-timeline-content>`. Sets
+ * `role="listitem"` on the host (it isn't a real `<li>`, since the ancestor
+ * `<skdx-timeline>`'s real `<ol>` lives inside that element's own shadow
+ * root and this element is merely slotted into it).
+ */
+export declare class SkdxTimelineItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline-item': SkdxTimelineItem;
+    }
+}

package/dist/timeline/TimelineItem.js

@@ -0,0 +1,5 @@
+var m=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var c=(s,r,l,o)=>{for(var e=o>1?void 0:o?n(r,l):r,i=s.length-1,a;i>=0;i--)(a=s[i])&&(e=(o?a(r,l,e):a(e))||e);return o&&e&&m(r,l,e),e};import{css as d,html as p,LitElement as b}from"lit";import{customElement as f}from"../internal/define.js";import{hiddenHostStyles as h}from"../internal/styles.js";var t=class extends b{connectedCallback(){super.connectedCallback(),this.setAttribute("role","listitem")}render(){return p`<slot></slot>`}};t.styles=[h,d`
+      :host {
+        display: block;
+      }
+    `],t=c([f("skdx-timeline-item","timeline","item")],t);export{t as SkdxTimelineItem};

package/dist/timeline/TimelineSeparator.cjs

@@ -0,0 +1,5 @@
+"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var f=(r,e)=>{for(var s in e)a(r,s,{get:e[s],enumerable:!0})},v=(r,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!u.call(r,t)&&t!==s&&a(r,t,{get:()=>e[t],enumerable:!(o=d(e,t))||o.enumerable});return r};var y=r=>v(a({},"__esModule",{value:!0}),r),m=(r,e,s,o)=>{for(var t=o>1?void 0:o?d(e,s):e,n=r.length-1,c;n>=0;n--)(c=r[n])&&(t=(o?c(e,s,t):c(t))||t);return o&&t&&a(e,s,t),t};var E={};f(E,{SkdxTimelineSeparator:()=>i});module.exports=y(E);var l=require("lit"),p=require("../internal/define.cjs"),b=require("../internal/styles.cjs");var i=class extends l.LitElement{connectedCallback(){super.connectedCallback(),this.setAttribute("role","presentation"),this.setAttribute("aria-hidden","true")}render(){return l.html`<slot></slot>`}};i.styles=[b.hiddenHostStyles,l.css`
+      :host {
+        display: block;
+      }
+    `],i=m([(0,p.customElement)("skdx-timeline-separator","timeline","separator")],i);0&&(module.exports={SkdxTimelineSeparator});

package/dist/timeline/TimelineSeparator.d.cts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-timeline-separator>` — the connecting line between two
+ * `<skdx-timeline-item>`s. Sets `role="presentation"` and `aria-hidden="true"`
+ * — decorative, hidden from assistive tech.
+ */
+export declare class SkdxTimelineSeparator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline-separator': SkdxTimelineSeparator;
+    }
+}

package/dist/timeline/TimelineSeparator.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-timeline-separator>` — the connecting line between two
+ * `<skdx-timeline-item>`s. Sets `role="presentation"` and `aria-hidden="true"`
+ * — decorative, hidden from assistive tech.
+ */
+export declare class SkdxTimelineSeparator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-timeline-separator': SkdxTimelineSeparator;
+    }
+}

package/dist/timeline/TimelineSeparator.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(o,r,i,s)=>{for(var e=s>1?void 0:s?d(r,i):r,l=o.length-1,a;l>=0;l--)(a=o[l])&&(e=(s?a(r,i,e):a(e))||e);return s&&e&&c(r,i,e),e};import{css as m,html as p,LitElement as b}from"lit";import{customElement as h}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";var t=class extends b{connectedCallback(){super.connectedCallback(),this.setAttribute("role","presentation"),this.setAttribute("aria-hidden","true")}render(){return p`<slot></slot>`}};t.styles=[u,m`
+      :host {
+        display: block;
+      }
+    `],t=n([h("skdx-timeline-separator","timeline","separator")],t);export{t as SkdxTimelineSeparator};

package/dist/timeline/index.cjs

@@ -0,0 +1 @@
+"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var T=(o,e)=>{for(var i in e)m(o,i,{get:e[i],enumerable:!0})},a=(o,e,i,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!l.call(o,r)&&r!==i&&m(o,r,{get:()=>e[r],enumerable:!(t=f(e,r))||t.enumerable});return o};var I=o=>a(m({},"__esModule",{value:!0}),o);var c={};T(c,{SkdxTimeline:()=>x.SkdxTimeline,SkdxTimelineContent:()=>S.SkdxTimelineContent,SkdxTimelineIndicator:()=>d.SkdxTimelineIndicator,SkdxTimelineItem:()=>n.SkdxTimelineItem,SkdxTimelineSeparator:()=>p.SkdxTimelineSeparator});module.exports=I(c);var x=require("./Timeline.cjs"),n=require("./TimelineItem.cjs"),d=require("./TimelineIndicator.cjs"),p=require("./TimelineSeparator.cjs"),S=require("./TimelineContent.cjs");0&&(module.exports={SkdxTimeline,SkdxTimelineContent,SkdxTimelineIndicator,SkdxTimelineItem,SkdxTimelineSeparator});

package/dist/timeline/index.d.cts

@@ -0,0 +1,5 @@
+export { SkdxTimeline } from './Timeline.cjs';
+export { SkdxTimelineItem } from './TimelineItem.cjs';
+export { SkdxTimelineIndicator } from './TimelineIndicator.cjs';
+export { SkdxTimelineSeparator } from './TimelineSeparator.cjs';
+export { SkdxTimelineContent } from './TimelineContent.cjs';

package/dist/timeline/index.d.ts

@@ -0,0 +1,5 @@
+export { SkdxTimeline } from './Timeline.js';
+export { SkdxTimelineItem } from './TimelineItem.js';
+export { SkdxTimelineIndicator } from './TimelineIndicator.js';
+export { SkdxTimelineSeparator } from './TimelineSeparator.js';
+export { SkdxTimelineContent } from './TimelineContent.js';

package/dist/timeline/index.js

@@ -0,0 +1 @@
+import{SkdxTimeline as r}from"./Timeline.js";import{SkdxTimelineItem as m}from"./TimelineItem.js";import{SkdxTimelineIndicator as x}from"./TimelineIndicator.js";import{SkdxTimelineSeparator as d}from"./TimelineSeparator.js";import{SkdxTimelineContent as S}from"./TimelineContent.js";export{r as SkdxTimeline,S as SkdxTimelineContent,x as SkdxTimelineIndicator,m as SkdxTimelineItem,d as SkdxTimelineSeparator};

package/dist/toast/Toast.cjs

@@ -0,0 +1,5 @@
+"use strict";var h=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var b=(r,t)=>{for(var e in t)h(r,e,{get:t[e],enumerable:!0})},g=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of f(t))!y.call(r,i)&&i!==e&&h(r,i,{get:()=>t[i],enumerable:!(n=l(t,i))||n.enumerable});return r};var T=r=>g(h({},"__esModule",{value:!0}),r),o=(r,t,e,n)=>{for(var i=n>1?void 0:n?l(t,e):t,p=r.length-1,u;p>=0;p--)(u=r[p])&&(i=(n?u(t,e,i):u(i))||i);return n&&i&&h(t,e,i),i};var E={};b(E,{SkdxToast:()=>s});module.exports=T(E);var d=require("lit"),a=require("lit/decorators.js"),m=require("../internal/define.cjs"),v=require("../internal/positioning.cjs"),c=require("../internal/styles.cjs");var s=class extends d.LitElement{constructor(){super(...arguments);this.defaultOpen=!0;this.type="foreground";this._uncontrolledOpen=!0;this._initialized=!1;this.provider=null;this.remaining=0;this.startTime=0;this.startTimer=()=>{Number.isFinite(this.remaining)&&(clearTimeout(this.timerId),this.startTime=Date.now(),this.timerId=setTimeout(()=>this.setOpen(!1),this.remaining))};this.pauseTimer=()=>{clearTimeout(this.timerId),this.remaining-=Date.now()-this.startTime,this.startTime=Date.now()};this.handleVisibilityChange=()=>{this.currentOpen&&(document.hidden?this.pauseTimer():this.startTimer())};this.handleKeyDown=e=>{e.key==="Escape"&&this.setOpen(!1)}}get currentOpen(){return this.open!==void 0?this.open:this._uncontrolledOpen}connectedCallback(){super.connectedCallback(),this._initialized||(this._uncontrolledOpen=this.defaultOpen,this._initialized=!0),this.provider=this.closest("skdx-toast-provider"),this.hasAttribute("role")||this.setAttribute("role","status"),this.tabIndex=0,this.addEventListener("pointerenter",this.pauseTimer),this.addEventListener("pointerleave",this.startTimer),this.addEventListener("focus",this.pauseTimer),this.addEventListener("blur",this.startTimer),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("visibilitychange",this.handleVisibilityChange),window.addEventListener("pagehide",this.pauseTimer),this.syncState(),this.currentOpen&&(this.remaining=this.getDuration(),this.startTimer(),this.announce())}disconnectedCallback(){clearTimeout(this.timerId),this.removeEventListener("pointerenter",this.pauseTimer),this.removeEventListener("pointerleave",this.startTimer),this.removeEventListener("focus",this.pauseTimer),this.removeEventListener("blur",this.startTimer),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("visibilitychange",this.handleVisibilityChange),window.removeEventListener("pagehide",this.pauseTimer),super.disconnectedCallback()}updated(e){e.has("open")&&this.open!==void 0&&(this.syncState(),this.currentOpen?(this.remaining=this.getDuration(),this.startTimer()):clearTimeout(this.timerId))}getDuration(){return this.duration??this.provider?.duration??5e3}announce(){let e=this.textContent?.trim()??"",n=this.provider;!n||!e||n.updateComplete.then(()=>{n.announce(e,this.type==="foreground"?"assertive":"polite")})}syncState(){let e=this.currentOpen;this.setAttribute("data-state",e?"open":"closed"),this.hidden=!e}setOpen(e){this.currentOpen!==e&&(this.open===void 0&&(this._uncontrolledOpen=e,this.syncState(),e?(this.remaining=this.getDuration(),this.startTimer()):clearTimeout(this.timerId)),this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})))}render(){return d.html`<slot></slot>`}};s.styles=[c.hiddenHostStyles,d.css`
+      :host {
+        display: block;
+      }
+    `],o([(0,a.property)({type:Boolean})],s.prototype,"open",2),o([(0,a.property)({converter:v.optOutBoolean,attribute:"default-open"})],s.prototype,"defaultOpen",2),o([(0,a.property)({type:Number})],s.prototype,"duration",2),o([(0,a.property)({type:String})],s.prototype,"type",2),o([(0,a.state)()],s.prototype,"_uncontrolledOpen",2),s=o([(0,m.customElement)("skdx-toast","toast","root")],s);0&&(module.exports={SkdxToast});

package/dist/toast/Toast.d.cts

@@ -0,0 +1,80 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toast>` — the Web Components implementation of the shared Toast
+ * contract (see `@skdx/shared`'s `toastContract`). A single toast
+ * notification: `role="status"` and `data-state` (`open`/`closed`) on the
+ * host. Must render under a `<skdx-toast-provider>`. Self-closes after
+ * `duration` ms (or the provider's default), pausing the timer while
+ * hovered, while focused, and while the page is hidden, and closing
+ * immediately on Escape. Author `role="alert"` to raise an error or warning
+ * assertively instead of the default polite `role="status"`. Announces its text
+ * content to screen readers via the provider's persistent `aria-live`
+ * region on mount/reopen. Self-closing and uncontrolled by default — mount
+ * one `<skdx-toast>` per notification and remove it from the DOM on
+ * `open-change` with `detail: false`.
+ *
+ * @fires open-change - Fires with the new open state whenever it changes, controlled or not.
+ *
+ * @example
+ * ```html
+ * <skdx-toast duration="4000" type="background">
+ *   <skdx-toast-title>Saved</skdx-toast-title>
+ *   <skdx-toast-description>Your changes have been saved.</skdx-toast-description>
+ *   <skdx-toast-action alt-text="Undo the save">Undo</skdx-toast-action>
+ *   <skdx-toast-close aria-label="Dismiss">✕</skdx-toast-close>
+ * </skdx-toast>
+ * ```
+ */
+export declare class SkdxToast extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether the toast is open, for controlled usage. Pair with `open-change`.
+     * @default undefined
+     */
+    open?: boolean;
+    /** Whether the toast is initially open, for uncontrolled usage — a toast is typically mounted already-visible. */
+    defaultOpen: boolean;
+    /**
+     * Auto-dismiss duration (ms). `Infinity` disables auto-dismiss. Falls back
+     * to the ancestor `<skdx-toast-provider>`'s `duration` when unset.
+     * @default undefined
+     */
+    duration?: number;
+    /**
+     * `'foreground'` interrupts the user (announced `assertive`);
+     * `'background'` does not (announced `polite`).
+     * @default 'foreground'
+     */
+    type: 'foreground' | 'background';
+    private _uncontrolledOpen;
+    private _initialized;
+    private provider;
+    private timerId?;
+    private remaining;
+    private startTime;
+    /** @internal Resolved open state, controlled or uncontrolled. */
+    get currentOpen(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private getDuration;
+    private readonly startTimer;
+    private readonly pauseTimer;
+    /**
+     * A hidden tab still runs timers, so a toast raised while the user is
+     * elsewhere would burn its whole duration unseen. Pause until the page is
+     * visible again — the same reason the timer pauses on hover/focus.
+     */
+    private readonly handleVisibilityChange;
+    private readonly handleKeyDown;
+    private announce;
+    private syncState;
+    /** Sets open state (updating internal state if uncontrolled) and fires `open-change`. */
+    setOpen(next: boolean): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast': SkdxToast;
+    }
+}