@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/components/SColorPalette/SColorPalette.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,162 @@
+import { isSameColor, resolveColorPreview } from "../../utils/color/colorValue.js";
+import { DEFAULT_COLOR_PALETTE } from "../../utils/color/defaultPaletteColors.js";
+import { ESelectionMode, ESelectionOrientation, isSingleSelectionValue, useSelectionGroup } from "../../composables/useSelectionGroup.js";
+import { ESColorPaletteLayout } from "./SColorPalette.types.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeModels, mergeProps, onScopeDispose, openBlock, renderList, renderSlot, shallowReactive, unref, useModel, useSlots } from "vue";
+import { ESColorSwatchSize, SColorSwatch, useUiKitI18n } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SColorPalette/SColorPalette.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-disabled"];
+var _hoisted_2 = {
+	key: 0,
+	class: "s-ui-color-palette__append"
+};
+var SColorPalette_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SColorPalette",
+	props: /*@__PURE__*/ mergeModels({
+		layout: { default: () => ESColorPaletteLayout.ROW },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		colors: {},
+		size: { default: () => ESColorSwatchSize.SIZE_40 }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["select"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const emit = __emit;
+		const slots = useSlots();
+		const { t } = useUiKitI18n();
+		const getColorSwatchAriaLabel = (colorValue) => {
+			return t("colorPalette.swatch", { value: String(colorValue) });
+		};
+		const resolvedColors = computed(() => {
+			if (__props.colors !== void 0) return __props.colors;
+			return DEFAULT_COLOR_PALETTE;
+		});
+		const selection = useSelectionGroup({
+			modelValue: () => modelValue.value,
+			onUpdateModelValue: (next) => {
+				if (!isSingleSelectionValue(next)) return;
+				modelValue.value = next;
+				emit("select", next);
+			},
+			mode: ESelectionMode.SINGLE,
+			orientation: ESelectionOrientation.HORIZONTAL,
+			orderedValues: () => resolvedColors.value,
+			compareValues: isSameColor,
+			loop: true
+		});
+		const swatchElements = shallowReactive(/* @__PURE__ */ new Map());
+		const swatchRegistrations = /* @__PURE__ */ new Map();
+		const swatchRefCallbacks = /* @__PURE__ */ new Map();
+		const resolveSwatchRegistrationKey = (colorValue, colorIndex) => {
+			return `${String(colorValue)}-${colorIndex}`;
+		};
+		const resolveSwatchElementSource = (source) => {
+			if (!source) return null;
+			if (source instanceof HTMLElement) return source;
+			if ("$el" in source) return source;
+			return null;
+		};
+		const getSwatchRef = (colorValue, colorIndex) => {
+			const registrationKey = resolveSwatchRegistrationKey(colorValue, colorIndex);
+			const cachedCallback = swatchRefCallbacks.get(registrationKey);
+			if (cachedCallback) return cachedCallback;
+			const callback = (source) => {
+				const existingUnregister = swatchRegistrations.get(registrationKey);
+				const resolvedSource = resolveSwatchElementSource(source);
+				if (!source) {
+					if (existingUnregister) {
+						existingUnregister();
+						swatchRegistrations.delete(registrationKey);
+					}
+					swatchElements.delete(registrationKey);
+					return;
+				}
+				if (!resolvedSource) return;
+				if (swatchElements.get(registrationKey) === resolvedSource && existingUnregister) return;
+				if (existingUnregister) {
+					existingUnregister();
+					swatchRegistrations.delete(registrationKey);
+				}
+				swatchElements.set(registrationKey, resolvedSource);
+				const unregister = selection.registerItem({
+					value: colorValue,
+					el: () => swatchElements.get(registrationKey) ?? null,
+					disabled: () => __props.disabled
+				});
+				swatchRegistrations.set(registrationKey, unregister);
+			};
+			swatchRefCallbacks.set(registrationKey, callback);
+			return callback;
+		};
+		onScopeDispose(() => {
+			for (const unregister of swatchRegistrations.values()) unregister();
+			swatchRegistrations.clear();
+			swatchElements.clear();
+			swatchRefCallbacks.clear();
+		});
+		const resolveSwatchTabIndex = (colorValue) => {
+			if (__props.disabled) return -1;
+			return selection.getItemTabIndex(colorValue);
+		};
+		const handleSwatchClick = (colorValue, event) => {
+			if (__props.disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			selection.select(colorValue);
+		};
+		const handleSwatchKeydown = (colorValue, event) => {
+			if (__props.disabled) return;
+			selection.handleItemKeydown(event, colorValue);
+		};
+		const rootClasses = computed(() => {
+			return [`s-ui-color-palette--layout-${__props.layout}`, {
+				"s-ui-color-palette--disabled": __props.disabled,
+				"s-ui-color-palette--has-append": Boolean(slots.append)
+			}];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				class: ["s-ui-color-palette", rootClasses.value],
+				role: "radiogroup",
+				"aria-disabled": __props.disabled || void 0
+			}, _ctx.$attrs), [(openBlock(true), createElementBlock(Fragment, null, renderList(resolvedColors.value, (colorValue, colorIndex) => {
+				return openBlock(), createBlock(unref(SColorSwatch), {
+					key: `${String(colorValue)}-${colorIndex}`,
+					ref_for: true,
+					ref: getSwatchRef(colorValue, colorIndex),
+					role: "radio",
+					class: "s-ui-color-palette__swatch",
+					color: unref(resolveColorPreview)(colorValue),
+					size: __props.size,
+					selected: unref(selection).isSelected(colorValue),
+					disabled: __props.disabled,
+					"aria-checked": unref(selection).isSelected(colorValue) ? "true" : "false",
+					"aria-label": getColorSwatchAriaLabel(colorValue),
+					tabindex: resolveSwatchTabIndex(colorValue),
+					onClick: ($event) => handleSwatchClick(colorValue, $event),
+					onKeydown: ($event) => handleSwatchKeydown(colorValue, $event)
+				}, null, 8, [
+					"color",
+					"size",
+					"selected",
+					"disabled",
+					"aria-checked",
+					"aria-label",
+					"tabindex",
+					"onClick",
+					"onKeydown"
+				]);
+			}), 128)), unref(slots).append ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "append")])) : createCommentVNode("", true)], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SColorPalette_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SColorPicker/SColorPicker.vue.cjs

