@rcarls/rc-slider 0.2.0 → 0.3.0

package/README.md

@@ -1,7 +1,8 @@
 # @rcarls/rc-slider
 
-Styled range input web component with composable shadow-DOM track and value
-display hooks.
+Single-thumb slider backed by a native `<input type="range">` with custom track and value display hooks, following the [WAI-ARIA Slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-slider](https://richardcarls.github.io/rc-webcomponents/components/rc-slider).
 
 ## Styling Hooks
 

package/dist/custom-elements.json

@@ -46,7 +46,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Progressive enhancement wrapper for a consumer-provided `<input type=\"range\">`.\nThe native input must be supplied as a direct child element — the component\nadds a styled track, optional live value display, and the APG keyboard\nenhancement (Page Up/Down, ±10 steps).\n\nLabel association:\n- Explicit `for`/`id`: `<label for=\"vol\">Volume</label><rc-slider><input id=\"vol\" …></rc-slider>`\n- Direct `aria-label` on the input: `<input aria-label=\"Volume\" …>`\n\nThese patterns all work without JavaScript. The component does not render a\nlabel element itself — the consumer is responsible for accessible naming.\n\nForm participation is handled natively by the consumer-provided input's `name`\nattribute; no `ElementInternals` setup is required.",
+          "description": "Single-thumb slider backed by a native <input type=\"range\"> with custom track and value\ndisplay hooks, following the WAI-ARIA Slider pattern.\n\nLabel association:\n- Explicit `for`/`id`: `<label for=\"vol\">Volume</label><rc-slider><input id=\"vol\" …></rc-slider>`\n- Direct `aria-label` on the input: `<input aria-label=\"Volume\" …>`\n\nThese patterns all work without JavaScript. The component does not render a\nlabel element itself — the consumer is responsible for accessible naming.\n\nForm participation is handled natively by the consumer-provided input's `name`\nattribute; no `ElementInternals` setup is required.",
           "name": "RCSlider",
           "cssProperties": [
             {
@@ -274,6 +274,13 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_nativeInputController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new NativeChildController<HTMLInputElement>(this, { selector: ':scope > input[type=\"range\"]', observe: true, onChange: (input, previous) => this._setupInput(input, previous), onMissing: () => { if (import.meta.env.DEV) { warnMissingDirectChild(this, { selector: ':scope > input[type=\"range\"]', message: '[rc-slider] Requires a child <input type=\"range\"> element.', }); } }, })"
+            },
             {
               "kind": "field",
               "name": "_displayText",
@@ -294,14 +301,28 @@
             },
             {
               "kind": "method",
-              "name": "_findInput",
+              "name": "_setupInput",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Finds the consumer-provided native input and wires event listeners.\nThe input remains in the DOM permanently; the component enhances it\nrather than replacing it."
+              "parameters": [
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "HTMLInputElement | null"
+                  }
+                },
+                {
+                  "name": "previous",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLInputElement | null"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -370,7 +391,13 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "input",
+                  "default": "this._nativeInput"
+                }
+              ]
             },
             {
               "kind": "method",

package/dist/{rc-slider-DOhtdJxO.js → rc-slider-CPApkY9I.js}

@@ -1,13 +1,13 @@
 import { LitElement as f, css as m, nothing as o, html as h } from "lit";
-import { property as s } from "lit/decorators.js";
+import { property as n } from "lit/decorators.js";
 import { ifDefined as y } from "lit/directives/if-defined.js";
-import { valueToPercent as v } from "@rcarls/rc-common";
-var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (r, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? _(t, e) : t, u = r.length - 1, c; u >= 0; u--)
-    (c = r[u]) && (i = (n ? c(t, e, i) : c(i)) || i);
-  return n && i && b(t, e, i), i;
+import { NativeChildController as b, valueToPercent as v } from "@rcarls/rc-common";
+var _ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (r, t, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? g(t, e) : t, u = r.length - 1, c; u >= 0; u--)
+    (c = r[u]) && (i = (s ? c(t, e, i) : c(i)) || i);
+  return s && i && _(t, e, i), i;
 };
