@cardstack/boxel-cli 0.9.0 → 0.10.0-unstable.0

package/bundled-test-harness/assets/slider-picker-B6AxKL2j.js

@@ -0,0 +1,245 @@
+import "./chunk-Rp0pCe6z.js";
+import { n as decorateMethodV2, r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import { et as tracked, wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { d as action } from "./service-LFpJ8EEP.js";
+import { H as templateFactory, m as htmlSafe } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./tracking-CNiq91Pk.js";
+import { i as fn, r as concat } from "./helper-m6jA5HmU.js";
+import "./component-BJO47HTh.js";
+import { t as Component } from "./dist-CkA1rgqO.js";
+import "./template-factory-ds9s0u8l.js";
+import { G as hslToRgb, J as rgbaToFormatString, U as detectColorFormat, X as rgbaToHsl, c as eq, f as not } from "./helpers-BN6ReMzK.js";
+import { z as BoxelInput } from "./components-Ct_agx0G.js";
+import "./template-C81fYDrq.js";
+import { n as parseCssColor } from "./color-utils-kMEtVcR9.js";
+//#region ../base/color-field/components/slider-picker.gts
+var SliderPicker = class extends Component {
+	static {
+		decorateFieldV2(this.prototype, "isDragging", [tracked], function() {
+			return false;
+		});
+	}
+	#isDragging = (initializeDeferredDecorator(this, "isDragging"), void 0);
+	static {
+		decorateFieldV2(this.prototype, "rgb", [tracked], function() {
+			return {
+				r: 59,
+				g: 130,
+				b: 246
+			};
+		});
+	}
+	#rgb = (initializeDeferredDecorator(this, "rgb"), void 0);
+	static {
+		decorateFieldV2(this.prototype, "hsl", [tracked], function() {
+			return {
+				h: 0,
+				s: 0,
+				l: 0
+			};
+		});
+	}
+	#hsl = (initializeDeferredDecorator(this, "hsl"), void 0);
+	static {
+		decorateFieldV2(this.prototype, "alpha", [tracked], function() {
+			return 1;
+		});
+	}
+	#alpha = (initializeDeferredDecorator(this, "alpha"), void 0);
+	pendingRgba = null;
+	lastSyncedModelColor = null;
+	lastSavedColorValue = null;
+	lastSavedHue = null;
+	lastSavedSaturation = null;
+	lastSavedLightness = null;
+	constructor(owner, args) {
+		super(owner, args);
+		this.syncStateWithModel(this.currentColor);
+	}
+	get currentColor() {
+		return this.args.model ?? "#3b82f6";
+	}
+	get availableFormats() {
+		return ["rgb", "hsl"];
+	}
+	get defaultFormat() {
+		return (this.args.configuration?.options)?.defaultFormat ?? this.availableFormats[0];
+	}
+	get outputFormat() {
+		const options = this.args.configuration?.options;
+		if (options?.defaultFormat) return options.defaultFormat;
+		if (this.args.model) {
+			const format = detectColorFormat(this.args.model);
+			if (format === "rgb" || format === "hsl") return format;
+		}
+		return "rgb";
+	}
+	get displayRgb() {
+		this.ensureSyncedWithModel();
+		return this.rgb;
+	}
+	get displayHsl() {
+		this.ensureSyncedWithModel();
+		return this.hsl;
+	}
+	ensureSyncedWithModel() {
+		if (this.isDragging) return;
+		if (this.currentColor !== this.lastSyncedModelColor) this.syncStateWithModel(this.currentColor);
+	}
+	syncStateWithModel(color) {
+		const parsed = parseCssColor(color);
+		const normalizedRgb = {
+			r: Math.round(parsed.r),
+			g: Math.round(parsed.g),
+			b: Math.round(parsed.b)
+		};
+		const parsedHsl = rgbaToHsl(parsed);
+		const shouldPreserveHsl = this.lastSavedColorValue === color && Number.isFinite(this.lastSavedHue ?? NaN) && Number.isFinite(this.lastSavedSaturation ?? NaN) && Number.isFinite(this.lastSavedLightness ?? NaN);
+		this.rgb = normalizedRgb;
+		this.hsl = shouldPreserveHsl ? {
+			h: this.lastSavedHue,
+			s: this.lastSavedSaturation,
+			l: this.lastSavedLightness
+		} : parsedHsl;
+		this.lastSavedHue = null;
+		this.lastSavedSaturation = null;
+		this.lastSavedLightness = null;
+		this.lastSavedColorValue = null;
+		this.alpha = parsed.a;
+		this.pendingRgba = parsed;
+		this.lastSyncedModelColor = color;
+	}
+	buildRgbaFromRgb(rgb) {
+		return {
+			...rgb,
+			a: this.alpha
+		};
+	}
+	updateDraftState(rgb, hsl, rgba) {
+		this.rgb = rgb;
+		this.hsl = hsl;
+		this.pendingRgba = rgba;
+	}
+	formatColorForOutput(rgba) {
+		if (this.outputFormat === "hsl") {
+			const roundedHue = Math.round(this.hsl.h);
+			const roundedSaturation = Math.round(this.hsl.s);
+			const roundedLightness = Math.round(this.hsl.l);
+			if (this.alpha < 1) return `hsla(${roundedHue}, ${roundedSaturation}%, ${roundedLightness}%, ${this.alpha.toFixed(2)})`;
+			return `hsl(${roundedHue}, ${roundedSaturation}%, ${roundedLightness}%)`;
+		}
+		return rgbaToFormatString(rgba, this.outputFormat);
+	}
+	get rGradient() {
+		const { g, b } = this.displayRgb;
+		return `linear-gradient(to right, rgb(0, ${g}, ${b}), rgb(255, ${g}, ${b}))`;
+	}
+	get gGradient() {
+		const { r, b } = this.displayRgb;
+		return `linear-gradient(to right, rgb(${r}, 0, ${b}), rgb(${r}, 255, ${b}))`;
+	}
+	get bGradient() {
+		const { r, g } = this.displayRgb;
+		return `linear-gradient(to right, rgb(${r}, ${g}, 0), rgb(${r}, ${g}, 255))`;
+	}
+	get hGradient() {
+		return "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)";
+	}
+	get sGradient() {
+		const { h, l } = this.displayHsl;
+		const roundedHue = Math.round(h);
+		const roundedLightness = Math.round(l);
+		return `linear-gradient(to right, hsl(${roundedHue}, 0%, ${roundedLightness}%), hsl(${roundedHue}, 100%, ${roundedLightness}%))`;
+	}
+	get lGradient() {
+		const { h, s } = this.displayHsl;
+		const roundedHue = Math.round(h);
+		const roundedSaturation = Math.round(s);
+		return `linear-gradient(to right, hsl(${roundedHue}, ${roundedSaturation}%, 0%), hsl(${roundedHue}, ${roundedSaturation}%, 50%), hsl(${roundedHue}, ${roundedSaturation}%, 100%))`;
+	}
+	isRgbaValid(rgba) {
+		return Number.isFinite(rgba.r) && Number.isFinite(rgba.g) && Number.isFinite(rgba.b) && Number.isFinite(rgba.a);
+	}
+	saveColor(rgba) {
+		if (!this.isRgbaValid(rgba)) return;
+		const colorValue = this.formatColorForOutput(rgba);
+		this.lastSavedColorValue = colorValue;
+		if (this.outputFormat === "hsl") {
+			this.lastSavedHue = this.hsl.h;
+			this.lastSavedSaturation = this.hsl.s;
+			this.lastSavedLightness = this.hsl.l;
+		} else {
+			this.lastSavedHue = null;
+			this.lastSavedSaturation = null;
+			this.lastSavedLightness = null;
+		}
+		this.args.set?.(colorValue);
+	}
+	handleRgbInput(channel, value) {
+		if (!this.args.canEdit) return;
+		const numericValue = Number(value);
+		if (Number.isNaN(numericValue)) return;
+		const clamped = Math.max(0, Math.min(255, numericValue));
+		const newRgb = {
+			...this.rgb,
+			[channel]: clamped
+		};
+		const newRgba = this.buildRgbaFromRgb(newRgb);
+		const newHsl = rgbaToHsl(newRgba);
+		this.updateDraftState(newRgb, newHsl, newRgba);
+		this.isDragging = true;
+	}
+	static {
+		decorateMethodV2(this.prototype, "handleRgbInput", [action]);
+	}
+	handleHslInput(channel, value) {
+		if (!this.args.canEdit) return;
+		const numericValue = Number(value);
+		if (Number.isNaN(numericValue)) return;
+		const limits = channel === "h" ? [0, 360] : [0, 100];
+		const clamped = Math.max(limits[0], Math.min(limits[1], numericValue));
+		const newHsl = {
+			...this.hsl,
+			[channel]: clamped
+		};
+		const rgbFromHsl = hslToRgb(newHsl);
+		const newRgba = this.buildRgbaFromRgb(rgbFromHsl);
+		this.updateDraftState(rgbFromHsl, newHsl, newRgba);
+		this.isDragging = true;
+	}
+	static {
+		decorateMethodV2(this.prototype, "handleHslInput", [action]);
+	}
+	handleSliderChange() {
+		if (!this.args.canEdit || !this.pendingRgba) return;
+		this.saveColor(this.pendingRgba);
+		this.isDragging = false;
+	}
+	static {
+		decorateMethodV2(this.prototype, "handleSliderChange", [action]);
+	}
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "hWXOlU1/",
+			"block": "[[[10,0],[14,0,\"slider-controls-editor\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n\"],[41,[28,[32,0],[[30,0,[\"outputFormat\"]],\"rgb\"],null],[[[1,\"    \"],[10,0],[14,0,\"slider-group\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n      \"],[10,0],[14,0,\"slider-header\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[10,\"label\"],[14,0,\"slider-label red\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n          \"],[10,\"svg\"],[14,0,\"label-icon\"],[14,\"viewBox\",\"0 0 24 24\"],[14,\"fill\",\"none\"],[14,\"stroke\",\"currentColor\"],[14,\"stroke-width\",\"2\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n            \"],[10,\"circle\"],[14,\"cx\",\"12\"],[14,\"cy\",\"12\"],[14,\"r\",\"10\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[13],[1,\"\\n          \"],[13],[1,\"\\n          Red\\n        \"],[13],[1,\"\\n        \"],[10,1],[14,0,\"slider-value\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,[30,0,[\"displayRgb\",\"r\"]]],[13],[1,\"\\n      \"],[13],[1,\"\\n      \"],[10,0],[14,0,\"range-slider-container\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[8,[32,1],[[24,0,\"range-slider\"],[16,5,[28,[32,2],[[28,[32,3],[\"background: \",[30,0,[\"rGradient\"]]],null]],null]],[24,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"]],[[\"@type\",\"@min\",\"@max\",\"@value\",\"@onInput\",\"@onChange\",\"@disabled\"],[\"range\",\"0\",\"255\",[30,0,[\"displayRgb\",\"r\"]],[28,[32,4],[[30,0,[\"handleRgbInput\"]],\"r\"],null],[30,0,[\"handleSliderChange\"]],[28,[32,5],[[30,1]],null]]],null],[1,\"\\n      \"],[13],[1,\"\\n    \"],[13],[1,\"\\n\\n    \"],[10,0],[14,0,\"slider-group\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n      \"],[10,0],[14,0,\"slider-header\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[10,\"label\"],[14,0,\"slider-label green\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n          \"],[10,\"svg\"],[14,0,\"label-icon\"],[14,\"viewBox\",\"0 0 24 24\"],[14,\"fill\",\"none\"],[14,\"stroke\",\"currentColor\"],[14,\"stroke-width\",\"2\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n            \"],[10,\"circle\"],[14,\"cx\",\"12\"],[14,\"cy\",\"12\"],[14,\"r\",\"10\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[13],[1,\"\\n          \"],[13],[1,\"\\n          Green\\n        \"],[13],[1,\"\\n        \"],[10,1],[14,0,\"slider-value\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,[30,0,[\"displayRgb\",\"g\"]]],[13],[1,\"\\n      \"],[13],[1,\"\\n      \"],[10,0],[14,0,\"range-slider-container\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[8,[32,1],[[24,0,\"range-slider\"],[16,5,[28,[32,2],[[28,[32,3],[\"background: \",[30,0,[\"gGradient\"]]],null]],null]],[24,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"]],[[\"@type\",\"@min\",\"@max\",\"@value\",\"@onInput\",\"@onChange\",\"@disabled\"],[\"range\",\"0\",\"255\",[30,0,[\"displayRgb\",\"g\"]],[28,[32,4],[[30,0,[\"handleRgbInput\"]],\"g\"],null],[30,0,[\"handleSliderChange\"]],[28,[32,5],[[30,1]],null]]],null],[1,\"\\n      \"],[13],[1,\"\\n    \"],[13],[1,\"\\n\\n    \"],[10,0],[14,0,\"slider-group\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n      \"],[10,0],[14,0,\"slider-header\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[10,\"label\"],[14,0,\"slider-label blue\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n          \"],[10,\"svg\"],[14,0,\"label-icon\"],[14,\"viewBox\",\"0 0 24 24\"],[14,\"fill\",\"none\"],[14,\"stroke\",\"currentColor\"],[14,\"stroke-width\",\"2\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n            \"],[10,\"circle\"],[14,\"cx\",\"12\"],[14,\"cy\",\"12\"],[14,\"r\",\"10\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[13],[1,\"\\n          \"],[13],[1,\"\\n          Blue\\n        \"],[13],[1,\"\\n        \"],[10,1],[14,0,\"slider-value\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,[30,0,[\"displayRgb\",\"b\"]]],[13],[1,\"\\n      \"],[13],[1,\"\\n      \"],[10,0],[14,0,\"range-slider-container\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[8,[32,1],[[24,0,\"range-slider\"],[16,5,[28,[32,2],[[28,[32,3],[\"background: \",[30,0,[\"bGradient\"]]],null]],null]],[24,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"]],[[\"@type\",\"@min\",\"@max\",\"@value\",\"@onInput\",\"@onChange\",\"@disabled\"],[\"range\",\"0\",\"255\",[30,0,[\"displayRgb\",\"b\"]],[28,[32,4],[[30,0,[\"handleRgbInput\"]],\"b\"],null],[30,0,[\"handleSliderChange\"]],[28,[32,5],[[30,1]],null]]],null],[1,\"\\n      \"],[13],[1,\"\\n    \"],[13],[1,\"\\n\"]],[]],[[[41,[28,[32,0],[[30,0,[\"outputFormat\"]],\"hsl\"],null],[[[1,\"    \"],[10,0],[14,0,\"slider-group\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n      \"],[10,0],[14,0,\"slider-header\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[10,\"label\"],[14,0,\"slider-label hue\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n          \"],[10,\"svg\"],[14,0,\"label-icon\"],[14,\"viewBox\",\"0 0 24 24\"],[14,\"fill\",\"none\"],[14,\"stroke\",\"currentColor\"],[14,\"stroke-width\",\"2\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n            \"],[10,\"circle\"],[14,\"cx\",\"12\"],[14,\"cy\",\"12\"],[14,\"r\",\"10\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[13],[1,\"\\n            \"],[10,\"path\"],[14,\"d\",\"M12 2v20\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[13],[1,\"\\n          \"],[13],[1,\"\\n          Hue\\n        \"],[13],[1,\"\\n        \"],[10,1],[14,0,\"slider-value\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,[28,[32,6,[\"round\"]],[[30,0,[\"displayHsl\",\"h\"]]],null]],[1,\"°\"],[13],[1,\"\\n      \"],[13],[1,\"\\n      \"],[10,0],[14,0,\"range-slider-container\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[8,[32,1],[[24,0,\"range-slider\"],[16,5,[28,[32,2],[[28,[32,3],[\"background: \",[30,0,[\"hGradient\"]]],null]],null]],[24,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"]],[[\"@type\",\"@min\",\"@max\",\"@value\",\"@onInput\",\"@onChange\",\"@disabled\"],[\"range\",\"0\",\"360\",[28,[32,6,[\"round\"]],[[30,0,[\"displayHsl\",\"h\"]]],null],[28,[32,4],[[30,0,[\"handleHslInput\"]],\"h\"],null],[30,0,[\"handleSliderChange\"]],[28,[32,5],[[30,1]],null]]],null],[1,\"\\n      \"],[13],[1,\"\\n    \"],[13],[1,\"\\n\\n    \"],[10,0],[14,0,\"slider-group\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n      \"],[10,0],[14,0,\"slider-header\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[10,\"label\"],[14,0,\"slider-label saturation\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n          \"],[10,\"svg\"],[14,0,\"label-icon\"],[14,\"viewBox\",\"0 0 24 24\"],[14,\"fill\",\"none\"],[14,\"stroke\",\"currentColor\"],[14,\"stroke-width\",\"2\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n            \"],[10,\"circle\"],[14,\"cx\",\"12\"],[14,\"cy\",\"12\"],[14,\"r\",\"10\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[13],[1,\"\\n            \"],[10,\"circle\"],[14,\"cx\",\"12\"],[14,\"cy\",\"12\"],[14,\"r\",\"6\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[13],[1,\"\\n          \"],[13],[1,\"\\n          Saturation\\n        \"],[13],[1,\"\\n        \"],[10,1],[14,0,\"slider-value\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,[28,[32,6,[\"round\"]],[[30,0,[\"displayHsl\",\"s\"]]],null]],[1,\"%\"],[13],[1,\"\\n      \"],[13],[1,\"\\n      \"],[10,0],[14,0,\"range-slider-container\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[8,[32,1],[[24,0,\"range-slider\"],[16,5,[28,[32,2],[[28,[32,3],[\"background: \",[30,0,[\"sGradient\"]]],null]],null]],[24,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"]],[[\"@type\",\"@min\",\"@max\",\"@value\",\"@onInput\",\"@onChange\",\"@disabled\"],[\"range\",\"0\",\"100\",[28,[32,6,[\"round\"]],[[30,0,[\"displayHsl\",\"s\"]]],null],[28,[32,4],[[30,0,[\"handleHslInput\"]],\"s\"],null],[30,0,[\"handleSliderChange\"]],[28,[32,5],[[30,1]],null]]],null],[1,\"\\n      \"],[13],[1,\"\\n    \"],[13],[1,\"\\n\\n    \"],[10,0],[14,0,\"slider-group\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n      \"],[10,0],[14,0,\"slider-header\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[10,\"label\"],[14,0,\"slider-label lightness\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n          \"],[10,\"svg\"],[14,0,\"label-icon\"],[14,\"viewBox\",\"0 0 24 24\"],[14,\"fill\",\"none\"],[14,\"stroke\",\"currentColor\"],[14,\"stroke-width\",\"2\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n            \"],[10,\"circle\"],[14,\"cx\",\"12\"],[14,\"cy\",\"12\"],[14,\"r\",\"5\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[13],[1,\"\\n            \"],[10,\"path\"],[14,\"d\",\"M12 1v6m0 6v6M4.22 4.22l4.24 4.24m5.08 5.08l4.24 4.24M1 12h6m6 0h6M4.22 19.78l4.24-4.24m5.08-5.08l4.24-4.24\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[13],[1,\"\\n          \"],[13],[1,\"\\n          Lightness\\n        \"],[13],[1,\"\\n        \"],[10,1],[14,0,\"slider-value\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,[28,[32,6,[\"round\"]],[[30,0,[\"displayHsl\",\"l\"]]],null]],[1,\"%\"],[13],[1,\"\\n      \"],[13],[1,\"\\n      \"],[10,0],[14,0,\"range-slider-container\"],[14,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"],[12],[1,\"\\n        \"],[8,[32,1],[[24,0,\"range-slider\"],[16,5,[28,[32,2],[[28,[32,3],[\"background: \",[30,0,[\"lGradient\"]]],null]],null]],[24,\"data-scopedcss-0d7b26b613-38341493ba\",\"\"]],[[\"@type\",\"@min\",\"@max\",\"@value\",\"@onInput\",\"@onChange\",\"@disabled\"],[\"range\",\"0\",\"100\",[28,[32,6,[\"round\"]],[[30,0,[\"displayHsl\",\"l\"]]],null],[28,[32,4],[[30,0,[\"handleHslInput\"]],\"l\"],null],[30,0,[\"handleSliderChange\"]],[28,[32,5],[[30,1]],null]]],null],[1,\"\\n      \"],[13],[1,\"\\n    \"],[13],[1,\"\\n  \"]],[]],null]],[]]],[13],[1,\"\\n\\n\"]],[\"@canEdit\"],[\"if\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/base/color-field/components/slider-picker.gts",
+			"scope": () => [
+				eq,
+				BoxelInput,
+				htmlSafe,
+				concat,
+				fn,
+				not,
+				Math
+			],
+			"isStrictMode": true
+		}), this);
+	}
+};
+(globalThis.__boxelBundledBaseScopedCSS ??= {})["color-field/components/slider-picker"] = {
+	"css": ["./slider-picker.gts.CiAgLnNsaWRlci1jb250cm9scy1lZGl0b3JbZGF0YS1zY29wZWRjc3MtMGQ3YjI2YjYxMy0zODM0MTQ5M2JhXSB7CiAgICBkaXNwbGF5OiBmbGV4OwogICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICAgIGdhcDogMC42MjVyZW07CiAgICBwYWRkaW5nOiAwLjVyZW07CiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMsIDAuNXJlbSk7CiAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kIDAuMnM7CiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1ib3hlbC1saWdodCwgI2ZmZmZmZik7CiAgfQoKICAuc2xpZGVyLWdyb3VwW2RhdGEtc2NvcGVkY3NzLTBkN2IyNmI2MTMtMzgzNDE0OTNiYV0gewogICAgZGlzcGxheTogZmxleDsKICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgICBnYXA6IDAuMzc1cmVtOwogIH0KCiAgLnNsaWRlci1oZWFkZXJbZGF0YS1zY29wZWRjc3MtMGQ3YjI2YjYxMy0zODM0MTQ5M2JhXSB7CiAgICBkaXNwbGF5OiBmbGV4OwogICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICB9CgogIC5zbGlkZXItbGFiZWxbZGF0YS1zY29wZWRjc3MtMGQ3YjI2YjYxMy0zODM0MTQ5M2JhXSB7CiAgICBkaXNwbGF5OiBmbGV4OwogICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgIGdhcDogMC4zNzVyZW07CiAgICBmb250LXNpemU6IDAuNzVyZW07CiAgICBmb250LXdlaWdodDogNTAwOwogICAgY29sb3I6IHZhcigtLWZvcmVncm91bmQsICMwZjE3MmEpOwogIH0KCiAgLmxhYmVsLWljb25bZGF0YS1zY29wZWRjc3MtMGQ3YjI2YjYxMy0zODM0MTQ5M2JhXSB7CiAgICB3aWR0aDogMC44NzVyZW07CiAgICBoZWlnaHQ6IDAuODc1cmVtOwogICAgZmxleC1zaHJpbms6IDA7CiAgICBjb2xvcjogdmFyKC0tbXV0ZWQtZm9yZWdyb3VuZCwgIzY0NzQ4Yik7CiAgfQoKICAuc2xpZGVyLXZhbHVlW2RhdGEtc2NvcGVkY3NzLTBkN2IyNmI2MTMtMzgzNDE0OTNiYV0gewogICAgZm9udC1mYW1pbHk6IHZhcigKICAgICAgLS1mb250LW1vbm8sCiAgICAgICdTRiBNb25vJywKICAgICAgJ01vbmFjbycsCiAgICAgICdDb3VyaWVyIE5ldycsCiAgICAgIG1vbm9zcGFjZQogICAgKTsKICAgIGZvbnQtc2l6ZTogMC43NXJlbTsKICAgIGZvbnQtd2VpZ2h0OiA2MDA7CiAgICBjb2xvcjogdmFyKC0tZm9yZWdyb3VuZCwgIzBmMTcyYSk7CiAgICBtaW4td2lkdGg6IDNyZW07CiAgICB0ZXh0LWFsaWduOiByaWdodDsKICB9CgogIC5yYW5nZS1zbGlkZXItY29udGFpbmVyW2RhdGEtc2NvcGVkY3NzLTBkN2IyNmI2MTMtMzgzNDE0OTNiYV0gewogICAgd2lkdGg6IDEwMCU7CiAgfQoKICAucmFuZ2Utc2xpZGVyW2RhdGEtc2NvcGVkY3NzLTBkN2IyNmI2MTMtMzgzNDE0OTNiYV0gewogICAgLXdlYmtpdC1hcHBlYXJhbmNlOiBub25lOwogICAgYXBwZWFyYW5jZTogbm9uZTsKICAgIHdpZHRoOiAxMDAlOwogICAgLS1ib3hlbC1pbnB1dC1oZWlnaHQ6IDAuNXJlbTsKICAgIGJvcmRlci1yYWRpdXM6IGNhbGModmFyKC0tcmFkaXVzLCAwLjVyZW0pKTsKICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWJvcmRlciwgI2UyZThmMCk7CiAgICBvdXRsaW5lOiBub25lOwogICAgY3Vyc29yOiBwb2ludGVyOwogICAgZGlzcGxheTogYmxvY2s7CiAgICBwYWRkaW5nOiAwOwogIH0KCiAgLnJhbmdlLXNsaWRlcltkYXRhLXNjb3BlZGNzcy0wZDdiMjZiNjEzLTM4MzQxNDkzYmFdOjotd2Via2l0LXNsaWRlci10aHVtYiB7CiAgICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7CiAgICBhcHBlYXJhbmNlOiBub25lOwogICAgd2lkdGg6IDFyZW07CiAgICBoZWlnaHQ6IDFyZW07CiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1iYWNrZ3JvdW5kLCAjZmZmZmZmKTsKICAgIGJvcmRlcjogMnB4IHNvbGlkIHZhcigtLWZvcmVncm91bmQsICMwMDAwMDApOwogICAgYm9yZGVyLXJhZGl1czogNTAlOwogICAgY3Vyc29yOiBwb2ludGVyOwogICAgYm94LXNoYWRvdzoKICAgICAgMCAwIDAgMS41cHggdmFyKC0tYmFja2dyb3VuZCwgI2ZmZmZmZiksCiAgICAgIDAgMnB4IDRweCByZ2JhKDAsIDAsIDAsIDAuMik7CiAgfQoKICAucmFuZ2Utc2xpZGVyW2RhdGEtc2NvcGVkY3NzLTBkN2IyNmI2MTMtMzgzNDE0OTNiYV06Oi1tb3otcmFuZ2UtdGh1bWIgewogICAgd2lkdGg6IDFyZW07CiAgICBoZWlnaHQ6IDFyZW07CiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1iYWNrZ3JvdW5kLCAjZmZmZmZmKTsKICAgIGJvcmRlcjogMnB4IHNvbGlkIHZhcigtLWZvcmVncm91bmQsICMwMDAwMDApOwogICAgYm9yZGVyLXJhZGl1czogNTAlOwogICAgY3Vyc29yOiBwb2ludGVyOwogICAgYm94LXNoYWRvdzoKICAgICAgMCAwIDAgMS41cHggdmFyKC0tYmFja2dyb3VuZCwgI2ZmZmZmZiksCiAgICAgIDAgMnB4IDRweCByZ2JhKDAsIDAsIDAsIDAuMik7CiAgfQoKICAucmFuZ2Utc2xpZGVyW2RhdGEtc2NvcGVkY3NzLTBkN2IyNmI2MTMtMzgzNDE0OTNiYV06ZGlzYWJsZWQgewogICAgb3BhY2l0eTogMC41OwogICAgY3Vyc29yOiBub3QtYWxsb3dlZDsKICB9CgogIC5yYW5nZS1zbGlkZXJbZGF0YS1zY29wZWRjc3MtMGQ3YjI2YjYxMy0zODM0MTQ5M2JhXTpkaXNhYmxlZDo6LXdlYmtpdC1zbGlkZXItdGh1bWIgewogICAgY3Vyc29yOiBub3QtYWxsb3dlZDsKICB9CgogIC5yYW5nZS1zbGlkZXJbZGF0YS1zY29wZWRjc3MtMGQ3YjI2YjYxMy0zODM0MTQ5M2JhXTpkaXNhYmxlZDo6LW1vei1yYW5nZS10aHVtYiB7CiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkOwogIH0K.glimmer-scoped.css"],
+	"imports": ["color-field/util/color-utils"]
+};
+(globalThis.__boxelBundledBaseIdentities ??= {})["color-field/components/slider-picker"] = { "default": SliderPicker };
+//#endregion
+export { SliderPicker as t };

package/bundled-test-harness/assets/slider-picker-C4Tc5o-s.js

@@ -0,0 +1,2 @@
+import { t as SliderPicker } from "./slider-picker-B6AxKL2j.js";
+export { SliderPicker as default };