@skewedaspect/sleekspace-ui 0.8.1 → 0.9.1

package/dist/sleekspace-ui.umd.js

@@ -21985,88 +21985,86 @@ Defaulting to \`null\`.`);
 	//#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
-	* ```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>
-	* ```
-	*
-	* @example With both base and text colors
-	* ```vue
-	* <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">
-	*   Custom Purple Button
-	* </SkButton>
-	* ```
-	*
-	* @example Using CSS variables
+	* @example Kind name shortcut
 	* ```vue
-	* <SkPanel base-color="var(--my-custom-color)" text-color="var(--my-text-color)">
-	*   Content
-	* </SkPanel>
+	* <SkPanel base-color="neon-pink" text-color="primary" border-color="neon-purple">...</SkPanel>
 	* ```
 	*
-	* @example Custom component
+	* @example Raw CSS values
 	* ```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>
+	* <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">Click me</SkButton>
 	* ```
-	*
-	* 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 (0, vue.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;
 		});
 	}
@@ -22087,7 +22085,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:modelValue"],
 		setup(__props, { emit: __emit }) {
@@ -22245,6 +22244,31 @@ Defaulting to \`null\`.`);
 		}
 	}), [["__scopeId", "data-v-5e73d91f"]]);
 	//#endregion
+	//#region src/utils/slots.ts
+	function hasRenderableContent(vnodes) {
+		return vnodes.some((vnode) => {
+			if (vnode.type === vue.Comment) return false;
+			if (vnode.type === vue.Text) return typeof vnode.children === "string" && vnode.children.trim().length > 0;
+			if (vnode.type === vue.Fragment && Array.isArray(vnode.children)) return hasRenderableContent(vnode.children);
+			return true;
+		});
+	}
+	function hasSlotContent(slot, props) {
+		if (!slot) return false;
+		return hasRenderableContent(slot(props));
+	}
+	function filterRenderableVNodes(vnodes) {
+		return vnodes.flatMap((vnode) => {
+			if (vnode.type === vue.Comment) return [];
+			if (vnode.type === vue.Text) {
+				if (typeof vnode.children === "string" && vnode.children.trim().length > 0) return [vnode];
+				return [];
+			}
+			if (vnode.type === vue.Fragment && Array.isArray(vnode.children)) return filterRenderableVNodes(vnode.children);
+			return [vnode];
+		});
+	}
+	//#endregion
 	//#region src/components/Alert/SkAlert.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$39 = {
 		key: 0,
@@ -22294,7 +22318,8 @@ Defaulting to \`null\`.`);
 				default: void 0
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -22335,9 +22360,7 @@ Defaulting to \`null\`.`);
 			});
 			const shouldShowIcon = (0, vue.computed)(() => {
 				if (props.showIcon !== void 0) return props.showIcon;
-				const hasDefaultIcon = FEEDBACK_KINDS.includes(props.kind);
-				const hasSlotContent = !!slots.icon;
-				return hasDefaultIcon || hasSlotContent;
+				return FEEDBACK_KINDS.includes(props.kind) || hasSlotContent(slots.icon);
 			});
 			const customColorStyles = useCustomColors("alert", (0, vue.toRef)(() => props.baseColor), (0, vue.toRef)(() => props.textColor));
 			return (_ctx, _cache) => {
@@ -22859,7 +22882,8 @@ Defaulting to \`null\`.`);
 			kind: { default: "neutral" },
 			separator: { default: "/" },
 			baseColor: { default: void 0 },
-			textColor: { default: void 0 }
+			textColor: { default: void 0 },
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -22890,9 +22914,7 @@ Defaulting to \`null\`.`);
 			}));
 			const processedItems = (0, vue.computed)(() => {
 				if (!slots.default) return [];
-				const defaultSlot = slots.default();
-				if (!defaultSlot || defaultSlot.length === 0) return [];
-				return defaultSlot;
+				return filterRenderableVNodes(slots.default());
 			});
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("nav", {
@@ -22904,7 +22926,7 @@ Defaulting to \`null\`.`);
 				}), 128))])], 6);
 			};
 		}
-	}), [["__scopeId", "data-v-f7fec0fe"]]);
+	}), [["__scopeId", "data-v-6d108335"]]);
 	//#endregion
 	//#region src/components/Button/SkButton.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$34 = { class: "sk-button-chrome" };
@@ -22957,7 +22979,8 @@ Defaulting to \`null\`.`);
 			href: { default: void 0 },
 			to: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -22986,7 +23009,7 @@ Defaulting to \`null\`.`);
 				else return "button";
 			});
 			const classes = (0, vue.computed)(() => {
-				const isIconOnly = !!(slots.icon && !slots.default);
+				const isIconOnly = hasSlotContent(slots.icon) && !hasSlotContent(slots.default);
 				return {
 					"sk-button": true,
 					[`sk-${props.kind}`]: true,
@@ -23015,10 +23038,10 @@ Defaulting to \`null\`.`);
 						"sk-button-content": true,
 						"loading": __props.loading
 					}) }, [
-						_ctx.$slots.leading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$14, [(0, vue.renderSlot)(_ctx.$slots, "leading", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
-						_ctx.$slots.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$10, [(0, vue.renderSlot)(_ctx.$slots, "icon", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
-						_ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$8, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
-						_ctx.$slots.trailing ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$5, [(0, vue.renderSlot)(_ctx.$slots, "trailing", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true)
+						(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).leading) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$14, [(0, vue.renderSlot)(_ctx.$slots, "leading", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+						(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).icon) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$10, [(0, vue.renderSlot)(_ctx.$slots, "icon", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+						(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).default) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$8, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+						(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).trailing) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$5, [(0, vue.renderSlot)(_ctx.$slots, "trailing", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true)
 					], 2)])]),
 					_: 3
 				}, 8, [
@@ -23033,7 +23056,7 @@ Defaulting to \`null\`.`);
 				]);
 			};
 		}