-const g = {
+const I = {
   fromAttribute(r) {
     return r === null ? null : r === "" || r === "float" ? "float" : r === "inline-start" ? "inline-start" : r === "inline-end" ? "inline-end" : null;
   },
@@ -22,8 +22,14 @@ function d(r, t) {
 }
 const p = class p extends f {
   constructor() {
-    super(...arguments), this.min = 0, this.max = 100, this.step = 1, this._valueInitialized = !1, this.disabled = !1, this.readonly = !1, this.display = null, this.valueText = "", this.orientation = "horizontal", this._nativeInput = null, this._onDefaultSlotChange = () => {
-      this._unwireInput(), this._findInput(), this.requestUpdate();
+    super(...arguments), this.min = 0, this.max = 100, this.step = 1, this._valueInitialized = !1, this.disabled = !1, this.readonly = !1, this.display = null, this.valueText = "", this.orientation = "horizontal", this._nativeInput = null, this._nativeInputController = new b(this, {
+      selector: ':scope > input[type="range"]',
+      observe: !0,
+      onChange: (t, e) => this._setupInput(t, e),
+      onMissing: () => {
+      }
+    }), this._onDefaultSlotChange = () => {
+      this._nativeInputController.sync(), this.requestUpdate();
     }, this._onInput = (t) => {
       this._handleRangeEvent(t, "rc-slider-input");
     }, this._onChange = (t) => {
@@ -55,9 +61,6 @@ const p = class p extends f {
     const e = this._defaultValue;
     this._defaultValue = t, !this._valueInitialized && this._value === void 0 && t !== void 0 && (this._applyValueToInput(t), this.requestUpdate("value", void 0)), this.requestUpdate("defaultValue", e);
   }
-  connectedCallback() {
-    this._findInput(), super.connectedCallback();
-  }
   disconnectedCallback() {
     this._unwireInput(), super.disconnectedCallback();
   }
@@ -116,20 +119,12 @@ const p = class p extends f {
     const t = this._nativeInput?.valueAsNumber;
     return t === void 0 || isNaN(t) ? 0 : t;
   }
-  /**
-   * Finds the consumer-provided native input and wires event listeners.
-   * The input remains in the DOM permanently; the component enhances it
-   * rather than replacing it.
-   */
-  _findInput() {
-    const t = this.querySelector('input[type="range"]');
-    if (!t) {
-      console.warn(
-        '[rc-slider] Requires a child <input type="range"> element.'
-      );
+  _setupInput(t, e) {
+    if (e && e !== t && this._unwireInput(e), !t) {
+      this._nativeInput = null;
       return;
     }
-    !this.hasAttribute("disabled") && t.disabled && (this.disabled = !0), this._nativeInput = t, this._applyInitialValueToInput(t), this._wireInput(t);
+    !this.hasAttribute("disabled") && t.disabled && (this.disabled = !0), this._nativeInput = t, this._applyInitialValueToInput(t), this._wireInput(t), this.requestUpdate();
   }
   _applyInitialValueToInput(t) {
     if (this._value !== void 0) {
@@ -149,19 +144,19 @@ const p = class p extends f {
   _wireInput(t) {
     t.addEventListener("input", this._onInput), t.addEventListener("change", this._onChange), t.addEventListener("keydown", this._onKeydown);
   }
-  _unwireInput() {
-    this._nativeInput?.removeEventListener("input", this._onInput), this._nativeInput?.removeEventListener("change", this._onChange), this._nativeInput?.removeEventListener("keydown", this._onKeydown);
+  _unwireInput(t = this._nativeInput) {
+    t?.removeEventListener("input", this._onInput), t?.removeEventListener("change", this._onChange), t?.removeEventListener("keydown", this._onKeydown);
   }
   _syncAriaAttributes(t) {
     this.valueText ? t.setAttribute("aria-valuetext", this.valueText) : t.removeAttribute("aria-valuetext"), this.orientation === "vertical" ? t.setAttribute("aria-orientation", "vertical") : t.removeAttribute("aria-orientation"), this.readonly ? t.setAttribute("aria-readonly", "true") : t.removeAttribute("aria-readonly");
   }
   _handleRangeEvent(t, e) {
-    const n = t.currentTarget;
+    const s = t.currentTarget;
     if (this.readonly) {
-      n.value = String(this.value);
+      s.value = String(this.value);
       return;
     }
-    this._commitInputValue(n), this.dispatchEvent(
+    this._commitInputValue(s), this.dispatchEvent(
       new CustomEvent(e, {
         bubbles: !0,
         composed: !0,
@@ -176,13 +171,13 @@ const p = class p extends f {
   _progressStyle() {
     const t = this._nativeInput;
     if (!t) return "";
-    const e = d(t.min, 0), n = d(t.max, 100), i = v(t.valueAsNumber, e, n) * 100;
+    const e = d(t.min, 0), s = d(t.max, 100), i = v(t.valueAsNumber, e, s) * 100;
     return this.orientation === "vertical" ? `bottom:0%;height:${i.toFixed(3)}%` : `left:0%;width:${i.toFixed(3)}%`;
   }
   _floatStyle() {
     const t = this._nativeInput;
     if (!t) return "";
-    const e = d(t.min, 0), n = d(t.max, 100), i = v(t.valueAsNumber, e, n), u = (1 - i * 2).toFixed(4);
+    const e = d(t.min, 0), s = d(t.max, 100), i = v(t.valueAsNumber, e, s), u = (1 - i * 2).toFixed(4);
     return this.orientation === "vertical" ? `bottom:calc(${(i * 100).toFixed(3)}% + ${u} * var(--rc-thumb-radius, 9px))` : `left:calc(${(i * 100).toFixed(3)}% + ${u} * var(--rc-thumb-radius, 9px))`;
   }
 };
@@ -302,36 +297,36 @@ p.styles = m`
   `;
 let a = p;
 l([
-  s({ type: Number })
+  n({ type: Number })
 ], a.prototype, "min", 2);
 l([
-  s({ type: Number })
+  n({ type: Number })
 ], a.prototype, "max", 2);
 l([
-  s({ type: Number })
+  n({ type: Number })
 ], a.prototype, "step", 2);
 l([
-  s({ type: Number })
+  n({ type: Number })
 ], a.prototype, "value", 1);
 l([
-  s({ type: Number, attribute: "default-value" })
+  n({ type: Number, attribute: "default-value" })
 ], a.prototype, "defaultValue", 1);
 l([
-  s({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], a.prototype, "disabled", 2);
 l([
-  s({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], a.prototype, "readonly", 2);
 l([
-  s({ reflect: !0, converter: g })
+  n({ reflect: !0, converter: I })
 ], a.prototype, "display", 2);
 l([
-  s({ attribute: "value-text" })
+  n({ attribute: "value-text" })
 ], a.prototype, "valueText", 2);
 l([
-  s({ reflect: !0 })
+  n({ reflect: !0 })
 ], a.prototype, "orientation", 2);
 export {
   a as R
 };
-//# sourceMappingURL=rc-slider-DOhtdJxO.js.map
+//# sourceMappingURL=rc-slider-CPApkY9I.js.map

package/dist/rc-slider-CPApkY9I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-slider-CPApkY9I.js","sources":["../src/rc-slider.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport type { ComplexAttributeConverter } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { NativeChildController, valueToPercent, warnMissingDirectChild } from \"@rcarls/rc-common\";\n\nexport interface RCSliderValueEvent {\n  /** Current numeric slider value. */\n  value: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"rc-slider\": RCSlider;\n  }\n\n  interface HTMLElementEventMap {\n    \"rc-slider-input\": CustomEvent<RCSliderValueEvent>;\n    \"rc-slider-change\": CustomEvent<RCSliderValueEvent>;\n  }\n}\n\ntype DisplayValue = \"float\" | \"inline-start\" | \"inline-end\" | null;\n\n/**\n * Normalises the `display` attribute.\n * A bare boolean attribute (`display` with no value) maps to `'float'` 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) return null;\n    if (v === \"\" || v === \"float\") return \"float\";\n    if (v === \"inline-start\") return \"inline-start\";\n    if (v === \"inline-end\") return \"inline-end\";\n    return null;\n  },\n  toAttribute(v: DisplayValue): string | null {\n    return v;\n  },\n};\n\n/**\n * Returns the numeric value of a range input's `min`, `max`, or `step`\n * attribute string, falling back to `defaultVal` when the attribute is absent\n * (empty string) or not a valid number.\n */\nfunction parseAttr(s: string, defaultVal: number): number {\n  if (s === \"\") return defaultVal;\n  const n = parseFloat(s);\n  return isNaN(n) ? defaultVal : n;\n}\n\n/**\n * Single-thumb slider backed by a native <input type=\"range\"> with custom track and value\n * display hooks, following the WAI-ARIA Slider pattern.\n *\n * Label association:\n * - Explicit `for`/`id`: `<label for=\"vol\">Volume</label><rc-slider><input id=\"vol\" …></rc-slider>`\n * - Direct `aria-label` on the input: `<input aria-label=\"Volume\" …>`\n *\n * These patterns all work without JavaScript. The component does not render a\n * label element itself — the consumer is responsible for accessible naming.\n *\n * Form participation is handled natively by the consumer-provided input's `name`\n * attribute; no `ElementInternals` setup is required.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-slider rc-slider docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/slider/ WAI-ARIA Slider pattern}\n *\n * @slot track-background - Optional decorative content rendered inside the track before the progress fill.\n * @slot value-display - Optional replacement for the rendered value text.\n *\n * @fires rc-slider-input  - Fires continuously while the value changes. Detail: `{ value }`.\n * @fires rc-slider-change - Fires when the committed value changes (on release). Detail: `{ value }`.\n *\n * @cssprop [--rc-thumb-radius=9px] - Half the thumb width; used to position the float value display.\n * @cssprop [--rc-slider-gap=var(--rc-control-gap)] - Gap between track and inline value display.\n * @cssprop [--rc-slider-control-size=var(--rc-control-block-size)] - Track hit-area block size.\n * @cssprop [--rc-slider-track-size=0.1875rem] - Visual track thickness.\n * @cssprop [--rc-slider-track-background=CanvasText] - Unfilled track color.\n * @cssprop [--rc-slider-track-opacity=0.25] - Unfilled track opacity.\n * @cssprop [--rc-slider-track-radius=var(--rc-control-radius)] - Track border radius.\n * @cssprop [--rc-slider-progress-background=var(--rc-accent)] - Filled track color.\n * @cssprop [--rc-slider-value-color=var(--rc-text-disabled)] - Value display text color.\n * @cssprop [--rc-slider-float-value-block-offset=-1.4em] - Block-axis offset for horizontal float value display.\n * @cssprop [--rc-slider-float-value-inline-offset=calc(100% + 0.5rem)] - Inline-axis offset for vertical float value display.\n *\n * @csspart root - Root layout wrapper.\n * @csspart control - Track/input positioning wrapper.\n * @csspart track - Visual slider track.\n * @csspart progress - Filled progress segment.\n * @csspart value-display - Rendered value text.\n */\nexport class RCSlider extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n    }\n\n    .rc-slider-root {\n      display: grid;\n      gap: var(--rc-slider-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-slider-root[data-display=\"inline-start\"] {\n      grid-template-columns: auto minmax(0, 1fr);\n    }\n\n    .rc-slider-root[data-display=\"inline-end\"] {\n      grid-template-columns: minmax(0, 1fr) auto;\n    }\n\n    .rc-slider-control {\n      position: relative;\n      display: block;\n      min-width: 0;\n      min-height: var(--rc-slider-control-size, var(--rc-control-block-size, 1.5rem));\n    }\n\n    .rc-slider-track,\n    .rc-slider-progress {\n      position: absolute;\n      pointer-events: none;\n    }\n\n    .rc-slider-track {\n      inset-inline: 0;\n      inset-block: calc(50% - var(--rc-slider-track-size, 0.1875rem) / 2);\n      block-size: var(--rc-slider-track-size, 0.1875rem);\n      background: var(--rc-slider-track-background, CanvasText);\n      opacity: var(--rc-slider-track-opacity, 0.25);\n      border-radius: var(--rc-slider-track-radius, var(--rc-control-radius, 0));\n      overflow: hidden;\n      z-index: 0;\n    }\n\n    ::slotted([slot=\"track-background\"]) {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n    }\n\n    .rc-slider-progress {\n      inset-block: 0;\n      background: var(--rc-slider-progress-background, var(--rc-accent, Highlight));\n      border-radius: inherit;\n      z-index: 1;\n    }\n\n    ::slotted(input[type=\"range\"]) {\n      position: absolute;\n      inset: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      margin: 0;\n      background: transparent;\n      z-index: 2;\n    }\n\n    .rc-slider-value {\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n      color: var(--rc-slider-value-color, var(--rc-text-disabled, GrayText));\n    }\n\n    .rc-slider-root[data-display=\"float\"] .rc-slider-value {\n      position: absolute;\n      inset-block-start: var(--rc-slider-float-value-block-offset, -1.4em);\n      transform: translateX(-50%);\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-slider-control {\n      inline-size: var(--rc-slider-control-size, var(--rc-control-block-size, 1.5rem));\n      block-size: var(--rc-slider-vertical-size, 12.5rem);\n    }\n\n    :host([orientation=\"vertical\"]) .rc-slider-track {\n      inset-block: 0;\n      inset-inline: calc(50% - var(--rc-slider-track-size, 0.1875rem) / 2);\n      inline-size: var(--rc-slider-track-size, 0.1875rem);\n      block-size: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .rc-slider-progress {\n      inset-inline: 0;\n    }\n\n    :host([orientation=\"vertical\"]) ::slotted(input[type=\"range\"]) {\n      writing-mode: vertical-lr;\n      direction: rtl;\n    }\n\n    :host([orientation=\"vertical\"]) .rc-slider-root[data-display=\"float\"] .rc-slider-value {\n      inset-block-start: auto;\n      inset-inline-start: var(--rc-slider-float-value-inline-offset, calc(100% + 0.5rem));\n      transform: translateY(50%);\n    }\n  `;\n\n  /** Minimum slider value. */\n  @property({ type: Number }) min = 0;\n\n  /** Maximum slider value. */\n  @property({ type: Number }) max = 100;\n\n  /** Slider step. */\n  @property({ type: Number }) step = 1;\n\n  private _value: number | undefined;\n  private _defaultValue: number | undefined;\n  private _valueInitialized = false;\n\n  /** Current slider value. */\n  @property({ type: Number })\n  get value(): number {\n    return this._value ?? this._defaultValue ?? this._nativeInputValue;\n  }\n  set value(v: number) {\n    const old = this._value;\n    this._value = v;\n    this._valueInitialized = true;\n    this._applyValueToInput(v);\n    this.requestUpdate(\"value\", old);\n  }\n\n  /** Initial uncontrolled slider value. Has no effect after the first user interaction or `value` write. */\n  @property({ type: Number, attribute: \"default-value\" })\n  get defaultValue(): number | undefined {\n    return this._defaultValue;\n  }\n  set defaultValue(v: number | undefined) {\n    const old = this._defaultValue;\n    this._defaultValue = v;\n    if (\n      !this._valueInitialized &&\n      this._value === undefined &&\n      v !== undefined\n    ) {\n      this._applyValueToInput(v);\n      this.requestUpdate(\"value\", undefined);\n    }\n    this.requestUpdate(\"defaultValue\", old);\n  }\n\n  /** Disable the underlying input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Prevents edits while preserving normal display. Not a native range attribute. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * Controls the live value display.\n   *\n   * - Absent (default) — no value shown.\n   * - `display` or `display=\"float\"` — floats above the thumb.\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  /** Screen-reader value text. When set, forwarded as `aria-valuetext` on the native input. */\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\" =\n    \"horizontal\";\n\n  private _nativeInput: HTMLInputElement | null = null;\n\n  private readonly _nativeInputController = new NativeChildController<HTMLInputElement>(this, {\n    selector: ':scope > input[type=\"range\"]',\n    observe: true,\n    onChange: (input, previous) => this._setupInput(input, previous),\n    onMissing: () => {\n      if (import.meta.env.DEV) {\n        warnMissingDirectChild(this, {\n          selector: ':scope > input[type=\"range\"]',\n          message: '[rc-slider] Requires a child <input type=\"range\"> element.',\n        });\n      }\n    },\n  });\n\n  override disconnectedCallback(): void {\n    this._unwireInput();\n    super.disconnectedCallback();\n  }\n\n  override updated(): void {\n    const input = this._nativeInput;\n    if (!input) return;\n\n    input.disabled = this.disabled;\n    this._syncAriaAttributes(input);\n  }\n\n  override render() {\n    const input = this._nativeInput;\n    if (!input) return nothing;\n\n    const valueDisplay = html`\n      <span\n        part=\"value-display\"\n        class=\"rc-slider-value\"\n        style=${ifDefined(\n          this.display === \"float\" ? this._floatStyle() : undefined,\n        )}\n        aria-hidden=\"true\"\n      >\n        <slot name=\"value-display\">${this._displayText}</slot>\n      </span>\n    `;\n\n    return html`\n      <div\n        part=\"root\"\n        class=\"rc-slider-root\"\n        data-display=${this.display ?? nothing}\n        data-orientation=${this.orientation}\n        data-readonly=${this.readonly ? \"\" : nothing}\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-slider-control\">\n          <span part=\"track\" class=\"rc-slider-track\" aria-hidden=\"true\">\n            <slot name=\"track-background\"></slot>\n            <span\n              part=\"progress\"\n              class=\"rc-slider-progress\"\n              style=${this._progressStyle()}\n            ></span>\n          </span>\n\n          <slot @slotchange=${this._onDefaultSlotChange}></slot>\n          ${this.display === \"float\" ? valueDisplay : nothing}\n        </span>\n\n        ${this.display === \"inline-end\" ? valueDisplay : nothing}\n      </div>\n    `;\n  }\n\n  private get _displayText(): string {\n    return this.valueText || String(this.value);\n  }\n\n  private get _nativeInputValue(): number {\n    const value = this._nativeInput?.valueAsNumber;\n    return value === undefined || isNaN(value) ? 0 : value;\n  }\n\n  private _setupInput(input: HTMLInputElement | null, previous?: HTMLInputElement | null): void {\n    if (previous && previous !== input) {\n      this._unwireInput(previous);\n    }\n\n    if (!input) {\n      this._nativeInput = null;\n      return;\n    }\n\n    // Mirror disabled state from the native input if not explicitly set on the host.\n    // Pre-upgrade markup may carry <input disabled> before the component upgrades.\n    if (!this.hasAttribute(\"disabled\") && input.disabled) {\n      this.disabled = true;\n    }\n\n    this._nativeInput = input;\n    this._applyInitialValueToInput(input);\n    this._wireInput(input);\n    this.requestUpdate();\n  }\n\n  private _onDefaultSlotChange = (): void => {\n    this._nativeInputController.sync();\n    this.requestUpdate();\n  };\n\n  private _applyInitialValueToInput(input: HTMLInputElement): void {\n    if (this._value !== undefined) {\n      this._applyValueToInput(this._value);\n      return;\n    }\n\n    if (this._defaultValue !== undefined) {\n      this._applyValueToInput(this._defaultValue);\n      return;\n    }\n\n    const value = input.valueAsNumber;\n    if (!isNaN(value)) {\n      this._defaultValue = value;\n    }\n  }\n\n  private _applyValueToInput(value: number): void {\n    if (!this._nativeInput) return;\n\n    this._nativeInput.value = String(value);\n  }\n\n  private _wireInput(input: HTMLInputElement): void {\n    input.addEventListener(\"input\", this._onInput);\n    input.addEventListener(\"change\", this._onChange);\n    input.addEventListener(\"keydown\", this._onKeydown);\n  }\n\n  private _unwireInput(input = this._nativeInput): void {\n    input?.removeEventListener(\"input\", this._onInput);\n    input?.removeEventListener(\"change\", this._onChange);\n    input?.removeEventListener(\"keydown\", this._onKeydown);\n  }\n\n  private _syncAriaAttributes(input: HTMLInputElement): void {\n    if (this.valueText) {\n      input.setAttribute(\"aria-valuetext\", this.valueText);\n    } else {\n      input.removeAttribute(\"aria-valuetext\");\n    }\n\n    if (this.orientation === \"vertical\") {\n      input.setAttribute(\"aria-orientation\", \"vertical\");\n    } else {\n      input.removeAttribute(\"aria-orientation\");\n    }\n\n    if (this.readonly) {\n      input.setAttribute(\"aria-readonly\", \"true\");\n    } else {\n      input.removeAttribute(\"aria-readonly\");\n    }\n  }\n\n  private readonly _onInput = (e: Event): void => {\n    this._handleRangeEvent(e, \"rc-slider-input\");\n  };\n\n  private readonly _onChange = (e: Event): void => {\n    this._handleRangeEvent(e, \"rc-slider-change\");\n  };\n\n  private _handleRangeEvent(\n    e: Event,\n    type: \"rc-slider-input\" | \"rc-slider-change\",\n  ): void {\n    const input = e.currentTarget as HTMLInputElement;\n\n    if (this.readonly) {\n      input.value = String(this.value);\n      return;\n    }\n\n    this._commitInputValue(input);\n\n    this.dispatchEvent(\n      new CustomEvent<RCSliderValueEvent>(type, {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  private readonly _onKeydown = (e: KeyboardEvent): void => {\n    if (this.disabled || this.readonly) return;\n    if (e.key !== \"PageUp\" && e.key !== \"PageDown\") return;\n\n    e.preventDefault();\n    const input = e.currentTarget as HTMLInputElement;\n\n    if (e.key === \"PageUp\") input.stepUp(10);\n    else input.stepDown(10);\n\n    this._commitInputValue(input);\n\n    this.dispatchEvent(\n      new CustomEvent<RCSliderValueEvent>(\"rc-slider-input\", {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  };\n\n  private _commitInputValue(input: HTMLInputElement): void {\n    const old = this.value;\n\n    this._value = input.valueAsNumber;\n    this._valueInitialized = true;\n\n    this.requestUpdate(\"value\", old);\n  }\n\n  private _progressStyle(): string {\n    const input = this._nativeInput;\n    if (!input) return \"\";\n\n    const min = parseAttr(input.min, 0);\n    const max = parseAttr(input.max, 100);\n    const pct = valueToPercent(input.valueAsNumber, min, max) * 100;\n\n    if (this.orientation === \"vertical\") {\n      return `bottom:0%;height:${pct.toFixed(3)}%`;\n    }\n\n    return `left:0%;width:${pct.toFixed(3)}%`;\n  }\n\n  private _floatStyle(): string {\n    const input = this._nativeInput;\n    if (!input) return \"\";\n\n    const min = parseAttr(input.min, 0);\n    const max = parseAttr(input.max, 100);\n    const pct = valueToPercent(input.valueAsNumber, min, max);\n    const k = (1 - pct * 2).toFixed(4);\n\n    if (this.orientation === \"vertical\") {\n      return `bottom:calc(${(pct * 100).toFixed(3)}% + ${k} * var(--rc-thumb-radius, 9px))`;\n    }\n\n    return `left:calc(${(pct * 100).toFixed(3)}% + ${k} * var(--rc-thumb-radius, 9px))`;\n  }\n}\n\nexport default RCSlider;\n"],"names":["displayConverter","v","parseAttr","s","defaultVal","n","_RCSlider","LitElement","NativeChildController","input","previous","e","old","nothing","valueDisplay","html","ifDefined","value","type","min","max","pct","valueToPercent","k","css","RCSlider","__decorateClass","property"],"mappings":"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"}

package/dist/rc-slider-define.js

@@ -1,4 +1,4 @@
-import { R as e } from "./rc-slider-DOhtdJxO.js";
+import { R as e } from "./rc-slider-CPApkY9I.js";
 customElements.get("rc-slider") || customElements.define("rc-slider", e);
 export {
   e as RCSlider

package/dist/rc-slider.js

@@ -1,4 +1,4 @@
-import { R as o } from "./rc-slider-DOhtdJxO.js";
+import { R as o } from "./rc-slider-CPApkY9I.js";
 export {
   o as RCSlider
 };

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

@@ -14,10 +14,8 @@ declare global {
 }
 type DisplayValue = "float" | "inline-start" | "inline-end" | null;
 /**
- * Progressive enhancement wrapper for a consumer-provided `<input type="range">`.
- * The native input must be supplied as a direct child element — the component
- * adds a styled track, optional live value display, and the APG keyboard
- * enhancement (Page Up/Down, ±10 steps).
+ * Single-thumb slider backed by a native <input type="range"> with custom track and value
+ * display hooks, following the WAI-ARIA Slider pattern.
  *
  * Label association:
  * - Explicit `for`/`id`: `<label for="vol">Volume</label><rc-slider><input id="vol" …></rc-slider>`
@@ -29,6 +27,9 @@ type DisplayValue = "float" | "inline-start" | "inline-end" | null;
  * Form participation is handled natively by the consumer-provided input's `name`
  * attribute; no `ElementInternals` setup is required.
  *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-slider rc-slider docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/slider/ WAI-ARIA Slider pattern}
+ *
  * @slot track-background - Optional decorative content rendered inside the track before the progress fill.
  * @slot value-display - Optional replacement for the rendered value text.
  *
@@ -88,18 +89,13 @@ export declare class RCSlider extends LitElement {
     /** Orientation; reflected as an attribute and forwarded to `aria-orientation`. */
     orientation: "horizontal" | "vertical";
     private _nativeInput;
-    connectedCallback(): void;
+    private readonly _nativeInputController;
     disconnectedCallback(): void;
     updated(): void;
     render(): typeof nothing | import('lit').TemplateResult<1>;
     private get _displayText();
     private get _nativeInputValue();
-    /**
-     * Finds the consumer-provided native input and wires event listeners.
-     * The input remains in the DOM permanently; the component enhances it
-     * rather than replacing it.
-     */
-    private _findInput;
+    private _setupInput;
     private _onDefaultSlotChange;
     private _applyInitialValueToInput;
     private _applyValueToInput;

package/package.json

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Headless WAI-ARIA slider web component built with Lit",
+  "version": "0.3.0",
+  "description": "Single-thumb slider backed by a native <input type=\"range\"> with custom track and value display hooks.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-slider"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-slider",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,18 +37,15 @@
   ],
   "customElements": "dist/custom-elements.json",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build && cem analyze",
     "cem:analyze": "cem analyze",
     "preview": "vite preview",
-    "test:browser": "vitest",
-    "test:browser:chrome": "vitest --project=chromium",
-    "test:browser:firefox": "vitest --project=firefox",
-    "yalc:publish": "yalc publish --push"
+    "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",
-    "@guanghechen/rollup-plugin-copy": "^6.0.9",
     "@vitest/browser-playwright": "4.1.5",
     "lit": "^3.0.0",
     "playwright": "^1.56.0",
@@ -60,7 +57,7 @@
     "vitest-browser-lit": "^1.0.1"
   },
   "dependencies": {
-    "@rcarls/rc-common": "workspace:^"
+    "@rcarls/rc-common": "workspace:*"
   },
   "peerDependencies": {
     "lit": "^3.0.0"

package/dist/demo.css

@@ -1,85 +0,0 @@
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:root {
-  color-scheme: light dark;
-  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
-}
-
-@supports (color: AccentColor) {
-  :root {
-    --rc-accent: AccentColor;
-  }
-}
-
-[data-theme="light"] { color-scheme: light; }
-[data-theme="dark"]  { color-scheme: dark;  }
-
-[data-theme="solarized-light"] {
-  color-scheme: light;
-  --rc-surface: #fdf6e3;
-  --rc-text:    #657b83;
-  --rc-border:  1px solid #93a1a1;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
-}
-
-[data-theme="solarized-dark"] {
-  color-scheme: dark;
-  --rc-surface: #002b36;
-  --rc-text:    #839496;
-  --rc-border:  1px solid #586e75;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
-}
-
-body {
-  font-family: system-ui, sans-serif;
-  margin: 0;
-}
-
-.demo-page {
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-
-.demo-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid ButtonBorder;
-}
-
-.demo-controls .demo-title {
-  flex: 1;
-}
-
-.demo-controls h1 {
-  margin: 0 0 0.15rem;
-  font-size: 1.5rem;
-}
-
-.demo-controls a {
-  font-size: 0.8rem;
-}
-
-.demo-section {
-  margin-bottom: 2rem;
-}
-
-.demo-section h2 {
-  margin: 0 0 0.5rem;
-}
-
-.theme-picker {
-  padding: 0.35em 0.75em;
-  font-family: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  border: 1px solid ButtonBorder;
-  border-radius: 4px;
-  background: Canvas;
-  color: CanvasText;
-}

package/dist/demo.js

@@ -1,40 +0,0 @@
-const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
-const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
-
-const stored = localStorage.getItem('rc-demo-theme') ?? '';
-applyTheme(stored);
-
-function applyTheme(theme) {
-  if (theme) {
-    document.documentElement.dataset.theme = theme;
-  } else {
-    delete document.documentElement.dataset.theme;
-  }
-}
-
-function currentIndex() {
-  const current = document.documentElement.dataset.theme ?? '';
-  const idx = THEMES.indexOf(current);
-  return idx === -1 ? 0 : idx;
-}
-
-function updateButtons() {
-  const label = LABELS[currentIndex()];
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.textContent = label;
-  });
-}
-
-window.cycleTheme = function () {
-  const next = THEMES[(currentIndex() + 1) % THEMES.length];
-  applyTheme(next);
-  localStorage.setItem('rc-demo-theme', next);
-  updateButtons();
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  updateButtons();
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.addEventListener('click', window.cycleTheme);
-  });
-});

package/dist/rc-slider-DOhtdJxO.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rc-slider-DOhtdJxO.js","sources":["../src/rc-slider.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport type { ComplexAttributeConverter } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { valueToPercent } from \"@rcarls/rc-common\";\n\nexport interface RCSliderValueEvent {\n  /** Current numeric slider value. */\n  value: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"rc-slider\": RCSlider;\n  }\n\n  interface HTMLElementEventMap {\n    \"rc-slider-input\": CustomEvent<RCSliderValueEvent>;\n    \"rc-slider-change\": CustomEvent<RCSliderValueEvent>;\n  }\n}\n\ntype DisplayValue = \"float\" | \"inline-start\" | \"inline-end\" | null;\n\n/**\n * Normalises the `display` attribute.\n * A bare boolean attribute (`display` with no value) maps to `'float'` 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) return null;\n    if (v === \"\" || v === \"float\") return \"float\";\n    if (v === \"inline-start\") return \"inline-start\";\n    if (v === \"inline-end\") return \"inline-end\";\n    return null;\n  },\n  toAttribute(v: DisplayValue): string | null {\n    return v;\n  },\n};\n\n/**\n * Returns the numeric value of a range input's `min`, `max`, or `step`\n * attribute string, falling back to `defaultVal` when the attribute is absent\n * (empty string) or not a valid number.\n */\nfunction parseAttr(s: string, defaultVal: number): number {\n  if (s === \"\") return defaultVal;\n  const n = parseFloat(s);\n  return isNaN(n) ? defaultVal : n;\n}\n\n/**\n * Progressive enhancement wrapper for a consumer-provided `<input type=\"range\">`.\n * The native input must be supplied as a direct child element — the component\n * adds a styled track, optional live value display, and the APG keyboard\n * enhancement (Page Up/Down, ±10 steps).\n *\n * Label association:\n * - Explicit `for`/`id`: `<label for=\"vol\">Volume</label><rc-slider><input id=\"vol\" …></rc-slider>`\n * - Direct `aria-label` on the input: `<input aria-label=\"Volume\" …>`\n *\n * These patterns all work without JavaScript. The component does not render a\n * label element itself — the consumer is responsible for accessible naming.\n *\n * Form participation is handled natively by the consumer-provided input's `name`\n * attribute; no `ElementInternals` setup is required.\n *\n * @slot track-background - Optional decorative content rendered inside the track before the progress fill.\n * @slot value-display - Optional replacement for the rendered value text.\n *\n * @fires rc-slider-input  - Fires continuously while the value changes. Detail: `{ value }`.\n * @fires rc-slider-change - Fires when the committed value changes (on release). Detail: `{ value }`.\n *\n * @cssprop [--rc-thumb-radius=9px] - Half the thumb width; used to position the float value display.\n * @cssprop [--rc-slider-gap=var(--rc-control-gap)] - Gap between track and inline value display.\n * @cssprop [--rc-slider-control-size=var(--rc-control-block-size)] - Track hit-area block size.\n * @cssprop [--rc-slider-track-size=0.1875rem] - Visual track thickness.\n * @cssprop [--rc-slider-track-background=CanvasText] - Unfilled track color.\n * @cssprop [--rc-slider-track-opacity=0.25] - Unfilled track opacity.\n * @cssprop [--rc-slider-track-radius=var(--rc-control-radius)] - Track border radius.\n * @cssprop [--rc-slider-progress-background=var(--rc-accent)] - Filled track color.\n * @cssprop [--rc-slider-value-color=var(--rc-text-disabled)] - Value display text color.\n * @cssprop [--rc-slider-float-value-block-offset=-1.4em] - Block-axis offset for horizontal float value display.\n * @cssprop [--rc-slider-float-value-inline-offset=calc(100% + 0.5rem)] - Inline-axis offset for vertical float value display.\n *\n * @csspart root - Root layout wrapper.\n * @csspart control - Track/input positioning wrapper.\n * @csspart track - Visual slider track.\n * @csspart progress - Filled progress segment.\n * @csspart value-display - Rendered value text.\n */\nexport class RCSlider extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n    }\n\n    .rc-slider-root {\n      display: grid;\n      gap: var(--rc-slider-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-slider-root[data-display=\"inline-start\"] {\n      grid-template-columns: auto minmax(0, 1fr);\n    }\n\n    .rc-slider-root[data-display=\"inline-end\"] {\n      grid-template-columns: minmax(0, 1fr) auto;\n    }\n\n    .rc-slider-control {\n      position: relative;\n      display: block;\n      min-width: 0;\n      min-height: var(--rc-slider-control-size, var(--rc-control-block-size, 1.5rem));\n    }\n\n    .rc-slider-track,\n    .rc-slider-progress {\n      position: absolute;\n      pointer-events: none;\n    }\n\n    .rc-slider-track {\n      inset-inline: 0;\n      inset-block: calc(50% - var(--rc-slider-track-size, 0.1875rem) / 2);\n      block-size: var(--rc-slider-track-size, 0.1875rem);\n      background: var(--rc-slider-track-background, CanvasText);\n      opacity: var(--rc-slider-track-opacity, 0.25);\n      border-radius: var(--rc-slider-track-radius, var(--rc-control-radius, 0));\n      overflow: hidden;\n      z-index: 0;\n    }\n\n    ::slotted([slot=\"track-background\"]) {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n    }\n\n    .rc-slider-progress {\n      inset-block: 0;\n      background: var(--rc-slider-progress-background, var(--rc-accent, Highlight));\n      border-radius: inherit;\n      z-index: 1;\n    }\n\n    ::slotted(input[type=\"range\"]) {\n      position: absolute;\n      inset: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      margin: 0;\n      background: transparent;\n      z-index: 2;\n    }\n\n    .rc-slider-value {\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n      color: var(--rc-slider-value-color, var(--rc-text-disabled, GrayText));\n    }\n\n    .rc-slider-root[data-display=\"float\"] .rc-slider-value {\n      position: absolute;\n      inset-block-start: var(--rc-slider-float-value-block-offset, -1.4em);\n      transform: translateX(-50%);\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-slider-control {\n      inline-size: var(--rc-slider-control-size, var(--rc-control-block-size, 1.5rem));\n      block-size: var(--rc-slider-vertical-size, 12.5rem);\n    }\n\n    :host([orientation=\"vertical\"]) .rc-slider-track {\n      inset-block: 0;\n      inset-inline: calc(50% - var(--rc-slider-track-size, 0.1875rem) / 2);\n      inline-size: var(--rc-slider-track-size, 0.1875rem);\n      block-size: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .rc-slider-progress {\n      inset-inline: 0;\n    }\n\n    :host([orientation=\"vertical\"]) ::slotted(input[type=\"range\"]) {\n      writing-mode: vertical-lr;\n      direction: rtl;\n    }\n\n    :host([orientation=\"vertical\"]) .rc-slider-root[data-display=\"float\"] .rc-slider-value {\n      inset-block-start: auto;\n      inset-inline-start: var(--rc-slider-float-value-inline-offset, calc(100% + 0.5rem));\n      transform: translateY(50%);\n    }\n  `;\n\n  /** Minimum slider value. */\n  @property({ type: Number }) min = 0;\n\n  /** Maximum slider value. */\n  @property({ type: Number }) max = 100;\n\n  /** Slider step. */\n  @property({ type: Number }) step = 1;\n\n  private _value: number | undefined;\n  private _defaultValue: number | undefined;\n  private _valueInitialized = false;\n\n  /** Current slider value. */\n  @property({ type: Number })\n  get value(): number {\n    return this._value ?? this._defaultValue ?? this._nativeInputValue;\n  }\n  set value(v: number) {\n    const old = this._value;\n    this._value = v;\n    this._valueInitialized = true;\n    this._applyValueToInput(v);\n    this.requestUpdate(\"value\", old);\n  }\n\n  /** Initial uncontrolled slider value. Has no effect after the first user interaction or `value` write. */\n  @property({ type: Number, attribute: \"default-value\" })\n  get defaultValue(): number | undefined {\n    return this._defaultValue;\n  }\n  set defaultValue(v: number | undefined) {\n    const old = this._defaultValue;\n    this._defaultValue = v;\n    if (\n      !this._valueInitialized &&\n      this._value === undefined &&\n      v !== undefined\n    ) {\n      this._applyValueToInput(v);\n      this.requestUpdate(\"value\", undefined);\n    }\n    this.requestUpdate(\"defaultValue\", old);\n  }\n\n  /** Disable the underlying input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Prevents edits while preserving normal display. Not a native range attribute. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * Controls the live value display.\n   *\n   * - Absent (default) — no value shown.\n   * - `display` or `display=\"float\"` — floats above the thumb.\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  /** Screen-reader value text. When set, forwarded as `aria-valuetext` on the native input. */\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\" =\n    \"horizontal\";\n\n  private _nativeInput: HTMLInputElement | null = null;\n\n  override connectedCallback(): void {\n    this._findInput();\n    super.connectedCallback();\n  }\n\n  override disconnectedCallback(): void {\n    this._unwireInput();\n    super.disconnectedCallback();\n  }\n\n  override updated(): void {\n    const input = this._nativeInput;\n    if (!input) return;\n\n    input.disabled = this.disabled;\n    this._syncAriaAttributes(input);\n  }\n\n  override render() {\n    const input = this._nativeInput;\n    if (!input) return nothing;\n\n    const valueDisplay = html`\n      <span\n        part=\"value-display\"\n        class=\"rc-slider-value\"\n        style=${ifDefined(\n          this.display === \"float\" ? this._floatStyle() : undefined,\n        )}\n        aria-hidden=\"true\"\n      >\n        <slot name=\"value-display\">${this._displayText}</slot>\n      </span>\n    `;\n\n    return html`\n      <div\n        part=\"root\"\n        class=\"rc-slider-root\"\n        data-display=${this.display ?? nothing}\n        data-orientation=${this.orientation}\n        data-readonly=${this.readonly ? \"\" : nothing}\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-slider-control\">\n          <span part=\"track\" class=\"rc-slider-track\" aria-hidden=\"true\">\n            <slot name=\"track-background\"></slot>\n            <span\n              part=\"progress\"\n              class=\"rc-slider-progress\"\n              style=${this._progressStyle()}\n            ></span>\n          </span>\n\n          <slot @slotchange=${this._onDefaultSlotChange}></slot>\n          ${this.display === \"float\" ? valueDisplay : nothing}\n        </span>\n\n        ${this.display === \"inline-end\" ? valueDisplay : nothing}\n      </div>\n    `;\n  }\n\n  private get _displayText(): string {\n    return this.valueText || String(this.value);\n  }\n\n  private get _nativeInputValue(): number {\n    const value = this._nativeInput?.valueAsNumber;\n    return value === undefined || isNaN(value) ? 0 : value;\n  }\n\n  /**\n   * Finds the consumer-provided native input and wires event listeners.\n   * The input remains in the DOM permanently; the component enhances it\n   * rather than replacing it.\n   */\n  private _findInput(): void {\n    const input = this.querySelector<HTMLInputElement>('input[type=\"range\"]');\n    if (!input) {\n      console.warn(\n        '[rc-slider] Requires a child <input type=\"range\"> element.',\n      );\n      return;\n    }\n\n    // Mirror disabled state from the native input if not explicitly set on the host.\n    // Pre-upgrade markup may carry <input disabled> before the component upgrades.\n    if (!this.hasAttribute(\"disabled\") && input.disabled) {\n      this.disabled = true;\n    }\n\n    this._nativeInput = input;\n    this._applyInitialValueToInput(input);\n    this._wireInput(input);\n  }\n\n  private _onDefaultSlotChange = (): void => {\n    this._unwireInput();\n    this._findInput();\n    this.requestUpdate();\n  };\n\n  private _applyInitialValueToInput(input: HTMLInputElement): void {\n    if (this._value !== undefined) {\n      this._applyValueToInput(this._value);\n      return;\n    }\n\n    if (this._defaultValue !== undefined) {\n      this._applyValueToInput(this._defaultValue);\n      return;\n    }\n\n    const value = input.valueAsNumber;\n    if (!isNaN(value)) {\n      this._defaultValue = value;\n    }\n  }\n\n  private _applyValueToInput(value: number): void {\n    if (!this._nativeInput) return;\n\n    this._nativeInput.value = String(value);\n  }\n\n  private _wireInput(input: HTMLInputElement): void {\n    input.addEventListener(\"input\", this._onInput);\n    input.addEventListener(\"change\", this._onChange);\n    input.addEventListener(\"keydown\", this._onKeydown);\n  }\n\n  private _unwireInput(): void {\n    this._nativeInput?.removeEventListener(\"input\", this._onInput);\n    this._nativeInput?.removeEventListener(\"change\", this._onChange);\n    this._nativeInput?.removeEventListener(\"keydown\", this._onKeydown);\n  }\n\n  private _syncAriaAttributes(input: HTMLInputElement): void {\n    if (this.valueText) {\n      input.setAttribute(\"aria-valuetext\", this.valueText);\n    } else {\n      input.removeAttribute(\"aria-valuetext\");\n    }\n\n    if (this.orientation === \"vertical\") {\n      input.setAttribute(\"aria-orientation\", \"vertical\");\n    } else {\n      input.removeAttribute(\"aria-orientation\");\n    }\n\n    if (this.readonly) {\n      input.setAttribute(\"aria-readonly\", \"true\");\n    } else {\n      input.removeAttribute(\"aria-readonly\");\n    }\n  }\n\n  private readonly _onInput = (e: Event): void => {\n    this._handleRangeEvent(e, \"rc-slider-input\");\n  };\n\n  private readonly _onChange = (e: Event): void => {\n    this._handleRangeEvent(e, \"rc-slider-change\");\n  };\n\n  private _handleRangeEvent(\n    e: Event,\n    type: \"rc-slider-input\" | \"rc-slider-change\",\n  ): void {\n    const input = e.currentTarget as HTMLInputElement;\n\n    if (this.readonly) {\n      input.value = String(this.value);\n      return;\n    }\n\n    this._commitInputValue(input);\n\n    this.dispatchEvent(\n      new CustomEvent<RCSliderValueEvent>(type, {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  private readonly _onKeydown = (e: KeyboardEvent): void => {\n    if (this.disabled || this.readonly) return;\n    if (e.key !== \"PageUp\" && e.key !== \"PageDown\") return;\n\n    e.preventDefault();\n    const input = e.currentTarget as HTMLInputElement;\n\n    if (e.key === \"PageUp\") input.stepUp(10);\n    else input.stepDown(10);\n\n    this._commitInputValue(input);\n\n    this.dispatchEvent(\n      new CustomEvent<RCSliderValueEvent>(\"rc-slider-input\", {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  };\n\n  private _commitInputValue(input: HTMLInputElement): void {\n    const old = this.value;\n\n    this._value = input.valueAsNumber;\n    this._valueInitialized = true;\n\n    this.requestUpdate(\"value\", old);\n  }\n\n  private _progressStyle(): string {\n    const input = this._nativeInput;\n    if (!input) return \"\";\n\n    const min = parseAttr(input.min, 0);\n    const max = parseAttr(input.max, 100);\n    const pct = valueToPercent(input.valueAsNumber, min, max) * 100;\n\n    if (this.orientation === \"vertical\") {\n      return `bottom:0%;height:${pct.toFixed(3)}%`;\n    }\n\n    return `left:0%;width:${pct.toFixed(3)}%`;\n  }\n\n  private _floatStyle(): string {\n    const input = this._nativeInput;\n    if (!input) return \"\";\n\n    const min = parseAttr(input.min, 0);\n    const max = parseAttr(input.max, 100);\n    const pct = valueToPercent(input.valueAsNumber, min, max);\n    const k = (1 - pct * 2).toFixed(4);\n\n    if (this.orientation === \"vertical\") {\n      return `bottom:calc(${(pct * 100).toFixed(3)}% + ${k} * var(--rc-thumb-radius, 9px))`;\n    }\n\n    return `left:calc(${(pct * 100).toFixed(3)}% + ${k} * var(--rc-thumb-radius, 9px))`;\n  }\n}\n\nexport default RCSlider;\n"],"names":["displayConverter","v","parseAttr","s","defaultVal","n","_RCSlider","LitElement","e","input","old","nothing","valueDisplay","html","ifDefined","value","type","min","max","pct","valueToPercent","k","css","RCSlider","__decorateClass","property"],"mappings":"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"}