@skdx/web-components 0.28.0 → 0.29.0

package/dist/progress/Progress.js

@@ -1,5 +1,5 @@
-var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(r,i,t,n)=>{for(var u=n>1?void 0:n?h(i,t):i,s=r.length-1,m;s>=0;s--)(m=r[s])&&(u=(n?m(i,t,u):m(u))||u);return n&&u&&b(i,t,u),u};import{css as p,html as f,LitElement as c}from"lit";import{property as a}from"lit/decorators.js";import{hasAuthoredParts as d}from"../internal/authored.js";import{customElement as v}from"../internal/define.js";import{fillProgressAnatomy as y,PROGRESS_ANATOMY_GENERATED as A}from"./ProgressAnatomy.js";var g=0;function o(r,i,t){return r==null?null:Math.min(Math.max(r,i),t)}function N(r,i){return r==null?"indeterminate":r>=i?"complete":"loading"}function L(r,i,t){let n=t-i;return n>0?(r-i)/n*100:0}function V(r,i,t,n,u,s,m){return n!==void 0?n(r,i,t):u!==void 0||s!==void 0?new Intl.NumberFormat(s,u).format(r):`${Math.round(m(r,i,t))}%`}var e=class extends c{constructor(){super(...arguments);this.value=null;this.min=0;this.max=100;this.buffer=null;this.circular=!1;this.indeterminate=!1;this.showValue=!1;this.diameter=48;this.strokeWidth=4;this.labelId=`skdx-progress-label-${++g}`;this.labelCount=0;this.fillAnatomy=()=>{d(this,A)||y(this)}}get clampedValue(){return this.indeterminate?null:o(this.value,this.min,this.max)}get clampedBuffer(){return o(this.buffer,this.min,this.max)}get valueLabel(){let t=this.clampedValue;return t==null?null:this.resolvedLabel(t)}resolvedLabel(t){return V(t,this.min,this.max,this.getValueLabel,this.formatOptions,this.locale,L)}registerLabel(t){this.labelCount=Math.max(0,this.labelCount+(t?1:-1)),this.labelCount>0?this.setAttribute("aria-labelledby",this.labelId):this.removeAttribute("aria-labelledby")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","progressbar"),this.syncHostAttributes(),queueMicrotask(this.fillAnatomy)}updated(t){(t.has("value")||t.has("min")||t.has("max")||t.has("buffer")||t.has("getValueLabel")||t.has("formatOptions")||t.has("locale")||t.has("indeterminate"))&&this.syncHostAttributes(),(t.has("circular")||t.has("label")||t.has("showValue")||t.has("diameter")||t.has("strokeWidth"))&&this.fillAnatomy()}syncHostAttributes(){let t=this.clampedValue;this.setAttribute("aria-valuemin",String(this.min)),this.setAttribute("aria-valuemax",String(this.max)),t==null?(this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuetext"),this.removeAttribute("data-value")):(this.setAttribute("aria-valuenow",String(t)),this.setAttribute("aria-valuetext",this.resolvedLabel(t)),this.setAttribute("data-value",String(t))),this.setAttribute("data-state",N(t,this.max)),this.setAttribute("data-min",String(this.min)),this.setAttribute("data-max",String(this.max));for(let n of this.querySelectorAll("skdx-progress-value"))n.requestProgressSync?.()}render(){return f`<slot @slotchange=${this.fillAnatomy}></slot>`}};e.styles=p`
+var f=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var l=(i,n,e,t)=>{for(var a=t>1?void 0:t?d(n,e):n,s=i.length-1,o;s>=0;s--)(o=i[s])&&(a=(t?o(n,e,a):o(a))||a);return t&&a&&f(n,e,a),a};import{css as c,html as g,LitElement as v}from"lit";import{property as u}from"lit/decorators.js";import{hasAuthoredParts as y}from"../internal/authored.js";import{customElement as A}from"../internal/define.js";import{fillProgressAnatomy as M,PROGRESS_ANATOMY_GENERATED as x}from"./ProgressAnatomy.js";var O=0,V=["value","min","max","buffer","getValueLabel","formatOptions","locale","indeterminate","role","low","high","optimum"],L=["circular","label","showValue","diameter","strokeWidth"];function R(i,n,e,t){let{low:a,high:s,optimum:o}=t;if(a==null&&s==null&&o==null)return;let m=Math.min(Math.max(a??n,n),e),b=Math.min(Math.max(s??e,m),e),p=Math.min(Math.max(o??(n+e)/2,n),e);return p<m?i<=m?"optimum":i<=b?"suboptimal":"poor":p>b?i>=b?"optimum":i>=m?"suboptimal":"poor":i>=m&&i<=b?"optimum":"suboptimal"}function h(i,n,e){return i==null?null:Math.min(Math.max(i,n),e)}function N(i,n){return i==null?"indeterminate":i>=n?"complete":"loading"}function T(i,n,e){let t=e-n;return t>0?(i-n)/t*100:0}function w(i){let{value:n,min:e,max:t,getValueLabel:a,formatOptions:s,locale:o}=i;return a!==void 0?a(n,e,t):s!==void 0||o!==void 0?new Intl.NumberFormat(o,s).format(n):`${Math.round(i.percentOf(n,e,t))}%`}var r=class extends v{constructor(){super(...arguments);this._role="progressbar";this.value=null;this.min=0;this.max=100;this.buffer=null;this.circular=!1;this.indeterminate=!1;this.showValue=!1;this.diameter=48;this.strokeWidth=4;this.labelId=`skdx-progress-label-${++O}`;this.labelCount=0;this.fillAnatomy=()=>{y(this,x)||M(this)}}get role(){return this._role}set role(e){let t=e==="meter"?"meter":"progressbar";if(t===this._role)return;let a=this._role;this._role=t,this.requestUpdate("role",a)}get isMeter(){return this._role==="meter"}get clampedMax(){return this.isMeter?Math.max(this.max,this.min):this.max}get clampedValue(){return this.isMeter?h(this.value??this.min,this.min,this.clampedMax):this.indeterminate?null:h(this.value,this.min,this.max)}get clampedBuffer(){return this.isMeter?null:h(this.buffer,this.min,this.max)}get range(){if(!this.isMeter)return;let e=this.clampedValue;if(e!=null)return R(e,this.min,this.clampedMax,{low:this.low,high:this.high,optimum:this.optimum})}get valueLabel(){let e=this.clampedValue;return e==null?null:this.resolvedLabel(e)}resolvedLabel(e){return w({value:e,min:this.min,max:this.clampedMax,getValueLabel:this.getValueLabel,formatOptions:this.formatOptions,locale:this.locale,percentOf:T})}registerLabel(e){this.labelCount=Math.max(0,this.labelCount+(e?1:-1)),this.labelCount>0?this.setAttribute("aria-labelledby",this.labelId):this.removeAttribute("aria-labelledby")}connectedCallback(){super.connectedCallback(),this.syncHostAttributes(),queueMicrotask(this.fillAnatomy)}updated(e){V.some(t=>e.has(t))&&this.syncHostAttributes(),L.some(t=>e.has(t))&&this.fillAnatomy()}syncHostAttributes(){let e=this.clampedValue,t=this.clampedMax;this.setAttribute("role",this._role),this.setAttribute("aria-valuemin",String(this.min)),this.setAttribute("aria-valuemax",String(t)),e==null?(this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuetext"),this.removeAttribute("data-value")):(this.setAttribute("aria-valuenow",String(e)),this.announcesValueText(t)?this.setAttribute("aria-valuetext",this.resolvedLabel(e)):this.removeAttribute("aria-valuetext"),this.setAttribute("data-value",String(e))),this.isMeter?this.removeAttribute("data-state"):this.setAttribute("data-state",N(e,t));let a=this.range;a?this.setAttribute("data-range",a):this.removeAttribute("data-range"),this.setAttribute("data-min",String(this.min)),this.setAttribute("data-max",String(t));for(let s of this.querySelectorAll("skdx-progress-value"))s.requestProgressSync?.()}announcesValueText(e){return this.isMeter?this.getValueLabel!==void 0||this.formatOptions!==void 0||this.locale!==void 0||this.min===0&&e===100:!0}render(){return g`<slot @slotchange=${this.fillAnatomy}></slot>`}};r.styles=c`
     :host {
       display: block;
     }
