@skewedaspect/sleekspace-ui 0.8.0 → 0.9.0

package/dist/sleekspace-ui.es.js

@@ -21974,88 +21974,86 @@ var TreeItem_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/composables/useCustomColors.ts
 /**
+* Kind names that the color props accept as shortcuts. Typing `baseColor="neon-pink"` resolves
+* to `var(--sk-neon-pink-base)`; typing `borderColor="primary"` resolves to `var(--sk-primary-base)`.
+* Any string not in this set is passed through verbatim as a CSS color value.
+*/
+var KIND_NAMES = new Set([
+	"neutral",
+	"primary",
+	"accent",
+	"info",
+	"success",
+	"warning",
+	"danger",
+	"boulder",
+	"neon-blue",
+	"light-blue",
+	"neon-orange",
+	"neon-purple",
+	"neon-green",
+	"neon-mint",
+	"neon-pink",
+	"yellow",
+	"red"
+]);
+function resolveColor(value, part) {
+	if (!value) return;
+	const trimmed = value.trim();
+	if (KIND_NAMES.has(trimmed)) return `var(--sk-${trimmed}-${part})`;
+	return value;
+}
+function unwrap(input) {
+	return typeof input === "string" ? input : input?.value;
+}
+/**
 * Composable for handling custom color props in components.
 *
-* This composable provides a consistent way to apply custom colors to components by generating
-* CSS variables that override the component's default color tokens. It supports any CSS color
-* format including hex, rgb, hsl, oklch, named colors, and CSS variables.
+* Generates CSS custom properties that override a component's default color tokens. Props accept
+* either a kind name (e.g. `"neon-pink"`, `"primary"`), which resolves to the matching
+* `--sk-<kind>-base/-text` token, or any raw CSS color value (hex, rgb, oklch, named, or
+* `var(...)`), which is passed through unchanged. This lets consumers use SleekSpace's palette
+* by name without having to remember the token syntax.
 *
 * Works with any component that follows the CSS variable naming convention:
 * - `--sk-{componentName}-color-base` for the base/background color
 * - `--sk-{componentName}-fg` for the foreground/text color
+* - `--sk-{componentName}-border-base` / `--sk-{componentName}-border-color` for the border (optional)
 *
-* @param componentName - The component name used in CSS variable naming
-*                        (e.g., 'button', 'panel', 'my-custom-component')
-* @param baseColor - The base/background color (any CSS color value, including CSS variables)
-* @param textColor - Optional foreground/text color. If not provided, falls back to `--sk-neutral-text`
+* @param componentName - The component name used in CSS variable naming (e.g., 'button', 'panel')
+* @param baseColor - Kind name or CSS color value for the base/background color
+* @param textColor - Kind name or CSS color value for the foreground/text color. Falls back to
+*                    `--sk-neutral-text` when only `baseColor` is provided.
+* @param borderColor - Optional kind name or CSS color value for the border. When provided,
+*                      both `--sk-<component>-border-base` and `--sk-<component>-border-color`
+*                      are emitted so the border takes precedence over any kind's default.
 *
 * @returns Computed style object with CSS variables ready to bind to a component's style attribute
 *
-* @example Basic usage with base color only
+* @example Kind name shortcut
 * ```vue
-* <script setup>
-* import { useCustomColors } from '@/composables/useCustomColors';
-*
-* const props = defineProps<{ baseColor?: string }>();
-* const customColors = useCustomColors('button', toRef(() => props.baseColor), undefined);
-* <\/script>
-*
-* <template>
-*   <button :style="customColors">Click me</button>
-* </template>
+* <SkPanel base-color="neon-pink" text-color="primary" border-color="neon-purple">...</SkPanel>
 * ```
 *
-* @example With both base and text colors
+* @example Raw CSS values
 * ```vue
-* <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">
-*   Custom Purple Button
-* </SkButton>
+* <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">Click me</SkButton>
 * ```
-*
-* @example Using CSS variables
-* ```vue
-* <SkPanel base-color="var(--my-custom-color)" text-color="var(--my-text-color)">
-*   Content
-* </SkPanel>
-* ```
-*
-* @example Custom component
-* ```vue
-* <script setup>
-* import { useCustomColors } from '@/composables/useCustomColors';
-*
-* const props = defineProps<{ baseColor?: string; textColor?: string }>();
-* const customColors = useCustomColors('my-widget', toRef(() => props.baseColor), toRef(() => props.textColor));
-* <\/script>
-*
-* <template>
-*   <div class="my-widget" :style="customColors">
-*     <!-- Will generate: --sk-my-widget-color-base and --sk-my-widget-fg -->
-*   </div>
-* </template>
-* ```
-*
-* Generated CSS variables:
-* - `--sk-{componentName}-color-base` - The base color for backgrounds and accents
-* - `--sk-{componentName}-fg` - The foreground/text color
-*
-* @remarks
-* - If `textColor` is not provided, components will use `--sk-neutral-text` from the active theme
-* - For best contrast, always provide `textColor` when using custom `baseColor`
-* - The generated CSS variables integrate with the component's existing token system
-* - Works with any component name - no need to register components beforehand
 */
