@skewedaspect/sleekspace-ui 0.8.0 → 0.9.0

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
+	* @example Kind name shortcut
 	* ```vue
-	* <script setup>
-	* import { useCustomColors } from '@/composables/useCustomColors';
-	*
-	* const props = defineProps<{ baseColor?: string }>();
-	* const customColors = useCustomColors('button', toRef(() => props.baseColor), undefined);
-	* <\/script>
-	*
-	* <template>
-	*   <button :style="customColors">Click me</button>
-	* </template>
+	* <SkPanel base-color="neon-pink" text-color="primary" border-color="neon-purple">...</SkPanel>
 	* ```
 	*
-	* @example With both base and text colors
+	* @example Raw CSS values
 	* ```vue
-	* <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">
-	*   Custom Purple Button
-	* </SkButton>
+	* <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">Click me</SkButton>
 	* ```
-	*
-	* @example Using CSS variables
-	* ```vue
-	* <SkPanel base-color="var(--my-custom-color)" text-color="var(--my-text-color)">
-	*   Content
-	* </SkPanel>
-	* ```
-	*
-	* @example Custom component
-	* ```vue
-	* <script setup>
-	* import { useCustomColors } from '@/composables/useCustomColors';
-	*
-	* const props = defineProps<{ baseColor?: string; textColor?: string }>();
-	* const customColors = useCustomColors('my-widget', toRef(() => props.baseColor), toRef(() => props.textColor));
-	* <\/script>
-	*
-	* <template>
-	*   <div class="my-widget" :style="customColors">
-	*     <!-- Will generate: --sk-my-widget-color-base and --sk-my-widget-fg -->
-	*   </div>
-	* </template>
-	* ```
-	*
-	* Generated CSS variables:
-	* - `--sk-{componentName}-color-base` - The base color for backgrounds and accents
-	* - `--sk-{componentName}-fg` - The foreground/text color
-	*
-	* @remarks
-	* - If `textColor` is not provided, components will use `--sk-neutral-text` from the active theme
-	* - For best contrast, always provide `textColor` when using custom `baseColor`
-	* - The generated CSS variables integrate with the component's existing token system
-	* - Works with any component name - no need to register components beforehand
 	*/
-	function useCustomColors(componentName, baseColor, textColor) {
+	function useCustomColors(componentName, baseColor, textColor, borderColor) {
 		return (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 }) {
@@ -22294,7 +22293,8 @@ Defaulting to \`null\`.`);
 				default: void 0
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -22859,7 +22859,8 @@ Defaulting to \`null\`.`);
 			kind: { default: "neutral" },
 			separator: { default: "/" },
 			baseColor: { default: void 0 },
-			textColor: { default: void 0 }
+			textColor: { default: void 0 },
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -22957,7 +22958,8 @@ Defaulting to \`null\`.`);
 			href: { default: void 0 },
 			to: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -23052,10 +23054,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 +23088,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 +23101,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 +23144,8 @@ Defaulting to \`null\`.`);
 			corners: { default: () => ["bottom-right"] },
 			decorationCorner: { default: "bottom-right" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -23200,6 +23204,7 @@ 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)
@@ -23225,6 +23230,7 @@ Defaulting to \`null\`.`);
 					"no-border",
 					"base-color",
 					"text-color",
+					"border-color",
 					"corners",
 					"decoration-corner",
 					"class"
@@ -23277,7 +23283,8 @@ Defaulting to \`null\`.`);
 			name: { default: void 0 },
 			label: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": {
 				type: [Boolean, String],
@@ -23373,7 +23380,8 @@ Defaulting to \`null\`.`);
 			kind: { default: "neutral" },
 			triggerText: { default: "Toggle" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:open"],
 		setup(__props, { emit: __emit }) {
@@ -26566,7 +26574,8 @@ Defaulting to \`null\`.`);
 			placeholder: { default: "Pick a color" },
 			defaultValue: { default: "#B63DDAFF" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": {},
 			"modelModifiers": {}
@@ -26690,7 +26699,8 @@ Defaulting to \`null\`.`);
 		props: {
 			kind: { default: "neutral" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			const props = __props;
@@ -26987,6 +26997,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 +27026,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 +27056,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 +27075,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 +27109,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 +27547,8 @@ Defaulting to \`null\`.`);
 			name: { default: void 0 },
 			autocomplete: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": { default: "" },
 			"modelModifiers": {}
@@ -27608,7 +27630,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": {},
 			"modelModifiers": {}
@@ -27839,7 +27862,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:open"],
 		setup(__props, { expose: __expose, emit: __emit }) {
@@ -27976,9 +28000,6 @@ Defaulting to \`null\`.`);
 		}
 	}), [["__scopeId", "data-v-d5c13c78"]]);
 	//#endregion