-  `,l([a({type:Number,reflect:!0})],e.prototype,"value",2),l([a({type:Number,reflect:!0})],e.prototype,"min",2),l([a({type:Number,reflect:!0})],e.prototype,"max",2),l([a({type:Number,reflect:!0})],e.prototype,"buffer",2),l([a({attribute:!1})],e.prototype,"getValueLabel",2),l([a({type:Object,attribute:"format-options"})],e.prototype,"formatOptions",2),l([a({type:String})],e.prototype,"locale",2),l([a({type:Boolean,reflect:!0})],e.prototype,"circular",2),l([a({type:Boolean,reflect:!0})],e.prototype,"indeterminate",2),l([a({type:String})],e.prototype,"label",2),l([a({type:Boolean,reflect:!0,attribute:"show-value"})],e.prototype,"showValue",2),l([a({type:Number})],e.prototype,"diameter",2),l([a({type:Number,attribute:"stroke-width"})],e.prototype,"strokeWidth",2),e=l([v("skdx-progress","progress","root")],e);export{e as SkdxProgress,o as clampInto,L as getProgressPercent,N as getState};
+  `,l([u({attribute:"role",type:String,noAccessor:!0})],r.prototype,"role",1),l([u({type:Number,reflect:!0})],r.prototype,"value",2),l([u({type:Number,reflect:!0})],r.prototype,"low",2),l([u({type:Number,reflect:!0})],r.prototype,"high",2),l([u({type:Number,reflect:!0})],r.prototype,"optimum",2),l([u({type:Number,reflect:!0})],r.prototype,"min",2),l([u({type:Number,reflect:!0})],r.prototype,"max",2),l([u({type:Number,reflect:!0})],r.prototype,"buffer",2),l([u({attribute:!1})],r.prototype,"getValueLabel",2),l([u({type:Object,attribute:"format-options"})],r.prototype,"formatOptions",2),l([u({type:String})],r.prototype,"locale",2),l([u({type:Boolean,reflect:!0})],r.prototype,"circular",2),l([u({type:Boolean,reflect:!0})],r.prototype,"indeterminate",2),l([u({type:String})],r.prototype,"label",2),l([u({type:Boolean,reflect:!0,attribute:"show-value"})],r.prototype,"showValue",2),l([u({type:Number})],r.prototype,"diameter",2),l([u({type:Number,attribute:"stroke-width"})],r.prototype,"strokeWidth",2),r=l([A("skdx-progress","progress","root")],r);export{r as SkdxProgress,h as clampInto,T as getProgressPercent,R as getProgressRange,N as getState};

package/dist/progress/ProgressAnatomy.cjs

@@ -6,7 +6,11 @@
             stroke-width=${e}
           >
             <skdx-progress-circle-indicator data-skdx-progress-generated>
-              <svg width=${r} height=${r} viewBox="0 0 ${r} ${r}">
+              <svg
+                width=${r}
+                height=${r}
+                viewBox="0 0 ${r} ${r}"
+              >
                 <circle
                   cx=${t}
                   cy=${t}

package/dist/progress/ProgressAnatomy.d.cts

@@ -6,8 +6,5 @@ import './ProgressLabel.cjs';
 import './ProgressValue.cjs';
 /** @internal Marks a direct child of `<skdx-progress>` this module generated. */
 export declare const PROGRESS_ANATOMY_GENERATED = "data-skdx-progress-generated";
-/**
- * Generates Label (if present), then either a linear Indicator or a circular Circle with CircleIndicator, ending with Value (if `showValue`).
- * @internal
- */
+/** @internal Generates Label (if present), then either a linear Indicator or a circular Circle with CircleIndicator, ending with Value (if `showValue`). */
 export declare function fillProgressAnatomy(root: SkdxProgress): void;

package/dist/progress/ProgressAnatomy.d.ts

@@ -6,8 +6,5 @@ import './ProgressLabel.js';
 import './ProgressValue.js';
 /** @internal Marks a direct child of `<skdx-progress>` this module generated. */
 export declare const PROGRESS_ANATOMY_GENERATED = "data-skdx-progress-generated";
-/**
- * Generates Label (if present), then either a linear Indicator or a circular Circle with CircleIndicator, ending with Value (if `showValue`).
- * @internal
- */
+/** @internal Generates Label (if present), then either a linear Indicator or a circular Circle with CircleIndicator, ending with Value (if `showValue`). */
 export declare function fillProgressAnatomy(root: SkdxProgress): void;

package/dist/progress/ProgressAnatomy.js

@@ -6,7 +6,11 @@ import{html as e,render as c}from"lit";import"./ProgressCircle.js";import"./Prog
             stroke-width=${t}
           >
             <skdx-progress-circle-indicator data-skdx-progress-generated>
-              <svg width=${s} height=${s} viewBox="0 0 ${s} ${s}">
+              <svg
+                width=${s}
+                height=${s}
+                viewBox="0 0 ${s} ${s}"
+              >
                 <circle
                   cx=${d}
                   cy=${d}

package/dist/progress/ProgressCircle.cjs

