@youcan/celeste 0.17.2 → 0.19.0

package/dist/cjs/chunks/gradient-picker.cjs

@@ -0,0 +1,635 @@
+const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+const require_popover_content = require("./popover-content.cjs");
+const require_popover_trigger = require("./popover-trigger.cjs");
+require("./button.cjs");
+const require_compact_button = require("./compact-button.cjs");
+require("./fancy-button.cjs");
+require("./link-button.cjs");
+require("./social-button.cjs");
+const require_tinycolor = require("./tinycolor.cjs");
+const require_popover = require("./popover.cjs");
+require("./text-input-affix.cjs");
+require("./text-input-button.cjs");
+const require_text_input = require("./text-input.cjs");
+const require_gradient = require("../gradient.cjs");
+const require_tooltip = require("./tooltip.cjs");
+let vue = require("vue");
+//#region src/components/color-picker/gradient-picker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	type: "button",
+	class: "celeste-gradient-trigger"
+};
+var _hoisted_2 = ["data-empty"];
+var _hoisted_3 = { class: "celeste-gradient-summary" };
+var _hoisted_4 = { class: "celeste-gradient-picker" };
+var _hoisted_5 = {
+	key: 0,
+	class: "celeste-gradient-section"
+};
+var _hoisted_6 = { class: "celeste-gradient-hint" };
+var _hoisted_7 = { class: "celeste-gradient-presets" };
+var _hoisted_8 = ["title", "aria-label"];
+var _hoisted_9 = ["aria-label", "onClick"];
+var _hoisted_10 = { class: "celeste-gradient-section" };
+var _hoisted_11 = ["data-linear"];
+var _hoisted_12 = {
+	key: 0,
+	class: "celeste-gradient-ring"
+};
+var _hoisted_13 = { class: "celeste-gradient-row" };
+var _hoisted_14 = [
+	"data-type",
+	"data-active",
+	"aria-label",
+	"onClick"
+];
+var _hoisted_15 = [
+	"data-active",
+	"data-removing",
+	"aria-label",
+	"onPointerdown",
+	"onKeydown"
+];
+var _hoisted_16 = { class: "celeste-gradient-row" };
+var _hoisted_17 = { class: "celeste-gradient-eyebrow" };
+var _hoisted_18 = { class: "celeste-gradient-row" };
+var _hoisted_19 = { class: "celeste-gradient-label" };
+var _hoisted_20 = { class: "celeste-gradient-row" };
+var _hoisted_21 = { class: "celeste-gradient-current" };
+var _hoisted_22 = { class: "celeste-gradient-color" };
+var _hoisted_23 = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext"
+];
+var _hoisted_24 = ["aria-label", "aria-valuenow"];
+var _hoisted_25 = ["aria-label", "aria-valuenow"];
+var _hoisted_26 = { class: "celeste-gradient-section celeste-gradient-used" };
+var _hoisted_27 = { class: "celeste-gradient-label" };
+var _hoisted_28 = { class: "celeste-gradient-swatches" };
+var _hoisted_29 = [
+	"title",
+	"aria-label",
+	"onClick"
+];
+var _hoisted_30 = { class: "celeste-gradient-footer" };
+var gradient_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "gradient-picker",
+	props: {
+		modelValue: { default: "" },
+		placeholder: { default: "No gradient chosen" },
+		emptyHint: { default: "Select a gradient to begin editing" },
+		noneLabel: { default: "None" },
+		linearLabel: { default: "Linear gradient" },
+		radialLabel: { default: "Radial gradient" },
+		angleLabel: { default: "Angle" },
+		colorStopLabel: { default: "Color stop" },
+		addStopLabel: { default: "Add stop" },
+		removeStopLabel: { default: "Remove stop" },
+		positionLabel: { default: "Position" },
+		opacityLabel: { default: "Opacity" },
+		hueLabel: { default: "Hue" },
+		areaLabel: { default: "Saturation and brightness" },
+		eyedropperLabel: { default: "Pick color" },
+		usedLabel: { default: "Currently used" },
+		removeLabel: { default: "Remove gradient" },
+		presets: { default: () => [
+			"linear-gradient(135deg, #e1116f 0%, #7d52f4 100%)",
+			"linear-gradient(180deg, #f7f1e8 0%, #e3cfb4 100%)",
+			"linear-gradient(160deg, #1f3d2b 0%, #4f7a5a 100%)",
+			"linear-gradient(180deg, #3d3d3d 0%, #171717 100%)",
+			"radial-gradient(#ffffff 0%, #dbe4ee 100%)",
+			"linear-gradient(135deg, #e8a07a 0%, #b5532f 100%)",
+			"linear-gradient(200deg, #0b3c5d 0%, #1e7f8c 100%)",
+			"radial-gradient(#fff1f5 0%, #f7b5c9 100%)",
+			"linear-gradient(120deg, #d6d29a 0%, #7a7a3a 100%)",
+			"linear-gradient(180deg, #1b1f3b 0%, #4b3f8f 100%)",
+			"linear-gradient(90deg, #ffd86b 0%, #f08a24 100%)"
+		] },
+		swatches: { default: () => [
+			"#ffffff",
+			"#171717",
+			"#f5f5f5",
+			"#222530",
+			"#000000",
+			"#335cff",
+			"#e1116f"
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const open = (0, vue.ref)(false);
+		const state = (0, vue.ref)(null);
+		const selected = (0, vue.ref)();
+		const removing = (0, vue.ref)();
+		const drafts = (0, vue.reactive)({});
+		const preview = (0, vue.ref)();
+		const bar = (0, vue.ref)();
+		const area = (0, vue.ref)();
+		const hue = (0, vue.ref)();
+		const alpha = (0, vue.ref)();
+		let uid = 0;
+		const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+		const numeric = (raw) => raw.trim() !== "" && !Number.isNaN(Number(raw));
+		function hsva(color) {
+			const parsed = require_tinycolor.tinycolor(color);
+			const { h, s, v } = parsed.toHsv();
+			return {
+				h,
+				s: s * 100,
+				v: v * 100,
+				a: parsed.getAlpha()
+			};
+		}
+		function colorOf(stop) {
+			const color = require_tinycolor.tinycolor({
+				h: stop.h,
+				s: stop.s / 100,
+				v: stop.v / 100,
+				a: stop.a
+			});
+			return stop.a >= 1 ? color.toHexString() : color.toRgbString();
+		}
+		function toCss(value, linear = false) {
+			return require_gradient.stringifyGradient({
+				type: linear ? "linear" : value.type,
+				angle: linear ? 90 : value.angle,
+				shape: value.shape,
+				stops: value.stops.map((stop) => ({
+					color: colorOf(stop),
+					position: stop.position
+				}))
+			});
+		}
+		function load(value) {
+			const gradient = require_gradient.parseGradient(value);
+			state.value = gradient && {
+				type: gradient.type,
+				angle: gradient.angle,
+				shape: gradient.shape,
+				stops: gradient.stops.map((stop) => ({
+					id: ++uid,
+					...hsva(stop.color),
+					position: stop.position
+				}))
+			};
+			selected.value = state.value?.stops[0].id;
+		}
+		const css = (0, vue.computed)(() => state.value ? toCss(state.value) : "");
+		(0, vue.watch)(() => props.modelValue, (value) => value !== css.value && load(value), { immediate: true });
+		const track = (0, vue.computed)(() => state.value ? toCss(state.value, true) : "");
+		const current = (0, vue.computed)(() => state.value?.stops.find((stop) => stop.id === selected.value));
+		const solid = (0, vue.computed)(() => current.value && colorOf({
+			...current.value,
+			a: 1
+		}));
+		function save() {
+			css.value !== props.modelValue && emit("update:modelValue", css.value);
+		}
+		function patch(changes, keepDrafts = false) {
+			Object.assign(current.value, changes);
+			keepDrafts || Object.keys(drafts).forEach((key) => delete drafts[key]);
+			save();
+		}
+		function field(key, value, commit) {
+			return {
+				value: drafts[key] ?? String(value),
+				input: (raw) => {
+					drafts[key] = String(raw ?? "");
+					commit(drafts[key].trim());
+				}
+			};
+		}
+		const fields = (0, vue.computed)(() => current.value && {
+			hex: field("hex", solid.value.toUpperCase(), (raw) => /^#?[0-9a-f]{6}$/i.test(raw) && patch({
+				...hsva(raw.replace(/^#?/, "#")),
+				a: current.value.a
+			}, true)),
+			alpha: field("alpha", Math.round(current.value.a * 100), (raw) => numeric(raw) && patch({ a: clamp(Number(raw), 0, 100) / 100 }, true)),
+			position: field("position", current.value.position, (raw) => numeric(raw) && patch({ position: clamp(Math.round(Number(raw)), 0, 100) }, true)),
+			angle: field("angle", state.value.angle, (raw) => {
+				if (numeric(raw)) {
+					state.value.angle = (Math.round(Number(raw)) % 360 + 360) % 360;
+					save();
+				}
+			})
+		});
+		function drag(event, move, up) {
+			event.preventDefault();
+			move(event);
+			const stop = () => {
+				window.removeEventListener("pointermove", move);
+				window.removeEventListener("pointerup", stop);
+				up?.();
+			};
+			window.addEventListener("pointermove", move);
+			window.addEventListener("pointerup", stop);
+		}
+		function keys(event, apply) {
+			const step = event.shiftKey ? 10 : 1;
+			const delta = {
+				ArrowLeft: [-step, 0],
+				ArrowRight: [step, 0],
+				ArrowUp: [0, -step],
+				ArrowDown: [0, step]
+			}[event.key];
+			if (delta) {
+				event.preventDefault();
+				apply(...delta);
+			}
+		}
+		function onHandleKey(event, id) {
+			selected.value = id;
+			if (["Delete", "Backspace"].includes(event.key) && state.value.stops.length > 2) {
+				event.preventDefault();
+				removeStop();
+			}
+			keys(event, (dx, dy) => patch({ position: clamp(current.value.position + dx - dy, 0, 100) }));
+		}
+		function relative(element, event, inset = 0) {
+			const rect = element.getBoundingClientRect();
+			return {
+				x: clamp((event.clientX - rect.left - inset) / (rect.width - 2 * inset), 0, 1),
+				y: clamp((event.clientY - rect.top - inset) / (rect.height - 2 * inset), 0, 1),
+				dy: event.clientY - rect.top - rect.height / 2
+			};
+		}
+		function colorAt(position) {
+			const stops = [...state.value.stops].sort((a, b) => a.position - b.position);
+			const after = stops.find((stop) => stop.position >= position) ?? stops.at(-1);
+			const before = stops.findLast((stop) => stop.position <= position) ?? stops[0];
+			const ratio = after.position === before.position ? 0 : (position - before.position) / (after.position - before.position);
+			return {
+				...hsva(require_tinycolor.tinycolor.mix(colorOf({
+					...before,
+					a: 1
+				}), colorOf({
+					...after,
+					a: 1
+				}), ratio * 100).toHexString()),
+				a: before.a + (after.a - before.a) * ratio
+			};
+		}
+		function addAt(position) {
+			const id = ++uid;
+			state.value.stops.push({
+				id,
+				...colorAt(position),
+				position
+			});
+			selected.value = id;
+			save();
+			return id;
+		}
+		function dragStop(event, id) {
+			selected.value = id;
+			Object.keys(drafts).forEach((key) => delete drafts[key]);
+			drag(event, (moved) => {
+				const { x, dy } = relative(bar.value, moved, 10);
+				current.value.position = Math.round(x * 100);
+				removing.value = state.value.stops.length > 2 && Math.abs(dy) > 40 ? id : void 0;
+				save();
+			}, () => removing.value === id && removeStop());
+		}
+		function onBar(event) {
+			event.target === event.currentTarget && dragStop(event, addAt(Math.round(relative(bar.value, event, 10).x * 100)));
+		}
+		function onPreview(event) {
+			state.value.type === "linear" && drag(event, (moved) => {
+				const rect = preview.value.getBoundingClientRect();
+				const degrees = Math.atan2(moved.clientX - rect.left - rect.width / 2, rect.top + rect.height / 2 - moved.clientY) * 180 / Math.PI + 360;
+				state.value.angle = Math.round(moved.shiftKey ? Math.round(degrees / 15) * 15 : degrees) % 360;
+				delete drafts.angle;
+				save();
+			});
+		}
+		function onArea(event) {
+			drag(event, (moved) => {
+				const { x, y } = relative(area.value, moved);
+				patch({
+					s: x * 100,
+					v: (1 - y) * 100
+				});
+			});
+		}
+		function onHue(event) {
+			drag(event, (moved) => patch({ h: Math.min(relative(hue.value, moved, 12).y * 360, 359) }));
+		}
+		function onAlpha(event) {
+			drag(event, (moved) => patch({ a: Math.round((1 - relative(alpha.value, moved, 12).y) * 100) / 100 }));
+		}
+		function addStop() {
+			const stops = [...state.value.stops].sort((a, b) => a.position - b.position);
+			const index = stops.indexOf(current.value);
+			const next = stops[index + 1] ?? stops[index - 1];
+			addAt(Math.round((current.value.position + next.position) / 2));
+		}
+		function removeStop() {
+			state.value.stops = state.value.stops.filter((stop) => stop.id !== selected.value);
+			selected.value = state.value.stops[0].id;
+			removing.value = void 0;
+			save();
+		}
+		function setType(type) {
+			state.value.type = type;
+			save();
+		}
+		function pick(value) {
+			load(value);
+			save();
+		}
+		async function sip() {
+			const result = await new window.EyeDropper().open().catch(() => void 0);
+			result && patch({
+				...hsva(result.sRGBHex),
+				a: current.value.a
+			});
+		}
+		const fill = (color) => `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e5e5e5 0 25%, #fff 0 50%) 0 0 / 8px 8px`;
+		const along = (fraction) => `calc(12px + (100% - 24px) * ${fraction})`;
+		const canSip = "EyeDropper" in window;
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_popover.popover_default), {
+				open: open.value,
+				"onUpdate:open": _cache[6] || (_cache[6] = ($event) => open.value = $event)
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_popover_trigger.popover_trigger_default), { "as-child": "" }, {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("button", _hoisted_1, [
+						(0, vue.createElementVNode)("span", {
+							class: "celeste-gradient-swatch",
+							"data-empty": !state.value,
+							style: (0, vue.normalizeStyle)(state.value ? { background: css.value } : void 0)
+						}, null, 12, _hoisted_2),
+						(0, vue.createElementVNode)("span", _hoisted_3, (0, vue.toDisplayString)(state.value ? state.value.type === "linear" ? __props.linearLabel : __props.radialLabel : __props.placeholder), 1),
+						_cache[7] || (_cache[7] = (0, vue.createElementVNode)("i", { class: "i-celeste-expand-up-down-line" }, null, -1))
+					])]),
+					_: 1
+				}), (0, vue.createVNode)((0, vue.unref)(require_popover_content.popover_content_default), {
+					dismissible: false,
+					"show-tail": false,
+					align: "start",
+					onOpenAutoFocus: _cache[5] || (_cache[5] = (0, vue.withModifiers)(() => {}, ["prevent"]))
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_4, [!state.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5, [(0, vue.createElementVNode)("span", _hoisted_6, (0, vue.toDisplayString)(__props.emptyHint), 1), (0, vue.createElementVNode)("div", _hoisted_7, [(0, vue.createElementVNode)("button", {
+						type: "button",
+						class: "celeste-gradient-preset",
+						"data-empty": "true",
+						title: __props.noneLabel,
+						"aria-label": __props.noneLabel,
+						onClick: _cache[0] || (_cache[0] = ($event) => open.value = false)
+					}, null, 8, _hoisted_8), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.presets, (preset) => {
+						return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+							key: preset,
+							type: "button",
+							class: "celeste-gradient-preset",
+							style: (0, vue.normalizeStyle)({ background: preset }),
+							"aria-label": preset,
+							onClick: ($event) => pick(preset)
+						}, null, 12, _hoisted_9);
+					}), 128))])])) : current.value && fields.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
+						(0, vue.createElementVNode)("div", _hoisted_10, [
+							(0, vue.createElementVNode)("div", {
+								ref_key: "preview",
+								ref: preview,
+								class: "celeste-gradient-preview",
+								"data-linear": state.value.type === "linear",
+								onPointerdown: onPreview
+							}, [(0, vue.createElementVNode)("span", {
+								class: "celeste-gradient-fill",
+								style: (0, vue.normalizeStyle)({ background: css.value })
+							}, null, 4), state.value.type === "linear" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_12, [(0, vue.createElementVNode)("span", { style: (0, vue.normalizeStyle)({ rotate: `${state.value.angle}deg` }) }, null, 4)])) : (0, vue.createCommentVNode)("", true)], 40, _hoisted_11),
+							(0, vue.createElementVNode)("div", _hoisted_13, [((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(["linear", "radial"], (type) => {
+								return (0, vue.createVNode)((0, vue.unref)(require_tooltip.tooltip_default), {
+									key: type,
+									title: type === "linear" ? __props.linearLabel : __props.radialLabel,
+									size: "xs",
+									variant: "dark"
+								}, {
+									default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("button", {
+										type: "button",
+										class: "celeste-gradient-type",
+										"data-type": type,
+										"data-active": state.value.type === type,
+										"aria-label": type === "linear" ? __props.linearLabel : __props.radialLabel,
+										onClick: ($event) => setType(type)
+									}, [..._cache[8] || (_cache[8] = [(0, vue.createElementVNode)("span", null, null, -1)])], 8, _hoisted_14)]),
+									_: 2
+								}, 1032, ["title"]);
+							}), 64)), state.value.type === "linear" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_text_input.text_input_default), {
+								key: 0,
+								"model-value": fields.value.angle.value,
+								inputmode: "numeric",
+								size: "xs",
+								"aria-label": __props.angleLabel,
+								class: "celeste-gradient-number",
+								"onUpdate:modelValue": fields.value.angle.input
+							}, {
+								trailingNode: (0, vue.withCtx)(() => [..._cache[9] || (_cache[9] = [(0, vue.createTextVNode)(" ° ", -1)])]),
+								_: 1
+							}, 8, [
+								"model-value",
+								"aria-label",
+								"onUpdate:modelValue"
+							])) : (0, vue.createCommentVNode)("", true)]),
+							(0, vue.createElementVNode)("div", {
+								ref_key: "bar",
+								ref: bar,
+								class: "celeste-gradient-bar",
+								onPointerdown: onBar
+							}, [(0, vue.createElementVNode)("span", {
+								class: "celeste-gradient-fill",
+								style: (0, vue.normalizeStyle)({ background: track.value })
+							}, null, 4), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(state.value.stops, (stop) => {
+								return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+									key: stop.id,
+									type: "button",
+									class: "celeste-gradient-handle",
+									style: (0, vue.normalizeStyle)({
+										left: `calc(10px + (100% - 20px) * ${stop.position / 100})`,
+										background: fill(colorOf(stop))
+									}),
+									"data-active": stop.id === selected.value,
+									"data-removing": stop.id === removing.value,
+									"aria-label": `${colorOf(stop)} ${stop.position}%`,
+									onPointerdown: (0, vue.withModifiers)(($event) => dragStop($event, stop.id), ["stop"]),
+									onKeydown: ($event) => onHandleKey($event, stop.id)
+								}, null, 44, _hoisted_15);
+							}), 128))], 544),
+							(0, vue.createElementVNode)("div", _hoisted_16, [
+								(0, vue.createElementVNode)("span", _hoisted_17, (0, vue.toDisplayString)(__props.colorStopLabel), 1),
+								(0, vue.createVNode)((0, vue.unref)(require_compact_button.compact_button_default), {
+									icon: "i-celeste-add-line",
+									variant: "ghost",
+									size: "md",
+									"aria-label": __props.addStopLabel,
+									onClick: addStop
+								}, null, 8, ["aria-label"]),
+								(0, vue.createVNode)((0, vue.unref)(require_compact_button.compact_button_default), {
+									icon: "i-celeste-subtract-line",
+									variant: "ghost",
+									size: "md",
+									"aria-label": __props.removeStopLabel,
+									disabled: state.value.stops.length <= 2,
+									onClick: removeStop
+								}, null, 8, ["aria-label", "disabled"])
+							]),
+							(0, vue.createElementVNode)("div", _hoisted_18, [(0, vue.createElementVNode)("span", _hoisted_19, (0, vue.toDisplayString)(__props.positionLabel), 1), (0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
+								"model-value": fields.value.position.value,
+								inputmode: "numeric",
+								size: "xs",
+								"aria-label": __props.positionLabel,
+								class: "celeste-gradient-number",
+								"onUpdate:modelValue": fields.value.position.input
+							}, {
+								trailingNode: (0, vue.withCtx)(() => [..._cache[10] || (_cache[10] = [(0, vue.createTextVNode)(" % ", -1)])]),
+								_: 1
+							}, 8, [
+								"model-value",
+								"aria-label",
+								"onUpdate:modelValue"
+							])]),
+							(0, vue.createElementVNode)("div", _hoisted_20, [
+								(0, vue.createElementVNode)("span", _hoisted_21, [(0, vue.createElementVNode)("span", {
+									class: "celeste-gradient-fill",
+									style: (0, vue.normalizeStyle)({ background: colorOf(current.value) })
+								}, null, 4)]),
+								(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
+									"model-value": fields.value.hex.value,
+									size: "xs",
+									class: "celeste-gradient-hex",
+									"onUpdate:modelValue": fields.value.hex.input
+								}, (0, vue.createSlots)({ _: 2 }, [canSip ? {
+									name: "trailingNode",
+									fn: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_compact_button.compact_button_default), {
+										icon: "i-celeste-sip-line",
+										variant: "ghost",
+										size: "md",
+										"aria-label": __props.eyedropperLabel,
+										onClick: sip
+									}, null, 8, ["aria-label"])]),
+									key: "0"
+								} : void 0]), 1032, ["model-value", "onUpdate:modelValue"]),
+								(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
+									"model-value": fields.value.alpha.value,
+									inputmode: "numeric",
+									size: "xs",
+									"aria-label": __props.opacityLabel,
+									class: "celeste-gradient-number",
+									"onUpdate:modelValue": fields.value.alpha.input
+								}, {
+									trailingNode: (0, vue.withCtx)(() => [..._cache[11] || (_cache[11] = [(0, vue.createTextVNode)(" % ", -1)])]),
+									_: 1
+								}, 8, [
+									"model-value",
+									"aria-label",
+									"onUpdate:modelValue"
+								])
+							]),
+							(0, vue.createElementVNode)("div", _hoisted_22, [
+								(0, vue.createElementVNode)("div", {
+									ref_key: "area",
+									ref: area,
+									class: "celeste-gradient-area",
+									style: (0, vue.normalizeStyle)({ backgroundColor: `hsl(${current.value.h}, 100%, 50%)` }),
+									role: "slider",
+									tabindex: "0",
+									"aria-label": __props.areaLabel,
+									"aria-valuenow": Math.round(current.value.s),
+									"aria-valuetext": `${Math.round(current.value.s)}%, ${Math.round(current.value.v)}%`,
+									onPointerdown: onArea,
+									onKeydown: _cache[1] || (_cache[1] = ($event) => keys($event, (dx, dy) => patch({
+										s: clamp(current.value.s + dx, 0, 100),
+										v: clamp(current.value.v - dy, 0, 100)
+									})))
+								}, [(0, vue.createElementVNode)("span", {
+									class: "celeste-gradient-knob",
+									style: (0, vue.normalizeStyle)({
+										left: `${current.value.s}%`,
+										top: `${100 - current.value.v}%`,
+										background: fill(colorOf(current.value))
+									})
+								}, null, 4)], 44, _hoisted_23),
+								(0, vue.createElementVNode)("div", {
+									ref_key: "hue",
+									ref: hue,
+									class: "celeste-gradient-slider",
+									"data-hue": "true",
+									role: "slider",
+									tabindex: "0",
+									"aria-orientation": "vertical",
+									"aria-valuemin": "0",
+									"aria-valuemax": "359",
+									"aria-label": __props.hueLabel,
+									"aria-valuenow": Math.round(current.value.h),
+									onPointerdown: onHue,
+									onKeydown: _cache[2] || (_cache[2] = ($event) => keys($event, (dx, dy) => patch({ h: clamp(current.value.h + dx + dy, 0, 359) })))
+								}, [(0, vue.createElementVNode)("span", {
+									class: "celeste-gradient-knob",
+									style: (0, vue.normalizeStyle)({
+										top: along(current.value.h / 360),
+										background: fill(colorOf(current.value))
+									})
+								}, null, 4)], 40, _hoisted_24),
+								(0, vue.createElementVNode)("div", {
+									ref_key: "alpha",
+									ref: alpha,
+									class: "celeste-gradient-slider",
+									role: "slider",
+									tabindex: "0",
+									"aria-orientation": "vertical",
+									"aria-valuemin": "0",
+									"aria-valuemax": "100",
+									"aria-label": __props.opacityLabel,
+									"aria-valuenow": Math.round(current.value.a * 100),
+									onPointerdown: onAlpha,
+									onKeydown: _cache[3] || (_cache[3] = ($event) => keys($event, (dx, dy) => patch({ a: clamp(Math.round(current.value.a * 100 + dx - dy), 0, 100) / 100 })))
+								}, [(0, vue.createElementVNode)("span", {
+									class: "celeste-gradient-fill",
+									style: (0, vue.normalizeStyle)({ background: `linear-gradient(${solid.value}, transparent)` })
+								}, null, 4), (0, vue.createElementVNode)("span", {
+									class: "celeste-gradient-knob",
+									style: (0, vue.normalizeStyle)({
+										top: along(1 - current.value.a),
+										background: fill(colorOf(current.value))
+									})
+								}, null, 4)], 40, _hoisted_25)
+							])
+						]),
+						(0, vue.createElementVNode)("div", _hoisted_26, [(0, vue.createElementVNode)("span", _hoisted_27, (0, vue.toDisplayString)(__props.usedLabel), 1), (0, vue.createElementVNode)("div", _hoisted_28, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.swatches, (swatch) => {
+							return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+								key: swatch,
+								type: "button",
+								style: (0, vue.normalizeStyle)({ background: swatch }),
+								title: swatch,
+								"aria-label": swatch,
+								onClick: ($event) => patch({
+									...hsva(swatch),
+									a: current.value.a
+								})
+							}, null, 12, _hoisted_29);
+						}), 128))])]),
+						(0, vue.createElementVNode)("div", _hoisted_30, [(0, vue.createElementVNode)("button", {
+							type: "button",
+							class: "celeste-gradient-remove",
+							onClick: _cache[4] || (_cache[4] = ($event) => pick(""))
+						}, [_cache[12] || (_cache[12] = (0, vue.createElementVNode)("i", { class: "i-celeste-delete-bin-line" }, null, -1)), (0, vue.createTextVNode)(" " + (0, vue.toDisplayString)(__props.removeLabel), 1)])])
+					], 64)) : (0, vue.createCommentVNode)("", true)])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/gradient-picker.vue
+var gradient_picker_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(gradient_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3f165d2c"]]);
+//#endregion
+Object.defineProperty(exports, "gradient_picker_default", {
+	enumerable: true,
+	get: function() {
+		return gradient_picker_default;
+	}
+});

package/dist/cjs/chunks/text-input-affix.cjs

@@ -26,7 +26,7 @@ var text_input_affix_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 });
 //#endregion
 //#region src/components/text-input/text-input-affix.vue