-	}), [["__scopeId", "data-v-fb63ef15"]]);
+	}), [["__scopeId", "data-v-b276bf6c"]]);
 	//#endregion
 	//#region src/components/Panel/SkPanel.vue
 	var SkPanel_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ (0, vue.defineComponent)({
@@ -23052,10 +23075,11 @@ Defaulting to \`null\`.`);
 			corners: { default: () => ["bottom-right"] },
 			decorationCorner: { default: "bottom-right" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
-			(0, vue.useCssVars)((_ctx) => ({ "v42b18398": decorationDisplay.value }));
+			(0, vue.useCssVars)((_ctx) => ({ "a6c4a7d4": decorationDisplay.value }));
 			/**
 			* @component SkPanel
 			* @description A foundational container component with beveled corners, borders, background colors, and an optional
@@ -23085,7 +23109,7 @@ Defaulting to \`null\`.`);
 					[`sk-decoration-${props.decorationCorner}`]: true
 				};
 			});
-			const customColorStyles = useCustomColors("panel", (0, vue.toRef)(() => props.baseColor), (0, vue.toRef)(() => props.textColor));
+			const customColorStyles = useCustomColors("panel", (0, vue.toRef)(() => props.baseColor), (0, vue.toRef)(() => props.textColor), (0, vue.toRef)(() => props.borderColor));
 			const decorationDisplay = (0, vue.computed)(() => {
 				if (props.noBorder || !props.showDecoration) return "none";
 				if (!props.corners.includes(props.decorationCorner)) return "none";
@@ -23098,7 +23122,7 @@ Defaulting to \`null\`.`);
 				}, [(0, vue.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 = {
@@ -23141,7 +23165,8 @@ Defaulting to \`null\`.`);
 			corners: { default: () => ["bottom-right"] },
 			decorationCorner: { default: "bottom-right" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -23172,6 +23197,7 @@ Defaulting to \`null\`.`);
 			*                appropriate spacing.
 			*/
 			const props = __props;
+			const slots = (0, vue.useSlots)();
 			const classes = (0, vue.computed)(() => {
 				return { "sk-card": true };
 			});
@@ -23200,22 +23226,23 @@ Defaulting to \`null\`.`);
 					"no-border": __props.noBorder,
 					"base-color": __props.baseColor,
 					"text-color": __props.textColor,
+					"border-color": __props.borderColor,
 					corners: __props.corners,
 					"decoration-corner": __props.decorationCorner,
 					class: (0, vue.normalizeClass)(classes.value)
 				}, {
 					default: (0, vue.withCtx)(() => [
-						__props.title || _ctx.$slots.header ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						__props.title || (0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).header) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 							key: 0,
 							class: "sk-card-header",
 							style: (0, vue.normalizeStyle)(headerStyles.value)
 						}, [__props.title ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("h3", _hoisted_1$33, (0, vue.toDisplayString)(__props.title), 1)) : (0, vue.createCommentVNode)("", true), (0, vue.renderSlot)(_ctx.$slots, "header")], 4)) : (0, vue.createCommentVNode)("", true),
-						_ctx.$slots.media ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$17, [(0, vue.renderSlot)(_ctx.$slots, "media")])) : (0, vue.createCommentVNode)("", true),
-						_ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).media) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$17, [(0, vue.renderSlot)(_ctx.$slots, "media")])) : (0, vue.createCommentVNode)("", true),
+						(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).default) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 							key: 2,
 							class: (0, vue.normalizeClass)(contentClasses.value)
 						}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)) : (0, vue.createCommentVNode)("", true),
-						_ctx.$slots.footer ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$13, [(0, vue.renderSlot)(_ctx.$slots, "footer")])) : (0, vue.createCommentVNode)("", true)
+						(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).footer) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$13, [(0, vue.renderSlot)(_ctx.$slots, "footer")])) : (0, vue.createCommentVNode)("", true)
 					]),
 					_: 3
 				}, 8, [
@@ -23225,6 +23252,7 @@ Defaulting to \`null\`.`);
 					"no-border",
 					"base-color",
 					"text-color",
+					"border-color",
 					"corners",
 					"decoration-corner",
 					"class"
@@ -23277,7 +23305,8 @@ Defaulting to \`null\`.`);
 			name: { default: void 0 },
 			label: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": {
 				type: [Boolean, String],
@@ -23309,6 +23338,7 @@ Defaulting to \`null\`.`);
 			* @default false
 			*/
 			const checked = (0, vue.useModel)(__props, "modelValue");
+			const slots = (0, vue.useSlots)();
 			const classes = (0, vue.computed)(() => ({
 				"sk-checkbox": true,
 				[`sk-${props.kind}`]: true,
@@ -23346,10 +23376,10 @@ Defaulting to \`null\`.`);
 					"disabled",
 					"required",
 					"name"
-				]), __props.label || _ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$12, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)], true)])) : (0, vue.createCommentVNode)("", true)], 2);
+				]), __props.label || (0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).default) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$12, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)], true)])) : (0, vue.createCommentVNode)("", true)], 2);
 			};
 		}