@@ -1,5 +1,5 @@
-"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var r in t)a(e,r,{get:t[r],enumerable:!0})},P=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!f.call(e,i)&&i!==r&&a(e,i,{get:()=>t[i],enumerable:!(s=h(t,i))||s.enumerable});return e};var M=e=>P(a({},"__esModule",{value:!0}),e),d=(e,t,r,s)=>{for(var i=s>1?void 0:s?h(t,r):t,u=e.length-1,p;u>=0;u--)(p=e[u])&&(i=(s?p(t,r,i):p(i))||i);return s&&i&&a(t,r,i),i};var S={};x(S,{SkdxProgressCircle:()=>o,applyCircleVars:()=>k,applyProgressDataAttributes:()=>y,clampProgressValue:()=>g});module.exports=M(S);var n=require("lit"),m=require("lit/decorators.js"),b=require("../internal/define.cjs"),l=require("./Progress.cjs");var c=e=>Math.round(e*1e4)/1e4;function g(e){return e.clampedValue}function y(e,t,r,s){e.setAttribute("data-state",(0,l.getState)(t,s)),e.setAttribute("data-min",String(r)),e.setAttribute("data-max",String(s)),t==null?e.removeAttribute("data-value"):e.setAttribute("data-value",String(t))}function k(e,t,r,s,i){e.style.setProperty("--skdx-progress-circle-circumference",String(c(t))),e.style.setProperty("--skdx-progress-dasharray",String(c(t))),r==null?e.style.removeProperty("--skdx-progress-circle-offset"):e.style.setProperty("--skdx-progress-circle-offset",String(c(t*(1-(0,l.getProgressPercent)(r,s,i)/100))))}var o=class extends n.LitElement{constructor(){super(...arguments);this.diameter=48;this.strokeWidth=4;this.root=null;this.observer=new MutationObserver(()=>this.sync())}get radius(){return Math.max((this.diameter-this.strokeWidth)/2,0)}get circumference(){return 2*Math.PI*this.radius}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-circle> must be used inside <skdx-progress>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","indeterminate"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}updated(r){(r.has("diameter")||r.has("strokeWidth"))&&this.sync()}sync(){let r=this.root;if(!r)return;let s=g(r);y(this,s,r.min,r.max),this.style.setProperty("--skdx-progress-circle-size",String(this.diameter)),this.style.setProperty("--skdx-progress-circle-thickness",String(this.strokeWidth)),this.style.setProperty("--skdx-progress-circle-radius",String(c(this.radius))),k(this,this.circumference,s,r.min,r.max)}render(){return n.html`<slot></slot>`}};o.styles=n.css`
+"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var r in t)a(e,r,{get:t[r],enumerable:!0})},P=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!f.call(e,i)&&i!==r&&a(e,i,{get:()=>t[i],enumerable:!(s=h(t,i))||s.enumerable});return e};var M=e=>P(a({},"__esModule",{value:!0}),e),l=(e,t,r,s)=>{for(var i=s>1?void 0:s?h(t,r):t,c=e.length-1,p;c>=0;c--)(p=e[c])&&(i=(s?p(t,r,i):p(i))||i);return s&&i&&a(t,r,i),i};var S={};x(S,{SkdxProgressCircle:()=>o,applyCircleVars:()=>k,applyProgressDataAttributes:()=>y,clampProgressValue:()=>g});module.exports=M(S);var n=require("lit"),m=require("lit/decorators.js"),b=require("../internal/define.cjs"),u=require("./Progress.cjs");var d=e=>Math.round(e*1e4)/1e4;function g(e){return e.clampedValue}function y(e,t,r,s){e.setAttribute("data-state",(0,u.getState)(t,s)),e.setAttribute("data-min",String(r)),e.setAttribute("data-max",String(s)),t==null?e.removeAttribute("data-value"):e.setAttribute("data-value",String(t))}function k(e,t,r,s,i){e.style.setProperty("--skdx-progress-circle-circumference",String(d(t))),e.style.setProperty("--skdx-progress-dasharray",String(d(t))),r==null?e.style.removeProperty("--skdx-progress-circle-offset"):e.style.setProperty("--skdx-progress-circle-offset",String(d(t*(1-(0,u.getProgressPercent)(r,s,i)/100))))}var o=class extends n.LitElement{constructor(){super(...arguments);this.diameter=48;this.strokeWidth=4;this.root=null;this.observer=new MutationObserver(()=>this.sync())}get radius(){return Math.max((this.diameter-this.strokeWidth)/2,0)}get circumference(){return 2*Math.PI*this.radius}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-circle> must be used inside <skdx-progress>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","indeterminate"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}updated(r){(r.has("diameter")||r.has("strokeWidth"))&&this.sync()}sync(){let r=this.root;if(!r)return;let s=g(r);y(this,s,r.min,r.max),this.style.setProperty("--skdx-progress-circle-size",String(this.diameter)),this.style.setProperty("--skdx-progress-circle-thickness",String(this.strokeWidth)),this.style.setProperty("--skdx-progress-circle-radius",String(d(this.radius))),k(this,this.circumference,s,r.min,r.max)}render(){return n.html`<slot></slot>`}};o.styles=n.css`
     :host {
       display: block;
     }
-  `,d([(0,m.property)({type:Number,reflect:!0})],o.prototype,"diameter",2),d([(0,m.property)({type:Number,reflect:!0,attribute:"stroke-width"})],o.prototype,"strokeWidth",2),o=d([(0,b.customElement)("skdx-progress-circle","progress","circle")],o);0&&(module.exports={SkdxProgressCircle,applyCircleVars,applyProgressDataAttributes,clampProgressValue});
+  `,l([(0,m.property)({type:Number,reflect:!0})],o.prototype,"diameter",2),l([(0,m.property)({type:Number,reflect:!0,attribute:"stroke-width"})],o.prototype,"strokeWidth",2),o=l([(0,b.customElement)("skdx-progress-circle","progress","circle")],o);0&&(module.exports={SkdxProgressCircle,applyCircleVars,applyProgressDataAttributes,clampProgressValue});

package/dist/progress/ProgressCircle.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type SkdxProgress } from './Progress.cjs';
 /** @internal The root's clamped value — `null` while indeterminate or unset. */
 export declare function clampProgressValue(root: SkdxProgress): number | null;