@@ -0,0 +1,6 @@
+const require_SColorPicker_vue_vue_type_script_setup_true_lang = require("./SColorPicker.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                                  */
+//#region src/components/SColorPicker/SColorPicker.vue
+var SColorPicker_default = require_SColorPicker_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = SColorPicker_default;

package/dist/components/SColorPicker/SColorPicker.vue.js

@@ -0,0 +1,6 @@
+import SColorPicker_vue_vue_type_script_setup_true_lang_default from "./SColorPicker.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                */
+//#region src/components/SColorPicker/SColorPicker.vue
+var SColorPicker_default = SColorPicker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SColorPicker_default as default };

package/dist/components/SColorPicker/SColorPicker.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,209 @@
+const require_types = require("../../utils/color/types.cjs");
+const require_recommendedColorPalette = require("../../utils/color/recommendedColorPalette.cjs");
+const require_SButton_types = require("../SButton/SButton.types.cjs");
+const require_SButton = require("../SButton/SButton.vue.cjs");
+const require_types$1 = require("../../composables/connectedPosition/types.cjs");
+const require_SColorPalette_types = require("../SColorPalette/SColorPalette.types.cjs");
+const require_SColorPalette = require("../SColorPalette/SColorPalette.vue.cjs");
+require("./constants/SColorPicker.constants.cjs");
+const require_SDropdown = require("../SDropdown/SDropdown.vue.cjs");
+const require_SDropdownMenu = require("../SDropdownMenu/SDropdownMenu.vue.cjs");
+const require_SColorArea = require("./parts/SColorArea.vue.cjs");
+const require_SColorValues = require("./parts/SColorValues.vue.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+//#region src/components/SColorPicker/SColorPicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-color-picker__section" };
+var _hoisted_2 = { class: "s-ui-color-picker__label" };
+var _hoisted_3 = { class: "s-ui-color-picker__section" };
+var _hoisted_4 = { class: "s-ui-color-picker__label" };
+var _hoisted_5 = { class: "s-ui-color-picker__custom-editor" };
+var _hoisted_6 = { class: "s-ui-color-picker__custom-actions" };
+var SColorPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SColorPicker",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		recommendedColors: {},
+		recentColors: { default: () => [] }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)([
+		"select",
+		"customEditorOpen",
+		"customEditorClose",
+		"formatDropdownOpen",
+		"formatDropdownClose"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const emit = __emit;
+		const { t } = (0, _shtabapp_ui_kit_primitives.useUiKitI18n)();
+		const customEditorOpen = (0, vue.ref)(false);
+		const customDraftColor = (0, vue.ref)("#526DE3");
+		const customFormat = (0, vue.ref)(require_types.EColorFormat.HEX);
+		const resolvedRecommendedColors = (0, vue.computed)(() => {
+			if (__props.recommendedColors && __props.recommendedColors.length > 0) return __props.recommendedColors;
+			return require_recommendedColorPalette.RECOMMENDED_COLOR_PALETTE;
+		});
+		const resolvedRecentColors = (0, vue.computed)(() => {
+			if (__props.recentColors.length <= 17) return __props.recentColors;
+			return __props.recentColors.slice(0, 17);
+		});
+		const initCustomDraftFromModel = () => {
+			if (modelValue.value) {
+				customDraftColor.value = modelValue.value;
+				return;
+			}
+			customDraftColor.value = "#526DE3";
+		};
+		const handlePaletteSelect = (value) => {
+			emit("select", value);
+		};
+		const handleCustomSave = () => {
+			modelValue.value = customDraftColor.value;
+			emit("select", customDraftColor.value);
+			customEditorOpen.value = false;
+		};
+		const handleCustomCancel = () => {
+			customEditorOpen.value = false;
+		};
+		(0, vue.watch)(customEditorOpen, (isOpen, wasOpen) => {
+			if (isOpen && !wasOpen) {
+				initCustomDraftFromModel();
+				emit("customEditorOpen");
+				return;
+			}
+			if (!isOpen && wasOpen) emit("customEditorClose");
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SDropdownMenu.default), (0, vue.mergeProps)({ width: 336 }, _ctx.$attrs), {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["s-ui-color-picker", { "s-ui-color-picker--disabled": __props.disabled }]) }, [(0, vue.createElementVNode)("section", _hoisted_1, [(0, vue.createElementVNode)("span", _hoisted_2, (0, vue.toDisplayString)((0, vue.unref)(t)("colorPicker.recommendedColors")), 1), (0, vue.createVNode)((0, vue.unref)(require_SColorPalette.default), {
+					modelValue: modelValue.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+					class: "s-ui-color-picker__palette",
+					layout: (0, vue.unref)(require_SColorPalette_types.ESColorPaletteLayout).GRID,
+					colors: resolvedRecommendedColors.value,
+					size: (0, vue.unref)(_shtabapp_ui_kit_primitives.ESColorSwatchSize).SIZE_32,
+					disabled: __props.disabled,
+					onSelect: handlePaletteSelect
+				}, null, 8, [
+					"modelValue",
+					"layout",
+					"colors",
+					"size",
+					"disabled"
+				])]), (0, vue.createElementVNode)("section", _hoisted_3, [(0, vue.createElementVNode)("span", _hoisted_4, (0, vue.toDisplayString)((0, vue.unref)(t)("colorPicker.recentColors")), 1), (0, vue.createVNode)((0, vue.unref)(require_SColorPalette.default), {
+					modelValue: modelValue.value,
+					"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => modelValue.value = $event),
+					class: "s-ui-color-picker__palette",
+					layout: (0, vue.unref)(require_SColorPalette_types.ESColorPaletteLayout).ROW,
+					colors: resolvedRecentColors.value,
+					size: (0, vue.unref)(_shtabapp_ui_kit_primitives.ESColorSwatchSize).SIZE_32,
+					disabled: __props.disabled,
+					onSelect: handlePaletteSelect
+				}, {
+					append: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_SDropdown.default), {
+						modelValue: customEditorOpen.value,
+						"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => customEditorOpen.value = $event),
+						placement: (0, vue.unref)(require_types$1.ESDropdownPlacement).RIGHT_START,
+						offset: 8,
+						shift: true,
+						flip: true,
+						disabled: __props.disabled,
+						"dismiss-on-click-outside": true,
+						"dismiss-on-escape": true
+					}, {
+						trigger: (0, vue.withCtx)(({ toggle, triggerProps }) => [(0, vue.createVNode)((0, vue.unref)(require_SButton.default), (0, vue.mergeProps)(triggerProps, {
+							class: "s-ui-color-picker__add-button",
+							appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).OUTLINED,
+							variant: (0, vue.unref)(require_SButton_types.EButtonVariant).NEUTRAL,
+							size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+							icon: "plus",
+							"aria-label": (0, vue.unref)(t)("colorPicker.addCustomColor"),
+							disabled: __props.disabled,
+							onClick: toggle
+						}), null, 16, [
+							"appearance",
+							"variant",
+							"size",
+							"aria-label",
+							"disabled",
+							"onClick"
+						])]),
+						content: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_SDropdownMenu.default), { width: 320 }, {
+							footer: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_6, [(0, vue.createVNode)((0, vue.unref)(require_SButton.default), {
+								class: "s-ui-color-picker__save-button",
+								appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).MAJOR,
+								variant: (0, vue.unref)(require_SButton_types.EButtonVariant).MAIN,
+								size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+								disabled: __props.disabled,
+								onClick: handleCustomSave
+							}, {
+								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("colorPicker.save")), 1)]),
+								_: 1
+							}, 8, [
+								"appearance",
+								"variant",
+								"size",
+								"disabled"
+							]), (0, vue.createVNode)((0, vue.unref)(require_SButton.default), {
+								class: "s-ui-color-picker__cancel-button",
+								appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).MINOR,
+								variant: (0, vue.unref)(require_SButton_types.EButtonVariant).NEUTRAL,
+								size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+								disabled: __props.disabled,
+								onClick: handleCustomCancel
+							}, {
+								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("colorPicker.cancel")), 1)]),
+								_: 1
+							}, 8, [
+								"appearance",
+								"variant",
+								"size",
+								"disabled"
+							])])]),
+							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_5, [(0, vue.createVNode)(require_SColorArea.default, {
+								modelValue: customDraftColor.value,
+								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => customDraftColor.value = $event),
+								disabled: __props.disabled
+							}, null, 8, ["modelValue", "disabled"]), (0, vue.createVNode)(require_SColorValues.default, {
+								modelValue: customDraftColor.value,
+								"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => customDraftColor.value = $event),
+								format: customFormat.value,
+								"onUpdate:format": _cache[3] || (_cache[3] = ($event) => customFormat.value = $event),
+								disabled: __props.disabled,
+								onFormatDropdownOpen: _cache[4] || (_cache[4] = ($event) => emit("formatDropdownOpen")),
+								onFormatDropdownClose: _cache[5] || (_cache[5] = ($event) => emit("formatDropdownClose"))
+							}, null, 8, [
+								"modelValue",
+								"format",
+								"disabled"
+							])])]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, [
+						"modelValue",
+						"placement",
+						"disabled"
+					])]),
+					_: 1
+				}, 8, [
+					"modelValue",
+					"layout",
+					"colors",
+					"size",
+					"disabled"
+				])])], 2)]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+exports.default = SColorPicker_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SColorPicker/SColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,209 @@
+import { EColorFormat } from "../../utils/color/types.js";
+import { RECOMMENDED_COLOR_PALETTE } from "../../utils/color/recommendedColorPalette.js";
+import { EButtonAppearance, EButtonSize, EButtonVariant } from "../SButton/SButton.types.js";
+import SButton_default from "../SButton/SButton.vue.js";
+import { ESDropdownPlacement } from "../../composables/connectedPosition/types.js";
+import { ESColorPaletteLayout } from "../SColorPalette/SColorPalette.types.js";
+import SColorPalette_default from "../SColorPalette/SColorPalette.vue.js";
+import "./constants/SColorPicker.constants.js";
+import SDropdown_default from "../SDropdown/SDropdown.vue.js";
+import SDropdownMenu_default from "../SDropdownMenu/SDropdownMenu.vue.js";
+import SColorArea_default from "./parts/SColorArea.vue.js";
+import SColorValues_default from "./parts/SColorValues.vue.js";
+import { computed, createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, ref, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+import { ESColorSwatchSize, useUiKitI18n } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SColorPicker/SColorPicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-color-picker__section" };
+var _hoisted_2 = { class: "s-ui-color-picker__label" };
+var _hoisted_3 = { class: "s-ui-color-picker__section" };
+var _hoisted_4 = { class: "s-ui-color-picker__label" };
+var _hoisted_5 = { class: "s-ui-color-picker__custom-editor" };
+var _hoisted_6 = { class: "s-ui-color-picker__custom-actions" };
+var SColorPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SColorPicker",
+	props: /*@__PURE__*/ mergeModels({
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		recommendedColors: {},
+		recentColors: { default: () => [] }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"select",
+		"customEditorOpen",
+		"customEditorClose",
+		"formatDropdownOpen",
+		"formatDropdownClose"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const emit = __emit;
+		const { t } = useUiKitI18n();
+		const customEditorOpen = ref(false);
+		const customDraftColor = ref("#526DE3");
+		const customFormat = ref(EColorFormat.HEX);
+		const resolvedRecommendedColors = computed(() => {
+			if (__props.recommendedColors && __props.recommendedColors.length > 0) return __props.recommendedColors;
+			return RECOMMENDED_COLOR_PALETTE;
+		});
+		const resolvedRecentColors = computed(() => {
+			if (__props.recentColors.length <= 17) return __props.recentColors;
+			return __props.recentColors.slice(0, 17);
+		});
+		const initCustomDraftFromModel = () => {
+			if (modelValue.value) {
+				customDraftColor.value = modelValue.value;
+				return;
+			}
+			customDraftColor.value = "#526DE3";
+		};
+		const handlePaletteSelect = (value) => {
+			emit("select", value);
+		};
+		const handleCustomSave = () => {
+			modelValue.value = customDraftColor.value;
+			emit("select", customDraftColor.value);
+			customEditorOpen.value = false;
+		};
+		const handleCustomCancel = () => {
+			customEditorOpen.value = false;
+		};
+		watch(customEditorOpen, (isOpen, wasOpen) => {
+			if (isOpen && !wasOpen) {
+				initCustomDraftFromModel();
+				emit("customEditorOpen");
+				return;
+			}
+			if (!isOpen && wasOpen) emit("customEditorClose");
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SDropdownMenu_default), mergeProps({ width: 336 }, _ctx.$attrs), {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["s-ui-color-picker", { "s-ui-color-picker--disabled": __props.disabled }]) }, [createElementVNode("section", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("colorPicker.recommendedColors")), 1), createVNode(unref(SColorPalette_default), {
+					modelValue: modelValue.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+					class: "s-ui-color-picker__palette",
+					layout: unref(ESColorPaletteLayout).GRID,
+					colors: resolvedRecommendedColors.value,
+					size: unref(ESColorSwatchSize).SIZE_32,
+					disabled: __props.disabled,
+					onSelect: handlePaletteSelect
+				}, null, 8, [
+					"modelValue",
+					"layout",
+					"colors",
+					"size",
+					"disabled"
+				])]), createElementVNode("section", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(unref(t)("colorPicker.recentColors")), 1), createVNode(unref(SColorPalette_default), {
+					modelValue: modelValue.value,
+					"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => modelValue.value = $event),
+					class: "s-ui-color-picker__palette",
+					layout: unref(ESColorPaletteLayout).ROW,
+					colors: resolvedRecentColors.value,
+					size: unref(ESColorSwatchSize).SIZE_32,
+					disabled: __props.disabled,
+					onSelect: handlePaletteSelect
+				}, {
+					append: withCtx(() => [createVNode(unref(SDropdown_default), {
+						modelValue: customEditorOpen.value,
+						"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => customEditorOpen.value = $event),
+						placement: unref(ESDropdownPlacement).RIGHT_START,
+						offset: 8,
+						shift: true,
+						flip: true,
+						disabled: __props.disabled,
+						"dismiss-on-click-outside": true,
+						"dismiss-on-escape": true
+					}, {
+						trigger: withCtx(({ toggle, triggerProps }) => [createVNode(unref(SButton_default), mergeProps(triggerProps, {
+							class: "s-ui-color-picker__add-button",
+							appearance: unref(EButtonAppearance).OUTLINED,
+							variant: unref(EButtonVariant).NEUTRAL,
+							size: unref(EButtonSize).SMALL,
+							icon: "plus",
+							"aria-label": unref(t)("colorPicker.addCustomColor"),
+							disabled: __props.disabled,
+							onClick: toggle
+						}), null, 16, [
+							"appearance",
+							"variant",
+							"size",
+							"aria-label",
+							"disabled",
+							"onClick"
+						])]),
+						content: withCtx(() => [createVNode(unref(SDropdownMenu_default), { width: 320 }, {
+							footer: withCtx(() => [createElementVNode("div", _hoisted_6, [createVNode(unref(SButton_default), {
+								class: "s-ui-color-picker__save-button",
+								appearance: unref(EButtonAppearance).MAJOR,
+								variant: unref(EButtonVariant).MAIN,
+								size: unref(EButtonSize).SMALL,
+								disabled: __props.disabled,
+								onClick: handleCustomSave
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("colorPicker.save")), 1)]),
+								_: 1
+							}, 8, [
+								"appearance",
+								"variant",
+								"size",
+								"disabled"
+							]), createVNode(unref(SButton_default), {
+								class: "s-ui-color-picker__cancel-button",
+								appearance: unref(EButtonAppearance).MINOR,
+								variant: unref(EButtonVariant).NEUTRAL,
+								size: unref(EButtonSize).SMALL,
+								disabled: __props.disabled,
+								onClick: handleCustomCancel
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("colorPicker.cancel")), 1)]),
+								_: 1
+							}, 8, [
+								"appearance",
+								"variant",
+								"size",
+								"disabled"
+							])])]),
+							default: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(SColorArea_default, {
+								modelValue: customDraftColor.value,
+								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => customDraftColor.value = $event),
+								disabled: __props.disabled
+							}, null, 8, ["modelValue", "disabled"]), createVNode(SColorValues_default, {
+								modelValue: customDraftColor.value,
+								"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => customDraftColor.value = $event),
+								format: customFormat.value,
+								"onUpdate:format": _cache[3] || (_cache[3] = ($event) => customFormat.value = $event),
+								disabled: __props.disabled,
+								onFormatDropdownOpen: _cache[4] || (_cache[4] = ($event) => emit("formatDropdownOpen")),
+								onFormatDropdownClose: _cache[5] || (_cache[5] = ($event) => emit("formatDropdownClose"))
+							}, null, 8, [
+								"modelValue",
+								"format",
+								"disabled"
+							])])]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, [
+						"modelValue",
+						"placement",
+						"disabled"
+					])]),
+					_: 1
+				}, 8, [
+					"modelValue",
+					"layout",
+					"colors",
+					"size",
+					"disabled"
+				])])], 2)]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { SColorPicker_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SColorPicker/constants/SColorPicker.constants.cjs

@@ -0,0 +1,4 @@
+//#region src/components/SColorPicker/constants/SColorPicker.constants.ts
+var MAX_RECENT_COLORS = 17;
+//#endregion
+exports.MAX_RECENT_COLORS = MAX_RECENT_COLORS;

package/dist/components/SColorPicker/constants/SColorPicker.constants.js

@@ -0,0 +1,4 @@
+//#region src/components/SColorPicker/constants/SColorPicker.constants.ts
+var MAX_RECENT_COLORS = 17;
+//#endregion
+export { MAX_RECENT_COLORS };

package/dist/components/SColorPicker/parts/SColorArea.vue.cjs

@@ -0,0 +1,6 @@
+const require_SColorArea_vue_vue_type_script_setup_true_lang = require("./SColorArea.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                                */
+//#region src/components/SColorPicker/parts/SColorArea.vue
+var SColorArea_default = require_SColorArea_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = SColorArea_default;

package/dist/components/SColorPicker/parts/SColorArea.vue.js

@@ -0,0 +1,6 @@
+import SColorArea_vue_vue_type_script_setup_true_lang_default from "./SColorArea.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                              */
+//#region src/components/SColorPicker/parts/SColorArea.vue
+var SColorArea_default = SColorArea_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SColorArea_default as default };