-function useCustomColors(componentName, baseColor, textColor) {
+function useCustomColors(componentName, baseColor, textColor, borderColor) {
 	return computed(() => {
 		const styles = {};
-		const baseColorValue = typeof baseColor === "string" ? baseColor : baseColor?.value;
-		const textColorValue = typeof textColor === "string" ? textColor : textColor?.value;
-		if (!baseColorValue) return styles;
-		const baseVarName = `--sk-${componentName}-color-base`;
-		styles[baseVarName] = baseColorValue;
-		const fgVarName = `--sk-${componentName}-fg`;
-		if (textColorValue) styles[fgVarName] = textColorValue;
-		else styles[fgVarName] = "var(--sk-neutral-text)";
+		const baseResolved = resolveColor(unwrap(baseColor), "base");
+		const textResolved = resolveColor(unwrap(textColor), "text");
+		const borderResolved = resolveColor(unwrap(borderColor), "base");
+		if (baseResolved) {
+			styles[`--sk-${componentName}-color-base`] = baseResolved;
+			styles[`--sk-${componentName}-fg`] = textResolved ?? "var(--sk-neutral-text)";
+		} else if (textResolved) styles[`--sk-${componentName}-fg`] = textResolved;
+		if (borderResolved) {
+			styles[`--sk-${componentName}-border-base`] = borderResolved;
+			styles[`--sk-${componentName}-border-color`] = borderResolved;
+		}
 		return styles;
 	});
 }
@@ -22076,7 +22074,8 @@ var SkAccordion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -22283,7 +22282,8 @@ var SkAlert_default = /* @__PURE__ */ defineComponent({
 			default: void 0
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -22843,7 +22843,8 @@ var SkBreadcrumbs_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 		kind: { default: "neutral" },
 		separator: { default: "/" },
 		baseColor: { default: void 0 },
-		textColor: { default: void 0 }
+		textColor: { default: void 0 },
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -22941,7 +22942,8 @@ var SkButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__P
 		href: { default: void 0 },
 		to: { default: void 0 },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -23036,10 +23038,11 @@ var SkPanel_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 		corners: { default: () => ["bottom-right"] },
 		decorationCorner: { default: "bottom-right" },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v42b18398": decorationDisplay.value }));
+		useCssVars((_ctx) => ({ "a6c4a7d4": decorationDisplay.value }));
 		/**
 		* @component SkPanel
 		* @description A foundational container component with beveled corners, borders, background colors, and an optional
@@ -23069,7 +23072,7 @@ var SkPanel_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 				[`sk-decoration-${props.decorationCorner}`]: true
 			};
 		});
-		const customColorStyles = useCustomColors("panel", toRef(() => props.baseColor), toRef(() => props.textColor));
+		const customColorStyles = useCustomColors("panel", toRef(() => props.baseColor), toRef(() => props.textColor), toRef(() => props.borderColor));
 		const decorationDisplay = computed(() => {
 			if (props.noBorder || !props.showDecoration) return "none";
 			if (!props.corners.includes(props.decorationCorner)) return "none";
@@ -23082,7 +23085,7 @@ var SkPanel_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 6);
 		};
 	}
-}), [["__scopeId", "data-v-07c1642c"]]);
+}), [["__scopeId", "data-v-3d4b2da6"]]);
 //#endregion
 //#region src/components/Card/SkCard.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$33 = {
@@ -23125,7 +23128,8 @@ var SkCard_default = /* @__PURE__ */ defineComponent({
 		corners: { default: () => ["bottom-right"] },
 		decorationCorner: { default: "bottom-right" },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -23184,6 +23188,7 @@ var SkCard_default = /* @__PURE__ */ defineComponent({
 				"no-border": __props.noBorder,
 				"base-color": __props.baseColor,
 				"text-color": __props.textColor,
+				"border-color": __props.borderColor,
 				corners: __props.corners,
 				"decoration-corner": __props.decorationCorner,
 				class: normalizeClass(classes.value)
@@ -23209,6 +23214,7 @@ var SkCard_default = /* @__PURE__ */ defineComponent({
 				"no-border",
 				"base-color",
 				"text-color",
+				"border-color",
 				"corners",
 				"decoration-corner",
 				"class"
@@ -23261,7 +23267,8 @@ var SkCheckbox_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 		name: { default: void 0 },
 		label: { default: void 0 },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": {
 			type: [Boolean, String],
@@ -23357,7 +23364,8 @@ var SkCollapsible_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 		kind: { default: "neutral" },
 		triggerText: { default: "Toggle" },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
@@ -26550,7 +26558,8 @@ var SkColorPicker_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 		placeholder: { default: "Pick a color" },
 		defaultValue: { default: "#B63DDAFF" },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -26674,7 +26683,8 @@ var SkContextMenu_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 	props: {
 		kind: { default: "neutral" },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -26971,6 +26981,10 @@ var SkDivider_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/NavBar/context.ts
+var NAVBAR_KIND_KEY = Symbol("sk-navbar-kind");
+var NAVBAR_SIZE_KEY = Symbol("sk-navbar-size");
+//#endregion
 //#region src/components/Dropdown/SkDropdown.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$27 = {
 	xmlns: "http://www.w3.org/2000/svg",
@@ -26996,8 +27010,10 @@ var SkDropdown_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 		side: { default: "bottom" },
 		align: { default: "start" },
 		sideOffset: { default: 4 },
+		size: { default: void 0 },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -27024,6 +27040,8 @@ var SkDropdown_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 		*/
 		const props = __props;
 		const { theme } = usePortalContext();
+		const navbarSize = inject(NAVBAR_SIZE_KEY, void 0);
+		const effectiveSize = computed(() => props.size ?? navbarSize?.value ?? "md");
 		provide("dropdown-kind", computed(() => props.kind));
 		const caretPoints = computed(() => {
 			switch (props.side) {
@@ -27041,11 +27059,14 @@ var SkDropdown_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DropdownMenuRoot_default), null, {
 				default: withCtx(() => [createVNode(unref(DropdownMenuTrigger_default), { "as-child": "" }, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(SkButton_default, { kind: __props.kind }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(SkButton_default, {
+						kind: __props.kind,
+						size: effectiveSize.value
+					}, {
 						trailing: withCtx(() => [(openBlock(), createElementBlock("svg", _hoisted_1$27, [createElementVNode("polyline", { points: caretPoints.value }, null, 8, _hoisted_2$14)]))]),
 						default: withCtx(() => [createTextVNode(toDisplayString(__props.triggerText) + " ", 1)]),
 						_: 1
-					}, 8, ["kind"])], true)]),
+					}, 8, ["kind", "size"])], true)]),
 					_: 3
 				}), createVNode(unref(DropdownMenuPortal_default), null, {
 					default: withCtx(() => [createVNode(unref(DropdownMenuContent_default), {
@@ -27072,7 +27093,7 @@ var SkDropdown_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 			});
 		};
 	}
-}), [["__scopeId", "data-v-86d554dd"]]);
+}), [["__scopeId", "data-v-88c7a661"]]);
 //#endregion
 //#region src/components/Dropdown/SkDropdownCheckboxItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$26 = {
@@ -27510,7 +27531,8 @@ var SkInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 		name: { default: void 0 },
 		autocomplete: { default: void 0 },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {}
@@ -27592,7 +27614,8 @@ var SkListbox_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -27823,7 +27846,8 @@ var SkModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	emits: ["update:open"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -27960,9 +27984,6 @@ var SkModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 	}
 }), [["__scopeId", "data-v-d5c13c78"]]);
 //#endregion