@@ -7,24 +7,13 @@ export declare function applyProgressDataAttributes(el: HTMLElement, value: numb
 /** @internal Applies value-dependent ring geometry via CSS custom properties. */
 export declare function applyCircleVars(el: HTMLElement, circumference: number, value: number | null, min: number, max: number): void;
 /**
- * `<skdx-progress-circle>` — circular geometry host for a `<skdx-progress>`.
- * Renders **no SVG of its own**: it publishes the ring's arithmetic as CSS
- * custom properties, so the consumer brings their own `<svg>` markup and
- * drives `stroke-dasharray`/`stroke-dashoffset` from CSS alone (custom
- * properties inherit, so any `<circle>` nested inside picks them up):
+ * Circular geometry host for a `<skdx-progress>`. Renders no SVG of its own: publishes the ring's arithmetic as CSS custom properties, so the consumer brings their own `<svg>` markup.
  *
  * - `--skdx-progress-circle-size` / `--skdx-progress-circle-thickness` — the `diameter` / `stroke-width` attributes, echoed back under their published names.
  * - `--skdx-progress-circle-radius` — `(diameter - strokeWidth) / 2`, the `r` of the ring's centre line.
  * - `--skdx-progress-circle-circumference` — `2πr`.
  * - `--skdx-progress-dasharray` — the value for `stroke-dasharray`.
- * - `--skdx-progress-circle-offset` — the value for `stroke-dashoffset`; **absent when indeterminate**.
- *
- * Carries the same `data-state`/`data-value`/`data-min`/`data-max` as the linear parts,
- * tracking the ancestor found via `closest('skdx-progress')` and re-syncing on
- * every `value`/`max` attribute change through a `MutationObserver` — the same
- * pattern `<skdx-progress-indicator>` uses. ARIA lives on the `<skdx-progress>`
- * root, which this must be used inside — this part adds no second
- * `role="progressbar"`.
+ * - `--skdx-progress-circle-offset` — the value for `stroke-dashoffset`; absent when indeterminate.
  *
  * @example
  * ```html
@@ -44,30 +33,16 @@ export declare function applyCircleVars(el: HTMLElement, circumference: number,
 export declare class SkdxProgressCircle extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Outer diameter of the ring, in unitless SVG user units — the number you
-     * also put in your own `viewBox="0 0 diameter diameter"`. Named `diameter`,
-     * not `size`, so it stops colliding with the appearance rung the system
-     * reserves that word for. Unitless rather than a CSS length because it feeds
-     * `stroke-dasharray`/`stroke-dashoffset`, which are path lengths, not lengths
-     * CSS can convert.
-     *
+     * Outer diameter of the ring, in unitless SVG user units matching your own `viewBox`.
      * @default 48 — a ring that reads at body-text scale, so the default renders visibly with no config.
      */
     diameter: number;
     /**
-     * Stroke width of the ring, in the same unitless units as `diameter`. Insets
-     * the radius by half its value so the stroke stays inside the `diameter` box.
-     *
+     * Stroke width of the ring, in the same unitless units as `diameter`; insets the radius by half its value.
      * @default 4 — about a twelfth of the default `diameter`, thick enough to see and thin enough not to close the hole.
      */
     strokeWidth: number;
-    /**
-     * Radius of the ring's *centre line*. A stroke straddles its path, so half of
-     * `strokeWidth` sits outside the radius — insetting by `strokeWidth / 2` is
-     * what keeps the ring inside the `diameter` box instead of clipping at the
-     * viewBox edge. Floored at `0` so a `strokeWidth` wider than `diameter`
-     * degenerates to a dot rather than a negative circumference.
-     */
+    /** Radius of the ring's centre line, inset by `strokeWidth / 2` and floored at `0`. */
     get radius(): number;
     /** Circumference of the ring's centre line, `2πr` — the full `stroke-dasharray` length. */
     get circumference(): number;
@@ -77,7 +52,7 @@ export declare class SkdxProgressCircle extends LitElement {
     disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/progress/ProgressCircle.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type SkdxProgress } from './Progress.js';
 /** @internal The root's clamped value — `null` while indeterminate or unset. */
 export declare function clampProgressValue(root: SkdxProgress): number | null;
@@ -7,24 +7,13 @@ export declare function applyProgressDataAttributes(el: HTMLElement, value: numb
 /** @internal Applies value-dependent ring geometry via CSS custom properties. */
 export declare function applyCircleVars(el: HTMLElement, circumference: number, value: number | null, min: number, max: number): void;
 /**
- * `<skdx-progress-circle>` — circular geometry host for a `<skdx-progress>`.
- * Renders **no SVG of its own**: it publishes the ring's arithmetic as CSS
- * custom properties, so the consumer brings their own `<svg>` markup and
- * drives `stroke-dasharray`/`stroke-dashoffset` from CSS alone (custom
- * properties inherit, so any `<circle>` nested inside picks them up):
+ * Circular geometry host for a `<skdx-progress>`. Renders no SVG of its own: publishes the ring's arithmetic as CSS custom properties, so the consumer brings their own `<svg>` markup.
  *
  * - `--skdx-progress-circle-size` / `--skdx-progress-circle-thickness` — the `diameter` / `stroke-width` attributes, echoed back under their published names.
  * - `--skdx-progress-circle-radius` — `(diameter - strokeWidth) / 2`, the `r` of the ring's centre line.
  * - `--skdx-progress-circle-circumference` — `2πr`.
  * - `--skdx-progress-dasharray` — the value for `stroke-dasharray`.
- * - `--skdx-progress-circle-offset` — the value for `stroke-dashoffset`; **absent when indeterminate**.
- *
- * Carries the same `data-state`/`data-value`/`data-min`/`data-max` as the linear parts,
- * tracking the ancestor found via `closest('skdx-progress')` and re-syncing on
- * every `value`/`max` attribute change through a `MutationObserver` — the same
- * pattern `<skdx-progress-indicator>` uses. ARIA lives on the `<skdx-progress>`
- * root, which this must be used inside — this part adds no second
- * `role="progressbar"`.
+ * - `--skdx-progress-circle-offset` — the value for `stroke-dashoffset`; absent when indeterminate.
  *
  * @example
  * ```html
@@ -44,30 +33,16 @@ export declare function applyCircleVars(el: HTMLElement, circumference: number,
 export declare class SkdxProgressCircle extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Outer diameter of the ring, in unitless SVG user units — the number you
-     * also put in your own `viewBox="0 0 diameter diameter"`. Named `diameter`,
-     * not `size`, so it stops colliding with the appearance rung the system
-     * reserves that word for. Unitless rather than a CSS length because it feeds
-     * `stroke-dasharray`/`stroke-dashoffset`, which are path lengths, not lengths
-     * CSS can convert.
-     *
+     * Outer diameter of the ring, in unitless SVG user units matching your own `viewBox`.
      * @default 48 — a ring that reads at body-text scale, so the default renders visibly with no config.
      */
     diameter: number;
     /**
-     * Stroke width of the ring, in the same unitless units as `diameter`. Insets
-     * the radius by half its value so the stroke stays inside the `diameter` box.
-     *
+     * Stroke width of the ring, in the same unitless units as `diameter`; insets the radius by half its value.
      * @default 4 — about a twelfth of the default `diameter`, thick enough to see and thin enough not to close the hole.
      */
     strokeWidth: number;
-    /**
-     * Radius of the ring's *centre line*. A stroke straddles its path, so half of
-     * `strokeWidth` sits outside the radius — insetting by `strokeWidth / 2` is
-     * what keeps the ring inside the `diameter` box instead of clipping at the
-     * viewBox edge. Floored at `0` so a `strokeWidth` wider than `diameter`
-     * degenerates to a dot rather than a negative circumference.
-     */
+    /** Radius of the ring's centre line, inset by `strokeWidth / 2` and floored at `0`. */
     get radius(): number;
     /** Circumference of the ring's centre line, `2πr` — the full `stroke-dasharray` length. */
     get circumference(): number;
@@ -77,7 +52,7 @@ export declare class SkdxProgressCircle extends LitElement {
     disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/progress/ProgressCircle.js

@@ -1,5 +1,5 @@
-var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(e,r,t,s)=>{for(var i=s>1?void 0:s?p(r,t):r,d=e.length-1,c;d>=0;d--)(c=e[d])&&(i=(s?c(r,t,i):c(i))||i);return s&&i&&u(r,t,i),i};import{css as m,html as h,LitElement as b}from"lit";import{property as l}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{getProgressPercent as y,getState as k}from"./Progress.js";var a=e=>Math.round(e*1e4)/1e4;function v(e){return e.clampedValue}function f(e,r,t,s){e.setAttribute("data-state",k(r,s)),e.setAttribute("data-min",String(t)),e.setAttribute("data-max",String(s)),r==null?e.removeAttribute("data-value"):e.setAttribute("data-value",String(r))}function x(e,r,t,s,i){e.style.setProperty("--skdx-progress-circle-circumference",String(a(r))),e.style.setProperty("--skdx-progress-dasharray",String(a(r))),t==null?e.style.removeProperty("--skdx-progress-circle-offset"):e.style.setProperty("--skdx-progress-circle-offset",String(a(r*(1-y(t,s,i)/100))))}var o=class extends b{constructor(){super(...arguments);this.diameter=48;this.strokeWidth=4;this.root=null;this.observer=new MutationObserver(()=>this.sync())}get radius(){return Math.max((this.diameter-this.strokeWidth)/2,0)}get circumference(){return 2*Math.PI*this.radius}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-circle> must be used inside <skdx-progress>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","indeterminate"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}updated(t){(t.has("diameter")||t.has("strokeWidth"))&&this.sync()}sync(){let t=this.root;if(!t)return;let s=v(t);f(this,s,t.min,t.max),this.style.setProperty("--skdx-progress-circle-size",String(this.diameter)),this.style.setProperty("--skdx-progress-circle-thickness",String(this.strokeWidth)),this.style.setProperty("--skdx-progress-circle-radius",String(a(this.radius))),x(this,this.circumference,s,t.min,t.max)}render(){return h`<slot></slot>`}};o.styles=m`
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(e,r,t,s)=>{for(var i=s>1?void 0:s?p(r,t):r,l=e.length-1,d;l>=0;l--)(d=e[l])&&(i=(s?d(r,t,i):d(i))||i);return s&&i&&c(r,t,i),i};import{css as m,html as h,LitElement as b}from"lit";import{property as u}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{getProgressPercent as y,getState as k}from"./Progress.js";var a=e=>Math.round(e*1e4)/1e4;function v(e){return e.clampedValue}function f(e,r,t,s){e.setAttribute("data-state",k(r,s)),e.setAttribute("data-min",String(t)),e.setAttribute("data-max",String(s)),r==null?e.removeAttribute("data-value"):e.setAttribute("data-value",String(r))}function x(e,r,t,s,i){e.style.setProperty("--skdx-progress-circle-circumference",String(a(r))),e.style.setProperty("--skdx-progress-dasharray",String(a(r))),t==null?e.style.removeProperty("--skdx-progress-circle-offset"):e.style.setProperty("--skdx-progress-circle-offset",String(a(r*(1-y(t,s,i)/100))))}var o=class extends b{constructor(){super(...arguments);this.diameter=48;this.strokeWidth=4;this.root=null;this.observer=new MutationObserver(()=>this.sync())}get radius(){return Math.max((this.diameter-this.strokeWidth)/2,0)}get circumference(){return 2*Math.PI*this.radius}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-circle> must be used inside <skdx-progress>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","indeterminate"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}updated(t){(t.has("diameter")||t.has("strokeWidth"))&&this.sync()}sync(){let t=this.root;if(!t)return;let s=v(t);f(this,s,t.min,t.max),this.style.setProperty("--skdx-progress-circle-size",String(this.diameter)),this.style.setProperty("--skdx-progress-circle-thickness",String(this.strokeWidth)),this.style.setProperty("--skdx-progress-circle-radius",String(a(this.radius))),x(this,this.circumference,s,t.min,t.max)}render(){return h`<slot></slot>`}};o.styles=m`
     :host {
       display: block;
     }
-  `,n([l({type:Number,reflect:!0})],o.prototype,"diameter",2),n([l({type:Number,reflect:!0,attribute:"stroke-width"})],o.prototype,"strokeWidth",2),o=n([g("skdx-progress-circle","progress","circle")],o);export{o as SkdxProgressCircle,x as applyCircleVars,f as applyProgressDataAttributes,v as clampProgressValue};
+  `,n([u({type:Number,reflect:!0})],o.prototype,"diameter",2),n([u({type:Number,reflect:!0,attribute:"stroke-width"})],o.prototype,"strokeWidth",2),o=n([g("skdx-progress-circle","progress","circle")],o);export{o as SkdxProgressCircle,x as applyCircleVars,f as applyProgressDataAttributes,v as clampProgressValue};

package/dist/progress/ProgressCircleIndicator.d.cts

@@ -1,9 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-progress-circle-indicator>` — the swept arc of a `<skdx-progress-circle>`,
- * publishing value-dependent ring properties (`--skdx-progress-circle-circumference`,
- * `--skdx-progress-dasharray`, `--skdx-progress-circle-offset`) on itself.
- * Wraps the `<svg>` since custom elements cannot upgrade in SVG namespace.
+ * The swept arc of a `<skdx-progress-circle>`, publishing value-dependent ring properties on itself.
  *
  * @example
  * ```html
@@ -32,7 +29,7 @@ export declare class SkdxProgressCircleIndicator extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/progress/ProgressCircleIndicator.d.ts

@@ -1,9 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-progress-circle-indicator>` — the swept arc of a `<skdx-progress-circle>`,
- * publishing value-dependent ring properties (`--skdx-progress-circle-circumference`,
- * `--skdx-progress-dasharray`, `--skdx-progress-circle-offset`) on itself.
- * Wraps the `<svg>` since custom elements cannot upgrade in SVG namespace.
+ * The swept arc of a `<skdx-progress-circle>`, publishing value-dependent ring properties on itself.
  *
  * @example
  * ```html
@@ -32,7 +29,7 @@ export declare class SkdxProgressCircleIndicator extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/progress/ProgressIndicator.cjs

@@ -1,5 +1,5 @@
-"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var h=(i,r)=>{for(var e in r)l(i,e,{get:r[e],enumerable:!0})},f=(i,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of b(r))!v.call(i,t)&&t!==e&&l(i,t,{get:()=>r[t],enumerable:!(s=m(r,t))||s.enumerable});return i};var g=i=>f(l({},"__esModule",{value:!0}),i),p=(i,r,e,s)=>{for(var t=s>1?void 0:s?m(r,e):r,d=i.length-1,c;d>=0;d--)(c=i[d])&&(t=(s?c(r,e,t):c(t))||t);return s&&t&&l(r,e,t),t};var x={};h(x,{SkdxProgressIndicator:()=>a});module.exports=g(x);var n=require("lit"),u=require("../internal/define.cjs"),o=require("./Progress.cjs");var a=class extends n.LitElement{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync())}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-indicator> must be used inside <skdx-progress>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","buffer","indeterminate"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}sync(){let e=this.root;if(!e)return;let s=e.clampedValue,t=(0,o.clampInto)(e.buffer,e.min,e.max);this.setAttribute("data-state",(0,o.getState)(s,e.max)),this.setAttribute("data-min",String(e.min)),this.setAttribute("data-max",String(e.max)),s==null?(this.removeAttribute("data-value"),this.style.removeProperty("--skdx-progress")):(this.setAttribute("data-value",String(s)),this.style.setProperty("--skdx-progress",`${(0,o.getProgressPercent)(s,e.min,e.max)}%`)),t==null?this.style.removeProperty("--skdx-progress-buffer"):this.style.setProperty("--skdx-progress-buffer",`${(0,o.getProgressPercent)(t,e.min,e.max)}%`)}render(){return n.html`<slot part="indicator"></slot>`}};a.styles=n.css`
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var v=(i,r)=>{for(var e in r)c(i,e,{get:r[e],enumerable:!0})},g=(i,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of h(r))!b.call(i,t)&&t!==e&&c(i,t,{get:()=>r[t],enumerable:!(s=m(r,t))||s.enumerable});return i};var f=i=>g(c({},"__esModule",{value:!0}),i),p=(i,r,e,s)=>{for(var t=s>1?void 0:s?m(r,e):r,o=i.length-1,a;o>=0;o--)(a=i[o])&&(t=(s?a(r,e,t):a(t))||t);return s&&t&&c(r,e,t),t};var y={};v(y,{SkdxProgressIndicator:()=>l});module.exports=f(y);var n=require("lit"),u=require("../internal/define.cjs"),d=require("./Progress.cjs");var l=class extends n.LitElement{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync())}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-indicator> must be used inside <skdx-progress>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","buffer","indeterminate","role","low","high","optimum"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}sync(){let e=this.root;if(!e)return;let s=e.clampedValue,t=e.clampedMax,o=e.clampedBuffer;e.isMeter?this.removeAttribute("data-state"):this.setAttribute("data-state",(0,d.getState)(s,t));let a=e.range;a?this.setAttribute("data-range",a):this.removeAttribute("data-range"),this.setAttribute("data-min",String(e.min)),this.setAttribute("data-max",String(t)),s==null?(this.removeAttribute("data-value"),this.style.removeProperty("--skdx-progress")):(this.setAttribute("data-value",String(s)),this.style.setProperty("--skdx-progress",`${(0,d.getProgressPercent)(s,e.min,t)}%`)),o==null?this.style.removeProperty("--skdx-progress-buffer"):this.style.setProperty("--skdx-progress-buffer",`${(0,d.getProgressPercent)(o,e.min,t)}%`)}render(){return n.html`<slot part="indicator"></slot>`}};l.styles=n.css`
     :host {
       display: block;
     }
-  `,a=p([(0,u.customElement)("skdx-progress-indicator","progress","indicator")],a);0&&(module.exports={SkdxProgressIndicator});
+  `,l=p([(0,u.customElement)("skdx-progress-indicator","progress","indicator")],l);0&&(module.exports={SkdxProgressIndicator});

package/dist/progress/ProgressIndicator.d.cts

@@ -1,10 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-progress-indicator>` — the visual fill of a `<skdx-progress>` bar.
- * Mirrors the ancestor's `data-state`/`data-value`/`data-min`/`data-max` and
- * sets a `--skdx-progress` CSS custom property (a percentage) so width/transform
- * can be driven purely from CSS, plus `--skdx-progress-buffer` when the root was
- * given a `buffer`. Must be used inside `<skdx-progress>`.
+ * The visual fill of a `<skdx-progress>` bar that mirrors the ancestor's state and sets a `--skdx-progress` CSS custom property for width/transform.
  *
  * @example
  * ```html
@@ -22,7 +18,7 @@ export declare class SkdxProgressIndicator extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/progress/ProgressIndicator.d.ts

@@ -1,10 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-progress-indicator>` — the visual fill of a `<skdx-progress>` bar.
- * Mirrors the ancestor's `data-state`/`data-value`/`data-min`/`data-max` and
- * sets a `--skdx-progress` CSS custom property (a percentage) so width/transform
- * can be driven purely from CSS, plus `--skdx-progress-buffer` when the root was
- * given a `buffer`. Must be used inside `<skdx-progress>`.
+ * The visual fill of a `<skdx-progress>` bar that mirrors the ancestor's state and sets a `--skdx-progress` CSS custom property for width/transform.
  *
  * @example
  * ```html
@@ -22,7 +18,7 @@ export declare class SkdxProgressIndicator extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/progress/ProgressIndicator.js

@@ -1,5 +1,5 @@
-var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=(o,s,e,r)=>{for(var t=r>1?void 0:r?m(s,e):s,a=o.length-1,n;a>=0;a--)(n=o[a])&&(t=(r?n(s,e,t):n(t))||t);return r&&t&&c(s,e,t),t};import{css as p,html as u,LitElement as b}from"lit";import{customElement as v}from"../internal/define.js";import{clampInto as h,getProgressPercent as d,getState as f}from"./Progress.js";var i=class extends b{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync())}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-indicator> must be used inside <skdx-progress>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","buffer","indeterminate"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}sync(){let e=this.root;if(!e)return;let r=e.clampedValue,t=h(e.buffer,e.min,e.max);this.setAttribute("data-state",f(r,e.max)),this.setAttribute("data-min",String(e.min)),this.setAttribute("data-max",String(e.max)),r==null?(this.removeAttribute("data-value"),this.style.removeProperty("--skdx-progress")):(this.setAttribute("data-value",String(r)),this.style.setProperty("--skdx-progress",`${d(r,e.min,e.max)}%`)),t==null?this.style.removeProperty("--skdx-progress-buffer"):this.style.setProperty("--skdx-progress-buffer",`${d(t,e.min,e.max)}%`)}render(){return u`<slot part="indicator"></slot>`}};i.styles=p`
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(l,o,e,r)=>{for(var t=r>1?void 0:r?m(o,e):o,s=l.length-1,i;s>=0;s--)(i=l[s])&&(t=(r?i(o,e,t):i(t))||t);return r&&t&&c(o,e,t),t};import{css as p,html as u,LitElement as h}from"lit";import{customElement as b}from"../internal/define.js";import{getProgressPercent as d,getState as v}from"./Progress.js";var a=class extends h{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync())}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-indicator> must be used inside <skdx-progress>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","buffer","indeterminate","role","low","high","optimum"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}sync(){let e=this.root;if(!e)return;let r=e.clampedValue,t=e.clampedMax,s=e.clampedBuffer;e.isMeter?this.removeAttribute("data-state"):this.setAttribute("data-state",v(r,t));let i=e.range;i?this.setAttribute("data-range",i):this.removeAttribute("data-range"),this.setAttribute("data-min",String(e.min)),this.setAttribute("data-max",String(t)),r==null?(this.removeAttribute("data-value"),this.style.removeProperty("--skdx-progress")):(this.setAttribute("data-value",String(r)),this.style.setProperty("--skdx-progress",`${d(r,e.min,t)}%`)),s==null?this.style.removeProperty("--skdx-progress-buffer"):this.style.setProperty("--skdx-progress-buffer",`${d(s,e.min,t)}%`)}render(){return u`<slot part="indicator"></slot>`}};a.styles=p`
     :host {
       display: block;
     }
-  `,i=l([v("skdx-progress-indicator","progress","indicator")],i);export{i as SkdxProgressIndicator};
+  `,a=n([b("skdx-progress-indicator","progress","indicator")],a);export{a as SkdxProgressIndicator};

package/dist/progress/ProgressLabel.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var g=(s,e)=>{for(var t in e)d(s,t,{get:e[t],enumerable:!0})},u=(s,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of b(e))!m.call(s,r)&&r!==t&&d(s,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return s};var k=s=>u(d({},"__esModule",{value:!0}),s),h=(s,e,t,o)=>{for(var r=o>1?void 0:o?p(e,t):e,n=s.length-1,c;n>=0;n--)(c=s[n])&&(r=(o?c(e,t,r):c(r))||r);return o&&r&&d(e,t,r),r};var f={};g(f,{SkdxProgressLabel:()=>l});module.exports=k(f);var i=require("lit"),a=require("../internal/define.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-label> must be used inside <skdx-progress>.");(0,a.whenUpgraded)(this.root,()=>{this.root&&(this.id?this.root.labelId=this.id:this.id=this.root.labelId,this.root.registerLabel(!0))})}disconnectedCallback(){this.root?.registerLabel(!1),super.disconnectedCallback()}render(){return i.html`<slot part="label"></slot>`}};l.styles=i.css`
+"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var u=(r,e)=>{for(var s in e)a(r,s,{get:e[s],enumerable:!0})},g=(r,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!b.call(r,t)&&t!==s&&a(r,t,{get:()=>e[t],enumerable:!(o=c(e,t))||o.enumerable});return r};var k=r=>g(a({},"__esModule",{value:!0}),r),h=(r,e,s,o)=>{for(var t=o>1?void 0:o?c(e,s):e,n=r.length-1,p;n>=0;n--)(p=r[n])&&(t=(o?p(e,s,t):p(t))||t);return o&&t&&a(e,s,t),t};var f={};u(f,{SkdxProgressLabel:()=>l});module.exports=k(f);var i=require("lit"),d=require("../internal/define.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-label> must be used inside <skdx-progress>.");(0,d.whenUpgraded)(this.root,()=>{this.root&&(this.id?this.root.labelId=this.id:this.id=this.root.labelId,this.root.registerLabel(!0))})}disconnectedCallback(){this.root?.registerLabel(!1),super.disconnectedCallback()}render(){return i.html`<slot part="label"></slot>`}};l.styles=i.css`
     :host {
       display: block;
     }