-	}), [["__scopeId", "data-v-073d7038"]]);
+	}), [["__scopeId", "data-v-8e0fd27f"]]);
 	//#endregion
 	//#region src/components/Collapsible/SkCollapsible.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$31 = { class: "sk-collapsible-content-inner" };
@@ -23373,7 +23403,8 @@ Defaulting to \`null\`.`);
 			kind: { default: "neutral" },
 			triggerText: { default: "Toggle" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:open"],
 		setup(__props, { emit: __emit }) {
@@ -26566,7 +26597,8 @@ Defaulting to \`null\`.`);
 			placeholder: { default: "Pick a color" },
 			defaultValue: { default: "#B63DDAFF" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": {},
 			"modelModifiers": {}
@@ -26690,7 +26722,8 @@ Defaulting to \`null\`.`);
 		props: {
 			kind: { default: "neutral" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			const props = __props;
@@ -26987,6 +27020,10 @@ Defaulting to \`null\`.`);
 		}
 	});
 	//#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",
@@ -27012,8 +27049,10 @@ Defaulting to \`null\`.`);
 			side: { default: "bottom" },
 			align: { default: "start" },
 			sideOffset: { default: 4 },
+			size: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -27040,6 +27079,8 @@ Defaulting to \`null\`.`);
 			*/
 			const props = __props;
 			const { theme } = usePortalContext();
+			const navbarSize = (0, vue.inject)(NAVBAR_SIZE_KEY, void 0);
+			const effectiveSize = (0, vue.computed)(() => props.size ?? navbarSize?.value ?? "md");
 			(0, vue.provide)("dropdown-kind", (0, vue.computed)(() => props.kind));
 			const caretPoints = (0, vue.computed)(() => {
 				switch (props.side) {
@@ -27057,11 +27098,14 @@ Defaulting to \`null\`.`);
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(DropdownMenuRoot_default), null, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(DropdownMenuTrigger_default), { "as-child": "" }, {
-						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "trigger", {}, () => [(0, vue.createVNode)(SkButton_default, { kind: __props.kind }, {
+						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "trigger", {}, () => [(0, vue.createVNode)(SkButton_default, {
+							kind: __props.kind,
+							size: effectiveSize.value
+						}, {
 							trailing: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$27, [(0, vue.createElementVNode)("polyline", { points: caretPoints.value }, null, 8, _hoisted_2$14)]))]),
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.triggerText) + " ", 1)]),
 							_: 1
-						}, 8, ["kind"])], true)]),
+						}, 8, ["kind", "size"])], true)]),
 						_: 3
 					}), (0, vue.createVNode)((0, vue.unref)(DropdownMenuPortal_default), null, {
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(DropdownMenuContent_default), {
@@ -27088,7 +27132,7 @@ Defaulting to \`null\`.`);
 				});
 			};
 		}
-	}), [["__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 = {
@@ -27526,7 +27570,8 @@ Defaulting to \`null\`.`);
 			name: { default: void 0 },
 			autocomplete: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": { default: "" },
 			"modelModifiers": {}
@@ -27608,7 +27653,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": {},
 			"modelModifiers": {}
@@ -27839,7 +27885,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:open"],
 		setup(__props, { expose: __expose, emit: __emit }) {
@@ -27876,6 +27923,7 @@ Defaulting to \`null\`.`);
 			const props = __props;
 			const emit = __emit;
 			const { theme } = usePortalContext();
+			const slots = (0, vue.useSlots)();
 			const isOpen = (0, vue.ref)(props.open);
 			(0, vue.watch)(() => props.open, (newValue) => {
 				isOpen.value = newValue;
@@ -27915,7 +27963,7 @@ Defaulting to \`null\`.`);
 					open: isOpen.value,
 					"onUpdate:open": _cache[0] || (_cache[0] = ($event) => isOpen.value = $event)
 				}, {
-					default: (0, vue.withCtx)(() => [_ctx.$slots.trigger || __props.triggerText ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(DialogTrigger_default), {
+					default: (0, vue.withCtx)(() => [(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).trigger) || __props.triggerText ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(DialogTrigger_default), {
 						key: 0,
 						"as-child": ""
 					}, {
@@ -27937,7 +27985,7 @@ Defaulting to \`null\`.`);
 							onInteractOutside: handleOverlayClick
 						}, {
 							default: (0, vue.withCtx)(() => [
-								_ctx.$slots.title || __props.title ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$21, [(0, vue.createVNode)((0, vue.unref)(DialogTitle_default), { class: "sk-modal-title" }, {
+								(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).title) || __props.title ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$21, [(0, vue.createVNode)((0, vue.unref)(DialogTitle_default), { class: "sk-modal-title" }, {
 									default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "title", { close }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.title), 1)], true)]),
 									_: 3
 								}), (0, vue.createVNode)((0, vue.unref)(DialogClose_default), { "as-child": "" }, {
@@ -27960,7 +28008,7 @@ Defaulting to \`null\`.`);
 									_: 1
 								})])) : (0, vue.createCommentVNode)("", true),
 								(0, vue.createElementVNode)("div", _hoisted_2$12, [(0, vue.renderSlot)(_ctx.$slots, "default", { close }, void 0, true)]),
-								_ctx.$slots.footer ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$9, [(0, vue.renderSlot)(_ctx.$slots, "footer", { close }, void 0, true)])) : (0, vue.createCommentVNode)("", true)
+								(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).footer) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$9, [(0, vue.renderSlot)(_ctx.$slots, "footer", { close }, void 0, true)])) : (0, vue.createCommentVNode)("", true)
 							]),
 							_: 3
 						}, 8, [
@@ -27974,10 +28022,7 @@ Defaulting to \`null\`.`);
 				}, 8, ["open"]);
 			};
 		}
