@youcan/celeste 0.18.0 → 0.19.0

package/dist/es/chunks/gradient-picker.js

@@ -0,0 +1,629 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as popover_content_default } from "./popover-content.js";
+import { t as popover_trigger_default } from "./popover-trigger.js";
+import "./button.js";
+import { t as compact_button_default } from "./compact-button.js";
+import "./fancy-button.js";
+import "./link-button.js";
+import "./social-button.js";
+import { t as tinycolor } from "./tinycolor.js";
+import { t as popover_default } from "./popover.js";
+import "./text-input-affix.js";
+import "./text-input-button.js";
+import { t as text_input_default } from "./text-input.js";
+import { parseGradient, stringifyGradient } from "../gradient.js";
+import { t as tooltip_default } from "./tooltip.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeStyle, openBlock, reactive, ref, renderList, toDisplayString, unref, watch, withCtx, withModifiers } from "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" };
+//#endregion
+//#region src/components/color-picker/gradient-picker.vue
+var gradient_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ 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 = ref(false);
+		const state = ref(null);
+		const selected = ref();
+		const removing = ref();
+		const drafts = reactive({});
+		const preview = ref();
+		const bar = ref();
+		const area = ref();
+		const hue = ref();
+		const alpha = 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 = tinycolor(color);
+			const { h, s, v } = parsed.toHsv();
+			return {
+				h,
+				s: s * 100,
+				v: v * 100,
+				a: parsed.getAlpha()
+			};
+		}
+		function colorOf(stop) {
+			const color = 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 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 = 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 = computed(() => state.value ? toCss(state.value) : "");
+		watch(() => props.modelValue, (value) => value !== css.value && load(value), { immediate: true });
+		const track = computed(() => state.value ? toCss(state.value, true) : "");
+		const current = computed(() => state.value?.stops.find((stop) => stop.id === selected.value));
+		const solid = 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 = 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(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 openBlock(), createBlock(unref(popover_default), {
+				open: open.value,
+				"onUpdate:open": _cache[6] || (_cache[6] = ($event) => open.value = $event)
+			}, {
+				default: withCtx(() => [createVNode(unref(popover_trigger_default), { "as-child": "" }, {
+					default: withCtx(() => [createElementVNode("button", _hoisted_1, [
+						createElementVNode("span", {
+							class: "celeste-gradient-swatch",
+							"data-empty": !state.value,
+							style: normalizeStyle(state.value ? { background: css.value } : void 0)
+						}, null, 12, _hoisted_2),
+						createElementVNode("span", _hoisted_3, toDisplayString(state.value ? state.value.type === "linear" ? __props.linearLabel : __props.radialLabel : __props.placeholder), 1),
+						_cache[7] || (_cache[7] = createElementVNode("i", { class: "i-celeste-expand-up-down-line" }, null, -1))
+					])]),
+					_: 1
+				}), createVNode(unref(popover_content_default), {
+					dismissible: false,
+					"show-tail": false,
+					align: "start",
+					onOpenAutoFocus: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_4, [!state.value ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(__props.emptyHint), 1), createElementVNode("div", _hoisted_7, [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), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.presets, (preset) => {
+						return openBlock(), createElementBlock("button", {
+							key: preset,
+							type: "button",
+							class: "celeste-gradient-preset",
+							style: normalizeStyle({ background: preset }),
+							"aria-label": preset,
+							onClick: ($event) => pick(preset)
+						}, null, 12, _hoisted_9);
+					}), 128))])])) : current.value && fields.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+						createElementVNode("div", _hoisted_10, [
+							createElementVNode("div", {
+								ref_key: "preview",
+								ref: preview,
+								class: "celeste-gradient-preview",
+								"data-linear": state.value.type === "linear",
+								onPointerdown: onPreview
+							}, [createElementVNode("span", {
+								class: "celeste-gradient-fill",
+								style: normalizeStyle({ background: css.value })
+							}, null, 4), state.value.type === "linear" ? (openBlock(), createElementBlock("span", _hoisted_12, [createElementVNode("span", { style: normalizeStyle({ rotate: `${state.value.angle}deg` }) }, null, 4)])) : createCommentVNode("", true)], 40, _hoisted_11),
+							createElementVNode("div", _hoisted_13, [(openBlock(), createElementBlock(Fragment, null, renderList(["linear", "radial"], (type) => {
+								return createVNode(unref(tooltip_default), {
+									key: type,
+									title: type === "linear" ? __props.linearLabel : __props.radialLabel,
+									size: "xs",
+									variant: "dark"
+								}, {
+									default: withCtx(() => [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] = [createElementVNode("span", null, null, -1)])], 8, _hoisted_14)]),
+									_: 2
+								}, 1032, ["title"]);
+							}), 64)), state.value.type === "linear" ? (openBlock(), createBlock(unref(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: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode(" ° ", -1)])]),
+								_: 1
+							}, 8, [
+								"model-value",
+								"aria-label",
+								"onUpdate:modelValue"
+							])) : createCommentVNode("", true)]),
+							createElementVNode("div", {
+								ref_key: "bar",
+								ref: bar,
+								class: "celeste-gradient-bar",
+								onPointerdown: onBar
+							}, [createElementVNode("span", {
+								class: "celeste-gradient-fill",
+								style: normalizeStyle({ background: track.value })
+							}, null, 4), (openBlock(true), createElementBlock(Fragment, null, renderList(state.value.stops, (stop) => {
+								return openBlock(), createElementBlock("button", {
+									key: stop.id,
+									type: "button",
+									class: "celeste-gradient-handle",
+									style: 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: withModifiers(($event) => dragStop($event, stop.id), ["stop"]),
+									onKeydown: ($event) => onHandleKey($event, stop.id)
+								}, null, 44, _hoisted_15);
+							}), 128))], 544),
+							createElementVNode("div", _hoisted_16, [
+								createElementVNode("span", _hoisted_17, toDisplayString(__props.colorStopLabel), 1),
+								createVNode(unref(compact_button_default), {
+									icon: "i-celeste-add-line",
+									variant: "ghost",
+									size: "md",
+									"aria-label": __props.addStopLabel,
+									onClick: addStop
+								}, null, 8, ["aria-label"]),
+								createVNode(unref(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"])
+							]),
+							createElementVNode("div", _hoisted_18, [createElementVNode("span", _hoisted_19, toDisplayString(__props.positionLabel), 1), createVNode(unref(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: withCtx(() => [..._cache[10] || (_cache[10] = [createTextVNode(" % ", -1)])]),
+								_: 1
+							}, 8, [
+								"model-value",
+								"aria-label",
+								"onUpdate:modelValue"
+							])]),
+							createElementVNode("div", _hoisted_20, [
+								createElementVNode("span", _hoisted_21, [createElementVNode("span", {
+									class: "celeste-gradient-fill",
+									style: normalizeStyle({ background: colorOf(current.value) })
+								}, null, 4)]),
+								createVNode(unref(text_input_default), {
+									"model-value": fields.value.hex.value,
+									size: "xs",
+									class: "celeste-gradient-hex",
+									"onUpdate:modelValue": fields.value.hex.input
+								}, createSlots({ _: 2 }, [canSip ? {
+									name: "trailingNode",
+									fn: withCtx(() => [createVNode(unref(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"]),
+								createVNode(unref(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: withCtx(() => [..._cache[11] || (_cache[11] = [createTextVNode(" % ", -1)])]),
+									_: 1
+								}, 8, [
+									"model-value",
+									"aria-label",
+									"onUpdate:modelValue"
+								])
+							]),
+							createElementVNode("div", _hoisted_22, [
+								createElementVNode("div", {
+									ref_key: "area",
+									ref: area,
+									class: "celeste-gradient-area",
+									style: 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)
+									})))
+								}, [createElementVNode("span", {
+									class: "celeste-gradient-knob",
+									style: normalizeStyle({
+										left: `${current.value.s}%`,
+										top: `${100 - current.value.v}%`,
+										background: fill(colorOf(current.value))
+									})
+								}, null, 4)], 44, _hoisted_23),
+								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) })))
+								}, [createElementVNode("span", {
+									class: "celeste-gradient-knob",
+									style: normalizeStyle({
+										top: along(current.value.h / 360),
+										background: fill(colorOf(current.value))
+									})
+								}, null, 4)], 40, _hoisted_24),
+								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 })))
+								}, [createElementVNode("span", {
+									class: "celeste-gradient-fill",
+									style: normalizeStyle({ background: `linear-gradient(${solid.value}, transparent)` })
+								}, null, 4), createElementVNode("span", {
+									class: "celeste-gradient-knob",
+									style: normalizeStyle({
+										top: along(1 - current.value.a),
+										background: fill(colorOf(current.value))
+									})
+								}, null, 4)], 40, _hoisted_25)
+							])
+						]),
+						createElementVNode("div", _hoisted_26, [createElementVNode("span", _hoisted_27, toDisplayString(__props.usedLabel), 1), createElementVNode("div", _hoisted_28, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.swatches, (swatch) => {
+							return openBlock(), createElementBlock("button", {
+								key: swatch,
+								type: "button",
+								style: normalizeStyle({ background: swatch }),
+								title: swatch,
+								"aria-label": swatch,
+								onClick: ($event) => patch({
+									...hsva(swatch),
+									a: current.value.a
+								})
+							}, null, 12, _hoisted_29);
+						}), 128))])]),
+						createElementVNode("div", _hoisted_30, [createElementVNode("button", {
+							type: "button",
+							class: "celeste-gradient-remove",
+							onClick: _cache[4] || (_cache[4] = ($event) => pick(""))
+						}, [_cache[12] || (_cache[12] = createElementVNode("i", { class: "i-celeste-delete-bin-line" }, null, -1)), createTextVNode(" " + toDisplayString(__props.removeLabel), 1)])])
+					], 64)) : createCommentVNode("", true)])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"]);
+		};
+	}
+}), [["__scopeId", "data-v-3f165d2c"]]);
+//#endregion
+export { gradient_picker_default as t };