-  `,l=h([(0,a.customElement)("skdx-progress-label","progress","label")],l);0&&(module.exports={SkdxProgressLabel});
+  `,l=h([(0,d.customElement)("skdx-progress-label","progress","label")],l);0&&(module.exports={SkdxProgressLabel});

package/dist/progress/ProgressLabel.d.cts

@@ -1,8 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * The bar's visible name, wiring its id to the root's `aria-labelledby`.
- * `role="progressbar"` takes no name from content, so this element registers
- * itself on connect to wire the id only while it exists.
+ * The bar's visible name, wiring its id to the root's `aria-labelledby` while it exists.
  *
  * @example
  * ```html
@@ -19,7 +17,7 @@ export declare class SkdxProgressLabel extends LitElement {
     private root;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/progress/ProgressLabel.d.ts

@@ -1,8 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * The bar's visible name, wiring its id to the root's `aria-labelledby`.
- * `role="progressbar"` takes no name from content, so this element registers
- * itself on connect to wire the id only while it exists.
+ * The bar's visible name, wiring its id to the root's `aria-labelledby` while it exists.
  *
  * @example
  * ```html
@@ -19,7 +17,7 @@ export declare class SkdxProgressLabel extends LitElement {
     private root;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/progress/ProgressLabel.js

@@ -1,5 +1,5 @@
-var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(o,r,l,t)=>{for(var e=t>1?void 0:t?c(r,l):r,i=o.length-1,d;i>=0;i--)(d=o[i])&&(e=(t?d(r,l,e):d(e))||e);return t&&e&&n(r,l,e),e};import{css as p,html as h,LitElement as b}from"lit";import{customElement as m,whenUpgraded as g}from"../internal/define.js";var s=class extends b{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-label> must be used inside <skdx-progress>.");g(this.root,()=>{this.root&&(this.id?this.root.labelId=this.id:this.id=this.root.labelId,this.root.registerLabel(!0))})}disconnectedCallback(){this.root?.registerLabel(!1),super.disconnectedCallback()}render(){return h`<slot part="label"></slot>`}};s.styles=p`
+var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(o,t,l,s)=>{for(var e=s>1?void 0:s?p(t,l):t,i=o.length-1,a;i>=0;i--)(a=o[i])&&(e=(s?a(t,l,e):a(e))||e);return s&&e&&n(t,l,e),e};import{css as c,html as h,LitElement as m}from"lit";import{customElement as b,whenUpgraded as u}from"../internal/define.js";var r=class extends m{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-label> must be used inside <skdx-progress>.");u(this.root,()=>{this.root&&(this.id?this.root.labelId=this.id:this.id=this.root.labelId,this.root.registerLabel(!0))})}disconnectedCallback(){this.root?.registerLabel(!1),super.disconnectedCallback()}render(){return h`<slot part="label"></slot>`}};r.styles=c`
     :host {
       display: block;
     }
-  `,s=a([m("skdx-progress-label","progress","label")],s);export{s as SkdxProgressLabel};
+  `,r=d([b("skdx-progress-label","progress","label")],r);export{r as SkdxProgressLabel};

package/dist/progress/ProgressValue.cjs

@@ -1,5 +1,5 @@
-"use strict";var l=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var h=(s,e)=>{for(var r in e)l(s,r,{get:e[r],enumerable:!0})},g=(s,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of p(e))!m.call(s,t)&&t!==r&&l(s,t,{get:()=>e[t],enumerable:!(o=v(e,t))||o.enumerable});return s};var k=s=>g(l({},"__esModule",{value:!0}),s),c=(s,e,r,o)=>{for(var t=o>1?void 0:o?v(e,r):e,n=s.length-1,d;n>=0;n--)(d=s[n])&&(t=(o?d(e,r,t):d(t))||t);return o&&t&&l(e,r,t),t};var f={};h(f,{SkdxProgressValue:()=>i});module.exports=k(f);var a=require("lit"),u=require("lit/decorators.js"),b=require("../internal/define.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this.label="";this.root=null;this.observer=new MutationObserver(()=>this.requestProgressSync())}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-value> must be used inside <skdx-progress>.");this.setAttribute("aria-hidden","true"),this.observer.observe(this.root,{attributeFilter:["value","min","max","indeterminate"]}),this.requestProgressSync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}requestProgressSync(){let r=this.root;r&&(this.label=r.valueLabel??"",this.setAttribute("data-state",r.getAttribute("data-state")??"indeterminate"))}render(){return a.html`<slot part="value">${this.label}</slot>`}};i.styles=a.css`
+"use strict";var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var h=(s,e)=>{for(var t in e)l(s,t,{get:e[t],enumerable:!0})},g=(s,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!b.call(s,r)&&r!==t&&l(s,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return s};var f=s=>g(l({},"__esModule",{value:!0}),s),c=(s,e,t,o)=>{for(var r=o>1?void 0:o?u(e,t):e,n=s.length-1,d;n>=0;n--)(d=s[n])&&(r=(o?d(e,t,r):d(r))||r);return o&&r&&l(e,t,r),r};var k={};h(k,{SkdxProgressValue:()=>i});module.exports=f(k);var a=require("lit"),p=require("lit/decorators.js"),v=require("../internal/define.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this.label="";this.root=null;this.observer=new MutationObserver(()=>this.requestProgressSync())}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-value> must be used inside <skdx-progress>.");this.setAttribute("aria-hidden","true"),this.observer.observe(this.root,{attributeFilter:["value","min","max","indeterminate"]}),this.requestProgressSync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}requestProgressSync(){let t=this.root;t&&(this.label=t.valueLabel??"",t.isMeter?this.removeAttribute("data-state"):this.setAttribute("data-state",t.getAttribute("data-state")??"indeterminate"))}render(){return a.html`<slot part="value">${this.label}</slot>`}};i.styles=a.css`
     :host {
       display: block;
     }