-	}), [["__scopeId", "data-v-d5c13c78"]]);
-	//#endregion
-	//#region src/components/NavBar/context.ts
-	var NAVBAR_KIND_KEY = Symbol("sk-navbar-kind");
+	}), [["__scopeId", "data-v-291eea32"]]);
 	//#endregion
 	//#region src/components/NavBar/SkNavBar.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$20 = { class: "sk-navbar-content" };
@@ -28007,8 +28052,10 @@ Defaulting to \`null\`.`);
 				type: Boolean,
 				default: true
 			},
+			size: { default: "md" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -28043,6 +28090,7 @@ Defaulting to \`null\`.`);
 			*/
 			const props = __props;
 			(0, vue.provide)(NAVBAR_KIND_KEY, (0, vue.toRef)(() => props.kind));
+			(0, vue.provide)(NAVBAR_SIZE_KEY, (0, vue.toRef)(() => props.size));
 			const slots = (0, vue.useSlots)();
 			const classes = (0, vue.computed)(() => {
 				return {
@@ -28057,17 +28105,20 @@ Defaulting to \`null\`.`);
 					class: (0, vue.normalizeClass)(classes.value),
 					style: (0, vue.normalizeStyle)((0, vue.unref)(customColorStyles))
 				}, [(0, vue.createElementVNode)("div", _hoisted_1$20, [
-					(0, vue.unref)(slots).leading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$11, [(0, vue.renderSlot)(_ctx.$slots, "leading")])) : (0, vue.createCommentVNode)("", true),
-					(0, vue.unref)(slots).brand ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$8, [(0, vue.renderSlot)(_ctx.$slots, "brand")])) : (0, vue.createCommentVNode)("", true),
-					(0, vue.unref)(slots).default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$7, [(0, vue.renderSlot)(_ctx.$slots, "default")])) : (0, vue.createCommentVNode)("", true),
-					(0, vue.unref)(slots).actions ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5$5, [(0, vue.renderSlot)(_ctx.$slots, "actions")])) : (0, vue.createCommentVNode)("", true)
+					(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).leading) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$11, [(0, vue.renderSlot)(_ctx.$slots, "leading")])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).brand) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$8, [(0, vue.renderSlot)(_ctx.$slots, "brand")])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).default) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$7, [(0, vue.renderSlot)(_ctx.$slots, "default")])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).actions) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5$5, [(0, vue.renderSlot)(_ctx.$slots, "actions")])) : (0, vue.createCommentVNode)("", true)
 				])], 6);
 			};
 		}
 	});
 	//#endregion
 	//#region src/components/NumberInput/SkNumberInput.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$19 = { class: "sk-number-input-steppers" };
+	var _hoisted_1$19 = {
+		key: 0,
+		class: "sk-number-input-steppers"
+	};
 	//#endregion
 	//#region src/components/NumberInput/SkNumberInput.vue
 	var SkNumberInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ (0, vue.defineComponent)({
@@ -28092,8 +28143,13 @@ Defaulting to \`null\`.`);
 			min: { default: void 0 },
 			max: { default: void 0 },
 			step: { default: 1 },
+			showSteppers: {
+				type: Boolean,
+				default: true
+			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": { default: 0 },
 			"modelModifiers": {}
@@ -28149,7 +28205,7 @@ Defaulting to \`null\`.`);
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(NumberFieldInput_default), {
 						class: (0, vue.normalizeClass)(inputClasses.value),
 						placeholder: __props.placeholder
-					}, null, 8, ["class", "placeholder"]), (0, vue.createElementVNode)("div", _hoisted_1$19, [(0, vue.createVNode)((0, vue.unref)(NumberFieldIncrement_default), { class: "sk-number-input-increment" }, {
+					}, null, 8, ["class", "placeholder"]), __props.showSteppers ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$19, [(0, vue.createVNode)((0, vue.unref)(NumberFieldIncrement_default), { class: "sk-number-input-increment" }, {
 						default: (0, vue.withCtx)(() => [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							viewBox: "0 0 24 24",
@@ -28171,7 +28227,7 @@ Defaulting to \`null\`.`);
 							"stroke-linejoin": "miter"
 						}, [(0, vue.createElementVNode)("polyline", { points: "18 9 12 15 6 9" })], -1)])]),
 						_: 1
-					})])]),
+					})])) : (0, vue.createCommentVNode)("", true)]),
 					_: 1
 				}, 8, [
 					"modelValue",
@@ -28187,7 +28243,7 @@ Defaulting to \`null\`.`);
 				])], 2);
 			};
 		}
-	}), [["__scopeId", "data-v-b589687f"]]);
+	}), [["__scopeId", "data-v-413329cd"]]);
 	//#endregion
 	//#region src/components/Theme/useTheme.ts
 	var ThemeSymbol = Symbol("SkTheme");
@@ -28494,6 +28550,10 @@ Defaulting to \`null\`.`);
 			flush: {
 				type: Boolean,
 				default: false
+			},
+			noBounce: {
+				type: Boolean,
+				default: false
 			}
 		},
 		emits: ["update:sidebarOpen", "update:asideOpen"],
@@ -28545,8 +28605,8 @@ Defaulting to \`null\`.`);
 			const props = __props;
 			const emit = __emit;
 			const slots = (0, vue.useSlots)();