-//#region src/components/NavBar/context.ts
-var NAVBAR_KIND_KEY = Symbol("sk-navbar-kind");
-//#endregion
 //#region src/components/NavBar/SkNavBar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$20 = { class: "sk-navbar-content" };
 var _hoisted_2$11 = {
@@ -27991,8 +28012,10 @@ var SkNavBar_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: true
 		},
+		size: { default: "md" },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -28027,6 +28050,7 @@ var SkNavBar_default = /* @__PURE__ */ defineComponent({
 		*/
 		const props = __props;
 		provide(NAVBAR_KIND_KEY, toRef(() => props.kind));
+		provide(NAVBAR_SIZE_KEY, toRef(() => props.size));
 		const slots = useSlots();
 		const classes = computed(() => {
 			return {
@@ -28077,7 +28101,8 @@ var SkNumberInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 		max: { default: void 0 },
 		step: { default: 1 },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": { default: 0 },
 		"modelModifiers": {}
@@ -28478,6 +28503,10 @@ var SkPage_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PUR
 		flush: {
 			type: Boolean,
 			default: false
+		},
+		noBounce: {
+			type: Boolean,
+			default: false
 		}
 	},
 	emits: ["update:sidebarOpen", "update:asideOpen"],
@@ -28658,7 +28687,8 @@ var SkPage_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PUR
 			"sk-fixed-footer": props.fixedFooter,
 			"sk-sidebar-drawer-active": isSidebarDrawerActive.value,
 			"sk-aside-drawer-active": isAsideDrawerActive.value,
-			"sk-flush": props.flush
+			"sk-flush": props.flush,
+			"sk-no-bounce": props.noBounce
 		}));
 		const customStyles = computed(() => {
 			const styles = {};
@@ -28756,7 +28786,7 @@ var SkPage_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PUR
 			], 14, _hoisted_1$18);
 		};
 	}