package/dist/es/chunks/textarea.js

@@ -55,6 +55,6 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), null, 16, _hoisted_2), [[vModelText, modelValue.value]]), __props.showCount && Number(__props.maxLength) ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(`${modelValue.value?.length || 0}/${__props.maxLength}`), 1)) : createCommentVNode("", true)], 10, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-20f36cd5"]]);
+}), [["__scopeId", "data-v-0f93b4b8"]]);
 //#endregion
 export { textarea_default as t };

package/dist/{cjs/chunks/use-color-model.cjs → es/chunks/tinycolor.js}

@@ -1,4 +1,3 @@
-let vue = require("vue");
 //#region ../../node_modules/.pnpm/tinycolor2@1.6.0/node_modules/tinycolor2/esm/tinycolor.js
 function _typeof(obj) {
 	"@babel/helpers - typeof";
@@ -897,42 +896,4 @@ function validateWCAG2Parms(parms) {
 	};
 }
 //#endregion
-//#region src/components/color-picker/composable/use-color-model.ts
-var ColorPickerEmits = ["update:modelValue"];
-function defineColorModel(props, emit) {
-	let originalFormat;
-	return (0, vue.computed)({
-		get: () => {
-			const colorInput = props.modelValue;
-			const value = tinycolor(colorInput);
-			originalFormat = value.getFormat();
-			return value;
-		},
-		set: (newValue) => {
-			emit("update:modelValue", transformToOriginalInputFormat(tinycolor(newValue), originalFormat));
-		}
-	});
-}
-function transformToOriginalInputFormat(color, originalFormat) {
-	if (originalFormat === "hex" && color.getAlpha() < 1) return color.toString("hex8");
-	return color.toString(originalFormat);
-}
-//#endregion
-Object.defineProperty(exports, "ColorPickerEmits", {
-	enumerable: true,
-	get: function() {
-		return ColorPickerEmits;
-	}
-});
-Object.defineProperty(exports, "defineColorModel", {
-	enumerable: true,
-	get: function() {
-		return defineColorModel;
-	}
-});
-Object.defineProperty(exports, "tinycolor", {
-	enumerable: true,
-	get: function() {
-		return tinycolor;
-	}
-});
+export { tinycolor as t };

package/dist/es/gradient-picker.js

@@ -0,0 +1,2 @@
+import { t as gradient_picker_default } from "./chunks/gradient-picker.js";
+export { gradient_picker_default as default };