-			const hasSidebar = (0, vue.computed)(() => Boolean(slots.sidebar));
-			const hasAside = (0, vue.computed)(() => Boolean(slots.aside));
+			const hasSidebar = (0, vue.computed)(() => hasSlotContent(slots.sidebar));
+			const hasAside = (0, vue.computed)(() => hasSlotContent(slots.aside));
 			const rootRef = (0, vue.ref)(null);
 			const rootWidth = (0, vue.ref)(Number.POSITIVE_INFINITY);
 			function resolvePx(value, context) {
@@ -28674,7 +28734,8 @@ Defaulting to \`null\`.`);
 				"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 = (0, vue.computed)(() => {
 				const styles = {};
@@ -28697,26 +28758,26 @@ Defaulting to \`null\`.`);
 					style: (0, vue.normalizeStyle)(customStyles.value),
 					"data-scheme": __props.theme
 				}, [
-					_ctx.$slots.header ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("header", _hoisted_2$10, [(0, vue.renderSlot)(_ctx.$slots, "header", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
-					_ctx.$slots.subheader ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$7, [(0, vue.renderSlot)(_ctx.$slots, "subheader", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(hasSlotContent)(slots.header) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("header", _hoisted_2$10, [(0, vue.renderSlot)(_ctx.$slots, "header", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(hasSlotContent)(slots.subheader) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$7, [(0, vue.renderSlot)(_ctx.$slots, "subheader", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createElementVNode)("div", _hoisted_4$6, [
 						hasSidebar.value && !isSidebarDrawerActive.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("aside", _hoisted_5$4, [
-							_ctx.$slots["sidebar-header"] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6$3, [(0, vue.renderSlot)(_ctx.$slots, "sidebar-header", { isDrawer: false }, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+							(0, vue.unref)(hasSlotContent)(slots["sidebar-header"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6$3, [(0, vue.renderSlot)(_ctx.$slots, "sidebar-header", { isDrawer: false }, void 0, true)])) : (0, vue.createCommentVNode)("", true),
 							(0, vue.createElementVNode)("div", _hoisted_7$1, [(0, vue.renderSlot)(_ctx.$slots, "sidebar", { isDrawer: false }, void 0, true)]),
-							_ctx.$slots["sidebar-footer"] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_8, [(0, vue.renderSlot)(_ctx.$slots, "sidebar-footer", { isDrawer: false }, void 0, true)])) : (0, vue.createCommentVNode)("", true)
+							(0, vue.unref)(hasSlotContent)(slots["sidebar-footer"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_8, [(0, vue.renderSlot)(_ctx.$slots, "sidebar-footer", { isDrawer: false }, void 0, true)])) : (0, vue.createCommentVNode)("", true)
 						])) : (0, vue.createCommentVNode)("", true),
 						(0, vue.createElementVNode)("div", _hoisted_9, [
-							_ctx.$slots["main-header"] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_10, [(0, vue.renderSlot)(_ctx.$slots, "main-header", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+							(0, vue.unref)(hasSlotContent)(slots["main-header"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_10, [(0, vue.renderSlot)(_ctx.$slots, "main-header", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
 							(0, vue.createElementVNode)("main", _hoisted_11, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
-							_ctx.$slots["main-footer"] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_12, [(0, vue.renderSlot)(_ctx.$slots, "main-footer", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true)
+							(0, vue.unref)(hasSlotContent)(slots["main-footer"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_12, [(0, vue.renderSlot)(_ctx.$slots, "main-footer", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true)
 						]),
 						hasAside.value && !isAsideDrawerActive.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("aside", _hoisted_13, [
-							_ctx.$slots["aside-header"] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_14, [(0, vue.renderSlot)(_ctx.$slots, "aside-header", { isDrawer: false }, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+							(0, vue.unref)(hasSlotContent)(slots["aside-header"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_14, [(0, vue.renderSlot)(_ctx.$slots, "aside-header", { isDrawer: false }, void 0, true)])) : (0, vue.createCommentVNode)("", true),
 							(0, vue.createElementVNode)("div", _hoisted_15, [(0, vue.renderSlot)(_ctx.$slots, "aside", { isDrawer: false }, void 0, true)]),
-							_ctx.$slots["aside-footer"] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_16, [(0, vue.renderSlot)(_ctx.$slots, "aside-footer", { isDrawer: false }, void 0, true)])) : (0, vue.createCommentVNode)("", true)
+							(0, vue.unref)(hasSlotContent)(slots["aside-footer"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_16, [(0, vue.renderSlot)(_ctx.$slots, "aside-footer", { isDrawer: false }, void 0, true)])) : (0, vue.createCommentVNode)("", true)
 						])) : (0, vue.createCommentVNode)("", true)
 					]),
-					_ctx.$slots.footer ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("footer", _hoisted_17, [(0, vue.renderSlot)(_ctx.$slots, "footer", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(hasSlotContent)(slots.footer) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("footer", _hoisted_17, [(0, vue.renderSlot)(_ctx.$slots, "footer", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
 					hasSidebar.value && isSidebarDrawerActive.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, [(0, vue.createVNode)(vue.Transition, { name: "sk-page-drawer-backdrop" }, {
 						default: (0, vue.withCtx)(() => [(0, vue.unref)(sidebarDrawerOpen) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 							key: 0,
@@ -28737,9 +28798,9 @@ Defaulting to \`null\`.`);
 							tabindex: "-1",
 							onClick: onSidebarDrawerClick
 						}, [
-							_ctx.$slots["sidebar-header"] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_20, [(0, vue.renderSlot)(_ctx.$slots, "sidebar-header", { isDrawer: true }, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+							(0, vue.unref)(hasSlotContent)(slots["sidebar-header"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_20, [(0, vue.renderSlot)(_ctx.$slots, "sidebar-header", { isDrawer: true }, void 0, true)])) : (0, vue.createCommentVNode)("", true),
 							(0, vue.createElementVNode)("div", _hoisted_21, [(0, vue.renderSlot)(_ctx.$slots, "sidebar", { isDrawer: true }, void 0, true)]),
-							_ctx.$slots["sidebar-footer"] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_22, [(0, vue.renderSlot)(_ctx.$slots, "sidebar-footer", { isDrawer: true }, void 0, true)])) : (0, vue.createCommentVNode)("", true)
+							(0, vue.unref)(hasSlotContent)(slots["sidebar-footer"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_22, [(0, vue.renderSlot)(_ctx.$slots, "sidebar-footer", { isDrawer: true }, void 0, true)])) : (0, vue.createCommentVNode)("", true)
 						], 8, _hoisted_19)) : (0, vue.createCommentVNode)("", true)]),
 						_: 3
 					})], 64)) : (0, vue.createCommentVNode)("", true),
@@ -28763,16 +28824,16 @@ Defaulting to \`null\`.`);
 							tabindex: "-1",
 							onClick: onAsideDrawerClick
 						}, [
-							_ctx.$slots["aside-header"] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_25, [(0, vue.renderSlot)(_ctx.$slots, "aside-header", { isDrawer: true }, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+							(0, vue.unref)(hasSlotContent)(slots["aside-header"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_25, [(0, vue.renderSlot)(_ctx.$slots, "aside-header", { isDrawer: true }, void 0, true)])) : (0, vue.createCommentVNode)("", true),
 							(0, vue.createElementVNode)("div", _hoisted_26, [(0, vue.renderSlot)(_ctx.$slots, "aside", { isDrawer: true }, void 0, true)]),
-							_ctx.$slots["aside-footer"] ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_27, [(0, vue.renderSlot)(_ctx.$slots, "aside-footer", { isDrawer: true }, void 0, true)])) : (0, vue.createCommentVNode)("", true)
+							(0, vue.unref)(hasSlotContent)(slots["aside-footer"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_27, [(0, vue.renderSlot)(_ctx.$slots, "aside-footer", { isDrawer: true }, void 0, true)])) : (0, vue.createCommentVNode)("", true)
 						], 8, _hoisted_24)) : (0, vue.createCommentVNode)("", true)]),
 						_: 3
 					})], 64)) : (0, vue.createCommentVNode)("", true)
 				], 14, _hoisted_1$18);
 			};
 		}
-	}), [["__scopeId", "data-v-f502bb9d"]]);
+	}), [["__scopeId", "data-v-2b46217a"]]);
 	//#endregion
 	//#region src/components/Page/SkPageSidebarToggle.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$17 = {