-  `,c([(0,u.state)()],i.prototype,"label",2),i=c([(0,b.customElement)("skdx-progress-value","progress","value")],i);0&&(module.exports={SkdxProgressValue});
+  `,c([(0,p.state)()],i.prototype,"label",2),i=c([(0,v.customElement)("skdx-progress-value","progress","value")],i);0&&(module.exports={SkdxProgressValue});

package/dist/progress/ProgressValue.d.cts

@@ -1,16 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * The visible readout, by default the same string the root announces via
- * `aria-valuetext`. Set `aria-hidden` because leaving it audible means screen
- * readers announce the value twice: once as the root's `valuetext` and once as
- * text inside the bar.
- *
- * Renders `getValueLabel()` when nothing is slotted and nothing while
- * indeterminate. Must be used inside `<skdx-progress>`.
- *
- * Tracks the root via `MutationObserver` on reflected attributes and a push
- * from the root for the `getValueLabel` property (which has no attribute for
- * an observer to watch).
+ * The visible readout, by default the same string the root announces via `aria-valuetext`; marked `aria-hidden` to avoid a double announcement.
  *
  * @example
  * ```html
@@ -30,7 +20,7 @@ export declare class SkdxProgressValue extends LitElement {
     disconnectedCallback(): void;
     /** @internal Re-reads the root's formatted value. Called by the root on every property change. */
     requestProgressSync(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/progress/ProgressValue.d.ts

@@ -1,16 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * The visible readout, by default the same string the root announces via
- * `aria-valuetext`. Set `aria-hidden` because leaving it audible means screen
- * readers announce the value twice: once as the root's `valuetext` and once as
- * text inside the bar.
- *
- * Renders `getValueLabel()` when nothing is slotted and nothing while
- * indeterminate. Must be used inside `<skdx-progress>`.
- *
- * Tracks the root via `MutationObserver` on reflected attributes and a push
- * from the root for the `getValueLabel` property (which has no attribute for
- * an observer to watch).
+ * The visible readout, by default the same string the root announces via `aria-valuetext`; marked `aria-hidden` to avoid a double announcement.
  *
  * @example
  * ```html