-var text_input_affix_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_affix_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a6d421c4"]]);
+var text_input_affix_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_affix_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b03a423e"]]);
 //#endregion
 Object.defineProperty(exports, "text_input_affix_default", {
 	enumerable: true,

package/dist/cjs/chunks/text-input-button.cjs

@@ -40,7 +40,7 @@ var text_input_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 });
 //#endregion
 //#region src/components/text-input/text-input-button.vue
-var text_input_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8b3cdb5f"]]);
+var text_input_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d9fba798"]]);
 //#endregion
 Object.defineProperty(exports, "text_input_button_default", {
 	enumerable: true,

package/dist/cjs/chunks/text-input.cjs

@@ -94,6 +94,7 @@ var text_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, v
 				}, {
 					default: (0, vue.withCtx)(() => [showClearButton.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_text_input_button.text_input_button_default, {
 						key: 0,
+						inline: "",
 						type: "button",
 						"aria-label": "Clear search",
 						onClick: clearInput
@@ -109,7 +110,7 @@ var text_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, v
 });
 //#endregion
 //#region src/components/text-input/text-input.vue
-var text_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d61fa3e2"]]);
+var text_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2139c861"]]);
 //#endregion
 Object.defineProperty(exports, "text_input_default", {
 	enumerable: true,

package/dist/cjs/chunks/textarea.cjs

@@ -56,7 +56,7 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
 });
 //#endregion
 //#region src/components/textarea/textarea.vue
-var textarea_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(textarea_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-20f36cd5"]]);
+var textarea_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(textarea_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0f93b4b8"]]);
 //#endregion
 Object.defineProperty(exports, "textarea_default", {
 	enumerable: true,