@@ -28998,7 +29059,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: { default: void 0 },
-			textColor: { default: void 0 }
+			textColor: { default: void 0 },
+			borderColor: {}
 		},
 		emits: ["update:modelValue"],
 		setup(__props, { emit: __emit }) {
@@ -29150,7 +29212,8 @@ Defaulting to \`null\`.`);
 				default: void 0
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:open"],
 		setup(__props, { emit: __emit }) {
@@ -29198,6 +29261,7 @@ Defaulting to \`null\`.`);
 				set: (value) => emit("update:open", value ?? false)
 			});
 			const { theme } = usePortalContext();
+			const slots = (0, vue.useSlots)();
 			const contentClasses = (0, vue.computed)(() => ({
 				"sk-popover-content": true,
 				[`sk-${props.kind}`]: true
@@ -29222,7 +29286,7 @@ Defaulting to \`null\`.`);
 							"collision-padding": 8
 						}, {
 							default: (0, vue.withCtx)(() => [
-								__props.title || _ctx.$slots.header ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$15, [
+								__props.title || (0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).header) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$15, [
 									__props.title ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("h3", _hoisted_2$7, (0, vue.toDisplayString)(__props.title), 1)) : (0, vue.createCommentVNode)("", true),
 									(0, vue.renderSlot)(_ctx.$slots, "header", {}, void 0, true),
 									__props.closable ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(PopoverClose_default), {
@@ -29254,8 +29318,8 @@ Defaulting to \`null\`.`);
 										_: 1
 									})) : (0, vue.createCommentVNode)("", true)
 								])) : (0, vue.createCommentVNode)("", true),
-								_ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$5, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
-								_ctx.$slots.footer ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$4, [(0, vue.renderSlot)(_ctx.$slots, "footer", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+								(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).default) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$5, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
+								(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).footer) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$4, [(0, vue.renderSlot)(_ctx.$slots, "footer", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
 								__props.showArrow ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(PopoverArrow_default), {
 									key: 3,
 									class: "sk-popover-arrow"
@@ -29276,7 +29340,7 @@ Defaulting to \`null\`.`);
 				}, 8, ["open"]);
 			};
 		}
-	}), [["__scopeId", "data-v-679c4935"]]);
+	}), [["__scopeId", "data-v-401ea442"]]);
 	//#endregion
 	//#region src/components/Progress/SkProgress.vue
 	var SkProgress_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ (0, vue.defineComponent)({
@@ -29394,7 +29458,8 @@ Defaulting to \`null\`.`);
 			kind: { default: void 0 },
 			size: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -29416,6 +29481,7 @@ Defaulting to \`null\`.`);
 			*                 formatting, icons, or complex layouts alongside the radio button.
 			*/
 			const props = __props;