@@ -30,7 +20,7 @@ export declare class SkdxProgressValue extends LitElement {
     disconnectedCallback(): void;
     /** @internal Re-reads the root's formatted value. Called by the root on every property change. */
     requestProgressSync(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/progress/ProgressValue.js

@@ -1,5 +1,5 @@
-var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(i,s,e,o)=>{for(var t=o>1?void 0:o?c(s,e):s,a=i.length-1,l;a>=0;a--)(l=i[a])&&(t=(o?l(s,e,t):l(t))||t);return o&&t&&d(s,e,t),t};import{css as v,html as u,LitElement as b}from"lit";import{state as p}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";var r=class extends b{constructor(){super(...arguments);this.label="";this.root=null;this.observer=new MutationObserver(()=>this.requestProgressSync())}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-value> must be used inside <skdx-progress>.");this.setAttribute("aria-hidden","true"),this.observer.observe(this.root,{attributeFilter:["value","min","max","indeterminate"]}),this.requestProgressSync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}requestProgressSync(){let e=this.root;e&&(this.label=e.valueLabel??"",this.setAttribute("data-state",e.getAttribute("data-state")??"indeterminate"))}render(){return u`<slot part="value">${this.label}</slot>`}};r.styles=v`
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(i,s,e,o)=>{for(var t=o>1?void 0:o?c(s,e):s,a=i.length-1,l;a>=0;a--)(l=i[a])&&(t=(o?l(s,e,t):l(t))||t);return o&&t&&d(s,e,t),t};import{css as u,html as p,LitElement as v}from"lit";import{state as m}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";var r=class extends v{constructor(){super(...arguments);this.label="";this.root=null;this.observer=new MutationObserver(()=>this.requestProgressSync())}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-progress"),!this.root)throw new Error("<skdx-progress-value> must be used inside <skdx-progress>.");this.setAttribute("aria-hidden","true"),this.observer.observe(this.root,{attributeFilter:["value","min","max","indeterminate"]}),this.requestProgressSync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}requestProgressSync(){let e=this.root;e&&(this.label=e.valueLabel??"",e.isMeter?this.removeAttribute("data-state"):this.setAttribute("data-state",e.getAttribute("data-state")??"indeterminate"))}render(){return p`<slot part="value">${this.label}</slot>`}};r.styles=u`
     :host {
       display: block;
     }