-}), [["__scopeId", "data-v-f502bb9d"]]);
+}), [["__scopeId", "data-v-265ba522"]]);
 //#endregion
 //#region src/components/Page/SkPageSidebarToggle.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$17 = {
@@ -28982,7 +29012,8 @@ var SkPagination_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 			default: false
 		},
 		baseColor: { default: void 0 },
-		textColor: { default: void 0 }
+		textColor: { default: void 0 },
+		borderColor: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -29134,7 +29165,8 @@ var SkPopover_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 			default: void 0
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
@@ -29378,7 +29410,8 @@ var SkRadio_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 		kind: { default: void 0 },
 		size: { default: void 0 },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -29537,17 +29570,69 @@ var SkScrollArea_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 			[`sk-${props.orientation}`]: true,
 			"sk-fade": props.fade
 		}));
+		const viewportRef = ref(null);
+		const fadeTop = ref(0);
+		const fadeBottom = ref(0);
+		const fadeLeft = ref(0);
+		const fadeRight = ref(0);
+		let scrollEl = null;
+		let resizeObs = null;
+		let rafID = null;
+		function updateFades() {
+			if (!scrollEl) return;
+			const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollEl;
+			const threshold = 1;
+			fadeTop.value = scrollTop > threshold ? 1 : 0;
+			fadeBottom.value = scrollHeight - scrollTop - clientHeight > threshold ? 1 : 0;
+			fadeLeft.value = scrollLeft > threshold ? 1 : 0;
+			fadeRight.value = scrollWidth - scrollLeft - clientWidth > threshold ? 1 : 0;
+		}
+		function scheduleUpdate() {
+			if (rafID !== null) return;
+			rafID = requestAnimationFrame(() => {
+				rafID = null;
+				updateFades();
+			});
+		}
+		onMounted(() => {
+			scrollEl = viewportRef.value?.viewportElement ?? null;
+			if (!scrollEl) return;
+			scrollEl.addEventListener("scroll", scheduleUpdate, { passive: true });
+			resizeObs = new ResizeObserver(scheduleUpdate);
+			resizeObs.observe(scrollEl);
+			for (const child of Array.from(scrollEl.children)) resizeObs.observe(child);
+			updateFades();
+		});
+		onBeforeUnmount(() => {
+			if (scrollEl) scrollEl.removeEventListener("scroll", scheduleUpdate);
+			resizeObs?.disconnect();
+			if (rafID !== null) cancelAnimationFrame(rafID);
+		});
+		const rootStyles = computed(() => {
+			const styles = { ...customColorStyles.value };
+			if (props.fade) {
+				styles["--sk-scroll-fade-top"] = String(fadeTop.value);
+				styles["--sk-scroll-fade-bottom"] = String(fadeBottom.value);
+				styles["--sk-scroll-fade-left"] = String(fadeLeft.value);
+				styles["--sk-scroll-fade-right"] = String(fadeRight.value);
+			}
+			return styles;
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ScrollAreaRoot_default), {
 				type: __props.type,
 				class: normalizeClass(classes.value),
-				style: normalizeStyle(unref(customColorStyles))
+				style: normalizeStyle(rootStyles.value)
 			}, {
 				default: withCtx(() => [
-					createVNode(unref(ScrollAreaViewport_default), { class: "sk-scroll-area-viewport" }, {
+					createVNode(unref(ScrollAreaViewport_default), {
+						ref_key: "viewportRef",
+						ref: viewportRef,
+						class: "sk-scroll-area-viewport"
+					}, {
 						default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 						_: 3
-					}),
+					}, 512),
 					__props.orientation !== "horizontal" ? (openBlock(), createBlock(unref(ScrollAreaScrollbar_default), {
 						key: 0,
 						class: "sk-scroll-area-scrollbar",
@@ -29577,7 +29662,7 @@ var SkScrollArea_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-03c94821"]]);
+}), [["__scopeId", "data-v-e4dbafd6"]]);
 //#endregion
 //#region src/components/Select/SkSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$13 = {
@@ -29607,7 +29692,8 @@ var SkSelect_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__P
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -29832,7 +29918,8 @@ var SkSidebar_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -30403,7 +30490,8 @@ var SkSwitch_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props) {
@@ -30516,7 +30604,8 @@ var SkTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -30783,7 +30872,8 @@ var SkTabs_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props) {
@@ -30858,7 +30948,8 @@ var SkTag_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	emits: ["remove"],
 	setup(__props, { emit: __emit }) {
@@ -30964,7 +31055,8 @@ var SkTagsInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @
 		tagKind: { default: void 0 },
 		tagVariant: { default: "solid" },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": { default: () => [] },
 		"modelModifiers": {}
@@ -31107,7 +31199,8 @@ var SkTextarea_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 		rows: { default: 4 },
 		autocomplete: { default: void 0 },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {}
@@ -31664,7 +31757,8 @@ var SkTooltip_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 			default: true
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -31946,6 +32040,7 @@ var SkTreeView_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const props = __props;
+		const rekaModelValue = computed(() => props.modelValue);
 		function getAllKeys(items) {
 			const keys = [];
 			for (const item of items) {
@@ -31968,7 +32063,7 @@ var SkTreeView_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 			return openBlock(), createBlock(unref(TreeRoot_default), {
 				items: __props.items,
 				"get-key": __props.getKey,
-				"model-value": __props.modelValue,
+				"model-value": rekaModelValue.value,
 				multiple: __props.multiple,
 				"propagate-select": __props.propagateSelect,
 				"default-expanded": expandedKeys.value,
@@ -31990,7 +32085,7 @@ var SkTreeView_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-717b6450"]]);
+}), [["__scopeId", "data-v-39b36ab8"]]);
 //#endregion
 //#region src/components/Theme/SkTheme.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-scheme"];