@rcarls/rc-slider 0.3.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -64,6 +64,11 @@
64
64
  "name": "--rc-slider-control-size",
65
65
  "default": "var(--rc-control-block-size)"
66
66
  },
67
+ {
68
+ "description": "Track length when `orientation=\"vertical\"`.",
69
+ "name": "--rc-slider-vertical-size",
70
+ "default": "12.5rem"
71
+ },
67
72
  {
68
73
  "description": "Visual track thickness.",
69
74
  "name": "--rc-slider-track-size",
@@ -267,7 +272,7 @@
267
272
  },
268
273
  {
269
274
  "kind": "field",
270
- "name": "_nativeInput",
275
+ "name": "_$nativeInput",
271
276
  "type": {
272
277
  "text": "HTMLInputElement | null"
273
278
  },
@@ -279,7 +284,7 @@
279
284
  "name": "_nativeInputController",
280
285
  "privacy": "private",
281
286
  "readonly": true,
282
- "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.', }); } }, })"
287
+ "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.', }); } }, })"
283
288
  },
284
289
  {
285
290
  "kind": "field",
@@ -310,13 +315,13 @@
310
315
  },
311
316
  "parameters": [
312
317
  {
313
- "name": "input",
318
+ "name": "$input",
314
319
  "type": {
315
320
  "text": "HTMLInputElement | null"
316
321
  }
317
322
  },
318
323
  {
319
- "name": "previous",
324
+ "name": "$previous",
320
325
  "optional": true,
321
326
  "type": {
322
327
  "text": "HTMLInputElement | null"
@@ -340,7 +345,7 @@
340
345
  },
341
346
  "parameters": [
342
347
  {
343
- "name": "input",
348
+ "name": "$input",
344
349
  "type": {
345
350
  "text": "HTMLInputElement"
346
351
  }
@@ -376,7 +381,7 @@
376
381
  },
377
382
  "parameters": [
378
383
  {
379
- "name": "input",
384
+ "name": "$input",
380
385
  "type": {
381
386
  "text": "HTMLInputElement"
382
387
  }
@@ -394,8 +399,8 @@
394
399
  },
395
400
  "parameters": [
396
401
  {
397
- "name": "input",
398
- "default": "this._nativeInput"
402
+ "name": "$input",
403
+ "default": "this._$nativeInput"
399
404
  }
400
405
  ]
401
406
  },
@@ -410,7 +415,7 @@
410
415
  },
411
416
  "parameters": [
412
417
  {
413
- "name": "input",
418
+ "name": "$input",
414
419
  "type": {
415
420
  "text": "HTMLInputElement"
416
421
  }
@@ -470,7 +475,7 @@
470
475
  },
471
476
  "parameters": [
472
477
  {
473
- "name": "input",
478
+ "name": "$input",
474
479
  "type": {
475
480
  "text": "HTMLInputElement"
476
481
  }
@@ -516,91 +521,91 @@
516
521
  ],
517
522
  "attributes": [
518
523
  {
524
+ "description": "Minimum slider value.",
519
525
  "name": "min",
520
526
  "type": {
521
527
  "text": "number"
522
528
  },
523
529
  "default": "0",
524
- "description": "Minimum slider value.",
525
530
  "fieldName": "min"
526
531
  },
527
532
  {
533
+ "description": "Maximum slider value.",
528
534
  "name": "max",
529
535
  "type": {
530
536
  "text": "number"
531
537
  },
532
538
  "default": "100",
533
- "description": "Maximum slider value.",
534
539
  "fieldName": "max"
535
540
  },
536
541
  {
542
+ "description": "Slider step.",
537
543
  "name": "step",
538
544
  "type": {
539
545
  "text": "number"
540
546
  },
541
547
  "default": "1",
542
- "description": "Slider step.",
543
548
  "fieldName": "step"
544
549
  },
545
550
  {
551
+ "description": "Current slider value.",
546
552
  "name": "value",
547
553
  "type": {
548
554
  "text": "number"
549
555
  },
550
- "description": "Current slider value.",
551
556
  "fieldName": "value"
552
557
  },
553
558
  {
559
+ "description": "Initial uncontrolled slider value. Has no effect after the first user interaction or `value` write.",
554
560
  "name": "default-value",
555
561
  "type": {
556
562
  "text": "number | undefined"
557
563
  },
558
- "description": "Initial uncontrolled slider value. Has no effect after the first user interaction or `value` write.",
559
564
  "fieldName": "defaultValue"
560
565
  },
561
566
  {
567
+ "description": "Disable the underlying input.",
562
568
  "name": "disabled",
563
569
  "type": {
564
570
  "text": "boolean"
565
571
  },
566
572
  "default": "false",
567
- "description": "Disable the underlying input.",
568
573
  "fieldName": "disabled"
569
574
  },
570
575
  {
576
+ "description": "Prevents edits while preserving normal display. Not a native range attribute.",
571
577
  "name": "readonly",
572
578
  "type": {
573
579
  "text": "boolean"
574
580
  },
575
581
  "default": "false",
576
- "description": "Prevents edits while preserving normal display. Not a native range attribute.",
577
582
  "fieldName": "readonly"
578
583
  },
579
584
  {
585
+ "description": "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.",
580
586
  "name": "display",
581
587
  "type": {
582
588
  "text": "DisplayValue"
583
589
  },
584
590
  "default": "null",
585
- "description": "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.",
586
591
  "fieldName": "display"
587
592
  },
588
593
  {
594
+ "description": "Screen-reader value text. When set, forwarded as `aria-valuetext` on the native input.",
589
595
  "name": "value-text",
590
596
  "type": {
591
597
  "text": "string"
592
598
  },
593
599
  "default": "\"\"",
594
- "description": "Screen-reader value text. When set, forwarded as `aria-valuetext` on the native input.",
595
600
  "fieldName": "valueText"
596
601
  },
597
602
  {
603
+ "description": "Orientation; reflected as an attribute and forwarded to `aria-orientation`.",
598
604
  "name": "orientation",
599
605
  "type": {
600
606
  "text": "\"horizontal\" | \"vertical\""
601
607
  },
602
608
  "default": "\"horizontal\"",
603
- "description": "Orientation; reflected as an attribute and forwarded to `aria-orientation`.",
604
609
  "fieldName": "orientation"
605
610
  }
606
611
  ],
@@ -22,7 +22,7 @@ function d(r, t) {
22
22
  }
23
23
  const p = class p extends f {
24
24
  constructor() {
25
- 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, {
25
+ 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, {
26
26
  selector: ':scope > input[type="range"]',
27
27
  observe: !0,
28
28
  onChange: (t, e) => this._setupInput(t, e),
@@ -65,11 +65,11 @@ const p = class p extends f {
65
65
  this._unwireInput(), super.disconnectedCallback();
66
66
  }
67
67
  updated() {
68
- const t = this._nativeInput;
68
+ const t = this._$nativeInput;
69
69
  t && (t.disabled = this.disabled, this._syncAriaAttributes(t));
70
70
  }
71
71
  render() {
72
- if (!this._nativeInput) return o;
72
+ if (!this._$nativeInput) return o;
73
73
  const e = h`
74
74
  <span
75
75
  part="value-display"
@@ -116,15 +116,15 @@ const p = class p extends f {
116
116
  return this.valueText || String(this.value);
117
117
  }
118
118
  get _nativeInputValue() {
119
- const t = this._nativeInput?.valueAsNumber;
119
+ const t = this._$nativeInput?.valueAsNumber;
120
120
  return t === void 0 || isNaN(t) ? 0 : t;
121
121
  }
122
122
  _setupInput(t, e) {
123
123
  if (e && e !== t && this._unwireInput(e), !t) {
124
- this._nativeInput = null;
124
+ this._$nativeInput = null;
125
125
  return;
126
126
  }
127
- !this.hasAttribute("disabled") && t.disabled && (this.disabled = !0), this._nativeInput = t, this._applyInitialValueToInput(t), this._wireInput(t), this.requestUpdate();
127
+ !this.hasAttribute("disabled") && t.disabled && (this.disabled = !0), this._$nativeInput = t, this._applyInitialValueToInput(t), this._wireInput(t), this.requestUpdate();
128
128
  }
129
129
  _applyInitialValueToInput(t) {
130
130
  if (this._value !== void 0) {
@@ -139,12 +139,12 @@ const p = class p extends f {
139
139
  isNaN(e) || (this._defaultValue = e);
140
140
  }
141
141
  _applyValueToInput(t) {
142
- this._nativeInput && (this._nativeInput.value = String(t));
142
+ this._$nativeInput && (this._$nativeInput.value = String(t));
143
143
  }
144
144
  _wireInput(t) {
145
145
  t.addEventListener("input", this._onInput), t.addEventListener("change", this._onChange), t.addEventListener("keydown", this._onKeydown);
146
146
  }
147
- _unwireInput(t = this._nativeInput) {
147
+ _unwireInput(t = this._$nativeInput) {
148
148
  t?.removeEventListener("input", this._onInput), t?.removeEventListener("change", this._onChange), t?.removeEventListener("keydown", this._onKeydown);
149
149
  }
150
150
  _syncAriaAttributes(t) {
@@ -169,13 +169,13 @@ const p = class p extends f {
169
169
  this._value = t.valueAsNumber, this._valueInitialized = !0, this.requestUpdate("value", e);
170
170
  }
171
171
  _progressStyle() {
172
- const t = this._nativeInput;
172
+ const t = this._$nativeInput;
173
173
  if (!t) return "";
174
174
  const e = d(t.min, 0), s = d(t.max, 100), i = v(t.valueAsNumber, e, s) * 100;
175
175
  return this.orientation === "vertical" ? `bottom:0%;height:${i.toFixed(3)}%` : `left:0%;width:${i.toFixed(3)}%`;
176
176
  }
177
177
  _floatStyle() {
178
- const t = this._nativeInput;
178
+ const t = this._$nativeInput;
179
179
  if (!t) return "";
180
180
  const e = d(t.min, 0), s = d(t.max, 100), i = v(t.valueAsNumber, e, s), u = (1 - i * 2).toFixed(4);
181
181
  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))`;
@@ -329,4 +329,4 @@ l([
329
329
  export {
330
330
  a as R
331
331
  };
332
- //# sourceMappingURL=rc-slider-CPApkY9I.js.map
332
+ //# sourceMappingURL=rc-slider-CRGEKO0W.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rc-slider-CRGEKO0W.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 * @attr min - Minimum slider value.\n * @attr max - Maximum slider value.\n * @attr step - Slider step.\n * @attr value - Current slider value. Host writes are silent.\n * @attr default-value - Initial uncontrolled slider value. Has no effect after the first user\n * interaction or `value` write.\n * @attr disabled - Disables the underlying input.\n * @attr readonly - Prevents edits while preserving normal display. Not a native range attribute.\n * @attr display - Controls the live value display: absent (none), `float`, `inline-start`, or\n * `inline-end`.\n * @attr value-text - Screen-reader value text, forwarded as `aria-valuetext` on the native input.\n * @attr orientation - Orientation, forwarded to `aria-orientation`: `horizontal` or `vertical`.\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-vertical-size=12.5rem] - Track length when `orientation=\"vertical\"`.\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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"}
@@ -1,4 +1,4 @@
1
- import { R as e } from "./rc-slider-CPApkY9I.js";
1
+ import { R as e } from "./rc-slider-CRGEKO0W.js";
2
2
  customElements.get("rc-slider") || customElements.define("rc-slider", e);
3
3
  export {
4
4
  e as RCSlider
package/dist/rc-slider.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as o } from "./rc-slider-CPApkY9I.js";
1
+ import { R as o } from "./rc-slider-CRGEKO0W.js";
2
2
  export {
3
3
  o as RCSlider
4
4
  };
@@ -36,9 +36,23 @@ type DisplayValue = "float" | "inline-start" | "inline-end" | null;
36
36
  * @fires rc-slider-input - Fires continuously while the value changes. Detail: `{ value }`.
37
37
  * @fires rc-slider-change - Fires when the committed value changes (on release). Detail: `{ value }`.
38
38
  *
39
+ * @attr min - Minimum slider value.
40
+ * @attr max - Maximum slider value.
41
+ * @attr step - Slider step.
42
+ * @attr value - Current slider value. Host writes are silent.
43
+ * @attr default-value - Initial uncontrolled slider value. Has no effect after the first user
44
+ * interaction or `value` write.
45
+ * @attr disabled - Disables the underlying input.
46
+ * @attr readonly - Prevents edits while preserving normal display. Not a native range attribute.
47
+ * @attr display - Controls the live value display: absent (none), `float`, `inline-start`, or
48
+ * `inline-end`.
49
+ * @attr value-text - Screen-reader value text, forwarded as `aria-valuetext` on the native input.
50
+ * @attr orientation - Orientation, forwarded to `aria-orientation`: `horizontal` or `vertical`.
51
+ *
39
52
  * @cssprop [--rc-thumb-radius=9px] - Half the thumb width; used to position the float value display.
40
53
  * @cssprop [--rc-slider-gap=var(--rc-control-gap)] - Gap between track and inline value display.
41
54
  * @cssprop [--rc-slider-control-size=var(--rc-control-block-size)] - Track hit-area block size.
55
+ * @cssprop [--rc-slider-vertical-size=12.5rem] - Track length when `orientation="vertical"`.
42
56
  * @cssprop [--rc-slider-track-size=0.1875rem] - Visual track thickness.
43
57
  * @cssprop [--rc-slider-track-background=CanvasText] - Unfilled track color.
44
58
  * @cssprop [--rc-slider-track-opacity=0.25] - Unfilled track opacity.
@@ -88,7 +102,7 @@ export declare class RCSlider extends LitElement {
88
102
  valueText: string;
89
103
  /** Orientation; reflected as an attribute and forwarded to `aria-orientation`. */
90
104
  orientation: "horizontal" | "vertical";
91
- private _nativeInput;
105
+ private _$nativeInput;
92
106
  private readonly _nativeInputController;
93
107
  disconnectedCallback(): void;
94
108
  updated(): void;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.3.1",
6
+ "version": "0.4.0",
7
7
  "description": "Single-thumb slider backed by a native <input type=\"range\"> with custom track and value display hooks.",
8
8
  "repository": {
9
9
  "type": "git",
@@ -1 +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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"}