@shtabapp/ui-kit 1.34.0 → 1.36.0

package/dist/{SColorPicker-Cs0QmYWm.js → SColorPicker-BnfGvKy4.js}

@@ -1,27 +1,27 @@
-import { n as e } from "./contrastSurfaceTextColor-Dl641cZ_.js";
-import { n as t, o as n, r, t as i } from "./SColorPalette-B9WrqgRz.js";
-import { a, n as o } from "./colorValue-DXJiNKGE.js";
+import { n as e } from "./contrastSurfaceTextColor-BDlLSSXC.js";
+import { n as t, o as n, r, t as i } from "./SColorPalette-D2WCADDX.js";
+import { a, n as o } from "./colorValue-CSh0chxp.js";
 import { n as s, r as c, t as l } from "./SButton.types-CpdHQtyx.js";
 import { t as u } from "./SButton-DnU_XZ1C.js";
 import { i as d } from "./useFloatingOverlay-QcumEYEq.js";
 import { t as f } from "./SDropdown-CTQ5Qlez.js";
-import { r as p, t as m } from "./SSelect-AcH04gtk.js";
-import { Fragment as h, computed as g, createBlock as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as D, onMounted as O, openBlock as k, ref as A, shallowRef as j, toRef as M, unref as N, useModel as P, useTemplateRef as F, vModelText as I, watch as L, withCtx as R, withDirectives as z } from "vue";
-import { ESColorSwatchSize as B, SColorSwatch as V } from "@shtabapp/ui-kit-primitives";
-import { useEventListener as H } from "@vueuse/core";
+import { r as p, t as m } from "./SSelect-XSZjYLBA.js";
+import { Fragment as h, computed as g, createBlock as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as D, onMounted as O, openBlock as k, ref as A, shallowRef as j, toDisplayString as M, toRef as N, unref as P, useModel as F, useTemplateRef as I, vModelText as L, watch as R, withCtx as z, withDirectives as B } from "vue";
+import { ESColorSwatchSize as V, SColorSwatch as ee, useUiKitI18n as H } from "@shtabapp/ui-kit-primitives";
+import { useEventListener as U } from "@vueuse/core";
 //#region src/utils/color/colorFormatChannels.ts
-var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
+var W = (e) => Math.max(0, Math.min(255, Math.round(e))), te = (e) => {
 	let t = e % 360;
 	return t < 0 ? t + 360 : t;
-}, W = (e) => Math.max(0, Math.min(100, Math.round(e))), te = (e) => {
+}, G = (e) => Math.max(0, Math.min(100, Math.round(e))), ne = (e) => {
 	let t = e.slice(1);
 	if (t.length === 3) {
 		let e = t[0], n = t[1], r = t[2];
 		return !e || !n || !r ? void 0 : `${e}${e}${n}${n}${r}${r}`;
 	}
 	if (t.length === 6 || t.length === 8) return t.slice(0, 6);
-}, G = (e) => {
-	let t = te(e);
+}, K = (e) => {
+	let t = ne(e);
 	if (!t) return;
 	let n = Number.parseInt(t.slice(0, 2), 16), r = Number.parseInt(t.slice(2, 4), 16), i = Number.parseInt(t.slice(4, 6), 16);
 	if (!(Number.isNaN(n) || Number.isNaN(r) || Number.isNaN(i))) return {
@@ -29,11 +29,11 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 		second: r,
 		third: i
 	};
-}, K = (e) => {
-	let t = U(e.first), n = U(e.second), r = U(e.third);
-	return `#${t.toString(16).padStart(2, "0").toUpperCase()}${n.toString(16).padStart(2, "0").toUpperCase()}${r.toString(16).padStart(2, "0").toUpperCase()}`;
 }, q = (e) => {
-	let t = G(e);
+	let t = W(e.first), n = W(e.second), r = W(e.third);
+	return `#${t.toString(16).padStart(2, "0").toUpperCase()}${n.toString(16).padStart(2, "0").toUpperCase()}${r.toString(16).padStart(2, "0").toUpperCase()}`;
+}, J = (e) => {
+	let t = K(e);
 	if (!t) return;
 	let n = t.first / 255, r = t.second / 255, i = t.third / 255, a = Math.max(n, r, i), o = Math.min(n, r, i), s = a - o, c = 0, l = (a + o) / 2;
 	s !== 0 && (c = a === n ? ((r - i) / s + (r < i ? 6 : 0)) * 60 : a === r ? ((i - n) / s + 2) * 60 : ((n - r) / s + 4) * 60);
@@ -43,26 +43,26 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 		second: Math.round(u * 100),
 		third: Math.round(l * 100)
 	};