-	//#region src/components/NavBar/context.ts
-	var NAVBAR_KIND_KEY = Symbol("sk-navbar-kind");
-	//#endregion
 	//#region src/components/NavBar/SkNavBar.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$20 = { class: "sk-navbar-content" };
 	var _hoisted_2$11 = {
@@ -28007,8 +28028,10 @@ Defaulting to \`null\`.`);
 				type: Boolean,
 				default: true
 			},
+			size: { default: "md" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -28043,6 +28066,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 {
@@ -28093,7 +28117,8 @@ Defaulting to \`null\`.`);
 			max: { default: void 0 },
 			step: { default: 1 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": { default: 0 },
 			"modelModifiers": {}
@@ -28494,6 +28519,10 @@ Defaulting to \`null\`.`);
 			flush: {
 				type: Boolean,
 				default: false
+			},
+			noBounce: {
+				type: Boolean,
+				default: false
 			}
 		},
 		emits: ["update:sidebarOpen", "update:asideOpen"],
@@ -28674,7 +28703,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 = {};
@@ -28772,7 +28802,7 @@ Defaulting to \`null\`.`);
 				], 14, _hoisted_1$18);
 			};
 		}
-	}), [["__scopeId", "data-v-f502bb9d"]]);
+	}), [["__scopeId", "data-v-265ba522"]]);
 	//#endregion
 	//#region src/components/Page/SkPageSidebarToggle.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$17 = {
@@ -28998,7 +29028,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 +29181,8 @@ Defaulting to \`null\`.`);
 				default: void 0
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:open"],
 		setup(__props, { emit: __emit }) {
@@ -29394,7 +29426,8 @@ Defaulting to \`null\`.`);
 			kind: { default: void 0 },
 			size: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -29553,17 +29586,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 +29678,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 +29708,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": {},
 			"modelModifiers": {}
@@ -29848,7 +29934,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -30419,7 +30506,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:modelValue"],
 		setup(__props) {
@@ -30532,7 +30620,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -30799,7 +30888,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["update:modelValue"],
 		setup(__props) {
@@ -30874,7 +30964,8 @@ Defaulting to \`null\`.`);
 				default: false
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		emits: ["remove"],
 		setup(__props, { emit: __emit }) {
@@ -30980,7 +31071,8 @@ Defaulting to \`null\`.`);
 			tagKind: { default: void 0 },
 			tagVariant: { default: "solid" },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": { default: () => [] },
 			"modelModifiers": {}
@@ -31123,7 +31215,8 @@ Defaulting to \`null\`.`);
 			rows: { default: 4 },
 			autocomplete: { default: void 0 },
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		}, {
 			"modelValue": { default: "" },
 			"modelModifiers": {}
@@ -31680,7 +31773,8 @@ Defaulting to \`null\`.`);
 				default: true
 			},
 			baseColor: {},
-			textColor: {}
+			textColor: {},
+			borderColor: {}
 		},
 		setup(__props) {
 			/**
@@ -31962,6 +32056,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 +32079,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 +32101,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"];

package/dist/static/classes.d.ts

@@ -0,0 +1,18 @@
+export interface ListFlagSpec {
+    prop: string;
+    family: string;
+}
+export interface SingleChoiceFlagSpec {
+    prop: string;
+    family: string;
+}
+export interface ClassSpec {
+    base: string;
+    kind?: boolean;
+    size?: boolean;
+    variant?: boolean;
+    booleanFlags?: readonly string[];
+    listFlags?: readonly ListFlagSpec[];
+    singleChoiceFlags?: readonly SingleChoiceFlagSpec[];
+}
+export declare function composeClasses(spec: ClassSpec, props: Record<string, unknown>): string;

package/dist/static/components/alert.d.ts

@@ -0,0 +1,12 @@
+import { AlertKind, StaticCustomColors } from '../types';
+export interface AlertStaticProps extends StaticCustomColors {
+    kind?: AlertKind;
+    subtle?: boolean;
+    /**
+     * Custom icon HTML string, or `false` to suppress the icon entirely.
+     * When omitted (default), a kind-appropriate SVG is shown for feedback kinds
+     * (info, success, warning, danger); non-feedback kinds show no icon.
+     */
+    icon?: string | false;
+}
+export declare function alert(props?: AlertStaticProps, children?: string): string;