) {
+ // Handle range mode changes
+ if (changedProperties.has("range")) {
+ this.requestUpdate();
+ }
+
+ if (this.isRange) {
+ // Handle min/max values for range mode
+ if (
+ changedProperties.has("minValue") ||
+ changedProperties.has("maxValue")
+ ) {
+ // Ensure min doesn't exceed max
+ this.minValue = clamp(this.minValue, this.min, this.maxValue);
+ this.maxValue = clamp(this.maxValue, this.minValue, this.max);
+ // Update form value
+ this.updateFormValue();
+ }
+ } else {
+ // Handle value for single thumb mode
+ if (changedProperties.has("value")) {
+ this.setValue(String(this.value));
+ }
+ }
+
+ // Handle min/max
+ if (changedProperties.has("min") || changedProperties.has("max")) {
+ if (this.isRange) {
+ this.minValue = clamp(this.minValue, this.min, this.max);
+ this.maxValue = clamp(this.maxValue, this.min, this.max);
+ }
+ }
+
+ // Handle disabled
+ if (changedProperties.has("disabled")) {
+ this.customStates.set("disabled", this.disabled);
+ }
+
+ // Disable dragging when disabled or readonly
+ if (
+ changedProperties.has("disabled") ||
+ changedProperties.has("readonly")
+ ) {
+ const enabled = !(this.disabled || this.readonly);
+
+ if (this.isRange) {
+ if (this.draggableThumbMin) this.draggableThumbMin.toggle(enabled);
+ if (this.draggableThumbMax) this.draggableThumbMax.toggle(enabled);
+ }
+
+ if (this.draggableTrack) {
+ this.draggableTrack.toggle(enabled);
+ }
+ }
+
+ super.updated(changedProperties);
+ }
+
+ /** @internal Called when a containing fieldset is disabled. */
+ formDisabledCallback(isDisabled: boolean) {
+ this.disabled = isDisabled;
+ }
+
+ /** @internal Called when the form is reset. */
+ formResetCallback() {
+ if (this.isRange) {
+ this.minValue = parseFloat(
+ this.getAttribute("min-value") ?? String(this.min),
+ );
+ this.maxValue = parseFloat(
+ this.getAttribute("max-value") ?? String(this.max),
+ );
+ } else {
+ this._value = null;
+ this.defaultValue =
+ this.defaultValue ??
+ parseFloat(this.getAttribute("value") ?? String(this.min));
+ }
+ this.valueHasChanged = false;
+ this.hasInteracted = false;
+ super.formResetCallback();
+ }
+
+ /** Clamps a number to min/max while ensuring it's a valid step interval. */
+ private clampAndRoundToStep(value: number) {
+ const stepPrecision = (String(this.step).split(".")[1] || "").replace(
+ /0+$/g,
+ "",
+ ).length;
+
+ // Ensure we're working with numbers (in case the user passes strings to the respective properties)
+ const step = Number(this.step);
+ const min = Number(this.min);
+ const max = Number(this.max);
+
+ value = Math.round(value / step) * step;
+ value = clamp(value, min, max);
+
+ return parseFloat(value.toFixed(stepPrecision));
+ }
+
+ /** Given a value, returns its percentage within a range of min/max. */
+ private getPercentageFromValue(value: number) {
+ return ((value - this.min) / (this.max - this.min)) * 100;
+ }
+
+ /** Converts coordinates to slider value */
+ private getValueFromCoordinates(x: number, y: number) {
+ const isRtl = this.localize.dir() === "rtl";
+ const isVertical = this.orientation === "vertical";
+ const { top, right, bottom, left, height, width } =
+ this.trackBoundingClientRect;
+ const pointerPosition = isVertical ? y : x;
+ const sliderCoords = isVertical
+ ? { start: top, end: bottom, size: height }
+ : { start: left, end: right, size: width };
+ const relativePosition = isVertical
+ ? sliderCoords.end - pointerPosition
+ : isRtl
+ ? sliderCoords.end - pointerPosition
+ : pointerPosition - sliderCoords.start;
+ const percentage = relativePosition / sliderCoords.size;
+ return this.clampAndRoundToStep(
+ this.min + (this.max - this.min) * percentage,
+ );
+ }
+
+ private handleBlur() {
+ // Only hide tooltips if neither thumb has focus
+ if (this.isRange) {
+ // Allow a subsequent focus event to fire on the other thumb if the user is tabbing
+ requestAnimationFrame(() => {
+ const focusedElement = this.shadowRoot?.activeElement;
+ const thumbHasFocus =
+ focusedElement === this.thumbMin || focusedElement === this.thumbMax;
+ if (!thumbHasFocus) {
+ this.hideRangeTooltips();
+ }
+ });
+ } else {
+ this.hideTooltip();
+ }
+ this.customStates.set("focused", false);
+ this.dispatchEvent(
+ new FocusEvent("blur", { bubbles: true, composed: true }),
+ );
+ }
+
+ private handleFocus(event: FocusEvent) {
+ const target = event.target as HTMLElement;
+
+ // Handle focus for specific thumbs in range mode
+ if (this.isRange) {
+ if (target === this.thumbMin) {
+ this.activeThumb = "min";
+ } else if (target === this.thumbMax) {
+ this.activeThumb = "max";
+ }
+ this.showRangeTooltips();
+ } else {
+ this.showTooltip();
+ }
+
+ this.customStates.set("focused", true);
+ this.dispatchEvent(
+ new FocusEvent("focus", { bubbles: true, composed: true }),
+ );
+ }
+
+ private handleKeyDown(event: KeyboardEvent) {
+ const isRtl = this.localize.dir() === "rtl";
+ const target = event.target as HTMLElement;
+
+ if (this.disabled || this.readonly) return;
+
+ // For range slider, determine which thumb is active
+ if (this.isRange) {
+ if (target === this.thumbMin) {
+ this.activeThumb = "min";
+ } else if (target === this.thumbMax) {
+ this.activeThumb = "max";
+ }
+
+ if (!this.activeThumb) return;
+ }
+
+ // Get current value based on slider mode
+ const current = this.isRange
+ ? this.activeThumb === "min"
+ ? this.minValue
+ : this.maxValue
+ : this.value;
+
+ let newValue = current;
+
+ // Handle key presses
+ switch (event.key) {
+ // Increase
+ case "ArrowUp":
+ case isRtl ? "ArrowLeft" : "ArrowRight":
+ event.preventDefault();
+ newValue = this.clampAndRoundToStep(current + this.step);
+ break;
+
+ // Decrease
+ case "ArrowDown":
+ case isRtl ? "ArrowRight" : "ArrowLeft":
+ event.preventDefault();
+ newValue = this.clampAndRoundToStep(current - this.step);
+ break;
+
+ // Minimum value
+ case "Home":
+ event.preventDefault();
+ newValue =
+ this.isRange && this.activeThumb === "min"
+ ? this.min
+ : this.isRange
+ ? this.minValue
+ : this.min;
+ break;
+
+ // Maximum value
+ case "End":
+ event.preventDefault();
+ newValue =
+ this.isRange && this.activeThumb === "max"
+ ? this.max
+ : this.isRange
+ ? this.maxValue
+ : this.max;
+ break;
+
+ // Move up 10%
+ case "PageUp":
+ event.preventDefault();
+ const stepUp = Math.max(
+ current + (this.max - this.min) / 10,
+ current + this.step, // make sure we at least move up to the next step
+ );
+ newValue = this.clampAndRoundToStep(stepUp);
+ break;
+
+ // Move down 10%
+ case "PageDown":
+ event.preventDefault();
+ const stepDown = Math.min(
+ current - (this.max - this.min) / 10,
+ current - this.step, // make sure we at least move down to the previous step
+ );
+ newValue = this.clampAndRoundToStep(stepDown);
+ break;
+
+ // Handle form submission on Enter
+ case "Enter":
+ submitOnEnter(event, this);
+ return;
+ }
+
+ // If no value change, exit early
+ if (newValue === current) return;
+
+ // Apply the new value with appropriate constraints
+ if (this.isRange) {
+ if (this.activeThumb === "min") {
+ if (newValue > this.maxValue) {
+ // If min thumb exceeds max thumb, move both
+ this.maxValue = newValue;
+ this.minValue = newValue;
+ } else {
+ this.minValue = Math.max(this.min, newValue);
+ }
+ } else {
+ if (newValue < this.minValue) {
+ // If max thumb goes below min thumb, move both
+ this.minValue = newValue;
+ this.maxValue = newValue;
+ } else {
+ this.maxValue = Math.min(this.max, newValue);
+ }
+ }
+ this.updateFormValue();
+ } else {
+ this.value = clamp(newValue, this.min, this.max);
+ }
+
+ // Dispatch events
+ this.updateComplete.then(() => {
+ this.dispatchEvent(
+ new InputEvent("input", { bubbles: true, composed: true }),
+ );
+ this.dispatchEvent(
+ new Event("change", { bubbles: true, composed: true }),
+ );
+ });
+ this.hasInteracted = true;
+ }
+
+ private handleLabelPointerDown(event: PointerEvent) {
+ event.preventDefault();
+
+ if (!this.disabled) {
+ if (this.isRange) {
+ this.thumbMin?.focus();
+ } else {
+ this.slider.focus();
+ }
+ }
+ }
+
+ private setValueFromCoordinates(x: number, y: number) {
+ const oldValue = this.value;
+ this.value = this.getValueFromCoordinates(x, y);
+
+ // Dispatch input events when the value changes by dragging
+ if (this.value !== oldValue) {
+ this.updateComplete.then(() => {
+ this.dispatchEvent(
+ new InputEvent("input", { bubbles: true, composed: true }),
+ );
+ });
+ }
+ }
+
+ private setThumbValueFromCoordinates(
+ x: number,
+ y: number,
+ thumb: "min" | "max",
+ ) {
+ const value = this.getValueFromCoordinates(x, y);
+ const oldValue = thumb === "min" ? this.minValue : this.maxValue;
+
+ if (thumb === "min") {
+ // If min thumb is being dragged and would exceed max thumb
+ if (value > this.maxValue) {
+ // Move both thumbs, keeping their distance at 0
+ this.maxValue = value;
+ this.minValue = value;
+ } else {
+ // Normal case - just move min thumb
+ this.minValue = Math.max(this.min, value);
+ }
+ } else {
+ // thumb === 'max'
+ // If max thumb is being dragged and would go below min thumb
+ if (value < this.minValue) {
+ // Move both thumbs, keeping their distance at 0
+ this.minValue = value;
+ this.maxValue = value;
+ } else {
+ // Normal case - just move max thumb
+ this.maxValue = Math.min(this.max, value);
+ }
+ }
+
+ // Dispatch input events
+ if (oldValue !== (thumb === "min" ? this.minValue : this.maxValue)) {
+ this.updateFormValue();
+ this.updateComplete.then(() => {
+ this.dispatchEvent(
+ new InputEvent("input", { bubbles: true, composed: true }),
+ );
+ });
+ }
+ }
+
+ private showTooltip() {
+ if (this.withTooltip && this.tooltip) {
+ this.tooltip.open = true;
+ }
+ }
+
+ private hideTooltip() {
+ if (this.withTooltip && this.tooltip) {
+ this.tooltip.open = false;
+ }
+ }
+
+ private showRangeTooltips() {
+ if (!this.withTooltip) return;
+
+ // Show only the active tooltip, hide the other
+ const tooltipMin = this.shadowRoot?.getElementById(
+ "tooltip-thumb-min",
+ ) as WaTooltip;
+ const tooltipMax = this.shadowRoot?.getElementById(
+ "tooltip-thumb-max",
+ ) as WaTooltip;
+
+ if (this.activeThumb === "min") {
+ if (tooltipMin) tooltipMin.open = true;
+ if (tooltipMax) tooltipMax.open = false;
+ } else if (this.activeThumb === "max") {
+ if (tooltipMax) tooltipMax.open = true;
+ if (tooltipMin) tooltipMin.open = false;
+ }
+ }
+
+ private hideRangeTooltips() {
+ if (!this.withTooltip) return;
+
+ const tooltipMin = this.shadowRoot?.getElementById(
+ "tooltip-thumb-min",
+ ) as WaTooltip;
+ const tooltipMax = this.shadowRoot?.getElementById(
+ "tooltip-thumb-max",
+ ) as WaTooltip;
+
+ if (tooltipMin) tooltipMin.open = false;
+ if (tooltipMax) tooltipMax.open = false;
+ }
+
+ /** Updates the form value submission for range sliders */
+ private updateFormValue() {
+ if (this.isRange) {
+ // Submit both values using FormData for range sliders
+ const formData = new FormData();
+ formData.append(this.name || "", String(this.minValue));
+ formData.append(this.name || "", String(this.maxValue));
+ this.setValue(formData);
+ }
+ }
+
+ /** Sets focus to the slider. */
+ public focus() {
+ if (this.isRange) {
+ this.thumbMin?.focus();
+ } else {
+ this.slider.focus();
+ }
+ }
+
+ /** Removes focus from the slider. */
+ public blur() {
+ if (this.isRange) {
+ if (document.activeElement === this.thumbMin) {
+ this.thumbMin.blur();
+ } else if (document.activeElement === this.thumbMax) {
+ this.thumbMax.blur();
+ }
+ } else {
+ this.slider.blur();
+ }
+ }
+
+ /**
+ * Decreases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
+ * emitted when this is called.
+ */
+ public stepDown() {
+ if (this.isRange) {
+ // If in range mode, default to stepping down the min value
+ const newValue = this.clampAndRoundToStep(this.minValue - this.step);
+ this.minValue = clamp(newValue, this.min, this.maxValue);
+ this.updateFormValue();
+ } else {
+ const newValue = this.clampAndRoundToStep(this.value - this.step);
+ this.value = newValue;
+ }
+ }
+
+ /**
+ * Increases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
+ * emitted when this is called.
+ */
+ public stepUp() {
+ if (this.isRange) {
+ // If in range mode, default to stepping up the max value
+ const newValue = this.clampAndRoundToStep(this.maxValue + this.step);
+ this.maxValue = clamp(newValue, this.minValue, this.max);
+ this.updateFormValue();
+ } else {
+ const newValue = this.clampAndRoundToStep(this.value + this.step);
+ this.value = newValue;
+ }
+ }
+
+ render() {
+ const hasLabelSlot = this.hasSlotController.test("label");
+ const hasHintSlot = this.hasSlotController.test("hint");
+ const hasLabel = this.label ? true : !!hasLabelSlot;
+ const hasHint = this.hint ? true : !!hasHintSlot;
+ const hasReference = this.hasSlotController.test("reference");
+
+ const sliderClasses = classMap({
+ small: this.size === "small",
+ medium: this.size === "medium",
+ large: this.size === "large",
+ horizontal: this.orientation === "horizontal",
+ vertical: this.orientation === "vertical",
+ disabled: this.disabled,
+ });
+
+ // Calculate marker positions
+ const markers = [];
+ if (this.withMarkers) {
+ for (let i = this.min; i <= this.max; i += this.step) {
+ markers.push(this.getPercentageFromValue(i));
+ }
+ }
+
+ // Common UI fragments
+ const label = html`
+
+ ${this.label}
+
+ `;
+
+ const hint = html`
+
+ ${this.hint}
+
+ `;
+
+ const markersTemplate = this.withMarkers
+ ? html`
+
+ ${markers.map(
+ (marker) =>
+ html`
+ `
+ : "";
+
+ const referencesTemplate = hasReference
+ ? html`
+
+
+ `
+ : "";
+
+ // Create tooltip template function
+ const createTooltip = (thumbId: string, value: number) =>
+ this.withTooltip
+ ? html`
+
+
+ ${typeof this.valueFormatter === "function"
+ ? this.valueFormatter(value)
+ : this.localize.number(value)}
+
+
+ `
+ : "";
+
+ // Render based on mode
+ if (this.isRange) {
+ // Range slider mode
+ const minThumbPosition = clamp(
+ this.getPercentageFromValue(this.minValue),
+ 0,
+ 100,
+ );
+ const maxThumbPosition = clamp(
+ this.getPercentageFromValue(this.maxValue),
+ 0,
+ 100,
+ );
+
+ return html`
+ ${label}
+
+
+
+
+
+ ${markersTemplate}
+
+
+
+
+
+
+ ${referencesTemplate} ${hint}
+
+
+
+
+ ${markersTemplate}
+
+
+
+ ${referencesTemplate} ${hint}
+
- ${x(
- foo, // fg
- bar,
-- )}
--
-+ )}
- `;
-
-`````
-
-### Actual (oxfmt)
-
-`````js
-// #9274
-html`
-
- ${
- this.set && this.set.artist
- /* avoid console errors if `this.set` is undefined */
- }
-
-`;
-
-html`${
- foo
- /* comment */
-}`;
-html`
-${
- foo
- /* comment */
-}
-`;
-
-graphql`
- ${
- foo
- /* comment */
- }
-`;
-graphql`
- ${
- foo
- /* comment */
- }
-`;
-
-css`
- ${
- foo
- /* comment */
- }
-`;
-css`
- ${
- foo
- /* comment */
- }
-`;
-
-markdown`${
- foo
- /* comment */
-}`;
-markdown`
-${
- foo
- /* comment */
-}
-`;
-
-// https://github.com/prettier/prettier/pull/9278#issuecomment-700589195
-expr1 = html`
-
- ${x(
- foo, // fg
- bar,
- )}
-`;
-
-`````
-
-### Expected (prettier)
-
-`````js
-// #9274
-html`
-
- ${
- this.set && this.set.artist
- /* avoid console errors if `this.set` is undefined */
- }
-
-`;
-
-html`${
- foo
- /* comment */
-}`;
-html`
- ${
- foo
- /* comment */
- }
-`;
-
-graphql`
- ${
- foo
- /* comment */
- }
-`;
-graphql`
- ${
- foo
- /* comment */
- }
-`;
-
-css`
- ${
- foo
- /* comment */
- }
-`;
-css`
- ${
- foo
- /* comment */
- }
-`;
-
-markdown`${
- foo
- /* comment */
-}`;
-markdown`
-${
- foo
- /* comment */
-}
-`;
-
-// https://github.com/prettier/prettier/pull/9278#issuecomment-700589195
-expr1 = html`
-
- ${x(
- foo, // fg
- bar,
- )}
-
-`;
-
-`````
diff --git a/apps/oxfmt/src-js/libs/apis.ts b/apps/oxfmt/src-js/libs/apis.ts
index 080c05449f5c4..e96627b16b81f 100644
--- a/apps/oxfmt/src-js/libs/apis.ts
+++ b/apps/oxfmt/src-js/libs/apis.ts
@@ -25,6 +25,34 @@ async function loadPrettier(): Promise {
if (prettierCache) return prettierCache;
prettierCache = await import("prettier");
+
+ // NOTE: This is needed for html-in-js formatting to work correctly.
+ //
+ // Prettier internally extends `options` with hidden fields for embedded-formatters during printing.
+ // However, `__debug.printToDoc()` runs `normalizeFormatOptions()` which strips unknown keys.
+ // Only keys registered in `formatOptionsHiddenDefaults` survive (via `passThrough` option).
+ // Since `__debug.printToDoc()` does NOT use `passThrough: true` (unlike internal `textToDoc()`!),
+ // our custom fields would be dropped without this registration.
+ //
+ // The default values MUST be falsy, truthy default would affect all Prettier calls, not just ours.
+ // In call sites, Prettier checks `if (!options.parentParser)`, so as long as the default is falsy,
+ // there should be no side effects on other calls that don't set these fields.
+ // @ts-expect-error: Use internal API
+ const { formatOptionsHiddenDefaults } = prettierCache.__internal;
+ // For html-in-js: Prevent attribute level formatting from running.
+ // (e.g., CSS in `style="..."` attributes, JS in `onclick="..."` event handlers)
+ // This does NOT affect `