@greypan/web-ui 11.2.0 → 12.0.0

package/dist/components/slider/index.js

@@ -1,95 +1,124 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import t from "../../classes/glass.js";
-import { installPointerFocusSuppression as n } from "../../shared/focus/pointer-focus.js";
-import { FormAssociated as r, FormAssociationController as i, defineFormAssociation as a } from "../../shared/form-association/index.js";
-import { normalizeNumber as o } from "../../shared/normalize/index.js";
-import { createFieldId as s } from "../../shared/form-association/field-id.js";
-import { attachDragGesture as c } from "../../shared/gesture/drag-gesture.js";
-import { clamp as l } from "../../shared/gesture/physics.js";
-import u from "./style.js";
-import { LitElement as d, html as f, nothing as p, unsafeCSS as m } from "lit";
-import { customElement as h, property as g, state as _ } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { ifDefined as y } from "lit/directives/if-defined.js";
-import { styleMap as b } from "lit/directives/style-map.js";
-//#region src/components/slider/index.ts
-var x = 6;
-n();
-var S = class extends r(d) {
-	constructor(...e) {
-		super(...e), this.disabled = !1, this.marks = !1, this.vertical = !1, this.name = "", this.required = !1, this.ariaLabel = null, this._fieldId = s("web-ui-slider"), this._renderedLabelledbyText = "", this._labelledbyControlTargets = /* @__PURE__ */ new Set(), this._labelledbyObserver = new MutationObserver(() => {
-			this._getLabelledbyText() !== this._renderedLabelledbyText && this.requestUpdate(), this._observeLabelledbyTargets();
-		}), this._handleLabelledbyControlValueChange = () => {
-			this._getLabelledbyText() !== this._renderedLabelledbyText && this.requestUpdate();
-		}, this._value = 0, this._min = 0, this._max = 100, this._step = 1, this._dragging = !1, this._pressed = !1, this._dragGestureHandle = null, this._formAssociation = a({
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import glass_default from "../../classes/glass.js";
+import { installPointerFocusSuppression } from "../../shared/focus/pointer-focus.js";
+import { FormAssociated, FormAssociationController, defineFormAssociation } from "../../shared/form-association/index.js";
+import { normalizeNumber } from "../../shared/normalize/index.js";
+import { createFieldId } from "../../shared/form-association/field-id.js";
+import { attachDragGesture } from "../../shared/gesture/drag-gesture.js";
+import { clamp } from "../../shared/gesture/physics.js";
+import style_default from "./style.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+// src/components/slider/index.ts
+const POINTER_DRAG_THRESHOLD = 6;
+installPointerFocusSuppression();
+let WebUiSlider = class WebUiSlider extends FormAssociated(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.marks = false;
+		this.vertical = false;
+		this.name = "";
+		this.required = false;
+		this.ariaLabel = null;
+		this._fieldId = createFieldId("web-ui-slider");
+		this._renderedLabelledbyText = "";
+		this._labelledbyControlTargets = /* @__PURE__ */ new Set();
+		this._labelledbyObserver = new MutationObserver(() => {
+			if (this._getLabelledbyText() !== this._renderedLabelledbyText) this.requestUpdate();
+			this._observeLabelledbyTargets();
+		});
+		this._handleLabelledbyControlValueChange = () => {
+			if (this._getLabelledbyText() !== this._renderedLabelledbyText) this.requestUpdate();
+		};
+		this._value = 0;
+		this._min = 0;
+		this._max = 100;
+		this._step = 1;
+		this._dragging = false;
+		this._pressed = false;
+		this._dragGestureHandle = null;
+		this._formAssociation = defineFormAssociation({
 			host: this,
 			initialize: () => {
 				this._value = this._normalizeValue(this._value);
 			},
 			getState: () => this._value,
-			setState: (e) => {
-				this.value = e;
+			setState: (value) => {
+				this.value = value;
 			},
 			getFormValue: () => String(this._value),
 			getFormState: () => String(this._value),
-			restoreState: (e) => {
-				if (typeof e != "string") return;
-				let t = Number(e);
-				Number.isFinite(t) && (this.value = t);
+			restoreState: (state) => {
+				if (typeof state !== "string") return;
+				const value = Number(state);
+				if (Number.isFinite(value)) this.value = value;
 			},
-			syncValidity: (e) => {
-				typeof e.setValidity == "function" && e.setValidity({});
+			syncValidity: (internals) => {
+				if (typeof internals.setValidity === "function") internals.setValidity({});
 			}
-		}).make(), this._formAssociationController = new i(this, this._formAssociation);
+		}).make();
+		this._formAssociationController = new FormAssociationController(this, this._formAssociation);
 	}
 	static {
-		this.styles = [m(t), m(u)];
+		this.styles = [unsafeCSS(glass_default), unsafeCSS(style_default)];
 	}
 	get value() {
 		return this._value;
 	}
-	set value(e) {
-		let t = o(e, -Infinity, Infinity, 0), n = this._value;
-		this._value = t, this._formAssociation.sync(), this.requestUpdate("value", n);
+	set value(v) {
+		const normalized = normalizeNumber(v, -Infinity, Infinity, 0);
+		const old = this._value;
+		this._value = normalized;
+		this._formAssociation.sync();
+		this.requestUpdate("value", old);
 	}
 	get min() {
 		return this._min;
 	}
-	set min(e) {
-		this._min = o(e, -Infinity, Infinity, 0);
+	set min(v) {
+		this._min = normalizeNumber(v, -Infinity, Infinity, 0);
 	}
 	get max() {
 		return this._max;
 	}
-	set max(e) {
-		this._max = o(e, -Infinity, Infinity, 100);
+	set max(v) {
+		this._max = normalizeNumber(v, -Infinity, Infinity, 100);
 	}
 	get step() {
 		return this._step;
 	}
-	set step(e) {
-		this._step = o(e, -Infinity, Infinity, 1);
+	set step(v) {
+		this._step = normalizeNumber(v, -Infinity, Infinity, 1);
 	}
 	disconnectedCallback() {
-		this._labelledbyObserver.disconnect(), this._syncLabelledbyControlTargets(/* @__PURE__ */ new Set()), super.disconnectedCallback(), this._dragGestureHandle?.destroy(), this._dragGestureHandle = null;
+		this._labelledbyObserver.disconnect();
+		this._syncLabelledbyControlTargets(/* @__PURE__ */ new Set());
+		super.disconnectedCallback();
+		this._dragGestureHandle?.destroy();
+		this._dragGestureHandle = null;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._observeLabelledbyTargets();
+		super.connectedCallback();
+		this._observeLabelledbyTargets();
 	}
-	updated(e) {
-		e.has("ariaLabelledby") && this._observeLabelledbyTargets();
+	updated(changed) {
+		if (changed.has("ariaLabelledby")) this._observeLabelledbyTargets();
 	}
 	get _isDisabled() {
 		return this.disabled || this._formAssociation.isFormDisabled();
 	}
-	willUpdate(e) {
-		if (e.has("value") || e.has("min") || e.has("max") || e.has("step")) {
-			let e = this._normalizeValue(this.value);
-			e !== this.value && (this.value = e);
+	willUpdate(changed) {
+		if (changed.has("value") || changed.has("min") || changed.has("max") || changed.has("step")) {
+			const normalizedValue = this._normalizeValue(this.value);
+			if (normalizedValue !== this.value) this.value = normalizedValue;
 		}
 	}
-	focus(e) {
-		this._slider?.focus(e);
+	focus(options) {
+		this._slider?.focus(options);
 	}
 	blur() {
 		this._slider?.blur();
@@ -105,79 +134,93 @@ var S = class extends r(d) {
 	}
 	get _markValues() {
 		if (!this.marks || this._range === 0) return [];
-		let e = Math.min(100, Math.floor(this._range / this._safeStep));
-		return Array.from({ length: e + 1 }, (e, t) => this.min + t * this._safeStep);
+		const count = Math.min(100, Math.floor(this._range / this._safeStep));
+		return Array.from({ length: count + 1 }, (_, index) => this.min + index * this._safeStep);
 	}
 	get _safeStep() {
 		return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;
 	}
 	_getLabelledbyText() {
 		if (!this.ariaLabelledby) return "";
-		let e = this.getRootNode();
-		return e instanceof Document || e instanceof ShadowRoot ? this.ariaLabelledby.trim().split(/\s+/).filter(Boolean).map((t) => this._getReferencedTextAlternative(e, t)).filter(Boolean).join(" ") : "";
-	}
-	_getReferencedTextAlternative(e, t, n = /* @__PURE__ */ new Set()) {
-		let r = typeof CSS < "u" && CSS.escape ? CSS.escape(t) : t, i = e.querySelector(`#${r}`);
-		if (!i || n.has(i)) return "";
-		n.add(i);
-		let a = this._isHiddenFromAccessibleName(i) ? i : void 0;
-		return this._getElementTextAlternative(e, i, n, !0, a);
-	}
-	_getElementTextAlternative(e, t, n, r = !1, i) {
-		if (!r && this._isHiddenFromAccessibleName(t, i)) return "";
-		let a = t.getAttribute("aria-labelledby");
-		if (a) {
-			let t = a.trim().split(/\s+/).map((t) => this._getReferencedTextAlternative(e, t, n)).filter(Boolean).join(" ");
-			if (t) return t;
+		const root = this.getRootNode();
+		if (!(root instanceof Document || root instanceof ShadowRoot)) return "";
+		return this.ariaLabelledby.trim().split(/\s+/).filter(Boolean).map((id) => this._getReferencedTextAlternative(root, id)).filter(Boolean).join(" ");
+	}
+	_getReferencedTextAlternative(root, id, visited = /* @__PURE__ */ new Set()) {
+		const escapedId = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(id) : id;
+		const element = root.querySelector(`#${escapedId}`);
+		if (!element || visited.has(element)) return "";
+		visited.add(element);
+		const hiddenReferenceRoot = this._isHiddenFromAccessibleName(element) ? element : void 0;
+		return this._getElementTextAlternative(root, element, visited, true, hiddenReferenceRoot);
+	}
+	_getElementTextAlternative(root, element, visited, directlyReferenced = false, hiddenReferenceRoot) {
+		if (!directlyReferenced && this._isHiddenFromAccessibleName(element, hiddenReferenceRoot)) return "";
+		const labelledby = element.getAttribute("aria-labelledby");
+		if (labelledby) {
+			const text = labelledby.trim().split(/\s+/).map((referencedId) => this._getReferencedTextAlternative(root, referencedId, visited)).filter(Boolean).join(" ");
+			if (text) return text;
 		}
-		let o = t.getAttribute("aria-label")?.trim();
-		if (o) return o;
-		if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement) return t.value.trim();
-		if (t.localName === "img") {
-			let e = t.getAttribute("alt")?.trim();
-			if (e) return e;
+		const ariaLabel = element.getAttribute("aria-label")?.trim();
+		if (ariaLabel) return ariaLabel;
+		if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) return element.value.trim();
+		if (element.localName === "img") {
+			const alt = element.getAttribute("alt")?.trim();
+			if (alt) return alt;
 		}
-		return Array.from(t.childNodes).map((t) => t.nodeType === Node.TEXT_NODE ? t.textContent?.trim() ?? "" : t instanceof Element ? n.has(t) ? "" : (n.add(t), this._getElementTextAlternative(e, t, n, !1, i)) : "").filter(Boolean).join(" ") || t.getAttribute("title")?.trim() || "";
-	}
-	_isHiddenFromAccessibleName(e, t) {
-		let n = e;
-		for (; n && n !== t;) {
-			if (n.hasAttribute("hidden") || n.getAttribute("aria-hidden") === "true") return !0;
-			let e = n.ownerDocument.defaultView?.getComputedStyle(n);
-			if (e?.display === "none" || e?.visibility === "hidden" || e?.visibility === "collapse") return !0;
-			n = n.parentElement;
+		return Array.from(element.childNodes).map((node) => {
+			if (node.nodeType === Node.TEXT_NODE) return node.textContent?.trim() ?? "";
+			if (node instanceof Element) {
+				if (visited.has(node)) return "";
+				visited.add(node);
+				return this._getElementTextAlternative(root, node, visited, false, hiddenReferenceRoot);
+			}
+			return "";
+		}).filter(Boolean).join(" ") || element.getAttribute("title")?.trim() || "";
+	}
+	_isHiddenFromAccessibleName(element, ignoredAncestor) {
+		let current = element;
+		while (current && current !== ignoredAncestor) {
+			if (current.hasAttribute("hidden") || current.getAttribute("aria-hidden") === "true") return true;
+			const style = current.ownerDocument.defaultView?.getComputedStyle(current);
+			if (style?.display === "none" || style?.visibility === "hidden" || style?.visibility === "collapse") return true;
+			current = current.parentElement;
 		}
-		return !1;
+		return false;
 	}
 	_observeLabelledbyTargets() {
-		if (this._labelledbyObserver.disconnect(), !this.ariaLabelledby || !this.isConnected) {
+		this._labelledbyObserver.disconnect();
+		if (!this.ariaLabelledby || !this.isConnected) {
 			this._syncLabelledbyControlTargets(/* @__PURE__ */ new Set());
 			return;
 		}
-		let e = this.getRootNode();
-		if (!(e instanceof Document || e instanceof ShadowRoot)) {
+		const root = this.getRootNode();
+		if (!(root instanceof Document || root instanceof ShadowRoot)) {
 			this._syncLabelledbyControlTargets(/* @__PURE__ */ new Set());
 			return;
 		}
-		let t = this.ariaLabelledby.trim().split(/\s+/).filter(Boolean), n = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set();
-		for (; t.length;) {
-			let i = t.pop();
-			if (n.has(i)) continue;
-			n.add(i);
-			let a = typeof CSS < "u" && CSS.escape ? CSS.escape(i) : i, o = e.querySelector(`#${a}`);
-			if (!o) continue;
-			r.add(o);
-			let s = o.getAttribute("aria-labelledby");
-			s && t.push(...s.trim().split(/\s+/).filter(Boolean));
+		const pendingIds = this.ariaLabelledby.trim().split(/\s+/).filter(Boolean);
+		const visitedIds = /* @__PURE__ */ new Set();
+		const targets = /* @__PURE__ */ new Set();
+		while (pendingIds.length) {
+			const id = pendingIds.pop();
+			if (visitedIds.has(id)) continue;
+			visitedIds.add(id);
+			const escapedId = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(id) : id;
+			const target = root.querySelector(`#${escapedId}`);
+			if (!target) continue;
+			targets.add(target);
+			const nestedLabelledby = target.getAttribute("aria-labelledby");
+			if (nestedLabelledby) pendingIds.push(...nestedLabelledby.trim().split(/\s+/).filter(Boolean));
 		}
-		this._syncLabelledbyControlTargets(new Set([...r].filter((e) => e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement)));
-		let i = /* @__PURE__ */ new Set();
-		for (let t of r) {
-			this._labelledbyObserver.observe(t, {
-				subtree: !0,
-				childList: !0,
-				characterData: !0,
-				attributes: !0,
+		this._syncLabelledbyControlTargets(new Set([...targets].filter((target) => target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)));
+		const structuralTargets = /* @__PURE__ */ new Set();
+		for (const target of targets) {
+			this._labelledbyObserver.observe(target, {
+				subtree: true,
+				childList: true,
+				characterData: true,
+				attributes: true,
 				attributeFilter: [
 					"alt",
 					"aria-hidden",
@@ -191,12 +234,15 @@ var S = class extends r(d) {
 					"value"
 				]
 			});
-			let n = t.parentNode;
-			for (; n && n !== e;) n instanceof Element && r.has(n) || i.add(n), n = n.parentNode;
+			let ancestor = target.parentNode;
+			while (ancestor && ancestor !== root) {
+				if (!(ancestor instanceof Element && targets.has(ancestor))) structuralTargets.add(ancestor);
+				ancestor = ancestor.parentNode;
+			}
 		}
-		for (let e of i) this._labelledbyObserver.observe(e, {
-			childList: !0,
-			attributes: !0,
+		for (const target of structuralTargets) this._labelledbyObserver.observe(target, {
+			childList: true,
+			attributes: true,
 			attributeFilter: [
 				"aria-hidden",
 				"class",
@@ -204,12 +250,12 @@ var S = class extends r(d) {
 				"style"
 			]
 		});
-		let a = n.size !== r.size;
-		this._labelledbyObserver.observe(e, {
-			childList: !0,
-			subtree: a,
-			attributes: a,
-			attributeFilter: a ? [
+		const missingTargets = visitedIds.size !== targets.size;
+		this._labelledbyObserver.observe(root, {
+			childList: true,
+			subtree: missingTargets,
+			attributes: missingTargets,
+			attributeFilter: missingTargets ? [
 				"aria-hidden",
 				"class",
 				"hidden",
@@ -218,108 +264,142 @@ var S = class extends r(d) {
 			] : void 0
 		});
 	}
-	_syncLabelledbyControlTargets(e) {
-		for (let t of this._labelledbyControlTargets) e.has(t) || (t.removeEventListener("input", this._handleLabelledbyControlValueChange), t.removeEventListener("change", this._handleLabelledbyControlValueChange));
-		for (let t of e) this._labelledbyControlTargets.has(t) || (t.addEventListener("input", this._handleLabelledbyControlValueChange), t.addEventListener("change", this._handleLabelledbyControlValueChange));
-		this._labelledbyControlTargets = e;
+	_syncLabelledbyControlTargets(targets) {
+		for (const target of this._labelledbyControlTargets) {
+			if (targets.has(target)) continue;
+			target.removeEventListener("input", this._handleLabelledbyControlValueChange);
+			target.removeEventListener("change", this._handleLabelledbyControlValueChange);
+		}
+		for (const target of targets) {
+			if (this._labelledbyControlTargets.has(target)) continue;
+			target.addEventListener("input", this._handleLabelledbyControlValueChange);
+			target.addEventListener("change", this._handleLabelledbyControlValueChange);
+		}
+		this._labelledbyControlTargets = targets;
 	}
-	_normalizeValue(e) {
-		if (!Number.isFinite(e)) return this.min;
-		let t = Math.min(this.min, this.max), n = Math.max(this.min, this.max), r = l(e, t, n), i = Math.round((r - t) / this._safeStep), a = Number((t + i * this._safeStep).toFixed(this._precision));
-		return l(a, t, n);
+	_normalizeValue(value) {
+		if (!Number.isFinite(value)) return this.min;
+		const lower = Math.min(this.min, this.max);
+		const upper = Math.max(this.min, this.max);
+		const clamped = clamp(value, lower, upper);
+		const steps = Math.round((clamped - lower) / this._safeStep);
+		const snapped = Number((lower + steps * this._safeStep).toFixed(this._precision));
+		return clamp(snapped, lower, upper);
 	}
 	get _precision() {
 		return Math.max(this._decimalPlaces(this.min), this._decimalPlaces(this.max), this._decimalPlaces(this._safeStep));
 	}
-	_decimalPlaces(e) {
-		let [, t = ""] = String(e).split(".");
-		return t.length;
-	}
-	_setValue(e) {
-		if (this._isDisabled) return !1;
-		let t = this._normalizeValue(e);
-		return t !== this.value && (this.value = t, this.dispatchEvent(new Event("input", {
-			bubbles: !0,
-			composed: !0
-		})), !0);
-	}
-	_setValueFromPointer(e) {
-		let t = this._slider;
-		if (!t) return !1;
-		let n = t.getBoundingClientRect();
+	_decimalPlaces(value) {
+		const [, decimal = ""] = String(value).split(".");
+		return decimal.length;
+	}
+	_setValue(value) {
+		if (this._isDisabled) return false;
+		const nextValue = this._normalizeValue(value);
+		if (nextValue === this.value) return false;
+		this.value = nextValue;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		return true;
+	}
+	_setValueFromPointer(event) {
+		const track = this._slider;
+		if (!track) return false;
+		const rect = track.getBoundingClientRect();
 		if (this.vertical) {
-			if (n.height <= 0) return !1;
-			let t = l(1 - (e.clientY - n.top) / n.height, 0, 1);
-			return this._setValue(this.min + t * this._range);
+			if (rect.height <= 0) return false;
+			const ratio = clamp(1 - (event.clientY - rect.top) / rect.height, 0, 1);
+			return this._setValue(this.min + ratio * this._range);
 		}
-		if (n.width <= 0) return !1;
-		let r = l((e.clientX - n.left) / n.width, 0, 1);
-		return this._setValue(this.min + r * this._range);
+		if (rect.width <= 0) return false;
+		const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+		return this._setValue(this.min + ratio * this._range);
 	}
-	_handlePointerDown(e) {
-		this._isDisabled || (this._pressed = !0, this._interactionStartValue = this.value, this._dragGestureHandle?.destroy(), this._dragGestureHandle = c(e, {
+	_handlePointerDown(event) {
+		if (this._isDisabled) return;
+		this._pressed = true;
+		this._interactionStartValue = this.value;
+		this._dragGestureHandle?.destroy();
+		this._dragGestureHandle = attachDragGesture(event, {
 			axis: this.vertical ? "y" : "x",
-			threshold: x,
-			onMove: (e, t) => {
-				this._dragging = !0, this._setValueFromPointer(t);
+			threshold: POINTER_DRAG_THRESHOLD,
+			onMove: (_info, e) => {
+				this._dragging = true;
+				this._setValueFromPointer(e);
 			},
-			onEnd: (e, t) => {
-				this._setValueFromPointer(t), this._pressed = !1, this._dragging = !1, this._interactionStartValue !== this.value && this.dispatchEvent(new Event("change", {
-					bubbles: !0,
-					composed: !0
-				})), this._interactionStartValue = void 0;
+			onEnd: (_info, e) => {
+				this._setValueFromPointer(e);
+				this._pressed = false;
+				this._dragging = false;
+				if (this._interactionStartValue !== this.value) this.dispatchEvent(new Event("change", {
+					bubbles: true,
+					composed: true
+				}));
+				this._interactionStartValue = void 0;
 			},
-			onTap: (e, t) => {
-				let n = this.vertical ? e.deltaX : e.deltaY;
-				Math.abs(n) >= x || (this._setValueFromPointer(t), this._interactionStartValue !== this.value && this.dispatchEvent(new Event("change", {
-					bubbles: !0,
-					composed: !0
-				})));
+			onTap: (info, e) => {
+				const crossAxisDelta = this.vertical ? info.deltaX : info.deltaY;
+				if (Math.abs(crossAxisDelta) >= POINTER_DRAG_THRESHOLD) return;
+				this._setValueFromPointer(e);
+				if (this._interactionStartValue !== this.value) this.dispatchEvent(new Event("change", {
+					bubbles: true,
+					composed: true
+				}));
 			},
 			onCancel: () => {
-				this._pressed = !1, this._dragging = !1, this._interactionStartValue = void 0;
+				this._pressed = false;
+				this._dragging = false;
+				this._interactionStartValue = void 0;
 			}
-		}));
+		});
 	}
-	_handleKeyDown(e) {
+	_handleKeyDown(event) {
 		if (this._isDisabled) return;
-		let t = this._safeStep * 10, n = {
+		const pageStep = this._safeStep * 10;
+		const nextValue = {
 			ArrowDown: this.value - this._safeStep,
 			ArrowLeft: this.value - this._safeStep,
 			ArrowUp: this.value + this._safeStep,
 			ArrowRight: this.value + this._safeStep,
-			PageDown: this.value - t,
-			PageUp: this.value + t,
+			PageDown: this.value - pageStep,
+			PageUp: this.value + pageStep,
 			Home: this.min,
 			End: this.max
-		}[e.key];
-		n !== void 0 && (e.preventDefault(), this._setValue(n) && this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0
-		})));
+		}[event.key];
+		if (nextValue === void 0) return;
+		event.preventDefault();
+		if (this._setValue(nextValue)) this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
 	}
 	render() {
-		let e = v({
-			"wui-slider-track": !0,
+		const trackClass = classMap({
+			"wui-slider-track": true,
 			"is-dragging": this._dragging,
 			"is-disabled": this._isDisabled
-		}), t = v({
-			"wui-slider-thumb": !0,
-			"wui-glass": !0,
+		});
+		const thumbClass = classMap({
+			"wui-slider-thumb": true,
+			"wui-glass": true,
 			"is-pressed": this._pressed,
 			"is-dragging": this._dragging
-		}), n = b({ "--percent": `${this._percent}%` }), r = this._getLabelledbyText();
-		this._renderedLabelledbyText = r;
-		let i = `${this._fieldId}-label`;
-		return f`
-      ${r ? f`<span class="wui-slider-a11y-only" id=${i}>${r}</span>` : p}
+		});
+		const trackStyle = styleMap({ "--percent": `${this._percent}%` });
+		const labelledbyText = this._getLabelledbyText();
+		this._renderedLabelledbyText = labelledbyText;
+		const labelledbyId = `${this._fieldId}-label`;
+		return html`
+      ${labelledbyText ? html`<span class="wui-slider-a11y-only" id=${labelledbyId}>${labelledbyText}</span>` : nothing}
       <div
-        class=${e}
-        style=${n}
+        class=${trackClass}
+        style=${trackStyle}
         role="slider"
         tabindex=${this._isDisabled ? "-1" : "0"}
-        aria-label=${y(this.ariaLabel)}
-        aria-labelledby=${r ? i : p}
+        aria-label=${ifDefined(this.ariaLabel)}
+        aria-labelledby=${labelledbyText ? labelledbyId : nothing}
         aria-orientation=${this.vertical ? "vertical" : "horizontal"}
         aria-valuemin=${this.min}
         aria-valuemax=${this.max}
@@ -330,51 +410,63 @@ var S = class extends r(d) {
       >
         <div class="wui-slider-progress"></div>
         <div class="wui-slider-marks">
-          ${this._markValues.map((e) => f`<span
+          ${this._markValues.map((mark) => html`<span
                 class="wui-slider-mark"
-                style=${b({ "--percent": `${(e - this.min) / this._range * 100}%` })}
+                style=${styleMap({ "--percent": `${(mark - this.min) / this._range * 100}%` })}
               ></span>`)}
         </div>
-        <div class=${t}></div>
+        <div class=${thumbClass}></div>
       </div>
     `;
 	}
 };
-e([g({
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], S.prototype, "disabled", void 0), e([g({
+	reflect: true
+})], WebUiSlider.prototype, "disabled", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], S.prototype, "marks", void 0), e([g({
+	reflect: true
+})], WebUiSlider.prototype, "marks", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], S.prototype, "vertical", void 0), e([g({
+	reflect: true
+})], WebUiSlider.prototype, "vertical", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], S.prototype, "name", void 0), e([g({
+	reflect: true
+})], WebUiSlider.prototype, "name", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], S.prototype, "required", void 0), e([g({
+	reflect: true
+})], WebUiSlider.prototype, "required", void 0);
+__decorate([property({
 	type: String,
 	attribute: "aria-label"
-})], S.prototype, "ariaLabel", void 0), e([g({
+})], WebUiSlider.prototype, "ariaLabel", void 0);
+__decorate([property({
 	type: String,
 	attribute: "aria-labelledby"
-})], S.prototype, "ariaLabelledby", void 0), e([g({
+})], WebUiSlider.prototype, "ariaLabelledby", void 0);
+__decorate([property({
 	type: Number,
-	reflect: !0
-})], S.prototype, "value", null), e([g({
+	reflect: true
+})], WebUiSlider.prototype, "value", null);
+__decorate([property({
 	type: Number,
-	reflect: !0
-})], S.prototype, "min", null), e([g({
+	reflect: true
+})], WebUiSlider.prototype, "min", null);
+__decorate([property({
 	type: Number,
-	reflect: !0
-})], S.prototype, "max", null), e([g({
+	reflect: true
+})], WebUiSlider.prototype, "max", null);
+__decorate([property({
 	type: Number,
-	reflect: !0
-})], S.prototype, "step", null), e([_()], S.prototype, "_dragging", void 0), e([_()], S.prototype, "_pressed", void 0), S = e([h("web-ui-slider")], S);
-//#endregion
-export { S as WebUiSlider };
+	reflect: true
+})], WebUiSlider.prototype, "step", null);
+__decorate([state()], WebUiSlider.prototype, "_dragging", void 0);
+__decorate([state()], WebUiSlider.prototype, "_pressed", void 0);
+WebUiSlider = __decorate([customElement("web-ui-slider")], WebUiSlider);
+export { WebUiSlider };
 
 //# sourceMappingURL=index.js.map