-}, ne = (e) => {
-	let t = ee(e.first), n = W(e.second) / 100, r = W(e.third) / 100, i = (e) => {
+}, re = (e) => {
+	let t = te(e.first), n = G(e.second) / 100, r = G(e.third) / 100, i = (e) => {
 		let i = (t + e) / 30;
-		return U((r - n * Math.min(r, 1 - r) * Math.max(-1, Math.min(i % 2 - 1, 1))) * 255);
+		return W((r - n * Math.min(r, 1 - r) * Math.max(-1, Math.min(i % 2 - 1, 1))) * 255);
 	};
-	return K({
+	return q({
 		first: i(0),
 		second: i(8),
 		third: i(4)
 	});
-}, re = (t) => {
+}, ie = (t) => {
 	let n = t.toUpperCase(), r = n.startsWith("#") ? n.slice(1) : n;
 	if (!/^[0-9A-F]{3}$/.test(r) && !/^[0-9A-F]{6}$/.test(r)) return;
 	let i = `#${r}`;
-	if (e(i)) return K(G(i) ?? {
+	if (e(i)) return q(K(i) ?? {
 		first: 0,
 		second: 0,
 		third: 0
 	});
-}, ie = (e) => e.slice(1).toUpperCase(), ae = (e) => {
+}, ae = (e) => e.slice(1).toUpperCase(), oe = (e) => {
 	let t = e.first / 255, n = e.second / 255, r = e.third / 255, i = Math.max(t, n, r), a = i - Math.min(t, n, r), o = 0;
 	a !== 0 && (o = i === t ? (n - r) / a % 6 : i === n ? (r - t) / a + 2 : (t - n) / a + 4, o = Math.round(o * 60), o < 0 && (o += 360));
 	let s = i === 0 ? 0 : a / i;
@@ -71,70 +71,70 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 		saturation: s,
 		value: i
 	};
-}, oe = (e) => {
+}, se = (e) => {
 	let t = e.value * e.saturation, n = e.hue / 60, r = t * (1 - Math.abs(n % 2 - 1)), i = e.value - t, a = 0, o = 0, s = 0;
 	return n >= 0 && n < 1 ? (a = t, o = r) : n >= 1 && n < 2 ? (a = r, o = t) : n >= 2 && n < 3 ? (o = t, s = r) : n >= 3 && n < 4 ? (o = r, s = t) : n >= 4 && n < 5 ? (a = r, s = t) : (a = t, s = r), {
-		first: U((a + i) * 255),
-		second: U((o + i) * 255),
-		third: U((s + i) * 255)
+		first: W((a + i) * 255),
+		second: W((o + i) * 255),
+		third: W((s + i) * 255)
 	};
-}, J = (e) => {
-	let t = G(e);
-	if (t) return ae(t);
-}, Y = (e) => K(oe(e)), X = [
+}, Y = (e) => {
+	let t = K(e);
+	if (t) return oe(t);
+}, X = (e) => q(se(e)), Z = [
 	n.HEX,
 	n.RGB,
 	n.HSL
-], se = {
+], ce = {
 	[n.HEX]: "Hex",
 	[n.RGB]: "RGB",
 	[n.HSL]: "HSL"
-}, ce = (e) => {
+}, le = (e) => {
 	let t = getComputedStyle(e).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);
 	if (!t) return;
 	let n = Number.parseInt(t[1] ?? "0", 10), r = Number.parseInt(t[2] ?? "0", 10), i = Number.parseInt(t[3] ?? "0", 10);
 	return `#${n.toString(16).padStart(2, "0").toUpperCase()}${r.toString(16).padStart(2, "0").toUpperCase()}${i.toString(16).padStart(2, "0").toUpperCase()}`;
-}, Z = (t, n) => {
+}, ue = (t, n) => {
 	if (o(t) && e(t)) return t;
-	if (n) return ce(n);
-}, le = (e, t) => t === n.HEX ? ie(e) : t === n.RGB ? G(e) ?? {
+	if (n) return le(n);
+}, de = (e, t) => t === n.HEX ? ae(e) : t === n.RGB ? K(e) ?? {
 	first: 0,
 	second: 0,
 	third: 0
-} : q(e) ?? {
+} : J(e) ?? {
 	first: 0,
 	second: 0,
 	third: 0
 }, Q = (e) => {
 	let t = Number.parseInt(e, 10);
 	if (!Number.isNaN(t)) return t;
-}, $ = (e, t) => {
-	if (e === n.HEX) return typeof t == "string" ? re(t) : void 0;
+}, fe = (e, t) => {
+	if (e === n.HEX) return typeof t == "string" ? ie(t) : void 0;
 	if (typeof t == "string") return;
 	if (e === n.RGB) {
-		let e = K({
+		let e = q({
 			first: Q(String(t.first)) ?? 0,
 			second: Q(String(t.second)) ?? 0,
 			third: Q(String(t.third)) ?? 0
 		});
-		return G(e) ? e : void 0;
+		return K(e) ? e : void 0;
 	}
-	let r = ne({
+	let r = re({
 		first: Q(String(t.first)) ?? 0,
 		second: Q(String(t.second)) ?? 0,
 		third: Q(String(t.third)) ?? 0
 	});
-	if (r && q(r)) return r;
-}, ue = 17, de = "#000000", fe = (e) => e ?? de, pe = ({ modelValue: e, getEditableHex: t, saturationAreaRef: n, hueSliderRef: r, disabled: i, readonly: a }) => {
-	let o = J(fe(t())) ?? {
+	if (r && J(r)) return r;
+}, pe = 17, me = "#000000", he = (e) => e ?? me, ge = ({ modelValue: e, getEditableHex: t, saturationAreaRef: n, hueSliderRef: r, disabled: i, readonly: a }) => {
+	let o = Y(he(t())) ?? {
 		hue: 0,
 		saturation: 0,
 		value: 0
-	}, s = A(o.hue), c = A(o.saturation), l = A(o.value), u = A(!1), d = A(!1), f = A(!1), p = j(null), m = j(null), h = g(() => Y({
+	}, s = A(o.hue), c = A(o.saturation), l = A(o.value), u = A(!1), d = A(!1), f = A(!1), p = j(null), m = j(null), h = g(() => X({
 		hue: s.value,
 		saturation: c.value,
 		value: l.value
-	})), _ = g(() => Y({
+	})), _ = g(() => X({
 		hue: s.value,
 		saturation: 1,
 		value: 1
@@ -143,7 +143,7 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 	}, y = (e, t) => {
 		c.value = Math.max(0, Math.min(1, e)), l.value = Math.max(0, Math.min(1, t));
 	}, b = (e) => {
-		let t = J(fe(e));
+		let t = Y(he(e));
 		t && (u.value = !0, t.saturation > 0 && (s.value = t.hue), c.value = t.saturation, l.value = t.value, u.value = !1);
 	}, x = () => {
 		let e = t();
@@ -152,13 +152,13 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 		let n = h.value;
 		t()?.toUpperCase() !== n.toUpperCase() && (u.value = !0, e.value = n, u.value = !1);
 	};
-	L([
+	R([
 		s,
 		c,
 		l
 	], () => {
 		u.value || S();
-	}), L(e, () => {
+	}), R(e, () => {
 		u.value || x();
 	}), O(() => {
 		T(() => {
@@ -189,14 +189,14 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 		k() && (w(), f.value = !0, N(e), e.currentTarget instanceof HTMLElement && e.currentTarget.setPointerCapture(e.pointerId));
 	}, I = () => {
 		d.value = !1;
-	}, R = () => {
+	}, L = () => {
 		f.value = !1;
 	};
-	return H(n, "pointermove", (e) => {
+	return U(n, "pointermove", (e) => {
 		d.value && M(e);
-	}), H(n, "pointerup", I), H(n, "pointercancel", I), H(n, "lostpointercapture", I), H(r, "pointermove", (e) => {
+	}), U(n, "pointerup", I), U(n, "pointercancel", I), U(n, "lostpointercapture", I), U(r, "pointermove", (e) => {
 		f.value && N(e);
-	}), H(r, "pointerup", R), H(r, "pointercancel", R), H(r, "lostpointercapture", R), {
+	}), U(r, "pointerup", L), U(r, "pointercancel", L), U(r, "lostpointercapture", L), {
 		hexColor: h,
 		hueBackground: _,
 		saturationPointerStyle: E,
@@ -205,13 +205,13 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 		handleHuePointerDown: F,
 		syncFromModelValue: x
 	};
-}, me = (e) => {
+}, _e = (e) => {
 	if (!e) return null;
 	let t = e.$el;
 	if (!(t instanceof HTMLElement)) return null;
 	let n = t.querySelector(".s-ui-color-swatch__fill");
 	return n instanceof HTMLElement ? n : null;
-}, he = { class: "s-ui-color-area__canvas-row" }, ge = ["aria-disabled"], _e = /* @__PURE__ */ S({
+}, ve = { class: "s-ui-color-area__canvas-row" }, ye = ["aria-label"], be = ["aria-label", "aria-disabled"], xe = /* @__PURE__ */ S({
 	__name: "SColorArea",
 	props: /*@__PURE__*/ C({
 		disabled: {
@@ -228,73 +228,77 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = P(e, "modelValue"), n = F("colorResolutionSwatchRef"), r = F("saturationAreaRef"), i = F("hueSliderRef"), o = () => Z(t.value, me(n.value)), s = g(() => a(t.value)), { hexColor: c, hueBackground: l, saturationPointerStyle: u, huePointerStyle: d, handleSaturationPointerDown: f, handleHuePointerDown: p } = pe({
+		let t = F(e, "modelValue"), { t: n } = H(), r = I("colorResolutionSwatchRef"), i = I("saturationAreaRef"), o = I("hueSliderRef"), s = () => ue(t.value, _e(r.value)), c = g(() => a(t.value)), { hexColor: l, hueBackground: u, saturationPointerStyle: d, huePointerStyle: f, handleSaturationPointerDown: p, handleHuePointerDown: m } = ge({
 			modelValue: t,
-			getEditableHex: o,
-			saturationAreaRef: r,
-			hueSliderRef: i,
-			disabled: M(() => e.disabled),
-			readonly: M(() => e.readonly)
+			getEditableHex: s,
+			saturationAreaRef: i,
+			hueSliderRef: o,
+			disabled: N(() => e.disabled),
+			readonly: N(() => e.readonly)
 		});
 		return (t, a) => (k(), v("div", w({ class: ["s-ui-color-area", {
 			"s-ui-color-area--disabled": e.disabled,
 			"s-ui-color-area--readonly": e.readonly
-		}] }, t.$attrs), [x(N(V), {
+		}] }, t.$attrs), [x(P(ee), {
 			ref_key: "colorResolutionSwatchRef",
-			ref: n,
+			ref: r,
 			class: "s-ui-color-area__color-resolution",
-			color: s.value,
-			size: N(B).SIZE_24,
+			color: c.value,
+			size: P(V).SIZE_24,
 			tabindex: "-1",
 			"aria-hidden": "true"
-		}, null, 8, ["color", "size"]), y("div", he, [y("div", {
+		}, null, 8, ["color", "size"]), y("div", ve, [y("div", {
 			ref_key: "saturationAreaRef",
-			ref: r,
+			ref: i,
 			class: "s-ui-color-area__canvas",
 			role: "img",
-			"aria-label": "Color saturation and brightness",
-			style: D({ "--s-ui-color-area-hue": N(l) }),
-			onPointerdown: a[0] ||= (...e) => N(f) && N(f)(...e)
+			"aria-label": P(n)("colorArea.saturationBrightness"),
+			style: D({ "--s-ui-color-area-hue": P(u) }),
+			onPointerdown: a[0] ||= (...e) => P(p) && P(p)(...e)
 		}, [y("div", {
 			class: "s-ui-color-area__canvas-pointer",
 			style: D({
-				...N(u),
-				backgroundColor: N(c)
+				...P(d),
+				backgroundColor: P(l)
 			})
-		}, null, 4)], 36), y("div", {
+		}, null, 4)], 44, ye), y("div", {
 			ref_key: "hueSliderRef",
-			ref: i,
+			ref: o,
 			class: "s-ui-color-area__hue",
 			role: "slider",
-			"aria-label": "Hue",
+			"aria-label": P(n)("colorArea.hue"),
 			"aria-valuemin": "0",
 			"aria-valuemax": "360",
 			"aria-disabled": e.disabled || e.readonly,
-			onPointerdown: a[1] ||= (...e) => N(p) && N(p)(...e)
+			onPointerdown: a[1] ||= (...e) => P(m) && P(m)(...e)
 		}, [y("div", {
 			class: "s-ui-color-area__hue-pointer",
 			style: D({
-				...N(d),
-				backgroundColor: N(l)
+				...P(f),
+				backgroundColor: P(u)
 			})
-		}, null, 4)], 40, ge)])], 16));
+		}, null, 4)], 40, be)])], 16));
 	}
-}), ve = { class: "s-ui-color-values__left" }, ye = { class: "s-ui-color-values__format" }, be = { class: "s-ui-color-values__value-group" }, xe = { class: "s-ui-color-values__inputs" }, Se = {
+}), Se = { class: "s-ui-color-values__left" }, Ce = { class: "s-ui-color-values__format" }, we = { class: "s-ui-color-values__value-group" }, Te = { class: "s-ui-color-values__inputs" }, Ee = {
 	key: 0,
 	class: "s-ui-color-values__input-wrap"
-}, Ce = ["disabled", "readonly"], we = { class: "s-ui-color-values__input-wrap" }, Te = [
+}, De = [
 	"disabled",
 	"readonly",
 	"aria-label"
-], Ee = { class: "s-ui-color-values__input-wrap" }, De = [
+], Oe = { class: "s-ui-color-values__input-wrap" }, ke = [
 	"disabled",
 	"readonly",
 	"aria-label"
-], Oe = { class: "s-ui-color-values__input-wrap" }, ke = [
+], Ae = { class: "s-ui-color-values__input-wrap" }, je = [
 	"disabled",
 	"readonly",
 	"aria-label"
-], Ae = /* @__PURE__ */ S({
+], Me = { class: "s-ui-color-values__input-wrap" }, Ne = [
+	"disabled",
+	"readonly",
+	"aria-label"
+], $ = /* @__PURE__ */ S({
 	__name: "SColorValues",
 	props: /*@__PURE__*/ C({
 		disabled: {
@@ -305,7 +309,7 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 			type: Boolean,
 			default: !1
 		},
-		formats: { default: () => X }
+		formats: { default: () => Z }
 	}, {
 		modelValue: { required: !0 },
 		modelModifiers: {},
@@ -314,55 +318,55 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 	}),
 	emits: /*@__PURE__*/ C(["formatDropdownOpen", "formatDropdownClose"], ["update:modelValue", "update:format"]),
 	setup(e, { emit: t }) {
-		let r = P(e, "modelValue"), i = P(e, "format"), o = t, d = F("previewSwatchRef"), f = A(""), p = A("0"), _ = A("0"), b = A("0"), S = g(() => (e.formats.length > 0 ? e.formats : X).map((e) => ({
+		let { t: r } = H(), i = F(e, "modelValue"), o = F(e, "format"), d = t, f = I("previewSwatchRef"), p = A(""), _ = A("0"), b = A("0"), S = A("0"), C = g(() => (e.formats.length > 0 ? e.formats : Z).map((e) => ({
 			value: e,
-			label: se[e]
-		}))), C = g(() => a(r.value)), E = g(() => Z(r.value, me(d.value))), D = g(() => i.value === n.RGB ? "Red channel" : "Hue"), j = g(() => i.value === n.RGB ? "Green channel" : "Saturation"), M = g(() => i.value === n.RGB ? "Blue channel" : "Lightness"), R = () => {
-			let e = E.value;
+			label: ce[e]
+		}))), E = g(() => a(i.value)), D = g(() => ue(i.value, _e(f.value))), j = g(() => o.value === n.RGB ? r("colorValues.redChannel") : r("colorValues.hueChannel")), M = g(() => o.value === n.RGB ? r("colorValues.greenChannel") : r("colorValues.saturationChannel")), N = g(() => o.value === n.RGB ? r("colorValues.blueChannel") : r("colorValues.lightnessChannel")), z = () => {
+			let e = D.value;
 			if (!e) return;
-			let t = le(e, i.value);
-			if (i.value === n.HEX && typeof t == "string") {
-				f.value = t;
+			let t = de(e, o.value);
+			if (o.value === n.HEX && typeof t == "string") {
+				p.value = t;
 				return;
 			}
-			typeof t == "object" && (p.value = String(t.first), _.value = String(t.second), b.value = String(t.third));
+			typeof t == "object" && (_.value = String(t.first), b.value = String(t.second), S.value = String(t.third));
 		};
-		L([
-			r,
+		R([
 			i,
-			E
+			o,
+			D
 		], () => {
-			R();
+			z();
 		}), O(() => {
 			T(() => {
-				R();
+				z();
 			});
 		});
-		let H = () => {
+		let U = () => {
 			if (e.disabled || e.readonly) return;
-			if (i.value === n.HEX) {
-				let e = $(n.HEX, f.value);
-				e && (r.value = e), R();
+			if (o.value === n.HEX) {
+				let e = fe(n.HEX, p.value);
+				e && (i.value = e), z();
 				return;
 			}
-			let t = $(i.value, {
-				first: Number.parseInt(p.value, 10),
-				second: Number.parseInt(_.value, 10),
-				third: Number.parseInt(b.value, 10)
+			let t = fe(o.value, {
+				first: Number.parseInt(_.value, 10),
+				second: Number.parseInt(b.value, 10),
+				third: Number.parseInt(S.value, 10)
 			});
-			t && (r.value = t), R();
-		}, U = (e) => {
-			e.key === "Enter" && (e.preventDefault(), H());
+			t && (i.value = t), z();
+		}, W = (e) => {
+			e.key === "Enter" && (e.preventDefault(), U());
 		};
-		return (t, r) => (k(), v("div", w({ class: ["s-ui-color-values", {
+		return (t, i) => (k(), v("div", w({ class: ["s-ui-color-values", {
 			"s-ui-color-values--disabled": e.disabled,
 			"s-ui-color-values--readonly": e.readonly
-		}] }, t.$attrs), [y("div", ve, [x(N(V), {
+		}] }, t.$attrs), [y("div", Se, [x(P(ee), {
 			ref_key: "previewSwatchRef",
-			ref: d,
+			ref: f,
 			class: "s-ui-color-values__preview",
-			color: C.value,
-			size: N(B).SIZE_32,
+			color: E.value,
+			size: P(V).SIZE_32,
 			disabled: e.disabled,
 			tabindex: "-1",
 			"aria-hidden": "true"
@@ -370,33 +374,34 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 			"color",
 			"size",
 			"disabled"
-		]), y("div", ye, [x(N(m), {
-			modelValue: i.value,
-			"onUpdate:modelValue": r[0] ||= (e) => i.value = e,
+		]), y("div", Ce, [x(P(m), {
+			modelValue: o.value,
+			"onUpdate:modelValue": i[0] ||= (e) => o.value = e,
 			class: "s-ui-color-values__format-select",
-			options: S.value,
+			options: C.value,
 			disabled: e.disabled,
 			readonly: e.readonly,
 			bordered: !0,
 			clearable: !1,
 			"close-on-select": !0,
 			"fit-viewport": !1,
-			"aria-label": "Color format",
-			onOpen: r[1] ||= (e) => o("formatDropdownOpen"),
-			onClose: r[2] ||= (e) => o("formatDropdownClose")
+			"aria-label": P(r)("colorValues.format"),
+			onOpen: i[1] ||= (e) => d("formatDropdownOpen"),
+			onClose: i[2] ||= (e) => d("formatDropdownClose")
 		}, null, 8, [
 			"modelValue",
 			"options",
 			"disabled",
-			"readonly"
-		])])]), y("div", be, [
-			x(N(u), {
+			"readonly",
+			"aria-label"
+		])])]), y("div", we, [
+			x(P(u), {
 				class: "s-ui-color-values__pipette",
-				appearance: N(l).BARE,
-				variant: N(c).NEUTRAL,
-				size: N(s).SMALL,
+				appearance: P(l).BARE,
+				variant: P(c).NEUTRAL,
+				size: P(s).SMALL,
 				icon: "pipette",
-				"aria-label": "Pick color",
+				"aria-label": P(r)("colorValues.pickColor"),
 				"aria-disabled": "true",
 				disabled: e.disabled,
 				tabindex: "-1"
@@ -404,72 +409,73 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 				"appearance",
 				"variant",
 				"size",
+				"aria-label",
 				"disabled"
 			]),
-			r[9] ||= y("span", {
+			i[9] ||= y("span", {
 				class: "s-ui-color-values__separator",
 				"aria-hidden": "true"
 			}, null, -1),
-			y("div", xe, [i.value === N(n).HEX ? (k(), v("div", Se, [z(y("input", {
-				"onUpdate:modelValue": r[3] ||= (e) => f.value = e,
+			y("div", Te, [o.value === P(n).HEX ? (k(), v("div", Ee, [B(y("input", {
+				"onUpdate:modelValue": i[3] ||= (e) => p.value = e,
 				class: "s-ui-color-values__input s-ui-typography-body-14-regular",
 				type: "text",
 				inputmode: "text",
 				spellcheck: "false",
 				disabled: e.disabled,
 				readonly: e.readonly,
-				"aria-label": "Hex color value",
-				onBlur: H,
-				onKeydown: U
-			}, null, 40, Ce), [[I, f.value]])])) : (k(), v(h, { key: 1 }, [
-				y("div", we, [z(y("input", {
-					"onUpdate:modelValue": r[4] ||= (e) => p.value = e,
+				"aria-label": P(r)("colorValues.hexValue"),
+				onBlur: U,
+				onKeydown: W
+			}, null, 40, De), [[L, p.value]])])) : (k(), v(h, { key: 1 }, [
+				y("div", Oe, [B(y("input", {
+					"onUpdate:modelValue": i[4] ||= (e) => _.value = e,
 					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
 					type: "text",
 					inputmode: "numeric",
 					spellcheck: "false",
 					disabled: e.disabled,
 					readonly: e.readonly,
-					"aria-label": D.value,
-					onBlur: H,
-					onKeydown: U
-				}, null, 40, Te), [[I, p.value]])]),
-				r[7] ||= y("span", {
+					"aria-label": j.value,
+					onBlur: U,
+					onKeydown: W
+				}, null, 40, ke), [[L, _.value]])]),
+				i[7] ||= y("span", {
 					class: "s-ui-color-values__separator",
 					"aria-hidden": "true"
 				}, null, -1),
-				y("div", Ee, [z(y("input", {
-					"onUpdate:modelValue": r[5] ||= (e) => _.value = e,
+				y("div", Ae, [B(y("input", {
+					"onUpdate:modelValue": i[5] ||= (e) => b.value = e,
 					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
 					type: "text",
 					inputmode: "numeric",
 					spellcheck: "false",
 					disabled: e.disabled,
 					readonly: e.readonly,
-					"aria-label": j.value,
-					onBlur: H,
-					onKeydown: U
-				}, null, 40, De), [[I, _.value]])]),
-				r[8] ||= y("span", {
+					"aria-label": M.value,
+					onBlur: U,
+					onKeydown: W
+				}, null, 40, je), [[L, b.value]])]),
+				i[8] ||= y("span", {
 					class: "s-ui-color-values__separator",
 					"aria-hidden": "true"
 				}, null, -1),
-				y("div", Oe, [z(y("input", {
-					"onUpdate:modelValue": r[6] ||= (e) => b.value = e,
+				y("div", Me, [B(y("input", {
+					"onUpdate:modelValue": i[6] ||= (e) => S.value = e,
 					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
 					type: "text",
 					inputmode: "numeric",
 					spellcheck: "false",
 					disabled: e.disabled,
 					readonly: e.readonly,
-					"aria-label": M.value,
-					onBlur: H,
-					onKeydown: U
-				}, null, 40, ke), [[I, b.value]])])
+					"aria-label": N.value,
+					onBlur: U,
+					onKeydown: W
+				}, null, 40, Ne), [[L, S.value]])])
 			], 64))])
 		])], 16));
 	}
-}), je = { class: "s-ui-color-picker__section" }, Me = { class: "s-ui-color-picker__section" }, Ne = { class: "s-ui-color-picker__custom-editor" }, Pe = { class: "s-ui-color-picker__custom-actions" }, Fe = /* @__PURE__ */ S({
+}), Pe = { class: "s-ui-color-picker__section" }, Fe = { class: "s-ui-color-picker__label" }, Ie = { class: "s-ui-color-picker__section" }, Le = { class: "s-ui-color-picker__label" }, Re = { class: "s-ui-color-picker__custom-editor" }, ze = { class: "s-ui-color-picker__custom-actions" }, Be = /* @__PURE__ */ S({
 	__name: "SColorPicker",
 	props: /*@__PURE__*/ C({
 		disabled: {
@@ -490,55 +496,55 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 		"formatDropdownClose"
 	], ["update:modelValue"]),
 	setup(e, { emit: a }) {
-		let o = P(e, "modelValue"), m = a, h = A(!1), v = A("#526DE3"), S = A(n.HEX), C = g(() => e.recommendedColors && e.recommendedColors.length > 0 ? e.recommendedColors : r), T = g(() => e.recentColors.length <= 17 ? e.recentColors : e.recentColors.slice(0, 17)), D = () => {
+		let o = F(e, "modelValue"), m = a, { t: h } = H(), v = A(!1), S = A("#526DE3"), C = A(n.HEX), T = g(() => e.recommendedColors && e.recommendedColors.length > 0 ? e.recommendedColors : r), D = g(() => e.recentColors.length <= 17 ? e.recentColors : e.recentColors.slice(0, 17)), O = () => {
 			if (o.value) {
-				v.value = o.value;
+				S.value = o.value;
 				return;
 			}
-			v.value = "#526DE3";
-		}, O = (e) => {
+			S.value = "#526DE3";
+		}, j = (e) => {
 			m("select", e);
-		}, j = () => {
-			o.value = v.value, m("select", v.value), h.value = !1;
-		}, M = () => {
-			h.value = !1;
+		}, N = () => {
+			o.value = S.value, m("select", S.value), v.value = !1;
+		}, I = () => {
+			v.value = !1;
 		};
-		return L(h, (e, t) => {
+		return R(v, (e, t) => {
 			if (e && !t) {
-				D(), m("customEditorOpen");
+				O(), m("customEditorOpen");
 				return;
 			}
 			!e && t && m("customEditorClose");
-		}), (n, r) => (k(), _(N(p), w({ width: 336 }, n.$attrs), {
-			default: R(() => [y("div", { class: E(["s-ui-color-picker", { "s-ui-color-picker--disabled": e.disabled }]) }, [y("section", je, [r[8] ||= y("span", { class: "s-ui-color-picker__label" }, "Рекомендованные цвета", -1), x(N(i), {
+		}), (n, r) => (k(), _(P(p), w({ width: 336 }, n.$attrs), {
+			default: z(() => [y("div", { class: E(["s-ui-color-picker", { "s-ui-color-picker--disabled": e.disabled }]) }, [y("section", Pe, [y("span", Fe, M(P(h)("colorPicker.recommendedColors")), 1), x(P(i), {
 				modelValue: o.value,
 				"onUpdate:modelValue": r[0] ||= (e) => o.value = e,
 				class: "s-ui-color-picker__palette",
-				layout: N(t).GRID,
-				colors: C.value,
-				size: N(B).SIZE_32,
+				layout: P(t).GRID,
+				colors: T.value,
+				size: P(V).SIZE_32,
 				disabled: e.disabled,
-				onSelect: O
+				onSelect: j
 			}, null, 8, [
 				"modelValue",
 				"layout",
 				"colors",
 				"size",
 				"disabled"
-			])]), y("section", Me, [r[11] ||= y("span", { class: "s-ui-color-picker__label" }, "Последние использованные", -1), x(N(i), {
+			])]), y("section", Ie, [y("span", Le, M(P(h)("colorPicker.recentColors")), 1), x(P(i), {
 				modelValue: o.value,
 				"onUpdate:modelValue": r[7] ||= (e) => o.value = e,
 				class: "s-ui-color-picker__palette",
-				layout: N(t).ROW,
-				colors: T.value,
-				size: N(B).SIZE_32,
+				layout: P(t).ROW,
+				colors: D.value,
+				size: P(V).SIZE_32,
 				disabled: e.disabled,
-				onSelect: O
+				onSelect: j
 			}, {
-				append: R(() => [x(N(f), {
-					modelValue: h.value,
-					"onUpdate:modelValue": r[6] ||= (e) => h.value = e,
-					placement: N(d).RIGHT_START,
+				append: z(() => [x(P(f), {
+					modelValue: v.value,
+					"onUpdate:modelValue": r[6] ||= (e) => v.value = e,
+					placement: P(d).RIGHT_START,
 					offset: 8,
 					shift: !0,
 					flip: !0,
@@ -546,47 +552,48 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 					"dismiss-on-click-outside": !0,
 					"dismiss-on-escape": !0
 				}, {
-					trigger: R(({ toggle: t, triggerProps: n }) => [x(N(u), w(n, {
+					trigger: z(({ toggle: t, triggerProps: n }) => [x(P(u), w(n, {
 						class: "s-ui-color-picker__add-button",
-						appearance: N(l).OUTLINED,
-						variant: N(c).NEUTRAL,
-						size: N(s).SMALL,
+						appearance: P(l).OUTLINED,
+						variant: P(c).NEUTRAL,
+						size: P(s).SMALL,
 						icon: "plus",
-						"aria-label": "Add custom color",
+						"aria-label": P(h)("colorPicker.addCustomColor"),
 						disabled: e.disabled,
 						onClick: t
 					}), null, 16, [
 						"appearance",
 						"variant",
 						"size",
+						"aria-label",
 						"disabled",
 						"onClick"
 					])]),
-					content: R(() => [x(N(p), { width: 320 }, {
-						footer: R(() => [y("div", Pe, [x(N(u), {
+					content: z(() => [x(P(p), { width: 320 }, {
+						footer: z(() => [y("div", ze, [x(P(u), {
 							class: "s-ui-color-picker__save-button",
-							appearance: N(l).MAJOR,
-							variant: N(c).MAIN,
-							size: N(s).SMALL,
+							appearance: P(l).MAJOR,
+							variant: P(c).MAIN,
+							size: P(s).SMALL,
 							disabled: e.disabled,
-							onClick: j
+							onClick: N
 						}, {
-							default: R(() => [...r[9] ||= [b(" Сохранить ", -1)]]),
+							default: z(() => [b(M(P(h)("colorPicker.save")), 1)]),
 							_: 1
 						}, 8, [
 							"appearance",
 							"variant",
 							"size",
 							"disabled"
-						]), x(N(u), {
+						]), x(P(u), {
 							class: "s-ui-color-picker__cancel-button",
-							appearance: N(l).MINOR,
-							variant: N(c).NEUTRAL,
-							size: N(s).SMALL,
+							appearance: P(l).MINOR,
+							variant: P(c).NEUTRAL,
+							size: P(s).SMALL,
 							disabled: e.disabled,
-							onClick: M
+							onClick: I
 						}, {
-							default: R(() => [...r[10] ||= [b(" Отменить ", -1)]]),
+							default: z(() => [b(M(P(h)("colorPicker.cancel")), 1)]),
 							_: 1
 						}, 8, [
 							"appearance",
@@ -594,15 +601,15 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 							"size",
 							"disabled"
 						])])]),
-						default: R(() => [y("div", Ne, [x(_e, {
-							modelValue: v.value,
-							"onUpdate:modelValue": r[1] ||= (e) => v.value = e,
+						default: z(() => [y("div", Re, [x(xe, {
+							modelValue: S.value,
+							"onUpdate:modelValue": r[1] ||= (e) => S.value = e,
 							disabled: e.disabled
-						}, null, 8, ["modelValue", "disabled"]), x(Ae, {
-							modelValue: v.value,
-							"onUpdate:modelValue": r[2] ||= (e) => v.value = e,
-							format: S.value,
-							"onUpdate:format": r[3] ||= (e) => S.value = e,
+						}, null, 8, ["modelValue", "disabled"]), x($, {
+							modelValue: S.value,
+							"onUpdate:modelValue": r[2] ||= (e) => S.value = e,
+							format: C.value,
+							"onUpdate:format": r[3] ||= (e) => C.value = e,
 							disabled: e.disabled,
 							onFormatDropdownOpen: r[4] ||= (e) => m("formatDropdownOpen"),
 							onFormatDropdownClose: r[5] ||= (e) => m("formatDropdownClose")
@@ -632,4 +639,4 @@ var U = (e) => Math.max(0, Math.min(255, Math.round(e))), ee = (e) => {
 	}
 });
 //#endregion
-export { ue as i, Ae as n, _e as r, Fe as t };
+export { pe as i, $ as n, xe as r, Be as t };