@rcarls/rc-progress 0.1.0

package/README.md

@@ -0,0 +1,35 @@
+# @rcarls/rc-progress
+
+Native `<progress>` enhancer with a formatted value display, a track and fill
+you can restyle with CSS custom properties, and a built-in fix for the
+indeterminate/undefined-binding footgun.
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-progress](https://richardcarls.github.io/rc-webcomponents/components/rc-progress).
+
+## Styling Hooks
+
+`rc-progress` progressively enhances a direct child `<progress>`. The element
+remains consumer-owned light DOM (so it keeps its native `role="progressbar"`
+and any `id`-based associations), while the component renders its track, fill,
+and value display in shadow DOM.
+
+```html
+<rc-progress display="inline-end" value-text="4 of 10 recipes synced">
+  <progress value="4" max="10" aria-label="Sync progress"></progress>
+</rc-progress>
+```
+
+The component exposes `root`, `control`, `track`, `fill`, and `value-display`
+CSS parts.
+
+## Indeterminate
+
+Toggle the `indeterminate` attribute instead of binding `undefined` to the
+native element's `value`: the component removes/restores the attribute for
+you, avoiding the well-known `<progress>.value = undefined` throw:
+
+```html
+<rc-progress indeterminate>
+  <progress aria-label="Preparing…"></progress>
+</rc-progress>
+```

package/dist/custom-elements.json

@@ -0,0 +1,500 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-progress",
+          "declaration": {
+            "name": "RCProgress",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-progress.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-progress.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Enhances a native `<progress>` with a custom track/fill and an optional\nformatted value display, following the same progressive-enhancement shape\nas `rc-slider`.\n\nDeliberately does one job: it does not render a dialog, own any phase\nstate, or assume anything about where it's placed. Compose it with\n`rc-dialog`, a card, or an inline status row as needed.\n\nLabel association:\n- Explicit `for`/`id`: `<label for=\"sync\">Sync</label><rc-progress><progress id=\"sync\" …></rc-progress>`\n- Direct `aria-label` on the `<progress>`: `<progress aria-label=\"Sync\" …>`\n\nThese patterns all work without JavaScript. The component does not render\na label itself — the consumer is responsible for accessible naming.",
+          "name": "RCProgress",
+          "cssProperties": [
+            {
+              "description": "Track hit-area block size.",
+              "name": "--rc-progress-control-size",
+              "default": "0.5rem"
+            },
+            {
+              "description": "Track length when `orientation=\"vertical\"`.",
+              "name": "--rc-progress-vertical-size",
+              "default": "12.5rem"
+            },
+            {
+              "description": "Gap between track and inline value display.",
+              "name": "--rc-progress-gap",
+              "default": "var(--rc-control-gap)"
+            },
+            {
+              "description": "Unfilled track color.",
+              "name": "--rc-progress-track-background",
+              "default": "CanvasText"
+            },
+            {
+              "description": "Unfilled track opacity.",
+              "name": "--rc-progress-track-opacity",
+              "default": "0.25"
+            },
+            {
+              "description": "Track border radius.",
+              "name": "--rc-progress-track-radius",
+              "default": "var(--rc-control-radius)"
+            },
+            {
+              "description": "Filled track color.",
+              "name": "--rc-progress-fill-background",
+              "default": "var(--rc-accent)"
+            },
+            {
+              "description": "Value display text color.",
+              "name": "--rc-progress-value-color",
+              "default": "var(--rc-text-disabled)"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Root layout wrapper.",
+              "name": "root"
+            },
+            {
+              "description": "Track positioning wrapper.",
+              "name": "control"
+            },
+            {
+              "description": "Visual track.",
+              "name": "track"
+            },
+            {
+              "description": "Filled progress segment.",
+              "name": "fill"
+            },
+            {
+              "description": "Rendered value text.",
+              "name": "value-display"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Place a `<progress>` element here.",
+              "name": ""
+            },
+            {
+              "description": "Optional replacement for the rendered value text.",
+              "name": "value-display"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_defaultValue",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_valueInitialized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "description": "Current progress value.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Initial uncontrolled value. Has no effect after the first host write.",
+              "attribute": "default-value"
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "description": "Maximum progress value, read directly from the native `<progress>`\nchild's own `max` IDL property (native default `1`) rather than\nduplicated as a separate host attribute — the consumer already owns it\nby setting `max` on the slotted `<progress>` element.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When present, the component removes the native `<progress>`'s `value`\nattribute instead of asking the consumer to bind `undefined` to it —\nbinding `undefined` to a live `<progress>.value` throws.",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visual-only dimming; native `<progress>` has no functional disabled state.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "display",
+              "type": {
+                "text": "DisplayValue"
+              },
+              "default": "null",
+              "description": "Controls the live value display.\n\n- Absent (default) — no value shown.\n- `overlay` (or bare `display`) — centered on the bar.\n- `display=\"inline-start\"` — rendered before the track, inline in the grid.\n- `display=\"inline-end\"` — rendered after the track, inline in the grid.",
+              "attribute": "display",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "valueText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Screen-reader value text. When set, forwarded as `aria-valuetext` on the\nnative `<progress>` and used as the default formatted display text.",
+              "attribute": "value-text"
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "description": "Orientation; reflected as an attribute and forwarded to `aria-orientation`.",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_$nativeProgress",
+              "type": {
+                "text": "HTMLProgressElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_completedDispatched",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_nativeValueBeforeIndeterminate",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_progressObserver",
+              "type": {
+                "text": "MutationObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_nativeProgressController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new NativeChildController<HTMLProgressElement>( this, { selector: ':scope > progress', observe: true, onChange: ($progress, $previous) => this._setupProgress($progress, $previous), onMissing: () => { if (import.meta.env.DEV) { warnMissingDirectChild(this, { selector: ':scope > progress', message: '[rc-progress] Requires a child <progress> element.', }); } }, }, )"
+            },
+            {
+              "kind": "field",
+              "name": "_displayText",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_nativeProgressValue",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_setupProgress",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$progress",
+                  "type": {
+                    "text": "HTMLProgressElement | null"
+                  }
+                },
+                {
+                  "name": "$previous",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLProgressElement | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_onDefaultSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_applyInitialValueToNative",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_applyValueToNative",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_applyIndeterminate",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Adds or removes the native `<progress>`'s `value` attribute/property to\nreflect `indeterminate` — the one piece of state this component owns so\nconsumers never bind `undefined` to a live `<progress>.value` themselves."
+            },
+            {
+              "kind": "method",
+              "name": "_syncAriaAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$progress",
+                  "type": {
+                    "text": "HTMLProgressElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_checkComplete",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_fillStyle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "rc-progress-complete",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fires once when `value` reaches `max` while not indeterminate. Does not re-fire on subsequent updates while already at max."
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Current progress value.",
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "value"
+            },
+            {
+              "description": "Initial uncontrolled value. Has no effect after the first host write.",
+              "name": "default-value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "defaultValue"
+            },
+            {
+              "description": "When present, the component removes the native `<progress>`'s `value`\nattribute instead of asking the consumer to bind `undefined` to it —\nbinding `undefined` to a live `<progress>.value` throws.",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "indeterminate"
+            },
+            {
+              "description": "Controls the live value display.\n\n- Absent (default) — no value shown.\n- `overlay` (or bare `display`) — centered on the bar.\n- `display=\"inline-start\"` — rendered before the track, inline in the grid.\n- `display=\"inline-end\"` — rendered after the track, inline in the grid.",
+              "name": "display",
+              "type": {
+                "text": "DisplayValue"
+              },
+              "default": "null",
+              "fieldName": "display"
+            },
+            {
+              "description": "Screen-reader value text. When set, forwarded as `aria-valuetext` on the\nnative `<progress>` and used as the default formatted display text.",
+              "name": "value-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "valueText"
+            },
+            {
+              "description": "Orientation; reflected as an attribute and forwarded to `aria-orientation`.",
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "fieldName": "orientation"
+            },
+            {
+              "description": "Visual-only dimming; native `<progress>` has no functional disabled state.",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-progress",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCProgress",
+          "declaration": {
+            "name": "RCProgress",
+            "module": "src/rc-progress.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCProgress",
+            "module": "src/rc-progress.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/rc-progress-Q8vVdyM1.js

@@ -0,0 +1,316 @@
+import { LitElement as d, css as v, nothing as a, html as h } from "lit";
+import { property as n } from "lit/decorators.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
+import { NativeChildController as f } from "@rcarls/rc-common";
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (i, e, t, l) => {
+  for (var s = l > 1 ? void 0 : l ? _(e, t) : e, u = i.length - 1, p; u >= 0; u--)
+    (p = i[u]) && (s = (l ? p(e, t, s) : p(s)) || s);
+  return l && s && m(e, t, s), s;
+};
+const y = {
+  fromAttribute(i) {
+    return i === null ? null : i === "" || i === "overlay" ? "overlay" : i === "inline-start" ? "inline-start" : i === "inline-end" ? "inline-end" : null;
+  },
+  toAttribute(i) {
+    return i;
+  }
+}, c = class c extends d {
+  constructor() {
+    super(...arguments), this._valueInitialized = !1, this.indeterminate = !1, this.disabled = !1, this.display = null, this.valueText = "", this.orientation = "horizontal", this._$nativeProgress = null, this._completedDispatched = !1, this._progressObserver = null, this._nativeProgressController = new f(
+      this,
+      {
+        selector: ":scope > progress",
+        observe: !0,
+        onChange: (e, t) => this._setupProgress(e, t),
+        onMissing: () => {
+        }
+      }
+    ), this._onDefaultSlotChange = () => {
+      this._nativeProgressController.sync(), this.requestUpdate();
+    };
+  }
+  get value() {
+    return this._value ?? this._defaultValue ?? this._nativeProgressValue;
+  }
+  set value(e) {
+    const t = this.value;
+    this._value = e ?? void 0, this._valueInitialized = !0, this._applyValueToNative(this.value), this.requestUpdate("value", t);
+  }
+  get defaultValue() {
+    return this._defaultValue;
+  }
+  set defaultValue(e) {
+    const t = this._defaultValue;
+    this._defaultValue = e, !this._valueInitialized && this._value === void 0 && e !== void 0 && (this._applyValueToNative(e), this.requestUpdate("value", void 0)), this.requestUpdate("defaultValue", t);
+  }
+  /**
+   * Maximum progress value, read directly from the native `<progress>`
+   * child's own `max` IDL property (native default `1`) rather than
+   * duplicated as a separate host attribute — the consumer already owns it
+   * by setting `max` on the slotted `<progress>` element.
+   */
+  get max() {
+    return this._$nativeProgress?.max ?? 1;
+  }
+  disconnectedCallback() {
+    this._progressObserver?.disconnect(), super.disconnectedCallback();
+  }
+  updated(e) {
+    const t = this._$nativeProgress;
+    t && this._syncAriaAttributes(t), e.has("indeterminate") && this._applyIndeterminate(), (e.has("value") || e.has("indeterminate")) && this._checkComplete();
+  }
+  render() {
+    if (!this._$nativeProgress)
+      return a;
+    const t = h`
+      <span part="value-display" class="rc-progress-value" aria-hidden="true">
+        <slot name="value-display">${this._displayText}</slot>
+      </span>
+    `;
+    return h`
+      <div
+        part="root"
+        class="rc-progress-root"
+        data-display=${this.display ?? a}
+        data-orientation=${this.orientation}
+        data-disabled=${this.disabled ? "" : a}
+        data-has-value-text=${this.valueText ? "" : a}
+      >
+        ${this.display === "inline-start" ? t : a}
+
+        <span part="control" class="rc-progress-control">
+          <span part="track" class="rc-progress-track" aria-hidden="true">
+            <span
+              part="fill"
+              class="rc-progress-fill"
+              style=${g(this.indeterminate ? void 0 : this._fillStyle())}
+            ></span>
+          </span>
+
+          <slot @slotchange=${this._onDefaultSlotChange}></slot>
+          ${this.display === "overlay" ? t : a}
+        </span>
+
+        ${this.display === "inline-end" ? t : a}
+      </div>
+    `;
+  }
+  get _displayText() {
+    if (this.valueText)
+      return this.valueText;
+    if (this.indeterminate)
+      return "";
+    const e = this.max > 0 ? this.value / this.max * 100 : 0;
+    return `${Math.round(e)}%`;
+  }
+  get _nativeProgressValue() {
+    const e = this._$nativeProgress?.value;
+    return e === void 0 || isNaN(e) ? 0 : e;
+  }
+  _setupProgress(e, t) {
+    if (this._progressObserver?.disconnect(), this._progressObserver = null, !e) {
+      this._$nativeProgress = null;
+      return;
+    }
+    this._$nativeProgress = e, this._applyInitialValueToNative(), this._applyIndeterminate(), typeof MutationObserver == "function" && (this._progressObserver = new MutationObserver(() => {
+      this.indeterminate && this._applyIndeterminate(), this.requestUpdate(), this._checkComplete();
+    }), this._progressObserver.observe(e, {
+      attributes: !0,
+      attributeFilter: ["max", "value"]
+    })), this.requestUpdate();
+  }
+  _applyInitialValueToNative() {
+    if (this._value !== void 0) {
+      this._applyValueToNative(this._value);
+      return;
+    }
+    if (this._defaultValue !== void 0) {
+      this._applyValueToNative(this._defaultValue);
+      return;
+    }
+  }
+  _applyValueToNative(e) {
+    !this._$nativeProgress || this.indeterminate || (this._$nativeProgress.value = e);
+  }
+  /**
+   * Adds or removes the native `<progress>`'s `value` attribute/property to
+   * reflect `indeterminate` — the one piece of state this component owns so
+   * consumers never bind `undefined` to a live `<progress>.value` themselves.
+   */
+  _applyIndeterminate() {
+    const e = this._$nativeProgress;
+    e && (this.indeterminate ? (e.hasAttribute("value") && (this._nativeValueBeforeIndeterminate = e.value), e.removeAttribute("value")) : (e.value = this._value ?? this._defaultValue ?? this._nativeValueBeforeIndeterminate ?? this._nativeProgressValue, this._nativeValueBeforeIndeterminate = void 0));
+  }
+  _syncAriaAttributes(e) {
+    this.valueText ? e.setAttribute("aria-valuetext", this.valueText) : e.removeAttribute("aria-valuetext"), this.orientation === "vertical" ? e.setAttribute("aria-orientation", "vertical") : e.removeAttribute("aria-orientation");
+  }
+  _checkComplete() {
+    const e = !this.indeterminate && this.max > 0 && this.value >= this.max;
+    e && !this._completedDispatched ? (this._completedDispatched = !0, this.dispatchEvent(
+      new CustomEvent("rc-progress-complete", { bubbles: !0, composed: !0 })
+    )) : e || (this._completedDispatched = !1);
+  }
+  _fillStyle() {
+    const e = this.max > 0 ? Math.min(100, Math.max(0, this.value / this.max * 100)) : 0;
+    return this.orientation === "vertical" ? `inset-block-start:${(100 - e).toFixed(3)}%;block-size:${e.toFixed(3)}%` : `inline-size:${e.toFixed(3)}%`;
+  }
+};
+c.styles = v`
+    :host {
+      display: block;
+    }
+
+    .rc-progress-root {
+      display: grid;
+      gap: var(--rc-progress-gap, var(--rc-control-gap, 0.5rem));
+      align-items: center;
+      font-family: var(--rc-font-family, inherit);
+      font-size: var(--rc-font-size, inherit);
+      line-height: var(--rc-line-height, normal);
+    }
+
+    .rc-progress-root[data-display='inline-start'] {
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    .rc-progress-root[data-display='inline-end'] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+
+    .rc-progress-control {
+      position: relative;
+      display: block;
+      min-width: 0;
+      /*
+       * Everything this wraps (the track, the fill, the slotted <progress>)
+       * is position: absolute, contributing nothing to normal-flow height.
+       * Without an explicit block-size here, this collapses to 0px and the
+       * whole bar renders invisible whenever no value-display text (the
+       * only other thing that could give the shared grid row a height) is
+       * shown alongside it — the default, since display is unset unless a
+       * consumer opts into inline-start/inline-end/overlay.
+       */
+      block-size: var(--rc-progress-control-size, 0.5rem);
+    }
+
+    .rc-progress-track,
+    .rc-progress-fill {
+      position: absolute;
+      pointer-events: none;
+    }
+
+    .rc-progress-track {
+      inset: 0;
+      block-size: var(--rc-progress-control-size, 0.5rem);
+      background: var(--rc-progress-track-background, CanvasText);
+      opacity: var(--rc-progress-track-opacity, 0.25);
+      border-radius: var(--rc-progress-track-radius, var(--rc-control-radius, 0));
+      overflow: hidden;
+      z-index: 0;
+    }
+
+    ::slotted(progress) {
+      position: absolute;
+      inset: 0;
+      inline-size: 100%;
+      block-size: 100%;
+      margin: 0;
+      opacity: 0;
+      z-index: 2;
+    }
+
+    .rc-progress-fill {
+      inset-block: 0;
+      inset-inline-start: 0;
+      background: var(--rc-progress-fill-background, var(--rc-accent, Highlight));
+      border-radius: inherit;
+      z-index: 1;
+      transition: inline-size 0.15s ease-out;
+    }
+
+    :host([indeterminate]) .rc-progress-fill {
+      inline-size: 40% !important;
+      animation: rc-progress-indeterminate 1.4s ease-in-out infinite;
+    }
+
+    @keyframes rc-progress-indeterminate {
+      0% {
+        inset-inline-start: -40%;
+      }
+      100% {
+        inset-inline-start: 100%;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([indeterminate]) .rc-progress-fill {
+        animation: none;
+        inset-inline-start: 0;
+      }
+    }
+
+    .rc-progress-value {
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+      color: var(--rc-progress-value-color, var(--rc-text-disabled, GrayText));
+    }
+
+    .rc-progress-root[data-display='overlay'] .rc-progress-value {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      z-index: 3;
+    }
+
+    :host([orientation='vertical']) {
+      display: inline-block;
+    }
+
+    :host([orientation='vertical']) .rc-progress-control {
+      inline-size: var(--rc-progress-control-size, 0.5rem);
+      block-size: var(--rc-progress-vertical-size, 12.5rem);
+    }
+
+    :host([orientation='vertical']) .rc-progress-track {
+      inline-size: var(--rc-progress-control-size, 0.5rem);
+      block-size: auto;
+    }
+
+    :host([orientation='vertical']) .rc-progress-fill {
+      inset-inline: 0;
+      inset-block-start: auto;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+    }
+  `;
+let r = c;
+o([
+  n({ type: Number })
+], r.prototype, "value", 1);
+o([
+  n({ type: Number, attribute: "default-value" })
+], r.prototype, "defaultValue", 1);
+o([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "indeterminate", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+o([
+  n({ reflect: !0, converter: y })
+], r.prototype, "display", 2);
+o([
+  n({ attribute: "value-text" })
+], r.prototype, "valueText", 2);
+o([
+  n({ reflect: !0 })
+], r.prototype, "orientation", 2);
+export {
+  r as R
+};
+//# sourceMappingURL=rc-progress-Q8vVdyM1.js.map

package/dist/rc-progress-Q8vVdyM1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-progress-Q8vVdyM1.js","sources":["../src/rc-progress.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport type { ComplexAttributeConverter, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { NativeChildController, warnMissingDirectChild } from '@rcarls/rc-common';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-progress': RCProgress;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-progress-complete': CustomEvent<Record<string, never>>;\n  }\n}\n\ntype DisplayValue = 'inline-start' | 'inline-end' | 'overlay' | null;\n\n/**\n * Normalises the `display` attribute.\n * A bare boolean attribute (`display` with no value) maps to `'overlay'` so\n * the reflected attribute is always an explicit string, never an empty string.\n */\nconst displayConverter: ComplexAttributeConverter<DisplayValue> = {\n  fromAttribute(v: string | null): DisplayValue {\n    if (v === null) {\n      return null;\n    }\n\n    if (v === '' || v === 'overlay') {\n      return 'overlay';\n    }\n\n    if (v === 'inline-start') {\n      return 'inline-start';\n    }\n\n    if (v === 'inline-end') {\n      return 'inline-end';\n    }\n\n    return null;\n  },\n  toAttribute(v: DisplayValue): string | null {\n    return v;\n  },\n};\n\n/**\n * Enhances a native `<progress>` with a custom track/fill and an optional\n * formatted value display, following the same progressive-enhancement shape\n * as `rc-slider`.\n *\n * Deliberately does one job: it does not render a dialog, own any phase\n * state, or assume anything about where it's placed. Compose it with\n * `rc-dialog`, a card, or an inline status row as needed.\n *\n * Label association:\n * - Explicit `for`/`id`: `<label for=\"sync\">Sync</label><rc-progress><progress id=\"sync\" …></rc-progress>`\n * - Direct `aria-label` on the `<progress>`: `<progress aria-label=\"Sync\" …>`\n *\n * These patterns all work without JavaScript. The component does not render\n * a label itself — the consumer is responsible for accessible naming.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-progress rc-progress docs}\n *\n * @slot - Place a `<progress>` element here.\n * @slot value-display - Optional replacement for the rendered value text.\n *\n * @fires rc-progress-complete - Fires once when `value` reaches `max` while\n *   not indeterminate. Does not re-fire on subsequent updates while already\n *   at max.\n *\n * @attr value - Current progress value. Host writes are silent.\n * @attr default-value - Initial uncontrolled value. Has no effect after the first\n *   host write.\n * @attr indeterminate - When present, the component removes the native `<progress>`'s\n *   `value` attribute instead of asking the consumer to bind `undefined` to it.\n * @attr display - Controls the live value display: absent (none), `overlay` (centered on\n *   the bar), `inline-start`, or `inline-end`.\n * @attr value-text - Screen-reader value text, forwarded as `aria-valuetext` on the\n *   native `<progress>`. Also used as the default formatted display text when set.\n * @attr orientation - Orientation, forwarded to `aria-orientation`: `horizontal` or\n *   `vertical`.\n * @attr disabled - Visual-only dimming; native `<progress>` has no functional disabled state.\n *\n * @cssprop [--rc-progress-control-size=0.5rem] - Track hit-area block size.\n * @cssprop [--rc-progress-vertical-size=12.5rem] - Track length when `orientation=\"vertical\"`.\n * @cssprop [--rc-progress-gap=var(--rc-control-gap)] - Gap between track and inline value display.\n * @cssprop [--rc-progress-track-background=CanvasText] - Unfilled track color.\n * @cssprop [--rc-progress-track-opacity=0.25] - Unfilled track opacity.\n * @cssprop [--rc-progress-track-radius=var(--rc-control-radius)] - Track border radius.\n * @cssprop [--rc-progress-fill-background=var(--rc-accent)] - Filled track color.\n * @cssprop [--rc-progress-value-color=var(--rc-text-disabled)] - Value display text color.\n *\n * @csspart root - Root layout wrapper.\n * @csspart control - Track positioning wrapper.\n * @csspart track - Visual track.\n * @csspart fill - Filled progress segment.\n * @csspart value-display - Rendered value text.\n */\nexport class RCProgress extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n    }\n\n    .rc-progress-root {\n      display: grid;\n      gap: var(--rc-progress-gap, var(--rc-control-gap, 0.5rem));\n      align-items: center;\n      font-family: var(--rc-font-family, inherit);\n      font-size: var(--rc-font-size, inherit);\n      line-height: var(--rc-line-height, normal);\n    }\n\n    .rc-progress-root[data-display='inline-start'] {\n      grid-template-columns: auto minmax(0, 1fr);\n    }\n\n    .rc-progress-root[data-display='inline-end'] {\n      grid-template-columns: minmax(0, 1fr) auto;\n    }\n\n    .rc-progress-control {\n      position: relative;\n      display: block;\n      min-width: 0;\n      /*\n       * Everything this wraps (the track, the fill, the slotted <progress>)\n       * is position: absolute, contributing nothing to normal-flow height.\n       * Without an explicit block-size here, this collapses to 0px and the\n       * whole bar renders invisible whenever no value-display text (the\n       * only other thing that could give the shared grid row a height) is\n       * shown alongside it — the default, since display is unset unless a\n       * consumer opts into inline-start/inline-end/overlay.\n       */\n      block-size: var(--rc-progress-control-size, 0.5rem);\n    }\n\n    .rc-progress-track,\n    .rc-progress-fill {\n      position: absolute;\n      pointer-events: none;\n    }\n\n    .rc-progress-track {\n      inset: 0;\n      block-size: var(--rc-progress-control-size, 0.5rem);\n      background: var(--rc-progress-track-background, CanvasText);\n      opacity: var(--rc-progress-track-opacity, 0.25);\n      border-radius: var(--rc-progress-track-radius, var(--rc-control-radius, 0));\n      overflow: hidden;\n      z-index: 0;\n    }\n\n    ::slotted(progress) {\n      position: absolute;\n      inset: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      margin: 0;\n      opacity: 0;\n      z-index: 2;\n    }\n\n    .rc-progress-fill {\n      inset-block: 0;\n      inset-inline-start: 0;\n      background: var(--rc-progress-fill-background, var(--rc-accent, Highlight));\n      border-radius: inherit;\n      z-index: 1;\n      transition: inline-size 0.15s ease-out;\n    }\n\n    :host([indeterminate]) .rc-progress-fill {\n      inline-size: 40% !important;\n      animation: rc-progress-indeterminate 1.4s ease-in-out infinite;\n    }\n\n    @keyframes rc-progress-indeterminate {\n      0% {\n        inset-inline-start: -40%;\n      }\n      100% {\n        inset-inline-start: 100%;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host([indeterminate]) .rc-progress-fill {\n        animation: none;\n        inset-inline-start: 0;\n      }\n    }\n\n    .rc-progress-value {\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n      color: var(--rc-progress-value-color, var(--rc-text-disabled, GrayText));\n    }\n\n    .rc-progress-root[data-display='overlay'] .rc-progress-value {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      pointer-events: none;\n      z-index: 3;\n    }\n\n    :host([orientation='vertical']) {\n      display: inline-block;\n    }\n\n    :host([orientation='vertical']) .rc-progress-control {\n      inline-size: var(--rc-progress-control-size, 0.5rem);\n      block-size: var(--rc-progress-vertical-size, 12.5rem);\n    }\n\n    :host([orientation='vertical']) .rc-progress-track {\n      inline-size: var(--rc-progress-control-size, 0.5rem);\n      block-size: auto;\n    }\n\n    :host([orientation='vertical']) .rc-progress-fill {\n      inset-inline: 0;\n      inset-block-start: auto;\n    }\n\n    :host([disabled]) {\n      opacity: 0.5;\n    }\n  `;\n\n  private _value: number | undefined;\n  private _defaultValue: number | undefined;\n  private _valueInitialized = false;\n\n  /** Current progress value. */\n  @property({ type: Number })\n  get value(): number {\n    return this._value ?? this._defaultValue ?? this._nativeProgressValue;\n  }\n\n  set value(value: number | undefined) {\n    const oldValue = this.value;\n\n    this._value = value ?? undefined;\n    this._valueInitialized = true;\n    this._applyValueToNative(this.value);\n    this.requestUpdate('value', oldValue);\n  }\n\n  /** Initial uncontrolled value. Has no effect after the first host write. */\n  @property({ type: Number, attribute: 'default-value' })\n  get defaultValue(): number | undefined {\n    return this._defaultValue;\n  }\n\n  set defaultValue(value: number | undefined) {\n    const oldValue = this._defaultValue;\n\n    this._defaultValue = value;\n\n    if (!this._valueInitialized && this._value === undefined && value !== undefined) {\n      this._applyValueToNative(value);\n      this.requestUpdate('value', undefined);\n    }\n\n    this.requestUpdate('defaultValue', oldValue);\n  }\n\n  /**\n   * Maximum progress value, read directly from the native `<progress>`\n   * child's own `max` IDL property (native default `1`) rather than\n   * duplicated as a separate host attribute — the consumer already owns it\n   * by setting `max` on the slotted `<progress>` element.\n   */\n  get max(): number {\n    return this._$nativeProgress?.max ?? 1;\n  }\n\n  /**\n   * When present, the component removes the native `<progress>`'s `value`\n   * attribute instead of asking the consumer to bind `undefined` to it —\n   * binding `undefined` to a live `<progress>.value` throws.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Visual-only dimming; native `<progress>` has no functional disabled state. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Controls the live value display.\n   *\n   * - Absent (default) — no value shown.\n   * - `overlay` (or bare `display`) — centered on the bar.\n   * - `display=\"inline-start\"` — rendered before the track, inline in the grid.\n   * - `display=\"inline-end\"` — rendered after the track, inline in the grid.\n   */\n  @property({ reflect: true, converter: displayConverter })\n  display: DisplayValue = null;\n\n  /**\n   * Screen-reader value text. When set, forwarded as `aria-valuetext` on the\n   * native `<progress>` and used as the default formatted display text.\n   */\n  @property({ attribute: 'value-text' }) valueText = '';\n\n  /** Orientation; reflected as an attribute and forwarded to `aria-orientation`. */\n  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private _$nativeProgress: HTMLProgressElement | null = null;\n  private _completedDispatched = false;\n  private _nativeValueBeforeIndeterminate: number | undefined;\n  private _progressObserver: MutationObserver | null = null;\n\n  private readonly _nativeProgressController = new NativeChildController<HTMLProgressElement>(\n    this,\n    {\n      selector: ':scope > progress',\n      observe: true,\n      onChange: ($progress, $previous) => this._setupProgress($progress, $previous),\n      onMissing: () => {\n        if (import.meta.env.DEV) {\n          warnMissingDirectChild(this, {\n            selector: ':scope > progress',\n            message: '[rc-progress] Requires a child <progress> element.',\n          });\n        }\n      },\n    },\n  );\n\n  override disconnectedCallback(): void {\n    this._progressObserver?.disconnect();\n\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    const $progress = this._$nativeProgress;\n\n    if ($progress) {\n      this._syncAriaAttributes($progress);\n    }\n\n    if (changed.has('indeterminate')) {\n      this._applyIndeterminate();\n    }\n\n    if (changed.has('value') || changed.has('indeterminate')) {\n      this._checkComplete();\n    }\n  }\n\n  override render() {\n    const $progress = this._$nativeProgress;\n\n    if (!$progress) {\n      return nothing;\n    }\n\n    const valueDisplay = html`\n      <span part=\"value-display\" class=\"rc-progress-value\" aria-hidden=\"true\">\n        <slot name=\"value-display\">${this._displayText}</slot>\n      </span>\n    `;\n\n    return html`\n      <div\n        part=\"root\"\n        class=\"rc-progress-root\"\n        data-display=${this.display ?? nothing}\n        data-orientation=${this.orientation}\n        data-disabled=${this.disabled ? '' : nothing}\n        data-has-value-text=${this.valueText ? '' : nothing}\n      >\n        ${this.display === 'inline-start' ? valueDisplay : nothing}\n\n        <span part=\"control\" class=\"rc-progress-control\">\n          <span part=\"track\" class=\"rc-progress-track\" aria-hidden=\"true\">\n            <span\n              part=\"fill\"\n              class=\"rc-progress-fill\"\n              style=${ifDefined(this.indeterminate ? undefined : this._fillStyle())}\n            ></span>\n          </span>\n\n          <slot @slotchange=${this._onDefaultSlotChange}></slot>\n          ${this.display === 'overlay' ? valueDisplay : nothing}\n        </span>\n\n        ${this.display === 'inline-end' ? valueDisplay : nothing}\n      </div>\n    `;\n  }\n\n  private get _displayText(): string {\n    if (this.valueText) {\n      return this.valueText;\n    }\n\n    if (this.indeterminate) {\n      return '';\n    }\n\n    const percent = this.max > 0 ? (this.value / this.max) * 100 : 0;\n\n    return `${Math.round(percent)}%`;\n  }\n\n  private get _nativeProgressValue(): number {\n    const value = this._$nativeProgress?.value;\n\n    return value === undefined || isNaN(value) ? 0 : value;\n  }\n\n  private _setupProgress(\n    $progress: HTMLProgressElement | null,\n    $previous?: HTMLProgressElement | null,\n  ): void {\n    void $previous;\n\n    this._progressObserver?.disconnect();\n    this._progressObserver = null;\n\n    if (!$progress) {\n      this._$nativeProgress = null;\n\n      return;\n    }\n\n    this._$nativeProgress = $progress;\n    this._applyInitialValueToNative();\n    this._applyIndeterminate();\n\n    if (typeof MutationObserver === 'function') {\n      this._progressObserver = new MutationObserver(() => {\n        if (this.indeterminate) {\n          this._applyIndeterminate();\n        }\n\n        this.requestUpdate();\n        this._checkComplete();\n      });\n\n      this._progressObserver.observe($progress, {\n        attributes: true,\n        attributeFilter: ['max', 'value'],\n      });\n    }\n\n    this.requestUpdate();\n  }\n\n  private _onDefaultSlotChange = (): void => {\n    this._nativeProgressController.sync();\n    this.requestUpdate();\n  };\n\n  private _applyInitialValueToNative(): void {\n    if (this._value !== undefined) {\n      this._applyValueToNative(this._value);\n\n      return;\n    }\n\n    if (this._defaultValue !== undefined) {\n      this._applyValueToNative(this._defaultValue);\n\n      return;\n    }\n\n    // With no host-owned value, keep reading the live native control rather\n    // than copying its initial value into component state. This preserves the\n    // native element as the uncontrolled source of truth.\n  }\n\n  private _applyValueToNative(value: number): void {\n    if (!this._$nativeProgress || this.indeterminate) {\n      return;\n    }\n\n    this._$nativeProgress.value = value;\n  }\n\n  /**\n   * Adds or removes the native `<progress>`'s `value` attribute/property to\n   * reflect `indeterminate` — the one piece of state this component owns so\n   * consumers never bind `undefined` to a live `<progress>.value` themselves.\n   */\n  private _applyIndeterminate(): void {\n    const $progress = this._$nativeProgress;\n\n    if (!$progress) {\n      return;\n    }\n\n    if (this.indeterminate) {\n      if ($progress.hasAttribute('value')) {\n        this._nativeValueBeforeIndeterminate = $progress.value;\n      }\n\n      $progress.removeAttribute('value');\n    } else {\n      $progress.value =\n        this._value ??\n        this._defaultValue ??\n        this._nativeValueBeforeIndeterminate ??\n        this._nativeProgressValue;\n\n      this._nativeValueBeforeIndeterminate = undefined;\n    }\n  }\n\n  private _syncAriaAttributes($progress: HTMLProgressElement): void {\n    if (this.valueText) {\n      $progress.setAttribute('aria-valuetext', this.valueText);\n    } else {\n      $progress.removeAttribute('aria-valuetext');\n    }\n\n    if (this.orientation === 'vertical') {\n      $progress.setAttribute('aria-orientation', 'vertical');\n    } else {\n      $progress.removeAttribute('aria-orientation');\n    }\n  }\n\n  private _checkComplete(): void {\n    const isComplete = !this.indeterminate && this.max > 0 && this.value >= this.max;\n\n    if (isComplete && !this._completedDispatched) {\n      this._completedDispatched = true;\n\n      this.dispatchEvent(\n        new CustomEvent('rc-progress-complete', { bubbles: true, composed: true }),\n      );\n    } else if (!isComplete) {\n      this._completedDispatched = false;\n    }\n  }\n\n  private _fillStyle(): string {\n    const percent = this.max > 0 ? Math.min(100, Math.max(0, (this.value / this.max) * 100)) : 0;\n\n    if (this.orientation === 'vertical') {\n      return `inset-block-start:${(100 - percent).toFixed(3)}%;block-size:${percent.toFixed(3)}%`;\n    }\n\n    return `inline-size:${percent.toFixed(3)}%`;\n  }\n}\n\nexport default RCProgress;\n"],"names":["displayConverter","v","_RCProgress","LitElement","NativeChildController","$progress","$previous","value","oldValue","changed","nothing","valueDisplay","html","ifDefined","percent","isComplete","css","RCProgress","__decorateClass","property"],"mappings":"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"}

package/dist/rc-progress-define.js

@@ -0,0 +1,6 @@
+import { R as e } from "./rc-progress-Q8vVdyM1.js";
+customElements.get("rc-progress") || customElements.define("rc-progress", e);
+export {
+  e as RCProgress
+};
+//# sourceMappingURL=rc-progress-define.js.map

package/dist/rc-progress-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-progress-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCProgress } from './index.js';\n\ncustomElements.get('rc-progress') || customElements.define('rc-progress', RCProgress);\n\nexport * from './index.js';\n"],"names":["RCProgress"],"mappings":";AAEA,eAAe,IAAI,aAAa,KAAK,eAAe,OAAO,eAAeA,CAAU;"}

package/dist/rc-progress.js

@@ -0,0 +1,5 @@
+import { R as s } from "./rc-progress-Q8vVdyM1.js";
+export {
+  s as RCProgress
+};
+//# sourceMappingURL=rc-progress.js.map

package/dist/rc-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-progress.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-progress/src/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/packages/rc-progress/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-progress.js';

package/dist/types/packages/rc-progress/src/rc-progress.d.ts

@@ -0,0 +1,130 @@
+import { LitElement, nothing, PropertyValues } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-progress': RCProgress;
+    }
+    interface HTMLElementEventMap {
+        'rc-progress-complete': CustomEvent<Record<string, never>>;
+    }
+}
+type DisplayValue = 'inline-start' | 'inline-end' | 'overlay' | null;
+/**
+ * Enhances a native `<progress>` with a custom track/fill and an optional
+ * formatted value display, following the same progressive-enhancement shape
+ * as `rc-slider`.
+ *
+ * Deliberately does one job: it does not render a dialog, own any phase
+ * state, or assume anything about where it's placed. Compose it with
+ * `rc-dialog`, a card, or an inline status row as needed.
+ *
+ * Label association:
+ * - Explicit `for`/`id`: `<label for="sync">Sync</label><rc-progress><progress id="sync" …></rc-progress>`
+ * - Direct `aria-label` on the `<progress>`: `<progress aria-label="Sync" …>`
+ *
+ * These patterns all work without JavaScript. The component does not render
+ * a label itself — the consumer is responsible for accessible naming.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-progress rc-progress docs}
+ *
+ * @slot - Place a `<progress>` element here.
+ * @slot value-display - Optional replacement for the rendered value text.
+ *
+ * @fires rc-progress-complete - Fires once when `value` reaches `max` while
+ *   not indeterminate. Does not re-fire on subsequent updates while already
+ *   at max.
+ *
+ * @attr value - Current progress value. Host writes are silent.
+ * @attr default-value - Initial uncontrolled value. Has no effect after the first
+ *   host write.
+ * @attr indeterminate - When present, the component removes the native `<progress>`'s
+ *   `value` attribute instead of asking the consumer to bind `undefined` to it.
+ * @attr display - Controls the live value display: absent (none), `overlay` (centered on
+ *   the bar), `inline-start`, or `inline-end`.
+ * @attr value-text - Screen-reader value text, forwarded as `aria-valuetext` on the
+ *   native `<progress>`. Also used as the default formatted display text when set.
+ * @attr orientation - Orientation, forwarded to `aria-orientation`: `horizontal` or
+ *   `vertical`.
+ * @attr disabled - Visual-only dimming; native `<progress>` has no functional disabled state.
+ *
+ * @cssprop [--rc-progress-control-size=0.5rem] - Track hit-area block size.
+ * @cssprop [--rc-progress-vertical-size=12.5rem] - Track length when `orientation="vertical"`.
+ * @cssprop [--rc-progress-gap=var(--rc-control-gap)] - Gap between track and inline value display.
+ * @cssprop [--rc-progress-track-background=CanvasText] - Unfilled track color.
+ * @cssprop [--rc-progress-track-opacity=0.25] - Unfilled track opacity.
+ * @cssprop [--rc-progress-track-radius=var(--rc-control-radius)] - Track border radius.
+ * @cssprop [--rc-progress-fill-background=var(--rc-accent)] - Filled track color.
+ * @cssprop [--rc-progress-value-color=var(--rc-text-disabled)] - Value display text color.
+ *
+ * @csspart root - Root layout wrapper.
+ * @csspart control - Track positioning wrapper.
+ * @csspart track - Visual track.
+ * @csspart fill - Filled progress segment.
+ * @csspart value-display - Rendered value text.
+ */
+export declare class RCProgress extends LitElement {
+    static styles: import('lit').CSSResult;
+    private _value;
+    private _defaultValue;
+    private _valueInitialized;
+    /** Current progress value. */
+    get value(): number;
+    set value(value: number | undefined);
+    /** Initial uncontrolled value. Has no effect after the first host write. */
+    get defaultValue(): number | undefined;
+    set defaultValue(value: number | undefined);
+    /**
+     * Maximum progress value, read directly from the native `<progress>`
+     * child's own `max` IDL property (native default `1`) rather than
+     * duplicated as a separate host attribute — the consumer already owns it
+     * by setting `max` on the slotted `<progress>` element.
+     */
+    get max(): number;
+    /**
+     * When present, the component removes the native `<progress>`'s `value`
+     * attribute instead of asking the consumer to bind `undefined` to it —
+     * binding `undefined` to a live `<progress>.value` throws.
+     */
+    indeterminate: boolean;
+    /** Visual-only dimming; native `<progress>` has no functional disabled state. */
+    disabled: boolean;
+    /**
+     * Controls the live value display.
+     *
+     * - Absent (default) — no value shown.
+     * - `overlay` (or bare `display`) — centered on the bar.
+     * - `display="inline-start"` — rendered before the track, inline in the grid.
+     * - `display="inline-end"` — rendered after the track, inline in the grid.
+     */
+    display: DisplayValue;
+    /**
+     * Screen-reader value text. When set, forwarded as `aria-valuetext` on the
+     * native `<progress>` and used as the default formatted display text.
+     */
+    valueText: string;
+    /** Orientation; reflected as an attribute and forwarded to `aria-orientation`. */
+    orientation: 'horizontal' | 'vertical';
+    private _$nativeProgress;
+    private _completedDispatched;
+    private _nativeValueBeforeIndeterminate;
+    private _progressObserver;
+    private readonly _nativeProgressController;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    render(): typeof nothing | import('lit').TemplateResult<1>;
+    private get _displayText();
+    private get _nativeProgressValue();
+    private _setupProgress;
+    private _onDefaultSlotChange;
+    private _applyInitialValueToNative;
+    private _applyValueToNative;
+    /**
+     * Adds or removes the native `<progress>`'s `value` attribute/property to
+     * reflect `indeterminate` — the one piece of state this component owns so
+     * consumers never bind `undefined` to a live `<progress>.value` themselves.
+     */
+    private _applyIndeterminate;
+    private _syncAriaAttributes;
+    private _checkComplete;
+    private _fillStyle;
+}
+export default RCProgress;

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@rcarls/rc-progress",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Native <progress> enhancer with a formatted value display, restyleable track/fill, and a built-in fix for the indeterminate/undefined-binding footgun.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-progress"
+  },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-progress",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-progress.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-progress/src/index.d.ts",
+        "default": "./dist/rc-progress.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-progress/src/define.d.ts",
+        "default": "./dist/rc-progress-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-progress/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-progress-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "dependencies": {
+    "@rcarls/rc-common": "0.5.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}