import { jsx as N } from "react/jsx-runtime";
import $ from "react";
import { o as T } from "./create-component-CVXl33PD.mjs";
import { a as _, r as y, _ as i, n as s, x as c, c as v, E as f, b as L } from "./class-map-CwiboTfb.mjs";
import "./elevation-Dg8ssDJC.mjs";
import "./ripple-pQcEjR05.mjs";
import { e as V, a as u, r as h } from "./animation-DjClVFum.mjs";
import { o as P } from "./style-map-CdUj7GnE.mjs";
import { m as H } from "./delegate-BXi1gVeU.mjs";
import { i as O, d as R } from "./form-label-activation-ed0HgVsy.mjs";
import { r as g } from "./redispatch-event-taWUbWUt.mjs";
import { m as F } from "./element-internals-3IY9gE4L.mjs";
import { m as I, g as M } from "./form-associated-CyYeHPMb.mjs";
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
function w(l) {
return (e, a) => V(e, a, { async get() {
var t;
return await this.updateComplete, ((t = this.renderRoot) == null ? void 0 : t.querySelector(l)) ?? null;
} });
}
/**
* @license
* Copyright 2024 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
const B = _`@media(forced-colors: active){:host{--md-slider-active-track-color: CanvasText;--md-slider-disabled-active-track-color: GrayText;--md-slider-disabled-active-track-opacity: 1;--md-slider-disabled-handle-color: GrayText;--md-slider-disabled-inactive-track-color: GrayText;--md-slider-disabled-inactive-track-opacity: 1;--md-slider-focus-handle-color: CanvasText;--md-slider-handle-color: CanvasText;--md-slider-handle-shadow-color: Canvas;--md-slider-hover-handle-color: CanvasText;--md-slider-hover-state-layer-color: Canvas;--md-slider-hover-state-layer-opacity: 1;--md-slider-inactive-track-color: Canvas;--md-slider-label-container-color: Canvas;--md-slider-label-text-color: CanvasText;--md-slider-pressed-handle-color: CanvasText;--md-slider-pressed-state-layer-color: Canvas;--md-slider-pressed-state-layer-opacity: 1;--md-slider-with-overlap-handle-outline-color: CanvasText}.label,.label::before{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}:host(:not([disabled])) .track::before{border:1px solid var(--_active-track-color)}.tickmarks::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='CanvasText'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E")}.tickmarks::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E")}:host([disabled]) .tickmarks::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E")}}
`;
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
function b(l, e, a) {
return l ? e(l) : a == null ? void 0 : a(l);
}
/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
const q = H(I(F(y)));
let r = class extends q {
/**
* The HTML name to use in form submission for a range slider's starting
* value. Use `name` instead if both the start and end values should use the
* same name.
*/
get nameStart() {
return this.getAttribute("name-start") ?? this.name;
}
set nameStart(e) {
this.setAttribute("name-start", e);
}
/**
* The HTML name to use in form submission for a range slider's ending value.
* Use `name` instead if both the start and end values should use the same
* name.
*/
get nameEnd() {
return this.getAttribute("name-end") ?? this.nameStart;
}
set nameEnd(e) {
this.setAttribute("name-end", e);
}
// Note: start aria-* properties are only applied when range=true, which is
// why they do not need to handle both cases.
get renderAriaLabelStart() {
const { ariaLabel: e } = this;
return this.ariaLabelStart || e && `${e} start` || this.valueLabelStart || String(this.valueStart);
}
get renderAriaValueTextStart() {
return this.ariaValueTextStart || this.valueLabelStart || String(this.valueStart);
}
// Note: end aria-* properties are applied for single and range sliders, which
// is why it needs to handle `this.range` (while start aria-* properties do
// not).
get renderAriaLabelEnd() {
const { ariaLabel: e } = this;
return this.range ? this.ariaLabelEnd || e && `${e} end` || this.valueLabelEnd || String(this.valueEnd) : e || this.valueLabel || String(this.value);
}
get renderAriaValueTextEnd() {
if (this.range)
return this.ariaValueTextEnd || this.valueLabelEnd || String(this.valueEnd);
const { ariaValueText: e } = this;
return e || this.valueLabel || String(this.value);
}
constructor() {
super(), this.min = 0, this.max = 100, this.valueLabel = "", this.valueLabelStart = "", this.valueLabelEnd = "", this.ariaLabelStart = "", this.ariaValueTextStart = "", this.ariaLabelEnd = "", this.ariaValueTextEnd = "", this.step = 1, this.ticks = !1, this.labeled = !1, this.range = !1, this.handleStartHover = !1, this.handleEndHover = !1, this.startOnTop = !1, this.handlesOverlapping = !1, this.ripplePointerId = 1, this.isRedispatchingEvent = !1, this.addEventListener("click", (e) => {
!O(e) || !this.inputEnd || (this.focus(), R(this.inputEnd));
});
}
focus() {
var e;
(e = this.inputEnd) == null || e.focus();
}
willUpdate(e) {
var t, n;
this.renderValueStart = e.has("valueStart") ? this.valueStart : (t = this.inputStart) == null ? void 0 : t.valueAsNumber;
const a = e.has("valueEnd") && this.range || e.has("value");
this.renderValueEnd = a ? this.range ? this.valueEnd : this.value : (n = this.inputEnd) == null ? void 0 : n.valueAsNumber, e.get("handleStartHover") !== void 0 ? this.toggleRippleHover(this.rippleStart, this.handleStartHover) : e.get("handleEndHover") !== void 0 && this.toggleRippleHover(this.rippleEnd, this.handleEndHover);
}
updated(e) {
var a, t;
if (this.range && (this.renderValueStart = this.inputStart.valueAsNumber), this.renderValueEnd = this.inputEnd.valueAsNumber, this.range) {
const n = (this.max - this.min) / 3;
if (this.valueStart === void 0) {
this.inputStart.valueAsNumber = this.min + n;
const o = this.inputStart.valueAsNumber;
this.valueStart = this.renderValueStart = o;
}
if (this.valueEnd === void 0) {
this.inputEnd.valueAsNumber = this.min + 2 * n;
const o = this.inputEnd.valueAsNumber;
this.valueEnd = this.renderValueEnd = o;
}
} else
this.value ?? (this.value = this.renderValueEnd);
if (e.has("range") || e.has("renderValueStart") || e.has("renderValueEnd") || this.isUpdatePending) {
const n = (a = this.handleStart) == null ? void 0 : a.querySelector(".handleNub"), o = (t = this.handleEnd) == null ? void 0 : t.querySelector(".handleNub");
this.handlesOverlapping = U(n, o);
}
this.performUpdate();
}
render() {
const e = this.step === 0 ? 1 : this.step, a = Math.max(this.max - this.min, e), t = this.range ? ((this.renderValueStart ?? this.min) - this.min) / a : 0, n = ((this.renderValueEnd ?? this.min) - this.min) / a, o = {
// for clipping inputs and active track.
"--_start-fraction": String(t),
"--_end-fraction": String(n),
// for generating tick marks
"--_tick-count": String(a / e)
}, d = { ranged: this.range }, m = this.valueLabelStart || String(this.renderValueStart), x = (this.range ? this.valueLabelEnd : this.valueLabel) || String(this.renderValueEnd), S = {
start: !0,
value: this.renderValueStart,
ariaLabel: this.renderAriaLabelStart,
ariaValueText: this.renderAriaValueTextStart,
ariaMin: this.min,
ariaMax: this.valueEnd ?? this.max
}, E = {
start: !1,
value: this.renderValueEnd,
ariaLabel: this.renderAriaLabelEnd,
ariaValueText: this.renderAriaValueTextEnd,
ariaMin: this.range ? this.valueStart ?? this.min : this.min,
ariaMax: this.max
}, z = {
start: !0,
hover: this.handleStartHover,
label: m
}, A = {
start: !1,
hover: this.handleEndHover,
label: x
}, C = {
hover: this.handleStartHover || this.handleEndHover
};
return c`
`;
}
renderHandle({ start: e, hover: a, label: t }) {
const n = !this.disabled && e === this.startOnTop, o = !this.disabled && this.handlesOverlapping, d = e ? "start" : "end";
return c`
${b(this.labeled, () => this.renderLabel(t))}
`;
}
renderInput({ start: e, value: a, ariaLabel: t, ariaValueText: n, ariaMin: o, ariaMax: d }) {
const m = e ? "start" : "end";
return c``;
}
async toggleRippleHover(e, a) {
const t = await e;
t && (a ? t.handlePointerenter(new PointerEvent("pointerenter", {
isPrimary: !0,
pointerId: this.ripplePointerId
})) : t.handlePointerleave(new PointerEvent("pointerleave", {
isPrimary: !0,
pointerId: this.ripplePointerId
})));
}
handleFocus(e) {
this.updateOnTop(e.target);
}
startAction(e) {
const a = e.target, t = a === this.inputStart ? this.inputEnd : this.inputStart;
this.action = {
canFlip: e.type === "pointerdown",
flipped: !1,
target: a,
fixed: t,
values: /* @__PURE__ */ new Map([
[a, a.valueAsNumber],
[t, t == null ? void 0 : t.valueAsNumber]
])
};
}
finishAction(e) {
this.action = void 0;
}
handleKeydown(e) {
this.startAction(e);
}
handleKeyup(e) {
this.finishAction(e);
}
handleDown(e) {
this.startAction(e), this.ripplePointerId = e.pointerId;
const a = e.target === this.inputStart;
this.handleStartHover = !this.disabled && a && !!this.handleStart, this.handleEndHover = !this.disabled && !a && !!this.handleEnd;
}
async handleUp(e) {
if (!this.action)
return;
const { target: a, values: t, flipped: n } = this.action;
await new Promise(requestAnimationFrame), a !== void 0 && (a.focus(), n && a.valueAsNumber !== t.get(a) && a.dispatchEvent(new Event("change", { bubbles: !0 }))), this.finishAction(e);
}
/**
* The move handler tracks handle hovering to facilitate proper ripple
* behavior on the slider handle. This is needed because user interaction with
* the native input is leveraged to position the handle. Because the separate
* displayed handle element has pointer events disabled (to allow interaction
* with the input) and the input's handle is a pseudo-element, neither can be
* the ripple's interactive element. Therefore the input is the ripple's
* interactive element and has a `ripple` directive; however the ripple
* is gated on the handle being hovered. In addition, because the ripple
* hover state is being specially handled, it must be triggered independent
* of the directive. This is done based on the hover state when the
* slider is updated.
*/
handleMove(e) {
this.handleStartHover = !this.disabled && k(e, this.handleStart), this.handleEndHover = !this.disabled && k(e, this.handleEnd);
}
handleEnter(e) {
this.handleMove(e);
}
handleLeave() {
this.handleStartHover = !1, this.handleEndHover = !1;
}
updateOnTop(e) {
this.startOnTop = e.classList.contains("start");
}
needsClamping() {
if (!this.action)
return !1;
const { target: e, fixed: a } = this.action;
return e === this.inputStart ? e.valueAsNumber > a.valueAsNumber : e.valueAsNumber < a.valueAsNumber;
}
// if start/end start coincident and the first drag input would e.g. move
// start > end, avoid clamping and "flip" to use the other input
// as the action target.
isActionFlipped() {
const { action: e } = this;
if (!e)
return !1;
const { target: a, fixed: t, values: n } = e;
return e.canFlip && n.get(a) === n.get(t) && this.needsClamping() && (e.canFlip = !1, e.flipped = !0, e.target = t, e.fixed = a), e.flipped;
}
// when flipped, apply the drag input to the flipped target and reset
// the actual target.
flipAction() {
if (!this.action)
return !1;
const { target: e, fixed: a, values: t } = this.action, n = e.valueAsNumber !== a.valueAsNumber;
return e.valueAsNumber = a.valueAsNumber, a.valueAsNumber = t.get(a), n;
}
// clamp such that start does not move beyond end and visa versa.
clampAction() {
if (!this.needsClamping() || !this.action)
return !1;
const { target: e, fixed: a } = this.action;
return e.valueAsNumber = a.valueAsNumber, !0;
}
handleInput(e) {
if (this.isRedispatchingEvent)
return;
let a = !1, t = !1;
this.range && (this.isActionFlipped() && (a = !0, t = this.flipAction()), this.clampAction() && (a = !0, t = !1));
const n = e.target;
this.updateOnTop(n), this.range ? (this.valueStart = this.inputStart.valueAsNumber, this.valueEnd = this.inputEnd.valueAsNumber) : this.value = this.inputEnd.valueAsNumber, a && e.stopPropagation(), t && (this.isRedispatchingEvent = !0, g(n, e), this.isRedispatchingEvent = !1);
}
handleChange(e) {
const a = e.target, { target: t, values: n } = this.action ?? {};
t && t.valueAsNumber === n.get(a) || g(this, e), this.finishAction(e);
}
[M]() {
if (this.range) {
const e = new FormData();
return e.append(this.nameStart, String(this.valueStart)), e.append(this.nameEnd, String(this.valueEnd)), e;
}
return String(this.value);
}
formResetCallback() {
if (this.range) {
const a = this.getAttribute("value-start");
this.valueStart = a !== null ? Number(a) : void 0;
const t = this.getAttribute("value-end");
this.valueEnd = t !== null ? Number(t) : void 0;
return;
}
const e = this.getAttribute("value");
this.value = e !== null ? Number(e) : void 0;
}
formStateRestoreCallback(e) {
if (Array.isArray(e)) {
const [[, a], [, t]] = e;
this.valueStart = Number(a), this.valueEnd = Number(t), this.range = !0;
return;
}
this.value = Number(e), this.range = !1;
}
};
r.shadowRootOptions = {
...y.shadowRootOptions,
delegatesFocus: !0
};
i([
s({ type: Number })
], r.prototype, "min", void 0);
i([
s({ type: Number })
], r.prototype, "max", void 0);
i([
s({ type: Number })
], r.prototype, "value", void 0);
i([
s({ type: Number, attribute: "value-start" })
], r.prototype, "valueStart", void 0);
i([
s({ type: Number, attribute: "value-end" })
], r.prototype, "valueEnd", void 0);
i([
s({ attribute: "value-label" })
], r.prototype, "valueLabel", void 0);
i([
s({ attribute: "value-label-start" })
], r.prototype, "valueLabelStart", void 0);
i([
s({ attribute: "value-label-end" })
], r.prototype, "valueLabelEnd", void 0);
i([
s({ attribute: "aria-label-start" })
], r.prototype, "ariaLabelStart", void 0);
i([
s({ attribute: "aria-valuetext-start" })
], r.prototype, "ariaValueTextStart", void 0);
i([
s({ attribute: "aria-label-end" })
], r.prototype, "ariaLabelEnd", void 0);
i([
s({ attribute: "aria-valuetext-end" })
], r.prototype, "ariaValueTextEnd", void 0);
i([
s({ type: Number })
], r.prototype, "step", void 0);
i([
s({ type: Boolean })
], r.prototype, "ticks", void 0);
i([
s({ type: Boolean })
], r.prototype, "labeled", void 0);
i([
s({ type: Boolean })
], r.prototype, "range", void 0);
i([
u("input.start")
], r.prototype, "inputStart", void 0);
i([
u(".handle.start")
], r.prototype, "handleStart", void 0);
i([
w("md-ripple.start")
], r.prototype, "rippleStart", void 0);
i([
u("input.end")
], r.prototype, "inputEnd", void 0);
i([
u(".handle.end")
], r.prototype, "handleEnd", void 0);
i([
w("md-ripple.end")
], r.prototype, "rippleEnd", void 0);
i([
h()
], r.prototype, "handleStartHover", void 0);
i([
h()
], r.prototype, "handleEndHover", void 0);
i([
h()
], r.prototype, "startOnTop", void 0);
i([
h()
], r.prototype, "handlesOverlapping", void 0);
i([
h()
], r.prototype, "renderValueStart", void 0);
i([
h()
], r.prototype, "renderValueEnd", void 0);
function k({ x: l, y: e }, a) {
if (!a)
return !1;
const { top: t, left: n, bottom: o, right: d } = a.getBoundingClientRect();
return l >= n && l <= d && e >= t && e <= o;
}
function U(l, e) {
if (!(l && e))
return !1;
const a = l.getBoundingClientRect(), t = e.getBoundingClientRect();
return !(a.top > t.bottom || a.right < t.left || a.bottom < t.top || a.left > t.right);
}
/**
* @license
* Copyright 2024 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
const X = _`:host{--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, var(--md-sys-shape-corner-full, 9999px));--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-track-opacity: var(--md-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color: var(--md-slider-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);--_disabled-inactive-track-color: var(--md-slider-disabled-inactive-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-inactive-track-opacity: var(--md-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color: var(--md-slider-focus-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-color: var(--md-slider-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-elevation: var(--md-slider-handle-elevation, 1);--_handle-height: var(--md-slider-handle-height, 20px);--_handle-shadow-color: var(--md-slider-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-shape: var(--md-slider-handle-shape, var(--md-sys-shape-corner-full, 9999px));--_handle-width: var(--md-slider-handle-width, 20px);--_hover-handle-color: var(--md-slider-hover-handle-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-slider-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-slider-hover-state-layer-opacity, 0.08);--_inactive-track-color: var(--md-slider-inactive-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_inactive-track-height: var(--md-slider-inactive-track-height, 4px);--_inactive-track-shape: var(--md-slider-inactive-track-shape, var(--md-sys-shape-corner-full, 9999px));--_label-container-color: var(--md-slider-label-container-color, var(--md-sys-color-primary, #6750a4));--_label-container-height: var(--md-slider-label-container-height, 28px);--_pressed-handle-color: var(--md-slider-pressed-handle-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-slider-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-slider-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color: var(--md-slider-with-overlap-handle-outline-color, var(--md-sys-color-on-primary, #fff));--_with-overlap-handle-outline-width: var(--md-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color: var(--md-slider-with-tick-marks-active-container-color, var(--md-sys-color-on-primary, #fff));--_with-tick-marks-container-size: var(--md-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-container-color: var(--md-slider-with-tick-marks-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_with-tick-marks-inactive-container-color: var(--md-slider-with-tick-marks-inactive-container-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-slider-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-slider-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-slider-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-slider-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-weight: var(--md-slider-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_start-fraction: 0;--_end-fraction: 0;--_tick-count: 0;display:inline-flex;vertical-align:middle;min-inline-size:200px;--md-elevation-level: var(--_handle-elevation);--md-elevation-shadow-color: var(--_handle-shadow-color)}md-focus-ring{height:48px;inset:unset;width:48px}md-elevation{transition-duration:250ms}@media(prefers-reduced-motion){.label{transition-duration:0}}:host([disabled]){opacity:var(--_disabled-active-track-opacity);--md-elevation-level: var(--_disabled-handle-elevation)}.container{flex:1;display:flex;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.track,.tickmarks{position:absolute;inset:0;display:flex;align-items:center}.track::before,.tickmarks::before,.track::after,.tickmarks::after{position:absolute;content:"";inset-inline-start:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size)*2)/var(--_tick-count)) 100%}.track::before,.tickmarks::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape)}.track::before{background:var(--_inactive-track-color)}.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-inactive-container-color) 0, var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::before{opacity:calc(1/var(--_disabled-active-track-opacity)*var(--_disabled-inactive-track-opacity));background:var(--_disabled-inactive-track-color)}.track::after,.tickmarks::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)))}.track::after{background:var(--_active-track-color)}.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-active-container-color) 0, var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.track:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.tickmarks:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([disabled]) .track::after{background:var(--_disabled-active-track-color)}:host([disabled]) .tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-disabled-container-color) 0, var(--_with-tick-marks-disabled-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.handleContainerPadded{position:relative;block-size:100%;inline-size:100%;padding-inline:calc(var(--_state-layer-size)/2)}.handleContainerBlock{position:relative;block-size:100%;inline-size:100%}.handleContainer{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100%*var(--_start-fraction));inline-size:calc(100%*(var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:flex;place-content:center;place-items:center}.handleNub{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}:host([disabled]) .handleNub{background:var(--_disabled-handle-color)}input.end:focus~.handleContainerPadded .handle.end>.handleNub,input.start:focus~.handleContainerPadded .handle.start>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainerPadded .handle.hover>.handleNub{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handleContainerPadded .handle.end>.handleNub,:host(:not([disabled])) input.start:active~.handleContainerPadded .handle.start>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping .label,.onTop.isOverlapping .label::before{outline:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.onTop.isOverlapping .handleNub{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:flex;padding:4px;place-content:center;place-items:center;border-radius:var(--md-sys-shape-corner-full, 9999px);color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1);transform-origin:center bottom;transform:scale(0)}:host(:focus-within) .label,.handleContainer.hover .label,:where(:has(input:active)) .label{transform:scale(1)}.label::before,.label::after{position:absolute;display:block;content:"";background:inherit}.label::before{inline-size:calc(var(--_label-container-height)/2);block-size:calc(var(--_label-container-height)/2);bottom:calc(var(--_label-container-height)/-10);transform:rotate(45deg)}.label::after{inset:0px;border-radius:inherit}.labelContent{z-index:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;box-sizing:border-box;height:100%;width:100%;margin:0;background:rgba(0,0,0,0);cursor:pointer;pointer-events:auto;appearance:none}input[type=range]:focus{outline:none}::-webkit-slider-runnable-track{-webkit-appearance:none}::-moz-range-track{appearance:none}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_handle-height);inline-size:var(--_handle-width);opacity:0;z-index:2}input.end::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_end-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}input.end:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}input.start::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_start-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}input.start:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}::-moz-range-thumb{appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.ranged input.start{clip-path:inset(0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))) 0 0)}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.end{clip-path:inset(0 0 0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)))}.ranged input.end:dir(rtl){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.onTop{z-index:1}.handle{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}
`;
/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
let p = class extends r {
};
p.styles = [X, B];
p = i([
L("md-slider")
], p);
const D = T({
react: $,
elementClass: p,
tagName: "md-slider"
}), le = ({
className: l,
id: e,
style: a,
...t
}) => /* @__PURE__ */ N(
D,
{
className: l,
id: e,
style: a,
...t
}
);
export {
le as Slider
};