-  `,n([p()],r.prototype,"label",2),r=n([m("skdx-progress-value","progress","value")],r);export{r as SkdxProgressValue};
+  `,n([m()],r.prototype,"label",2),r=n([b("skdx-progress-value","progress","value")],r);export{r as SkdxProgressValue};

package/dist/progress/index.cjs

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

package/dist/progress/index.d.cts

@@ -1 +1,2 @@
 export { SkdxProgress } from './Progress.cjs';
+export type { SkdxProgressRange, SkdxProgressRole } from './Progress.cjs';

package/dist/progress/index.d.ts

@@ -1 +1,2 @@
 export { SkdxProgress } from './Progress.js';
+export type { SkdxProgressRange, SkdxProgressRole } from './Progress.js';

package/dist/progress/index.js

@@ -1 +1 @@
-import{SkdxProgress as e}from"./Progress.js";export{e as SkdxProgress};
+import{SkdxProgress as o}from"./Progress.js";export{o as SkdxProgress};

package/dist/progress/primitives.d.cts

@@ -1,9 +1,6 @@
 /**
  * Advanced primitives for `<skdx-progress>` — the parts the recipe composes.
  *
- * Reach for these when the derived anatomy is not the structure you need.
- * The recipe (`<skdx-progress>` from `@skdx/web-components`) is built from exactly these elements.
- *
  * @example
  * ```ts
  * import * as Progress from '@skdx/web-components/primitives/progress';