+			const slots = (0, vue.useSlots)();
 			const parentKind = (0, vue.inject)("radio-kind", (0, vue.computed)(() => void 0));
 			const parentSize = (0, vue.inject)("radio-size", (0, vue.computed)(() => void 0));
 			const effectiveKind = (0, vue.computed)(() => props.kind ?? parentKind.value ?? "neutral");
@@ -29444,10 +29510,10 @@ Defaulting to \`null\`.`);
 					"style",
 					"value",
 					"disabled"
-				]), __props.label || _ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$14, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)], true)])) : (0, vue.createCommentVNode)("", true)], 2);
+				]), __props.label || (0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).default) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$14, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)], true)])) : (0, vue.createCommentVNode)("", true)], 2);
 			};
 		}
-	}), [["__scopeId", "data-v-c88f9c3f"]]);
+	}), [["__scopeId", "data-v-dcd86f1e"]]);
 	//#endregion
 	//#region src/components/Radio/SkRadioGroup.vue
 	var SkRadioGroup_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ (0, vue.defineComponent)({
@@ -29553,17 +29619,69 @@ Defaulting to \`null\`.`);
 				[`sk-${props.orientation}`]: true,
 				"sk-fade": props.fade
 			}));
+			const viewportRef = (0, vue.ref)(null);
+			const fadeTop = (0, vue.ref)(0);
+			const fadeBottom = (0, vue.ref)(0);
+			const fadeLeft = (0, vue.ref)(0);
+			const fadeRight = (0, vue.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();
+				});
+			}
+			(0, vue.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();
+			});
+			(0, vue.onBeforeUnmount)(() => {
+				if (scrollEl) scrollEl.removeEventListener("scroll", scheduleUpdate);
+				resizeObs?.disconnect();
+				if (rafID !== null) cancelAnimationFrame(rafID);
+			});
+			const rootStyles = (0, vue.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 (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScrollAreaRoot_default), {
 					type: __props.type,
 					class: (0, vue.normalizeClass)(classes.value),
-					style: (0, vue.normalizeStyle)((0, vue.unref)(customColorStyles))
+					style: (0, vue.normalizeStyle)(rootStyles.value)
 				}, {
 					default: (0, vue.withCtx)(() => [
-						(0, vue.createVNode)((0, vue.unref)(ScrollAreaViewport_default), { class: "sk-scroll-area-viewport" }, {
+						(0, vue.createVNode)((0, vue.unref)(ScrollAreaViewport_default), {
+							ref_key: "viewportRef",
+							ref: viewportRef,
+							class: "sk-scroll-area-viewport"
+						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
 							_: 3
-						}),
+						}, 512),
 						__props.orientation !== "horizontal" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScrollAreaScrollbar_default), {
 							key: 0,
 							class: "sk-scroll-area-scrollbar",
@@ -29593,7 +29711,7 @@ Defaulting to \`null\`.`);
 				]);
 			};
 		}
-	}), [["__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 = {
@@ -29623,7 +29741,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": {},
 			"modelModifiers": {}
@@ -29848,7 +29967,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -30419,7 +30539,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:modelValue"],
 		setup(__props) {
@@ -30456,7 +30577,7 @@ Defaulting to \`null\`.`);
 				};
 			});
 			const showLabel = (0, vue.computed)(() => {
-				return Boolean(slots.default || props.labelOn || props.labelOff || slots["label-on"] || slots["label-off"] || props.label);
+				return hasSlotContent(slots.default) || Boolean(props.labelOn) || Boolean(props.labelOff) || hasSlotContent(slots["label-on"]) || hasSlotContent(slots["label-off"]) || Boolean(props.label);
 			});
 			const useOnOffLabels = (0, vue.computed)(() => {
 				return Boolean(props.labelOn || props.labelOff || slots["label-on"] || slots["label-off"]);
@@ -30489,14 +30610,14 @@ Defaulting to \`null\`.`);
 					"required",
 					"class",
 					"style"
-				]), showLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", _hoisted_2$3, [(0, vue.unref)(slots).default ? (0, vue.renderSlot)(_ctx.$slots, "default", { key: 0 }) : useOnOffLabels.value && !__props.disableLabelAnimation ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, {
+				]), showLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", _hoisted_2$3, [(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).default) ? (0, vue.renderSlot)(_ctx.$slots, "default", { key: 0 }) : useOnOffLabels.value && !__props.disableLabelAnimation ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, {
 					key: 1,
 					name: "sk-switch-label-fade",
 					mode: "out-in"
 				}, {
-					default: (0, vue.withCtx)(() => [__props.modelValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$3, [(0, vue.unref)(slots)["label-on"] ? (0, vue.renderSlot)(_ctx.$slots, "label-on", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(labelOn.value), 1)], 64))])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$3, [(0, vue.unref)(slots)["label-off"] ? (0, vue.renderSlot)(_ctx.$slots, "label-off", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(labelOff.value), 1)], 64))]))]),
+					default: (0, vue.withCtx)(() => [__props.modelValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$3, [(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots)["label-on"]) ? (0, vue.renderSlot)(_ctx.$slots, "label-on", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(labelOn.value), 1)], 64))])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$3, [(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots)["label-off"]) ? (0, vue.renderSlot)(_ctx.$slots, "label-off", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(labelOff.value), 1)], 64))]))]),
 					_: 3
