@skewedaspect/sleekspace-ui 0.8.1 → 0.9.1

package/dist/sleekspace-ui.es.js

@@ -1,5 +1,5 @@
 import * as vue from "vue";
-import { Comment, Fragment, Teleport, Transition, camelize, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, customRef, defineComponent, effectScope, getCurrentInstance, getCurrentScope, guardReactiveProps, h, inject, isRef, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, onUpdated, openBlock, provide, reactive, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowReadonly, shallowRef, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, triggerRef, unref, useCssVars, useModel, useSlots, useTemplateRef, vModelDynamic, vModelText, watch, watchEffect, watchPostEffect, watchSyncEffect, withCtx, withDirectives, withKeys, withMemo, withModifiers } from "vue";
+import { Comment, Fragment, Teleport, Text, Transition, camelize, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, customRef, defineComponent, effectScope, getCurrentInstance, getCurrentScope, guardReactiveProps, h, inject, isRef, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, onUpdated, openBlock, provide, reactive, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowReadonly, shallowRef, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, triggerRef, unref, useCssVars, useModel, useSlots, useTemplateRef, vModelDynamic, vModelText, watch, watchEffect, watchPostEffect, watchSyncEffect, withCtx, withDirectives, withKeys, withMemo, withModifiers } from "vue";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -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
-* ```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 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 }) {
@@ -22234,6 +22233,31 @@ var SkAccordionItem_default = /* @__PURE__ */ _plugin_vue_export_helper_default(
 	}
 }), [["__scopeId", "data-v-5e73d91f"]]);
 //#endregion
+//#region src/utils/slots.ts
+function hasRenderableContent(vnodes) {
+	return vnodes.some((vnode) => {
+		if (vnode.type === Comment) return false;
+		if (vnode.type === Text) return typeof vnode.children === "string" && vnode.children.trim().length > 0;
+		if (vnode.type === 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 === Comment) return [];
+		if (vnode.type === Text) {
+			if (typeof vnode.children === "string" && vnode.children.trim().length > 0) return [vnode];
+			return [];
+		}
+		if (vnode.type === 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,
@@ -22283,7 +22307,8 @@ var SkAlert_default = /* @__PURE__ */ defineComponent({
 			default: void 0
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -22324,9 +22349,7 @@ var SkAlert_default = /* @__PURE__ */ defineComponent({
 		});
 		const shouldShowIcon = 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", toRef(() => props.baseColor), toRef(() => props.textColor));
 		return (_ctx, _cache) => {
@@ -22843,7 +22866,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) {
 		/**
@@ -22874,9 +22898,7 @@ var SkBreadcrumbs_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 		}));
 		const processedItems = 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 openBlock(), createElementBlock("nav", {
@@ -22888,7 +22910,7 @@ var SkBreadcrumbs_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 			}), 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" };
@@ -22941,7 +22963,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) {
 		/**
@@ -22970,7 +22993,7 @@ var SkButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__P
 			else return "button";
 		});
 		const classes = computed(() => {
-			const isIconOnly = !!(slots.icon && !slots.default);
+			const isIconOnly = hasSlotContent(slots.icon) && !hasSlotContent(slots.default);
 			return {
 				"sk-button": true,
 				[`sk-${props.kind}`]: true,
@@ -22999,10 +23022,10 @@ var SkButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__P
 					"sk-button-content": true,
 					"loading": __props.loading
 				}) }, [
-					_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_3$14, [renderSlot(_ctx.$slots, "leading", {}, void 0, true)])) : createCommentVNode("", true),
-					_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_4$10, [renderSlot(_ctx.$slots, "icon", {}, void 0, true)])) : createCommentVNode("", true),
-					_ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_5$8, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true),
-					_ctx.$slots.trailing ? (openBlock(), createElementBlock("span", _hoisted_6$5, [renderSlot(_ctx.$slots, "trailing", {}, void 0, true)])) : createCommentVNode("", true)
+					unref(hasSlotContent)(unref(slots).leading) ? (openBlock(), createElementBlock("span", _hoisted_3$14, [renderSlot(_ctx.$slots, "leading", {}, void 0, true)])) : createCommentVNode("", true),
+					unref(hasSlotContent)(unref(slots).icon) ? (openBlock(), createElementBlock("span", _hoisted_4$10, [renderSlot(_ctx.$slots, "icon", {}, void 0, true)])) : createCommentVNode("", true),
+					unref(hasSlotContent)(unref(slots).default) ? (openBlock(), createElementBlock("span", _hoisted_5$8, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true),
+					unref(hasSlotContent)(unref(slots).trailing) ? (openBlock(), createElementBlock("span", _hoisted_6$5, [renderSlot(_ctx.$slots, "trailing", {}, void 0, true)])) : createCommentVNode("", true)
 				], 2)])]),
 				_: 3
 			}, 8, [
@@ -23017,7 +23040,7 @@ var SkButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__P
 			]);
 		};
 	}
-}), [["__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__ */ defineComponent({
@@ -23036,10 +23059,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 +23093,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 +23106,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 +23149,8 @@ var SkCard_default = /* @__PURE__ */ defineComponent({
 		corners: { default: () => ["bottom-right"] },
 		decorationCorner: { default: "bottom-right" },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -23156,6 +23181,7 @@ var SkCard_default = /* @__PURE__ */ defineComponent({
 		*                appropriate spacing.
 		*/
 		const props = __props;
+		const slots = useSlots();
 		const classes = computed(() => {
 			return { "sk-card": true };
 		});
@@ -23184,22 +23210,23 @@ 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)
 			}, {
 				default: withCtx(() => [
-					__props.title || _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+					__props.title || unref(hasSlotContent)(unref(slots).header) ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						class: "sk-card-header",
 						style: normalizeStyle(headerStyles.value)
 					}, [__props.title ? (openBlock(), createElementBlock("h3", _hoisted_1$33, toDisplayString(__props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "header")], 4)) : createCommentVNode("", true),
-					_ctx.$slots.media ? (openBlock(), createElementBlock("div", _hoisted_2$17, [renderSlot(_ctx.$slots, "media")])) : createCommentVNode("", true),
-					_ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+					unref(hasSlotContent)(unref(slots).media) ? (openBlock(), createElementBlock("div", _hoisted_2$17, [renderSlot(_ctx.$slots, "media")])) : createCommentVNode("", true),
+					unref(hasSlotContent)(unref(slots).default) ? (openBlock(), createElementBlock("div", {
 						key: 2,
 						class: normalizeClass(contentClasses.value)
 					}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
-					_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_3$13, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
+					unref(hasSlotContent)(unref(slots).footer) ? (openBlock(), createElementBlock("div", _hoisted_3$13, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
 				]),
 				_: 3
 			}, 8, [
@@ -23209,6 +23236,7 @@ var SkCard_default = /* @__PURE__ */ defineComponent({
 				"no-border",
 				"base-color",
 				"text-color",
+				"border-color",
 				"corners",
 				"decoration-corner",
 				"class"
@@ -23261,7 +23289,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],
@@ -23293,6 +23322,7 @@ var SkCheckbox_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 		* @default false
 		*/
 		const checked = useModel(__props, "modelValue");
+		const slots = useSlots();
 		const classes = computed(() => ({
 			"sk-checkbox": true,
 			[`sk-${props.kind}`]: true,
@@ -23330,10 +23360,10 @@ var SkCheckbox_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 				"disabled",
 				"required",
 				"name"
-			]), __props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3$12, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)], true)])) : createCommentVNode("", true)], 2);
+			]), __props.label || unref(hasSlotContent)(unref(slots).default) ? (openBlock(), createElementBlock("span", _hoisted_3$12, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)], true)])) : 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" };
@@ -23357,7 +23387,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 +26581,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 +26706,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 +27004,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 +27033,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 +27063,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 +27082,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 +27116,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 +27554,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 +27637,8 @@ var SkListbox_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -27823,7 +27869,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 }) {
@@ -27860,6 +27907,7 @@ var SkModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 		const props = __props;
 		const emit = __emit;
 		const { theme } = usePortalContext();
+		const slots = useSlots();
 		const isOpen = ref(props.open);
 		watch(() => props.open, (newValue) => {
 			isOpen.value = newValue;
@@ -27899,7 +27947,7 @@ var SkModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 				open: isOpen.value,
 				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => isOpen.value = $event)
 			}, {
-				default: withCtx(() => [_ctx.$slots.trigger || __props.triggerText ? (openBlock(), createBlock(unref(DialogTrigger_default), {
+				default: withCtx(() => [unref(hasSlotContent)(unref(slots).trigger) || __props.triggerText ? (openBlock(), createBlock(unref(DialogTrigger_default), {
 					key: 0,
 					"as-child": ""
 				}, {
@@ -27921,7 +27969,7 @@ var SkModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 						onInteractOutside: handleOverlayClick
 					}, {
 						default: withCtx(() => [
-							_ctx.$slots.title || __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$21, [createVNode(unref(DialogTitle_default), { class: "sk-modal-title" }, {
+							unref(hasSlotContent)(unref(slots).title) || __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$21, [createVNode(unref(DialogTitle_default), { class: "sk-modal-title" }, {
 								default: withCtx(() => [renderSlot(_ctx.$slots, "title", { close }, () => [createTextVNode(toDisplayString(__props.title), 1)], true)]),
 								_: 3
 							}), createVNode(unref(DialogClose_default), { "as-child": "" }, {
@@ -27944,7 +27992,7 @@ var SkModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 								_: 1
 							})])) : createCommentVNode("", true),
 							createElementVNode("div", _hoisted_2$12, [renderSlot(_ctx.$slots, "default", { close }, void 0, true)]),
-							_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_3$9, [renderSlot(_ctx.$slots, "footer", { close }, void 0, true)])) : createCommentVNode("", true)
+							unref(hasSlotContent)(unref(slots).footer) ? (openBlock(), createElementBlock("div", _hoisted_3$9, [renderSlot(_ctx.$slots, "footer", { close }, void 0, true)])) : createCommentVNode("", true)
 						]),
 						_: 3
 					}, 8, [
@@ -27958,10 +28006,7 @@ var SkModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 			}, 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" };
@@ -27991,8 +28036,10 @@ var SkNavBar_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: true
 		},
+		size: { default: "md" },
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -28027,6 +28074,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 {
@@ -28041,17 +28089,20 @@ var SkNavBar_default = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(classes.value),
 				style: normalizeStyle(unref(customColorStyles))
 			}, [createElementVNode("div", _hoisted_1$20, [
-				unref(slots).leading ? (openBlock(), createElementBlock("div", _hoisted_2$11, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
-				unref(slots).brand ? (openBlock(), createElementBlock("div", _hoisted_3$8, [renderSlot(_ctx.$slots, "brand")])) : createCommentVNode("", true),
-				unref(slots).default ? (openBlock(), createElementBlock("div", _hoisted_4$7, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true),
-				unref(slots).actions ? (openBlock(), createElementBlock("div", _hoisted_5$5, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)
+				unref(hasSlotContent)(unref(slots).leading) ? (openBlock(), createElementBlock("div", _hoisted_2$11, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
+				unref(hasSlotContent)(unref(slots).brand) ? (openBlock(), createElementBlock("div", _hoisted_3$8, [renderSlot(_ctx.$slots, "brand")])) : createCommentVNode("", true),
+				unref(hasSlotContent)(unref(slots).default) ? (openBlock(), createElementBlock("div", _hoisted_4$7, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true),
+				unref(hasSlotContent)(unref(slots).actions) ? (openBlock(), createElementBlock("div", _hoisted_5$5, [renderSlot(_ctx.$slots, "actions")])) : 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__ */ defineComponent({
@@ -28076,8 +28127,13 @@ var SkNumberInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 		min: { default: void 0 },
 		max: { default: void 0 },
 		step: { default: 1 },
+		showSteppers: {
+			type: Boolean,
+			default: true
+		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": { default: 0 },
 		"modelModifiers": {}
@@ -28133,7 +28189,7 @@ var SkNumberInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 				default: withCtx(() => [createVNode(unref(NumberFieldInput_default), {
 					class: normalizeClass(inputClasses.value),
 					placeholder: __props.placeholder
-				}, null, 8, ["class", "placeholder"]), createElementVNode("div", _hoisted_1$19, [createVNode(unref(NumberFieldIncrement_default), { class: "sk-number-input-increment" }, {
+				}, null, 8, ["class", "placeholder"]), __props.showSteppers ? (openBlock(), createElementBlock("div", _hoisted_1$19, [createVNode(unref(NumberFieldIncrement_default), { class: "sk-number-input-increment" }, {
 					default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						viewBox: "0 0 24 24",
@@ -28155,7 +28211,7 @@ var SkNumberInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 						"stroke-linejoin": "miter"
 					}, [createElementVNode("polyline", { points: "18 9 12 15 6 9" })], -1)])]),
 					_: 1
-				})])]),
+				})])) : createCommentVNode("", true)]),
 				_: 1
 			}, 8, [
 				"modelValue",
@@ -28171,7 +28227,7 @@ var SkNumberInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 			])], 2);
 		};
 	}
-}), [["__scopeId", "data-v-b589687f"]]);
+}), [["__scopeId", "data-v-413329cd"]]);
 //#endregion
 //#region src/components/Theme/useTheme.ts
 var ThemeSymbol = Symbol("SkTheme");
@@ -28478,6 +28534,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"],
@@ -28529,8 +28589,8 @@ var SkPage_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PUR
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const hasSidebar = computed(() => Boolean(slots.sidebar));
-		const hasAside = computed(() => Boolean(slots.aside));
+		const hasSidebar = computed(() => hasSlotContent(slots.sidebar));
+		const hasAside = computed(() => hasSlotContent(slots.aside));
 		const rootRef = ref(null);
 		const rootWidth = ref(Number.POSITIVE_INFINITY);
 		function resolvePx(value, context) {
@@ -28658,7 +28718,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 = {};
@@ -28681,26 +28742,26 @@ var SkPage_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PUR
 				style: normalizeStyle(customStyles.value),
 				"data-scheme": __props.theme
 			}, [
-				_ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$10, [renderSlot(_ctx.$slots, "header", {}, void 0, true)])) : createCommentVNode("", true),
-				_ctx.$slots.subheader ? (openBlock(), createElementBlock("div", _hoisted_3$7, [renderSlot(_ctx.$slots, "subheader", {}, void 0, true)])) : createCommentVNode("", true),
+				unref(hasSlotContent)(slots.header) ? (openBlock(), createElementBlock("header", _hoisted_2$10, [renderSlot(_ctx.$slots, "header", {}, void 0, true)])) : createCommentVNode("", true),
+				unref(hasSlotContent)(slots.subheader) ? (openBlock(), createElementBlock("div", _hoisted_3$7, [renderSlot(_ctx.$slots, "subheader", {}, void 0, true)])) : createCommentVNode("", true),
 				createElementVNode("div", _hoisted_4$6, [
 					hasSidebar.value && !isSidebarDrawerActive.value ? (openBlock(), createElementBlock("aside", _hoisted_5$4, [
-						_ctx.$slots["sidebar-header"] ? (openBlock(), createElementBlock("div", _hoisted_6$3, [renderSlot(_ctx.$slots, "sidebar-header", { isDrawer: false }, void 0, true)])) : createCommentVNode("", true),
+						unref(hasSlotContent)(slots["sidebar-header"]) ? (openBlock(), createElementBlock("div", _hoisted_6$3, [renderSlot(_ctx.$slots, "sidebar-header", { isDrawer: false }, void 0, true)])) : createCommentVNode("", true),
 						createElementVNode("div", _hoisted_7$1, [renderSlot(_ctx.$slots, "sidebar", { isDrawer: false }, void 0, true)]),
-						_ctx.$slots["sidebar-footer"] ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "sidebar-footer", { isDrawer: false }, void 0, true)])) : createCommentVNode("", true)
+						unref(hasSlotContent)(slots["sidebar-footer"]) ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "sidebar-footer", { isDrawer: false }, void 0, true)])) : createCommentVNode("", true)
 					])) : createCommentVNode("", true),
 					createElementVNode("div", _hoisted_9, [
-						_ctx.$slots["main-header"] ? (openBlock(), createElementBlock("div", _hoisted_10, [renderSlot(_ctx.$slots, "main-header", {}, void 0, true)])) : createCommentVNode("", true),
+						unref(hasSlotContent)(slots["main-header"]) ? (openBlock(), createElementBlock("div", _hoisted_10, [renderSlot(_ctx.$slots, "main-header", {}, void 0, true)])) : createCommentVNode("", true),
 						createElementVNode("main", _hoisted_11, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
-						_ctx.$slots["main-footer"] ? (openBlock(), createElementBlock("div", _hoisted_12, [renderSlot(_ctx.$slots, "main-footer", {}, void 0, true)])) : createCommentVNode("", true)
+						unref(hasSlotContent)(slots["main-footer"]) ? (openBlock(), createElementBlock("div", _hoisted_12, [renderSlot(_ctx.$slots, "main-footer", {}, void 0, true)])) : createCommentVNode("", true)
 					]),
 					hasAside.value && !isAsideDrawerActive.value ? (openBlock(), createElementBlock("aside", _hoisted_13, [
-						_ctx.$slots["aside-header"] ? (openBlock(), createElementBlock("div", _hoisted_14, [renderSlot(_ctx.$slots, "aside-header", { isDrawer: false }, void 0, true)])) : createCommentVNode("", true),
+						unref(hasSlotContent)(slots["aside-header"]) ? (openBlock(), createElementBlock("div", _hoisted_14, [renderSlot(_ctx.$slots, "aside-header", { isDrawer: false }, void 0, true)])) : createCommentVNode("", true),
 						createElementVNode("div", _hoisted_15, [renderSlot(_ctx.$slots, "aside", { isDrawer: false }, void 0, true)]),
-						_ctx.$slots["aside-footer"] ? (openBlock(), createElementBlock("div", _hoisted_16, [renderSlot(_ctx.$slots, "aside-footer", { isDrawer: false }, void 0, true)])) : createCommentVNode("", true)
+						unref(hasSlotContent)(slots["aside-footer"]) ? (openBlock(), createElementBlock("div", _hoisted_16, [renderSlot(_ctx.$slots, "aside-footer", { isDrawer: false }, void 0, true)])) : createCommentVNode("", true)
 					])) : createCommentVNode("", true)
 				]),
-				_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_17, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)])) : createCommentVNode("", true),
+				unref(hasSlotContent)(slots.footer) ? (openBlock(), createElementBlock("footer", _hoisted_17, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)])) : createCommentVNode("", true),
 				hasSidebar.value && isSidebarDrawerActive.value ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createVNode(Transition, { name: "sk-page-drawer-backdrop" }, {
 					default: withCtx(() => [unref(sidebarDrawerOpen) ? (openBlock(), createElementBlock("div", {
 						key: 0,
@@ -28721,9 +28782,9 @@ var SkPage_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PUR
 						tabindex: "-1",
 						onClick: onSidebarDrawerClick
 					}, [
-						_ctx.$slots["sidebar-header"] ? (openBlock(), createElementBlock("div", _hoisted_20, [renderSlot(_ctx.$slots, "sidebar-header", { isDrawer: true }, void 0, true)])) : createCommentVNode("", true),
+						unref(hasSlotContent)(slots["sidebar-header"]) ? (openBlock(), createElementBlock("div", _hoisted_20, [renderSlot(_ctx.$slots, "sidebar-header", { isDrawer: true }, void 0, true)])) : createCommentVNode("", true),
 						createElementVNode("div", _hoisted_21, [renderSlot(_ctx.$slots, "sidebar", { isDrawer: true }, void 0, true)]),
-						_ctx.$slots["sidebar-footer"] ? (openBlock(), createElementBlock("div", _hoisted_22, [renderSlot(_ctx.$slots, "sidebar-footer", { isDrawer: true }, void 0, true)])) : createCommentVNode("", true)
+						unref(hasSlotContent)(slots["sidebar-footer"]) ? (openBlock(), createElementBlock("div", _hoisted_22, [renderSlot(_ctx.$slots, "sidebar-footer", { isDrawer: true }, void 0, true)])) : createCommentVNode("", true)
 					], 8, _hoisted_19)) : createCommentVNode("", true)]),
 					_: 3
 				})], 64)) : createCommentVNode("", true),
@@ -28747,16 +28808,16 @@ var SkPage_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PUR
 						tabindex: "-1",
 						onClick: onAsideDrawerClick
 					}, [
-						_ctx.$slots["aside-header"] ? (openBlock(), createElementBlock("div", _hoisted_25, [renderSlot(_ctx.$slots, "aside-header", { isDrawer: true }, void 0, true)])) : createCommentVNode("", true),
+						unref(hasSlotContent)(slots["aside-header"]) ? (openBlock(), createElementBlock("div", _hoisted_25, [renderSlot(_ctx.$slots, "aside-header", { isDrawer: true }, void 0, true)])) : createCommentVNode("", true),
 						createElementVNode("div", _hoisted_26, [renderSlot(_ctx.$slots, "aside", { isDrawer: true }, void 0, true)]),
-						_ctx.$slots["aside-footer"] ? (openBlock(), createElementBlock("div", _hoisted_27, [renderSlot(_ctx.$slots, "aside-footer", { isDrawer: true }, void 0, true)])) : createCommentVNode("", true)
+						unref(hasSlotContent)(slots["aside-footer"]) ? (openBlock(), createElementBlock("div", _hoisted_27, [renderSlot(_ctx.$slots, "aside-footer", { isDrawer: true }, void 0, true)])) : createCommentVNode("", true)
 					], 8, _hoisted_24)) : createCommentVNode("", true)]),
 					_: 3
 				})], 64)) : 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 = {
@@ -28982,7 +29043,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 +29196,8 @@ var SkPopover_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 			default: void 0
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
@@ -29182,6 +29245,7 @@ var SkPopover_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 			set: (value) => emit("update:open", value ?? false)
 		});
 		const { theme } = usePortalContext();
+		const slots = useSlots();
 		const contentClasses = computed(() => ({
 			"sk-popover-content": true,
 			[`sk-${props.kind}`]: true
@@ -29206,7 +29270,7 @@ var SkPopover_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 						"collision-padding": 8
 					}, {
 						default: withCtx(() => [
-							__props.title || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1$15, [
+							__props.title || unref(hasSlotContent)(unref(slots).header) ? (openBlock(), createElementBlock("div", _hoisted_1$15, [
 								__props.title ? (openBlock(), createElementBlock("h3", _hoisted_2$7, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
 								renderSlot(_ctx.$slots, "header", {}, void 0, true),
 								__props.closable ? (openBlock(), createBlock(unref(PopoverClose_default), {
@@ -29238,8 +29302,8 @@ var SkPopover_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 									_: 1
 								})) : createCommentVNode("", true)
 							])) : createCommentVNode("", true),
-							_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_3$5, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true),
-							_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4$4, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)])) : createCommentVNode("", true),
+							unref(hasSlotContent)(unref(slots).default) ? (openBlock(), createElementBlock("div", _hoisted_3$5, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true),
+							unref(hasSlotContent)(unref(slots).footer) ? (openBlock(), createElementBlock("div", _hoisted_4$4, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)])) : createCommentVNode("", true),
 							__props.showArrow ? (openBlock(), createBlock(unref(PopoverArrow_default), {
 								key: 3,
 								class: "sk-popover-arrow"
@@ -29260,7 +29324,7 @@ var SkPopover_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 			}, 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__ */ defineComponent({
@@ -29378,7 +29442,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) {
 		/**
@@ -29400,6 +29465,7 @@ var SkRadio_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 		*                 formatting, icons, or complex layouts alongside the radio button.
 		*/
 		const props = __props;
+		const slots = useSlots();
 		const parentKind = inject("radio-kind", computed(() => void 0));
 		const parentSize = inject("radio-size", computed(() => void 0));
 		const effectiveKind = computed(() => props.kind ?? parentKind.value ?? "neutral");
@@ -29428,10 +29494,10 @@ var SkRadio_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 				"style",
 				"value",
 				"disabled"
-			]), __props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$14, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)], true)])) : createCommentVNode("", true)], 2);
+			]), __props.label || unref(hasSlotContent)(unref(slots).default) ? (openBlock(), createElementBlock("span", _hoisted_1$14, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)], true)])) : 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__ */ defineComponent({
@@ -29537,17 +29603,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 +29695,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 +29725,8 @@ var SkSelect_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__P
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -29832,7 +29951,8 @@ var SkSidebar_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -30403,7 +30523,8 @@ var SkSwitch_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props) {
@@ -30440,7 +30561,7 @@ var SkSwitch_default = /* @__PURE__ */ defineComponent({
 			};
 		});
 		const showLabel = 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 = computed(() => {
 			return Boolean(props.labelOn || props.labelOff || slots["label-on"] || slots["label-off"]);
@@ -30473,14 +30594,14 @@ var SkSwitch_default = /* @__PURE__ */ defineComponent({
 				"required",
 				"class",
 				"style"
-			]), showLabel.value ? (openBlock(), createElementBlock("label", _hoisted_2$3, [unref(slots).default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : useOnOffLabels.value && !__props.disableLabelAnimation ? (openBlock(), createBlock(Transition, {
+			]), showLabel.value ? (openBlock(), createElementBlock("label", _hoisted_2$3, [unref(hasSlotContent)(unref(slots).default) ? renderSlot(_ctx.$slots, "default", { key: 0 }) : useOnOffLabels.value && !__props.disableLabelAnimation ? (openBlock(), createBlock(Transition, {
 				key: 1,
 				name: "sk-switch-label-fade",
 				mode: "out-in"
 			}, {
-				default: withCtx(() => [__props.modelValue ? (openBlock(), createElementBlock("span", _hoisted_3$3, [unref(slots)["label-on"] ? renderSlot(_ctx.$slots, "label-on", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(labelOn.value), 1)], 64))])) : (openBlock(), createElementBlock("span", _hoisted_4$3, [unref(slots)["label-off"] ? renderSlot(_ctx.$slots, "label-off", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(labelOff.value), 1)], 64))]))]),
+				default: withCtx(() => [__props.modelValue ? (openBlock(), createElementBlock("span", _hoisted_3$3, [unref(hasSlotContent)(unref(slots)["label-on"]) ? renderSlot(_ctx.$slots, "label-on", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(labelOn.value), 1)], 64))])) : (openBlock(), createElementBlock("span", _hoisted_4$3, [unref(hasSlotContent)(unref(slots)["label-off"]) ? renderSlot(_ctx.$slots, "label-off", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(labelOff.value), 1)], 64))]))]),
 				_: 3
-			})) : useOnOffLabels.value && __props.disableLabelAnimation ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [__props.modelValue ? (openBlock(), createElementBlock("span", _hoisted_5$2, [unref(slots)["label-on"] ? renderSlot(_ctx.$slots, "label-on", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(labelOn.value), 1)], 64))])) : (openBlock(), createElementBlock("span", _hoisted_6$1, [unref(slots)["label-off"] ? renderSlot(_ctx.$slots, "label-off", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(labelOff.value), 1)], 64))]))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [createTextVNode(toDisplayString(__props.label), 1)], 64))])) : createCommentVNode("", true)]);
+			})) : useOnOffLabels.value && __props.disableLabelAnimation ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [__props.modelValue ? (openBlock(), createElementBlock("span", _hoisted_5$2, [unref(hasSlotContent)(unref(slots)["label-on"]) ? renderSlot(_ctx.$slots, "label-on", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(labelOn.value), 1)], 64))])) : (openBlock(), createElementBlock("span", _hoisted_6$1, [unref(hasSlotContent)(unref(slots)["label-off"]) ? renderSlot(_ctx.$slots, "label-off", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(labelOff.value), 1)], 64))]))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [createTextVNode(toDisplayString(__props.label), 1)], 64))])) : createCommentVNode("", true)]);
 		};
 	}
 });
@@ -30516,7 +30637,8 @@ var SkTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PU
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -30619,6 +30741,7 @@ var SkTab_default = /* @__PURE__ */ defineComponent({
 		* @slot icon - Optional icon displayed before the tab label. Useful for visual indicators.
 		*/
 		const props = __props;
+		const slots = useSlots();
 		const parentKind = inject("tabs-kind", computed(() => void 0));
 		const kind = computed(() => props.kind ?? parentKind.value);
 		const classes = computed(() => {
@@ -30634,7 +30757,7 @@ var SkTab_default = /* @__PURE__ */ defineComponent({
 				disabled: __props.disabled,
 				class: normalizeClass(classes.value)
 			}, {
-				default: withCtx(() => [_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1$7, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), createElementVNode("span", _hoisted_2$2, [createElementVNode("span", _hoisted_3$2, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]), createElementVNode("span", _hoisted_4$2, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])])]),
+				default: withCtx(() => [unref(hasSlotContent)(unref(slots).icon) ? (openBlock(), createElementBlock("span", _hoisted_1$7, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), createElementVNode("span", _hoisted_2$2, [createElementVNode("span", _hoisted_3$2, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]), createElementVNode("span", _hoisted_4$2, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])])]),
 				_: 3
 			}, 8, [
 				"value",
@@ -30783,7 +30906,8 @@ var SkTabs_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props) {
@@ -30858,7 +30982,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 +31089,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 +31233,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 +31791,8 @@ var SkTooltip_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 			default: true
 		},
 		baseColor: {},
-		textColor: {}
+		textColor: {},
+		borderColor: {}
 	},
 	setup(__props) {
 		/**
@@ -31880,6 +32008,7 @@ var SkTreeItem_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 		}
 	},
 	setup(__props) {
+		const slots = useSlots();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(TreeItem_default), mergeProps({ class: "sk-tree-item" }, __props.item.bind, {
 				value: __props.item.value,
@@ -31896,7 +32025,7 @@ var SkTreeItem_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 						key: 0,
 						class: normalizeClass(["sk-tree-item-chevron", { "sk-expanded": isExpanded }])
 					}, [(openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("polyline", { points: "9 6 15 12 9 18" }, null, -1)])]))], 2)) : __props.showChevron ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true),
-					_ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "leading", {
+					unref(hasSlotContent)(unref(slots).leading) ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "leading", {
 						isExpanded,
 						isSelected
 					}, void 0, true)])) : createCommentVNode("", true),
@@ -31906,7 +32035,7 @@ var SkTreeItem_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 						hasChildren: __props.item.hasChildren,
 						level: __props.item.level
 					}, void 0, true)]),
-					_ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "trailing", {
+					unref(hasSlotContent)(unref(slots).trailing) ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "trailing", {
 						isExpanded,
 						isSelected
 					}, void 0, true)])) : createCommentVNode("", true)
@@ -31921,7 +32050,7 @@ var SkTreeItem_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 			]);
 		};
 	}
-}), [["__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__ */ defineComponent({
@@ -31946,6 +32075,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 +32098,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 +32120,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"];