-				})) : useOnOffLabels.value && __props.disableLabelAnimation ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [__props.modelValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$2, [(0, vue.unref)(slots)["label-on"] ? (0, vue.renderSlot)(_ctx.$slots, "label-on", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(labelOn.value), 1)], 64))])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$1, [(0, vue.unref)(slots)["label-off"] ? (0, vue.renderSlot)(_ctx.$slots, "label-off", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(labelOff.value), 1)], 64))]))], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)], 64))])) : (0, vue.createCommentVNode)("", true)]);
+				})) : useOnOffLabels.value && __props.disableLabelAnimation ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [__props.modelValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$2, [(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots)["label-on"]) ? (0, vue.renderSlot)(_ctx.$slots, "label-on", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(labelOn.value), 1)], 64))])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$1, [(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots)["label-off"]) ? (0, vue.renderSlot)(_ctx.$slots, "label-off", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(labelOff.value), 1)], 64))]))], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)], 64))])) : (0, vue.createCommentVNode)("", true)]);
 			};
 		}
 	});
@@ -30532,7 +30653,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -30635,6 +30757,7 @@ Defaulting to \`null\`.`);
 			* @slot icon - Optional icon displayed before the tab label. Useful for visual indicators.
 			*/
 			const props = __props;
+			const slots = (0, vue.useSlots)();
 			const parentKind = (0, vue.inject)("tabs-kind", (0, vue.computed)(() => void 0));
 			const kind = (0, vue.computed)(() => props.kind ?? parentKind.value);
 			const classes = (0, vue.computed)(() => {
@@ -30650,7 +30773,7 @@ Defaulting to \`null\`.`);
 					disabled: __props.disabled,
 					class: (0, vue.normalizeClass)(classes.value)
 				}, {
-					default: (0, vue.withCtx)(() => [_ctx.$slots.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$7, [(0, vue.renderSlot)(_ctx.$slots, "icon")])) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("span", _hoisted_2$2, [(0, vue.createElementVNode)("span", _hoisted_3$2, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)])]), (0, vue.createElementVNode)("span", _hoisted_4$2, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)])])])]),
+					default: (0, vue.withCtx)(() => [(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).icon) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$7, [(0, vue.renderSlot)(_ctx.$slots, "icon")])) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("span", _hoisted_2$2, [(0, vue.createElementVNode)("span", _hoisted_3$2, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)])]), (0, vue.createElementVNode)("span", _hoisted_4$2, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)])])])]),
 					_: 3
 				}, 8, [
 					"value",
@@ -30799,7 +30922,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:modelValue"],
 		setup(__props) {
@@ -30874,7 +30998,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["remove"],
 		setup(__props, { emit: __emit }) {
@@ -30980,7 +31105,8 @@ Defaulting to \`null\`.`);
 			tagKind: { default: void 0 },
 			tagVariant: { default: "solid" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": { default: () => [] },
 			"modelModifiers": {}
@@ -31123,7 +31249,8 @@ Defaulting to \`null\`.`);
 			rows: { default: 4 },
 			autocomplete: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": { default: "" },
 			"modelModifiers": {}
@@ -31680,7 +31807,8 @@ Defaulting to \`null\`.`);
 				default: true
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -31896,6 +32024,7 @@ Defaulting to \`null\`.`);
 			}
 		},
 		setup(__props) {
+			const slots = (0, vue.useSlots)();
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(TreeItem_default), (0, vue.mergeProps)({ class: "sk-tree-item" }, __props.item.bind, {
 					value: __props.item.value,
@@ -31912,7 +32041,7 @@ Defaulting to \`null\`.`);
 							key: 0,
 							class: (0, vue.normalizeClass)(["sk-tree-item-chevron", { "sk-expanded": isExpanded }])
 						}, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("polyline", { points: "9 6 15 12 9 18" }, null, -1)])]))], 2)) : __props.showChevron ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2)) : (0, vue.createCommentVNode)("", true),
-						_ctx.$slots.leading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3, [(0, vue.renderSlot)(_ctx.$slots, "leading", {
+						(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).leading) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3, [(0, vue.renderSlot)(_ctx.$slots, "leading", {
 							isExpanded,
 							isSelected
 						}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
@@ -31922,7 +32051,7 @@ Defaulting to \`null\`.`);
 							hasChildren: __props.item.hasChildren,
 							level: __props.item.level
 						}, void 0, true)]),
-						_ctx.$slots.trailing ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5, [(0, vue.renderSlot)(_ctx.$slots, "trailing", {
+						(0, vue.unref)(hasSlotContent)((0, vue.unref)(slots).trailing) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5, [(0, vue.renderSlot)(_ctx.$slots, "trailing", {
 							isExpanded,
 							isSelected
 						}, void 0, true)])) : (0, vue.createCommentVNode)("", true)
@@ -31937,7 +32066,7 @@ Defaulting to \`null\`.`);
 				]);
 			};
 		}
-	}), [["__scopeId", "data-v-ba341490"]]);
+	}), [["__scopeId", "data-v-adb75a1a"]]);
 	//#endregion
 	//#region src/components/TreeView/SkTreeView.vue
 	var SkTreeView_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ (0, vue.defineComponent)({
@@ -31962,6 +32091,7 @@ Defaulting to \`null\`.`);
 		emits: ["update:modelValue"],
 		setup(__props) {
 			const props = __props;
+			const rekaModelValue = (0, vue.computed)(() => props.modelValue);
 			function getAllKeys(items) {
 				const keys = [];
 				for (const item of items) {
@@ -31984,7 +32114,7 @@ Defaulting to \`null\`.`);
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.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,
@@ -32006,7 +32136,7 @@ Defaulting to \`null\`.`);
 				]);
 			};
 		}
-	}), [["__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"];