combo-ui-vue 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2693 @@
+import { onMounted, onUnmounted, readonly, ref } from "vue";
+//#region src/core/dark-mode.ts
+var DarkMode = class {
+	mode = "auto";
+	mediaQuery = null;
+	callbacks = /* @__PURE__ */ new Set();
+	storageKey = "cux-dark-mode";
+	persist = true;
+	constructor(options) {
+		if (options?.persist !== void 0) this.persist = options.persist;
+		if (options?.storageKey) this.storageKey = options.storageKey;
+	}
+	/**
+	* Initialize dark mode system
+	*/
+	init(mode = "auto") {
+		this.mode = mode;
+		this.setupMediaQuery();
+		if (mode === "auto") {
+			const stored = this.getStoredPreference();
+			if (stored !== null) this.applyDarkMode(stored);
+			else this.applyDarkMode(this.getSystemPreference());
+		} else this.applyDarkMode(mode === "dark");
+	}
+	/**
+	* Set up media query listener for system preference changes
+	*/
+	setupMediaQuery() {
+		if (typeof window === "undefined") return;
+		this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		this.mediaQuery.addEventListener("change", this.handleMediaQueryChange);
+	}
+	/**
+	* Handle system preference changes
+	*/
+	handleMediaQueryChange = (e) => {
+		if (this.mode === "auto") this.applyDarkMode(e.matches);
+	};
+	/**
+	* Get system preference for dark mode
+	*/
+	getSystemPreference() {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia("(prefers-color-scheme: dark)").matches;
+	}
+	/**
+	* Get stored preference from localStorage
+	*/
+	getStoredPreference() {
+		if (!this.persist || typeof localStorage === "undefined") return null;
+		const stored = localStorage.getItem(this.storageKey);
+		if (stored === "dark") return true;
+		if (stored === "light") return false;
+		return null;
+	}
+	/**
+	* Store preference in localStorage
+	*/
+	storePreference(isDark) {
+		if (!this.persist || typeof localStorage === "undefined") return;
+		localStorage.setItem(this.storageKey, isDark ? "dark" : "light");
+	}
+	/**
+	* Apply dark mode by toggling class on document element
+	*/
+	applyDarkMode(isDark) {
+		if (typeof document === "undefined") return;
+		document.documentElement.classList.toggle("dark", isDark);
+		this.storePreference(isDark);
+		this.notifyCallbacks(isDark);
+	}
+	/**
+	* Notify all registered callbacks
+	*/
+	notifyCallbacks(isDark) {
+		this.callbacks.forEach((callback) => callback(isDark));
+	}
+	/**
+	* Get current dark mode state
+	*/
+	get isDark() {
+		if (typeof document === "undefined") return false;
+		return document.documentElement.classList.contains("dark");
+	}
+	/**
+	* Get current mode setting
+	*/
+	get currentMode() {
+		return this.mode;
+	}
+	/**
+	* Set dark mode
+	*/
+	setDarkMode(value) {
+		if (value === "auto") {
+			this.mode = "auto";
+			this.applyDarkMode(this.getSystemPreference());
+			if (this.persist && typeof localStorage !== "undefined") localStorage.removeItem(this.storageKey);
+		} else {
+			this.mode = "light";
+			this.applyDarkMode(value);
+		}
+	}
+	/**
+	* Toggle dark mode
+	*/
+	toggle() {
+		this.setDarkMode(!this.isDark);
+	}
+	/**
+	* Register a callback for dark mode changes
+	*/
+	onChange(callback) {
+		this.callbacks.add(callback);
+		return () => this.callbacks.delete(callback);
+	}
+	/**
+	* Clean up event listeners
+	*/
+	destroy() {
+		if (this.mediaQuery) this.mediaQuery.removeEventListener("change", this.handleMediaQueryChange);
+		this.callbacks.clear();
+	}
+};
+//#endregion
+//#region src/core/css-generator.ts
+/**
+* CSS Injector - Manages style element injection
+*/
+const STYLE_ID = "cux-styles";
+var CSSInjector = class {
+	styleElement = null;
+	/**
+	* Get or create the style element in the document head
+	*/
+	getStyleElement() {
+		if (this.styleElement) return this.styleElement;
+		let element = document.getElementById(STYLE_ID);
+		if (!element) {
+			element = document.createElement("style");
+			element.id = STYLE_ID;
+			document.head.appendChild(element);
+		}
+		this.styleElement = element;
+		return element;
+	}
+	/**
+	* Inject CSS into the document
+	*/
+	inject(css) {
+		this.getStyleElement().textContent = css;
+	}
+	/**
+	* Remove injected styles from the document
+	*/
+	destroy() {
+		if (this.styleElement?.parentNode) this.styleElement.parentNode.removeChild(this.styleElement);
+		this.styleElement = null;
+	}
+};
+//#endregion
+//#region src/core/theme-loader.ts
+var ThemeLoader = class {
+	callbacks = /* @__PURE__ */ new Set();
+	/**
+	* Load theme from URL or object
+	*/
+	async load(theme) {
+		let themeData;
+		if (typeof theme === "string") themeData = await this.loadFromURL(theme);
+		else themeData = theme;
+		this.notifyCallbacks(themeData);
+		return themeData;
+	}
+	/**
+	* Load theme from URL
+	*/
+	async loadFromURL(url) {
+		try {
+			const response = await fetch(url);
+			if (!response.ok) throw new Error(`Failed to load theme: ${response.status} ${response.statusText}`);
+			return await response.json();
+		} catch (error) {
+			console.error("Error loading theme:", error);
+			throw error;
+		}
+	}
+	/**
+	* Load theme from File object (for file picker)
+	*/
+	async loadFromFile(file) {
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				try {
+					const content = e.target?.result;
+					const themeData = JSON.parse(content);
+					this.notifyCallbacks(themeData);
+					resolve(themeData);
+				} catch {
+					reject(/* @__PURE__ */ new Error("Invalid JSON file"));
+				}
+			};
+			reader.onerror = () => {
+				reject(/* @__PURE__ */ new Error("Failed to read file"));
+			};
+			reader.readAsText(file);
+		});
+	}
+	/**
+	* Open file picker and load theme
+	*/
+	async openFilePicker() {
+		return new Promise((resolve) => {
+			const input = document.createElement("input");
+			input.type = "file";
+			input.accept = ".json";
+			input.onchange = async (e) => {
+				const file = e.target.files?.[0];
+				if (file) try {
+					resolve(await this.loadFromFile(file));
+				} catch (error) {
+					console.error("Error loading theme from file:", error);
+					resolve(null);
+				}
+				else resolve(null);
+			};
+			input.click();
+		});
+	}
+	/**
+	* Register a callback for theme load events
+	*/
+	onLoad(callback) {
+		this.callbacks.add(callback);
+		return () => this.callbacks.delete(callback);
+	}
+	/**
+	* Notify all registered callbacks
+	*/
+	notifyCallbacks(theme) {
+		this.callbacks.forEach((callback) => callback(theme));
+	}
+	/**
+	* Clean up
+	*/
+	destroy() {
+		this.callbacks.clear();
+	}
+};
+//#endregion
+//#region src/core/theme-sync.ts
+var ThemeSync = class {
+	url;
+	ws = null;
+	reconnect;
+	reconnectInterval;
+	maxReconnectAttempts;
+	reconnectAttempts = 0;
+	reconnectTimeout = null;
+	isIntentionallyClosed = false;
+	connectCallbacks = /* @__PURE__ */ new Set();
+	disconnectCallbacks = /* @__PURE__ */ new Set();
+	errorCallbacks = /* @__PURE__ */ new Set();
+	themeUpdateCallbacks = /* @__PURE__ */ new Set();
+	applyTheme;
+	constructor(applyTheme, options) {
+		this.applyTheme = applyTheme;
+		this.url = options.url;
+		this.reconnect = options.reconnect ?? true;
+		this.reconnectInterval = options.reconnectInterval ?? 3e3;
+		this.maxReconnectAttempts = options.maxReconnectAttempts ?? 10;
+		if (options.onConnect) this.connectCallbacks.add(options.onConnect);
+		if (options.onDisconnect) this.disconnectCallbacks.add(options.onDisconnect);
+		if (options.onError) this.errorCallbacks.add(options.onError);
+		if (options.onThemeUpdate) this.themeUpdateCallbacks.add(options.onThemeUpdate);
+	}
+	/**
+	* Connect to WebSocket server
+	*/
+	connect() {
+		if (this.ws?.readyState === WebSocket.OPEN || this.ws?.readyState === WebSocket.CONNECTING) return;
+		this.isIntentionallyClosed = false;
+		try {
+			this.ws = new WebSocket(this.url);
+			this.setupEventListeners();
+		} catch (error) {
+			this.notifyErrorCallbacks(error);
+		}
+	}
+	/**
+	* Set up WebSocket event listeners
+	*/
+	setupEventListeners() {
+		if (!this.ws) return;
+		this.ws.onopen = () => {
+			this.reconnectAttempts = 0;
+			this.notifyConnectCallbacks();
+		};
+		this.ws.onmessage = (event) => {
+			try {
+				const message = JSON.parse(event.data);
+				if (message.type === "theme-update" && message.payload) {
+					console.log("[ThemeSync] Received theme with keys:", Object.keys(message.payload));
+					this.applyTheme(message.payload);
+					this.notifyThemeUpdateCallbacks(message.payload);
+				}
+			} catch (error) {
+				console.error("[ThemeSync] Error parsing message:", error);
+			}
+		};
+		this.ws.onclose = () => {
+			this.notifyDisconnectCallbacks();
+			if (!this.isIntentionallyClosed && this.reconnect) this.scheduleReconnect();
+		};
+		this.ws.onerror = (event) => {
+			const error = /* @__PURE__ */ new Error("WebSocket connection error");
+			this.notifyErrorCallbacks(error);
+		};
+	}
+	/**
+	* Schedule reconnection attempt
+	*/
+	scheduleReconnect() {
+		if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+			console.warn(`[ThemeSync] Max reconnection attempts (${this.maxReconnectAttempts}) reached`);
+			return;
+		}
+		this.reconnectAttempts++;
+		this.reconnectTimeout = setTimeout(() => {
+			this.connect();
+		}, this.reconnectInterval);
+	}
+	/**
+	* Disconnect from WebSocket server
+	*/
+	disconnect() {
+		this.isIntentionallyClosed = true;
+		this.clearReconnectTimeout();
+		if (this.ws) {
+			this.ws.close();
+			this.ws = null;
+		}
+	}
+	/**
+	* Check if connected
+	*/
+	get isConnected() {
+		return this.ws?.readyState === WebSocket.OPEN;
+	}
+	/**
+	* Clear reconnection timeout
+	*/
+	clearReconnectTimeout() {
+		if (this.reconnectTimeout) {
+			clearTimeout(this.reconnectTimeout);
+			this.reconnectTimeout = null;
+		}
+	}
+	onConnect(callback) {
+		this.connectCallbacks.add(callback);
+		return () => this.connectCallbacks.delete(callback);
+	}
+	onDisconnect(callback) {
+		this.disconnectCallbacks.add(callback);
+		return () => this.disconnectCallbacks.delete(callback);
+	}
+	onError(callback) {
+		this.errorCallbacks.add(callback);
+		return () => this.errorCallbacks.delete(callback);
+	}
+	onThemeUpdate(callback) {
+		this.themeUpdateCallbacks.add(callback);
+		return () => this.themeUpdateCallbacks.delete(callback);
+	}
+	notifyConnectCallbacks() {
+		this.connectCallbacks.forEach((cb) => cb());
+	}
+	notifyDisconnectCallbacks() {
+		this.disconnectCallbacks.forEach((cb) => cb());
+	}
+	notifyErrorCallbacks(error) {
+		this.errorCallbacks.forEach((cb) => cb(error));
+	}
+	notifyThemeUpdateCallbacks(theme) {
+		this.themeUpdateCallbacks.forEach((cb) => cb(theme));
+	}
+	/**
+	* Destroy instance and clean up
+	*/
+	destroy() {
+		this.disconnect();
+		this.connectCallbacks.clear();
+		this.disconnectCallbacks.clear();
+		this.errorCallbacks.clear();
+		this.themeUpdateCallbacks.clear();
+	}
+};
+//#endregion
+//#region src/core/google-fonts.ts
+/**
+* Google Fonts loader for vanilla library
+*/
+const injectedFamilies = /* @__PURE__ */ new Set();
+/**
+* Generate Google Fonts URL for the given family and variants
+*/
+function generateFontUrl(family, variants) {
+	const regulars = [];
+	const italics = [];
+	for (const v of variants) {
+		if (v === "regular") {
+			regulars.push(400);
+			continue;
+		}
+		if (v === "italic") {
+			italics.push(400);
+			continue;
+		}
+		if (v.endsWith("italic")) {
+			italics.push(parseInt(v) || 400);
+			continue;
+		}
+		const n = parseInt(v);
+		if (!isNaN(n)) regulars.push(n);
+	}
+	let url;
+	if (italics.length === 0) {
+		const wghtParam = regulars.map((w) => `0,${w}`).join(";");
+		url = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:ital,wght@${wghtParam}&display=swap`;
+	} else if (regulars.length === 0) {
+		const wghtParam = italics.map((w) => `1,${w}`).join(";");
+		url = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:ital,wght@${wghtParam}&display=swap`;
+	} else {
+		const pairs = [...regulars.map((w) => `0,${w}`), ...italics.map((w) => `1,${w}`)].join(";");
+		url = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:ital,wght@${pairs}&display=swap`;
+	}
+	return url;
+}
+/**
+* Load a Google Font by injecting a <link> in the <head>
+*/
+function loadGoogleFont(family, style = "normal", weight = "400") {
+	if (injectedFamilies.has(family)) return;
+	const variants = [];
+	if (style === "italic") variants.push(weight.endsWith("italic") ? weight : `${weight}italic`);
+	else variants.push(weight === "regular" ? "regular" : weight);
+	const url = generateFontUrl(family, variants);
+	const link = document.createElement("link");
+	link.rel = "stylesheet";
+	link.href = url;
+	document.head.appendChild(link);
+	injectedFamilies.add(family);
+}
+/**
+* Load fonts from button variants
+*/
+function loadFontsFromButtonVariants(variants) {
+	for (const variant of variants) if (variant.fontFamily) loadGoogleFont(variant.fontFamily, variant.fontStyle || "normal", variant.fontWeight || "400");
+}
+/**
+* Load fonts from typography global config
+*/
+function loadFontsFromTypography(typography) {
+	if (typography.globalConfig?.fontFamily) loadGoogleFont(typography.globalConfig.fontFamily);
+	if (typography.variants) {
+		for (const variant of typography.variants) if (variant.fontFamily) loadGoogleFont(variant.fontFamily, variant.fontStyle || "normal", variant.fontWeight || "400");
+	}
+}
+/**
+* Load fonts from forms global config
+*/
+function loadFontsFromForms(forms) {
+	if (forms.globalConfig?.fontFamily) loadGoogleFont(forms.globalConfig.fontFamily);
+	if (forms.globalConfig?.optionFontFamily) loadGoogleFont(forms.globalConfig.optionFontFamily);
+}
+/**
+* Load fonts from avatar variants
+*/
+function loadFontsFromAvatarVariants(variants) {
+	for (const variant of variants) if (variant.fontFamily) loadGoogleFont(variant.fontFamily, variant.fontStyle || "normal", variant.fontWeight || "400");
+}
+//#endregion
+//#region src/basscss/index.ts
+/**
+* Basscss utilities - included in bundle
+*/
+const BASSCSS_ID = "cux-basscss";
+const BASSCSS_CSS = `.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.max-width-1{max-width:var(--width-1)}.max-width-2{max-width:var(--width-2)}.max-width-3{max-width:var(--width-3)}.max-width-4{max-width:var(--width-4)}.border-box{box-sizing:border-box}:root{--width-1:24rem;--width-2:32rem;--width-3:48rem;--width-4:64rem}.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0,.mx0{margin-left:0}.mx0{margin-right:0}.my0{margin-bottom:0;margin-top:0}.m1{margin:var(--space-1)}.mt1{margin-top:var(--space-1)}.mr1{margin-right:var(--space-1)}.mb1{margin-bottom:var(--space-1)}.ml1,.mx1{margin-left:var(--space-1)}.mx1{margin-right:var(--space-1)}.my1{margin-bottom:var(--space-1);margin-top:var(--space-1)}.m2{margin:var(--space-2)}.mt2{margin-top:var(--space-2)}.mr2{margin-right:var(--space-2)}.mb2{margin-bottom:var(--space-2)}.ml2,.mx2{margin-left:var(--space-2)}.mx2{margin-right:var(--space-2)}.my2{margin-bottom:var(--space-2);margin-top:var(--space-2)}.m3{margin:var(--space-3)}.mt3{margin-top:var(--space-3)}.mr3{margin-right:var(--space-3)}.mb3{margin-bottom:var(--space-3)}.ml3,.mx3{margin-left:var(--space-3)}.mx3{margin-right:var(--space-3)}.my3{margin-bottom:var(--space-3);margin-top:var(--space-3)}.m4{margin:var(--space-4)}.mt4{margin-top:var(--space-4)}.mr4{margin-right:var(--space-4)}.mb4{margin-bottom:var(--space-4)}.ml4,.mx4{margin-left:var(--space-4)}.mx4{margin-right:var(--space-4)}.my4{margin-bottom:var(--space-4);margin-top:var(--space-4)}.mxn1{margin-left:calc(var(--space-1)*-1);margin-right:calc(var(--space-1)*-1)}.mxn2{margin-left:calc(var(--space-2)*-1);margin-right:calc(var(--space-2)*-1)}.mxn3{margin-left:calc(var(--space-3)*-1);margin-right:calc(var(--space-3)*-1)}.mxn4{margin-left:calc(var(--space-4)*-1);margin-right:calc(var(--space-4)*-1)}.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto,.mx-auto{margin-left:auto}.mx-auto{margin-right:auto}.my-auto{margin-bottom:auto;margin-top:auto}.p0{padding:0}.pt0{padding-top:0}.pr0{padding-right:0}.pb0{padding-bottom:0}.pl0,.px0{padding-left:0}.px0{padding-right:0}.py0{padding-bottom:0;padding-top:0}.p1{padding:var(--space-1)}.pt1{padding-top:var(--space-1)}.pr1{padding-right:var(--space-1)}.pb1{padding-bottom:var(--space-1)}.pl1{padding-left:var(--space-1)}.py1{padding-bottom:var(--space-1);padding-top:var(--space-1)}.px1{padding-left:var(--space-1);padding-right:var(--space-1)}.p2{padding:var(--space-2)}.pt2{padding-top:var(--space-2)}.pr2{padding-right:var(--space-2)}.pb2{padding-bottom:var(--space-2)}.pl2{padding-left:var(--space-2)}.py2{padding-bottom:var(--space-2);padding-top:var(--space-2)}.px2{padding-left:var(--space-2);padding-right:var(--space-2)}.p3{padding:var(--space-3)}.pt3{padding-top:var(--space-3)}.pr3{padding-right:var(--space-3)}.pb3{padding-bottom:var(--space-3)}.pl3{padding-left:var(--space-3)}.py3{padding-bottom:var(--space-3);padding-top:var(--space-3)}.px3{padding-left:var(--space-3);padding-right:var(--space-3)}.p4{padding:var(--space-4)}.pt4{padding-top:var(--space-4)}.pr4{padding-right:var(--space-4)}.pb4{padding-bottom:var(--space-4)}.pl4{padding-left:var(--space-4)}.py4{padding-bottom:var(--space-4);padding-top:var(--space-4)}.px4{padding-left:var(--space-4);padding-right:var(--space-4)}:root{--space-1:.5rem;--space-2:1rem;--space-3:2rem;--space-4:4rem}.col{float:left}.col,.col-right{box-sizing:border-box}.col-right{float:right}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}.flex{display:flex}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-baseline{align-self:baseline}.self-stretch{align-self:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-stretch{align-content:stretch}.flex-auto{flex:1 1 auto;min-height:0;min-width:0}.flex-none{flex:none}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-last{order:99999}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z1{z-index:var(--z1)}.z2{z-index:var(--z2)}.z3{z-index:var(--z3)}.z4{z-index:var(--z4)}:root{--z1:1;--z2:2;--z3:3;--z4:4}.border{border-style:solid;border-width:var(--border-width)}.border-top{border-top-style:solid;border-top-width:var(--border-width)}.border-right{border-right-style:solid;border-right-width:var(--border-width)}.border-bottom{border-bottom-style:solid;border-bottom-width:var(--border-width)}.border-left{border-left-style:solid;border-left-width:var(--border-width)}.border-none{border:0}.rounded{border-radius:var(--border-radius)}.circle{border-radius:50%}.rounded-top{border-radius:var(--border-radius) var(--border-radius) 0 0}.rounded-right{border-radius:0 var(--border-radius) var(--border-radius) 0}.rounded-bottom{border-radius:0 0 var(--border-radius) var(--border-radius)}.rounded-left{border-radius:var(--border-radius) 0 0 var(--border-radius)}.not-rounded{border-radius:0}:root{--border-width:1px;--border-radius:3px}.hide{height:1px;overflow:hidden;position:absolute!important;width:1px;clip:rect(1px,1px,1px,1px)}.display-none{display:none!important}`;
+let injected = false;
+/**
+* Inject Basscss utilities into the page
+*/
+function injectBasscss() {
+	if (injected) return;
+	if (typeof document === "undefined") return;
+	if (document.getElementById(BASSCSS_ID)) {
+		injected = true;
+		return;
+	}
+	const style = document.createElement("style");
+	style.id = BASSCSS_ID;
+	style.textContent = BASSCSS_CSS;
+	document.head.appendChild(style);
+	injected = true;
+}
+//#endregion
+//#region src/core/base-styles.ts
+/**
+* Base styles for ComboUX
+*/
+const BASE_STYLES_ID = "cux-base-styles";
+const DEFAULT_OPTIONS = {
+	backgroundColor: "#ffffff",
+	darkBackgroundColor: "#333333",
+	textColor: "#212529",
+	darkTextColor: "#f8f9fa"
+};
+/**
+* Build base CSS with dynamic colors
+*/
+function buildBaseCSS(options = DEFAULT_OPTIONS) {
+	const bgColor = options.backgroundColor ?? DEFAULT_OPTIONS.backgroundColor;
+	const darkBgColor = options.darkBackgroundColor ?? DEFAULT_OPTIONS.darkBackgroundColor;
+	return `
+/* Base styles */
+:root {
+  --cux-bg: ${bgColor};
+  --cux-text: ${options.textColor ?? DEFAULT_OPTIONS.textColor};
+  --cux-text-muted: #6c757d;
+  --cux-border: #dee2e6;
+  --cux-surface: #f8f9fa;
+}
+
+.dark {
+  --cux-bg: ${darkBgColor};
+  --cux-text: ${options.darkTextColor ?? DEFAULT_OPTIONS.darkTextColor};
+  --cux-text-muted: #adb5bd;
+  --cux-border: #495057;
+  --cux-surface: #222222;
+}
+
+body {
+  background-color: var(--cux-bg);
+  color: var(--cux-text);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+`;
+}
+/**
+* Inject base styles with dynamic colors
+*/
+function injectBaseStyles(options) {
+	if (typeof document === "undefined") return;
+	const existing = document.getElementById(BASE_STYLES_ID);
+	if (existing) {
+		if (options) existing.textContent = buildBaseCSS(options);
+		return;
+	}
+	const style = document.createElement("style");
+	style.id = BASE_STYLES_ID;
+	style.textContent = buildBaseCSS(options);
+	document.head.insertBefore(style, document.head.firstChild);
+}
+/**
+* Update base styles (for theme updates)
+*/
+function updateBaseStyles(options) {
+	if (typeof document === "undefined") return;
+	const existing = document.getElementById(BASE_STYLES_ID);
+	if (existing) existing.textContent = buildBaseCSS(options);
+	else injectBaseStyles(options);
+}
+//#endregion
+//#region src/core/utils.ts
+/**
+* Convert a string to kebab-case for CSS class names
+* Removes accents and special characters
+*/
+function toKebabCase(str) {
+	return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+/**
+* Build a CSS border string from BorderValue
+*/
+function buildBorder(border) {
+	if (!border) return "";
+	return `${border.width}${border.unit} ${border.style} ${border.color}`;
+}
+/**
+* Build a CSS border-radius string from BorderRadiusValue
+*/
+function buildBorderRadius(radius) {
+	if (!radius) return "";
+	if (radius.linked) return `${radius.tl}${radius.unit}`;
+	return `${radius.tl}${radius.unit} ${radius.tr}${radius.unit} ${radius.br}${radius.unit} ${radius.bl}${radius.unit}`;
+}
+/**
+* Build a CSS padding string from PaddingValue
+*/
+function buildPadding(padding) {
+	if (!padding) return "";
+	const { top, right, bottom, left, unit } = padding;
+	if (top === right && right === bottom && bottom === left) return `${top}${unit}`;
+	if (top === bottom && right === left) return `${top}${unit} ${right}${unit}`;
+	return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`;
+}
+/**
+* Build a CSS font-size string from UnitNumber
+*/
+function buildFontSize(fontSize) {
+	if (!fontSize) return "";
+	return `${fontSize.value}${fontSize.unit}`;
+}
+/**
+* Build a CSS letter-spacing string
+*/
+function buildLetterSpacing(value) {
+	if (!value) return "";
+	if (typeof value === "object" && "value" in value) return `${value.value}${value.unit}`;
+	if (typeof value === "string") {
+		if (value.endsWith("px") || value.endsWith("em") || value.endsWith("rem")) return value;
+		return `${value}px`;
+	}
+	return "";
+}
+/**
+* Build a CSS border string from BorderValue | string
+*/
+function buildBorderOptional(border) {
+	if (!border) return "";
+	if (typeof border === "string") return border;
+	return `${border.width}${border.unit} ${border.style} ${border.color}`;
+}
+/**
+* Build a CSS offset string from UnitNumber | number
+*/
+function buildOffset(offset) {
+	if (offset === void 0) return "";
+	if (typeof offset === "number") return `${offset}px`;
+	return `${offset.value}${offset.unit}`;
+}
+/**
+* Deep merge objects (for dark mode overrides)
+*/
+function deepMerge(target, source) {
+	if (!source) return target;
+	const result = { ...target };
+	for (const key in source) {
+		const sourceValue = source[key];
+		const targetValue = target[key];
+		if (sourceValue !== void 0 && sourceValue !== null && typeof sourceValue === "object" && !Array.isArray(sourceValue) && targetValue !== null && typeof targetValue === "object" && !Array.isArray(targetValue)) result[key] = deepMerge(targetValue, sourceValue);
+		else if (sourceValue !== void 0) result[key] = sourceValue;
+	}
+	return result;
+}
+/**
+* Get effective font family (fallback to global config)
+* Shared utility used by all component generators
+*/
+function getEffectiveFontFamily$2(variantFontFamily, globalFontFamily) {
+	if (variantFontFamily !== null && variantFontFamily !== void 0) return variantFontFamily;
+	return globalFontFamily || null;
+}
+//#endregion
+//#region src/core/typography-generator.ts
+/**
+* Build CSS value from UnitNumber or string
+*/
+function buildUnitValue$1(value, defaultUnit = "px") {
+	if (!value) return "";
+	if (typeof value === "string") return value;
+	return `${value.value}${value.unit || defaultUnit}`;
+}
+/**
+* Get effective font family (fallback to global)
+*/
+function getEffectiveFontFamily$1(variant, globalConfig) {
+	return variant.fontFamily || globalConfig?.fontFamily || "system-ui, sans-serif";
+}
+/**
+* Get effective color (fallback to global)
+*/
+function getEffectiveColor(variant, globalConfig, isDark = false) {
+	const darkOverride = isDark ? variant.dark?.color : null;
+	const globalDarkOverride = isDark ? globalConfig?.dark?.color : null;
+	if (darkOverride) return darkOverride;
+	if (variant.color) return variant.color;
+	if (globalDarkOverride) return globalDarkOverride;
+	if (globalConfig?.color) return globalConfig.color;
+	return isDark ? "#f8f9fa" : "#212529";
+}
+/**
+* Get line height as CSS value
+*/
+function buildLineHeight(value) {
+	if (!value) return "1.5";
+	return `${value.value}${value.unit || ""}`;
+}
+/**
+* Generate CSS for a single typography variant
+*/
+function generateTypographyVariantCSS(variant, globalConfig) {
+	const fontFamily = getEffectiveFontFamily$1(variant, globalConfig);
+	const color = getEffectiveColor(variant, globalConfig, false);
+	const css = [];
+	css.push(`  font-family: '${fontFamily}', sans-serif;`);
+	css.push(`  font-style: ${variant.fontStyle || "normal"};`);
+	css.push(`  font-weight: ${variant.fontWeight || "400"};`);
+	if (variant.fontSize) css.push(`  font-size: ${buildFontSize(variant.fontSize)};`);
+	if (variant.letterSpacing) css.push(`  letter-spacing: ${buildUnitValue$1(variant.letterSpacing)};`);
+	if (variant.lineHeight) css.push(`  line-height: ${buildLineHeight(variant.lineHeight)};`);
+	if (variant.textTransform) css.push(`  text-transform: ${variant.textTransform};`);
+	if (variant.textDecoration) css.push(`  text-decoration: ${variant.textDecoration};`);
+	css.push(`  color: ${color};`);
+	return css.join("\n");
+}
+/**
+* Generate complete typography CSS
+*/
+function generateTypographyCSS(typography) {
+	const css = [];
+	const globalConfig = typography.globalConfig;
+	const variants = typography.variants || [];
+	css.push(`/* Typography Base */`);
+	css.push(`.cux-typography {`);
+	if (globalConfig?.fontFamily) css.push(`  font-family: '${globalConfig.fontFamily}', sans-serif;`);
+	if (globalConfig?.color) css.push(`  color: ${globalConfig.color};`);
+	css.push(`}`);
+	css.push("");
+	const headingVariants = variants.filter((v) => [
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6"
+	].includes(v.id));
+	const displayVariants = variants.filter((v) => v.id?.startsWith("display"));
+	const bodyVariants = variants.filter((v) => [
+		"body",
+		"small",
+		"caption",
+		"link"
+	].includes(v.id));
+	if (headingVariants.length > 0) {
+		css.push(`/* Headings */`);
+		headingVariants.forEach((variant) => {
+			css.push(`.cux-${variant.id} {`);
+			css.push(generateTypographyVariantCSS(variant, globalConfig));
+			css.push(`}`);
+			css.push(`.dark .cux-${variant.id} {`);
+			css.push(`  color: ${getEffectiveColor(variant, globalConfig, true)};`);
+			css.push(`}`);
+		});
+		css.push("");
+	}
+	if (displayVariants.length > 0) {
+		css.push(`/* Display */`);
+		displayVariants.forEach((variant) => {
+			css.push(`.cux-${variant.id} {`);
+			css.push(generateTypographyVariantCSS(variant, globalConfig));
+			css.push(`}`);
+			css.push(`.dark .cux-${variant.id} {`);
+			css.push(`  color: ${getEffectiveColor(variant, globalConfig, true)};`);
+			css.push(`}`);
+		});
+		css.push("");
+	}
+	if (bodyVariants.length > 0) {
+		css.push(`/* Body Text */`);
+		bodyVariants.forEach((variant) => {
+			css.push(`.cux-${variant.id} {`);
+			css.push(generateTypographyVariantCSS(variant, globalConfig));
+			css.push(`}`);
+			css.push(`.dark .cux-${variant.id} {`);
+			css.push(`  color: ${getEffectiveColor(variant, globalConfig, true)};`);
+			css.push(`}`);
+		});
+	}
+	return css.join("\n");
+}
+//#endregion
+//#region src/core/forms-generator.ts
+/**
+* Build CSS value from UnitNumber
+*/
+function buildUnitValue(value, defaultUnit = "px") {
+	if (!value) return "";
+	return `${value.value}${value.unit || defaultUnit}`;
+}
+/**
+* Get effective font family (fallback to typography)
+*/
+function getEffectiveFontFamily(formsFontFamily, typography) {
+	if (formsFontFamily) return formsFontFamily;
+	if (typography?.globalConfig?.fontFamily) return typography.globalConfig.fontFamily;
+	return "system-ui, sans-serif";
+}
+/**
+* Generate complete forms CSS
+*/
+function generateFormsCSS(forms, typography) {
+	const css = [];
+	const config = forms.globalConfig;
+	if (!config) return "";
+	const effectiveFontFamily = getEffectiveFontFamily(config.fontFamily, typography);
+	css.push(`/* Forms Base Styles */`);
+	css.push(`.cux-field {`);
+	css.push(`  position: relative;`);
+	css.push(`  margin-bottom: ${config.fieldHeight || 95}px;`);
+	css.push(`}`);
+	if (config.showLabel) {
+		css.push(`.cux-label {`);
+		css.push(`  display: block;`);
+		css.push(`  font-family: '${effectiveFontFamily}', sans-serif;`);
+		css.push(`  color: ${config.labelColor || "#212529"};`);
+		if (config.labelFontSize) css.push(`  font-size: ${buildFontSize(config.labelFontSize)};`);
+		css.push(`  font-weight: ${config.labelFontWeight || "500"};`);
+		css.push(`  margin-bottom: ${config.labelMarginBottom || 4}px;`);
+		css.push(`}`);
+		css.push(`.dark .cux-label {`);
+		css.push(`  color: ${config.dark?.labelColor || "#f8f9fa"};`);
+		css.push(`}`);
+	}
+	css.push(`.cux-input {`);
+	css.push(`  width: 100%;`);
+	css.push(`  font-family: '${effectiveFontFamily}', sans-serif;`);
+	css.push(`  font-size: ${buildFontSize(config.fontSize || {
+		value: 14,
+		unit: "px"
+	})};`);
+	css.push(`  color: ${config.color || "#212529"};`);
+	css.push(`  background: ${config.background || "#ffffff"};`);
+	css.push(`  border: ${buildBorder(config.border)};`);
+	css.push(`  border-radius: ${buildBorderRadius(config.borderRadius)};`);
+	css.push(`  padding: ${buildPadding(config.padding)};`);
+	css.push(`  transition: border-color 0.15s ease, box-shadow 0.15s ease;`);
+	css.push(`}`);
+	css.push(`.dark .cux-input {`);
+	css.push(`  color: ${config.dark?.color || "#f8f9fa"};`);
+	css.push(`  background: ${config.dark?.background || "#222222"};`);
+	css.push(`  border-color: ${config.dark?.borderColor || "#495057"};`);
+	css.push(`}`);
+	if (config.showPlaceholder) {
+		css.push(`.cux-input::placeholder {`);
+		css.push(`  color: ${config.placeholderColor || "#6c757d"};`);
+		css.push(`  opacity: 1;`);
+		css.push(`}`);
+		css.push(`.dark .cux-input::placeholder {`);
+		css.push(`  color: ${config.dark?.placeholderColor || "#adb5bd"};`);
+		css.push(`}`);
+	}
+	css.push(`.cux-input:focus {`);
+	css.push(`  outline: none;`);
+	css.push(`  border-color: ${config.border?.color || "#ced4da"};`);
+	css.push(`  box-shadow: 0 0 0 ${config.focusOutlineWidth || 3}px ${config.focusOutlineColor || "rgba(13, 110, 253, 0.16)"};`);
+	css.push(`}`);
+	css.push(`.dark .cux-input:focus {`);
+	css.push(`  border-color: ${config.dark?.borderColor || "#495057"};`);
+	css.push(`  box-shadow: 0 0 0 ${config.focusOutlineWidth || 3}px ${config.dark?.focusOutlineColor || "rgba(117, 149, 194, 0.4)"};`);
+	css.push(`}`);
+	css.push(`.cux-input.cux-error,`);
+	css.push(`.cux-input[aria-invalid="true"] {`);
+	css.push(`  border-color: ${config.errorBorderColor || "#dc3545"};`);
+	css.push(`}`);
+	css.push(`.dark .cux-input.cux-error,`);
+	css.push(`.dark .cux-input[aria-invalid="true"] {`);
+	css.push(`  border-color: ${config.dark?.errorBorderColor || "#ea868f"};`);
+	css.push(`}`);
+	css.push(`.cux-error-message {`);
+	css.push(`  font-family: '${effectiveFontFamily}', sans-serif;`);
+	css.push(`  color: ${config.errorColor || "#dc3545"};`);
+	if (config.errorFontSize) css.push(`  font-size: ${buildFontSize(config.errorFontSize)};`);
+	css.push(`  margin-top: ${config.errorMarginTop || 4}px;`);
+	css.push(`}`);
+	css.push(`.dark .cux-error-message {`);
+	css.push(`  color: ${config.dark?.errorColor || "#ea868f"};`);
+	css.push(`}`);
+	css.push(`.cux-input:disabled {`);
+	css.push(`  opacity: ${config.disabledOpacity || .65};`);
+	css.push(`  color: ${config.disabledColor || "#6c757d"};`);
+	css.push(`  background: ${config.disabledBackground || "#e9ecef"};`);
+	css.push(`  border-color: ${config.disabledBorderColor || "#ced4da"};`);
+	css.push(`  cursor: not-allowed;`);
+	css.push(`}`);
+	css.push(`.dark .cux-input:disabled {`);
+	css.push(`  color: ${config.dark?.disabledColor || "#6c757d"};`);
+	css.push(`  background: ${config.dark?.disabledBackground || "#222222"};`);
+	css.push(`  border-color: ${config.dark?.disabledBorderColor || "#495057"};`);
+	css.push(`}`);
+	css.push(``);
+	css.push(`/* Checkbox & Radio */`);
+	const checkSize = config.checkRadioSize || 18;
+	css.push(`.cux-checkbox,`);
+	css.push(`.cux-radio {`);
+	css.push(`  display: inline-flex;`);
+	css.push(`  align-items: center;`);
+	css.push(`  gap: 8px;`);
+	css.push(`  cursor: pointer;`);
+	css.push(`}`);
+	css.push(`.cux-checkbox input,`);
+	css.push(`.cux-radio input {`);
+	css.push(`  width: ${checkSize}px;`);
+	css.push(`  height: ${checkSize}px;`);
+	css.push(`  accent-color: ${config.checkRadioColor || "#0d6efd"};`);
+	css.push(`  cursor: pointer;`);
+	css.push(`}`);
+	css.push(`.dark .cux-checkbox input,`);
+	css.push(`.dark .cux-radio input {`);
+	css.push(`  accent-color: ${config.dark?.checkRadioColor || "#6ea8fe"};`);
+	css.push(`}`);
+	css.push(`.cux-option-label {`);
+	css.push(`  font-family: '${config.optionFontFamily || effectiveFontFamily}', sans-serif;`);
+	css.push(`  color: ${config.optionColor || "#212529"};`);
+	if (config.optionFontSize) css.push(`  font-size: ${buildFontSize(config.optionFontSize)};`);
+	css.push(`  font-weight: ${config.optionFontWeight || "400"};`);
+	css.push(`}`);
+	css.push(`.dark .cux-option-label {`);
+	css.push(`  color: ${config.dark?.optionColor || "#f8f9fa"};`);
+	css.push(`}`);
+	const spacingH = config.optionSpacingHorizontal;
+	const spacingV = config.optionSpacingVertical;
+	css.push(`.cux-option-group {`);
+	css.push(`  display: flex;`);
+	if (config.optionOrientation === "vertical") {
+		css.push(`  flex-direction: column;`);
+		if (spacingV) css.push(`  gap: ${buildUnitValue(spacingV)};`);
+	} else {
+		css.push(`  flex-direction: row;`);
+		css.push(`  flex-wrap: wrap;`);
+		if (spacingH) css.push(`  gap: ${buildUnitValue(spacingH)};`);
+	}
+	css.push(`}`);
+	css.push(``);
+	css.push(`/* Select */`);
+	css.push(`.cux-select {`);
+	css.push(`  width: 100%;`);
+	css.push(`  font-family: '${effectiveFontFamily}', sans-serif;`);
+	css.push(`  font-size: ${buildFontSize(config.fontSize || {
+		value: 14,
+		unit: "px"
+	})};`);
+	css.push(`  color: ${config.color || "#212529"};`);
+	css.push(`  background: ${config.background || "#ffffff"};`);
+	css.push(`  border: ${buildBorder(config.border)};`);
+	css.push(`  border-radius: ${buildBorderRadius(config.borderRadius)};`);
+	css.push(`  padding: ${buildPadding(config.padding)};`);
+	css.push(`  cursor: pointer;`);
+	css.push(`  appearance: none;`);
+	css.push(`  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");`);
+	css.push(`  background-repeat: no-repeat;`);
+	css.push(`  background-position: right 12px center;`);
+	css.push(`  padding-right: 36px;`);
+	css.push(`}`);
+	css.push(`.dark .cux-select {`);
+	css.push(`  color: ${config.dark?.color || "#f8f9fa"};`);
+	css.push(`  background: ${config.dark?.background || "#222222"};`);
+	css.push(`  border-color: ${config.dark?.borderColor || "#495057"};`);
+	css.push(`}`);
+	css.push(``);
+	css.push(`/* Textarea */`);
+	css.push(`.cux-textarea {`);
+	css.push(`  width: 100%;`);
+	css.push(`  min-height: 100px;`);
+	css.push(`  font-family: '${effectiveFontFamily}', sans-serif;`);
+	css.push(`  font-size: ${buildFontSize(config.fontSize || {
+		value: 14,
+		unit: "px"
+	})};`);
+	css.push(`  color: ${config.color || "#212529"};`);
+	css.push(`  background: ${config.background || "#ffffff"};`);
+	css.push(`  border: ${buildBorder(config.border)};`);
+	css.push(`  border-radius: ${buildBorderRadius(config.borderRadius)};`);
+	css.push(`  padding: ${buildPadding(config.padding)};`);
+	css.push(`  resize: vertical;`);
+	css.push(`}`);
+	css.push(`.dark .cux-textarea {`);
+	css.push(`  color: ${config.dark?.color || "#f8f9fa"};`);
+	css.push(`  background: ${config.dark?.background || "#222222"};`);
+	css.push(`  border-color: ${config.dark?.borderColor || "#495057"};`);
+	css.push(`}`);
+	css.push(``);
+	css.push(`/* File / Dropzone */`);
+	css.push(`.cux-dropzone {`);
+	css.push(`  display: flex;`);
+	css.push(`  flex-direction: column;`);
+	css.push(`  align-items: center;`);
+	css.push(`  justify-content: center;`);
+	css.push(`  padding: ${buildPadding(config.padding)};`);
+	css.push(`  min-height: 120px;`);
+	css.push(`  font-family: '${effectiveFontFamily}', sans-serif;`);
+	css.push(`  background: ${config.dropzoneBackground || "#f8f9fa"};`);
+	css.push(`  color: ${config.dropzoneColor || "#6c757d"};`);
+	if (config.dropzoneBorder) css.push(`  border: ${buildBorder(config.dropzoneBorder)};`);
+	if (config.dropzoneBorderRadius) css.push(`  border-radius: ${buildBorderRadius(config.dropzoneBorderRadius)};`);
+	css.push(`  cursor: pointer;`);
+	css.push(`  transition: background-color 0.15s ease, border-color 0.15s ease;`);
+	css.push(`}`);
+	css.push(`.dark .cux-dropzone {`);
+	css.push(`  background: ${config.dark?.dropzoneBackground || "#222222"};`);
+	css.push(`  color: ${config.dark?.dropzoneColor || "#adb5bd"};`);
+	css.push(`  border-color: ${config.dark?.dropzoneBorderColor || "#495057"};`);
+	css.push(`}`);
+	css.push(`.cux-dropzone:hover {`);
+	css.push(`  background: ${config.dropzoneBackground || "#f8f9fa"}dd;`);
+	css.push(`}`);
+	return css.join("\n");
+}
+//#endregion
+//#region src/core/button-generator.ts
+/**
+* Generate complete CSS for button component
+*/
+function generateButtonCSS(variants, globalTypography) {
+	const css = [];
+	css.push(generateButtonBase(globalTypography));
+	variants.forEach((variant) => {
+		const variantName = toKebabCase(variant.name);
+		css.push(generateButtonVariant(variant, variantName, globalTypography));
+		if (variant.dark) {
+			const mergedVariant = deepMerge({ ...variant }, variant.dark);
+			css.push(generateButtonVariantDark(mergedVariant, variantName, globalTypography));
+		}
+	});
+	return css.join("\n\n");
+}
+/**
+* Generate base button styles
+*/
+function generateButtonBase(_globalTypography) {
+	return `/* Button Base Styles */
+.cux-button {
+  /* CSS Custom Properties (set by variants) */
+  --cux-btn-bg: transparent;
+  --cux-btn-color: inherit;
+  --cux-btn-border: none;
+  --cux-btn-radius: 0;
+  --cux-btn-padding: 0;
+  --cux-btn-font: inherit;
+  --cux-btn-font-size: inherit;
+  --cux-btn-font-weight: inherit;
+  --cux-btn-font-style: inherit;
+  --cux-btn-letter-spacing: inherit;
+  --cux-btn-shadow: none;
+
+  /* Hover state variables */
+  --cux-btn-hover-bg: var(--cux-btn-bg);
+  --cux-btn-hover-color: var(--cux-btn-color);
+  --cux-btn-hover-border: var(--cux-btn-border);
+
+  /* Active state variables */
+  --cux-btn-active-bg: var(--cux-btn-bg);
+  --cux-btn-active-color: var(--cux-btn-color);
+  --cux-btn-active-border: var(--cux-btn-border);
+
+  /* Focus state variables */
+  --cux-btn-focus-color: #3b82f6;
+  --cux-btn-focus-offset: 2px;
+
+  /* Disabled state variables */
+  --cux-btn-disabled-bg: var(--cux-btn-bg);
+  --cux-btn-disabled-color: var(--cux-btn-color);
+  --cux-btn-disabled-border: var(--cux-btn-border);
+  --cux-btn-disabled-opacity: 0.5;
+
+  /* Base styles */
+  background: var(--cux-btn-bg);
+  color: var(--cux-btn-color);
+  border: var(--cux-btn-border);
+  border-radius: var(--cux-btn-radius);
+  padding: var(--cux-btn-padding);
+  font-family: var(--cux-btn-font);
+  font-size: var(--cux-btn-font-size);
+  font-weight: var(--cux-btn-font-weight);
+  font-style: var(--cux-btn-font-style);
+  letter-spacing: var(--cux-btn-letter-spacing);
+  box-shadow: var(--cux-btn-shadow);
+
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-decoration: none;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* Hover state */
+.cux-button:hover:not(:disabled) {
+  background: var(--cux-btn-hover-bg);
+  color: var(--cux-btn-hover-color);
+  border: var(--cux-btn-hover-border);
+}
+
+/* Active state */
+.cux-button:active:not(:disabled) {
+  background: var(--cux-btn-active-bg);
+  color: var(--cux-btn-active-color);
+  border: var(--cux-btn-active-border);
+}
+
+/* Focus state */
+.cux-button:focus-visible {
+  outline: 2px solid var(--cux-btn-focus-color);
+  outline-offset: var(--cux-btn-focus-offset);
+}
+
+/* Disabled state */
+.cux-button:disabled {
+  background: var(--cux-btn-disabled-bg);
+  color: var(--cux-btn-disabled-color);
+  border: var(--cux-btn-disabled-border);
+  opacity: var(--cux-btn-disabled-opacity);
+  cursor: not-allowed;
+}`;
+}
+/**
+* Generate CSS for a specific button variant
+*/
+function generateButtonVariant(variant, variantName, globalTypography) {
+	const lines = [];
+	lines.push(`/* Variant: ${variant.name} */`);
+	lines.push(`.cux-button.--${variantName} {`);
+	lines.push(`  --cux-btn-bg: ${variant.background};`);
+	lines.push(`  --cux-btn-color: ${variant.color};`);
+	if (variant.border) lines.push(`  --cux-btn-border: ${buildBorder(variant.border)};`);
+	if (variant.borderRadius) lines.push(`  --cux-btn-radius: ${buildBorderRadius(variant.borderRadius)};`);
+	if (variant.padding) lines.push(`  --cux-btn-padding: ${buildPadding(variant.padding)};`);
+	const fontFamily = variant.fontFamily ?? globalTypography?.fontFamily;
+	if (fontFamily) lines.push(`  --cux-btn-font: '${fontFamily}', sans-serif;`);
+	if (variant.fontSize) lines.push(`  --cux-btn-font-size: ${buildFontSize(variant.fontSize)};`);
+	if (variant.fontWeight) lines.push(`  --cux-btn-font-weight: ${variant.fontWeight};`);
+	if (variant.fontStyle) lines.push(`  --cux-btn-font-style: ${variant.fontStyle};`);
+	if (variant.letterSpacing) lines.push(`  --cux-btn-letter-spacing: ${buildLetterSpacing(variant.letterSpacing)};`);
+	if (variant.shadows) {
+		const shadowValue = buildShadows(variant.shadows);
+		if (shadowValue) lines.push(`  --cux-btn-shadow: ${shadowValue};`);
+	}
+	if (variant.hoverBackground) lines.push(`  --cux-btn-hover-bg: ${variant.hoverBackground};`);
+	if (variant.hoverColor) lines.push(`  --cux-btn-hover-color: ${variant.hoverColor};`);
+	if (variant.hoverBorder) lines.push(`  --cux-btn-hover-border: ${buildBorderOptional(variant.hoverBorder)};`);
+	if (variant.activeBackground) lines.push(`  --cux-btn-active-bg: ${variant.activeBackground};`);
+	if (variant.activeColor) lines.push(`  --cux-btn-active-color: ${variant.activeColor};`);
+	if (variant.activeBorder) lines.push(`  --cux-btn-active-border: ${buildBorderOptional(variant.activeBorder)};`);
+	if (variant.focusColor) lines.push(`  --cux-btn-focus-color: ${variant.focusColor};`);
+	if (variant.focusOffset !== void 0) lines.push(`  --cux-btn-focus-offset: ${buildOffset(variant.focusOffset)};`);
+	if (variant.disabledBackground) lines.push(`  --cux-btn-disabled-bg: ${variant.disabledBackground};`);
+	if (variant.disabledColor) lines.push(`  --cux-btn-disabled-color: ${variant.disabledColor};`);
+	if (variant.disabledBorder) lines.push(`  --cux-btn-disabled-border: ${buildBorderOptional(variant.disabledBorder)};`);
+	if (variant.disabledOpacity !== void 0) lines.push(`  --cux-btn-disabled-opacity: ${variant.disabledOpacity};`);
+	lines.push("}");
+	return lines.join("\n");
+}
+/**
+* Generate dark mode CSS for a button variant
+*/
+function generateButtonVariantDark(variant, variantName, globalTypography) {
+	const lines = [];
+	lines.push(`/* Dark Mode Variant: ${variant.name} */`);
+	lines.push(`.dark .cux-button.--${variantName} {`);
+	if (variant.background) lines.push(`  --cux-btn-bg: ${variant.background};`);
+	if (variant.color) lines.push(`  --cux-btn-color: ${variant.color};`);
+	if (variant.border) lines.push(`  --cux-btn-border: ${buildBorder(variant.border)};`);
+	const fontFamily = variant.fontFamily ?? globalTypography?.fontFamily;
+	if (fontFamily) lines.push(`  --cux-btn-font: '${fontFamily}', sans-serif;`);
+	if (variant.shadows) {
+		const shadowValue = buildShadowsDark(variant.shadows, variant.dark);
+		if (shadowValue) lines.push(`  --cux-btn-shadow: ${shadowValue};`);
+	}
+	if (variant.hoverBackground) lines.push(`  --cux-btn-hover-bg: ${variant.hoverBackground};`);
+	if (variant.hoverColor) lines.push(`  --cux-btn-hover-color: ${variant.hoverColor};`);
+	if (variant.hoverBorder) lines.push(`  --cux-btn-hover-border: ${buildBorderOptional(variant.hoverBorder)};`);
+	if (variant.activeBackground) lines.push(`  --cux-btn-active-bg: ${variant.activeBackground};`);
+	if (variant.activeColor) lines.push(`  --cux-btn-active-color: ${variant.activeColor};`);
+	lines.push("}");
+	return lines.join("\n");
+}
+/**
+* Build a CSS box-shadow string from ComponentShadows (handles offset, inset, and insetHighlight)
+*/
+function buildShadows(shadows) {
+	if (!shadows) return "";
+	const shadowParts = [];
+	if (shadows.offset?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.offset;
+		shadowParts.push(`${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`);
+	}
+	if (shadows.inset?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.inset;
+		shadowParts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`);
+	}
+	if (shadows.insetHighlight?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.insetHighlight;
+		shadowParts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`);
+	}
+	return shadowParts.join(", ");
+}
+/**
+* Build shadows with dark mode color overrides
+*/
+function buildShadowsDark(shadows, dark) {
+	const shadowParts = [];
+	if (shadows.offset?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.offset;
+		const darkColor = dark?.shadowColor || color;
+		shadowParts.push(`${offsetX}px ${offsetY}px ${blur}px ${spread}px ${darkColor}`);
+	}
+	if (shadows.inset?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.inset;
+		const darkColor = dark?.shadowInsetColor || color;
+		shadowParts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${darkColor}`);
+	}
+	if (shadows.insetHighlight?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.insetHighlight;
+		const darkColor = dark?.shadowInsetHighlightColor || color;
+		shadowParts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${darkColor}`);
+	}
+	return shadowParts.join(", ");
+}
+//#endregion
+//#region src/core/css-generator-base.ts
+/**
+* Generate dark mode border override CSS
+* Used by: badge, avatar, card, alert, chip, progress generators
+*/
+function generateDarkBorderOverride(componentName, border, darkBorderColor) {
+	if (!darkBorderColor || !border) return "";
+	return `  --cux-${componentName}-border: ${border.width}${border.unit} ${border.style} ${darkBorderColor};`;
+}
+/**
+* Generate shadow CSS variable for a component
+* Returns empty string if no shadow
+*/
+function generateShadowVar(componentName, shadows) {
+	if (!shadows) return "";
+	const parts = [];
+	if (shadows.offset?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.offset;
+		parts.push(`${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`);
+	}
+	if (shadows.inset?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.inset;
+		parts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`);
+	}
+	if (shadows.insetHighlight?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.insetHighlight;
+		parts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`);
+	}
+	return parts.length > 0 ? `  --cux-${componentName}-shadow: ${parts.join(", ")};` : "";
+}
+/**
+* Generate dark mode shadow CSS variable
+*/
+function generateDarkShadowVar(componentName, shadows, darkColors) {
+	if (!shadows) return "";
+	const parts = [];
+	if (shadows.offset?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.offset;
+		const darkColor = darkColors?.shadowColor || color;
+		parts.push(`${offsetX}px ${offsetY}px ${blur}px ${spread}px ${darkColor}`);
+	}
+	if (shadows.inset?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.inset;
+		const darkColor = darkColors?.shadowInsetColor || color;
+		parts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${darkColor}`);
+	}
+	if (shadows.insetHighlight?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.insetHighlight;
+		const darkColor = darkColors?.shadowInsetHighlightColor || color;
+		parts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${darkColor}`);
+	}
+	return parts.length > 0 ? `  --cux-${componentName}-shadow: ${parts.join(", ")};` : "";
+}
+/**
+* Generate offset shadow for components that separate offset from inset shadows
+* Used by: card, alert, progress (overlay pattern)
+*/
+function generateOffsetShadowVar(componentName, shadows) {
+	if (!shadows?.offset?.enabled) return "";
+	const { offsetX, offsetY, blur, spread, color } = shadows.offset;
+	return `  --cux-${componentName}-shadow: ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color};`;
+}
+/**
+* Generate inset shadow variable for overlay pattern
+*/
+function generateInsetShadowVar(componentName, shadows) {
+	if (!shadows) return "";
+	const parts = [];
+	if (shadows.inset?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.inset;
+		parts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`);
+	}
+	if (shadows.insetHighlight?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.insetHighlight;
+		parts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`);
+	}
+	return parts.length > 0 ? `  --cux-${componentName}-inset-shadow: ${parts.join(", ")};` : "";
+}
+/**
+* Generate dark mode offset shadow
+*/
+function generateDarkOffsetShadowVar(componentName, shadows, shadowColor) {
+	if (!shadows?.offset?.enabled) return "";
+	const { offsetX, offsetY, blur, spread, color } = shadows.offset;
+	return `  --cux-${componentName}-shadow: ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${shadowColor || color};`;
+}
+/**
+* Generate dark mode inset shadow
+*/
+function generateDarkInsetShadowVar(componentName, shadows, shadowInsetColor, shadowInsetHighlightColor) {
+	if (!shadows) return "";
+	const parts = [];
+	if (shadows.inset?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.inset;
+		parts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${shadowInsetColor || color}`);
+	}
+	if (shadows.insetHighlight?.enabled) {
+		const { offsetX, offsetY, blur, spread, color } = shadows.insetHighlight;
+		parts.push(`inset ${offsetX}px ${offsetY}px ${blur}px ${spread}px ${shadowInsetHighlightColor || color}`);
+	}
+	return parts.length > 0 ? `  --cux-${componentName}-inset-shadow: ${parts.join(", ")};` : "";
+}
+/**
+* Generate typography CSS lines for a component
+* Returns array of CSS lines (without selector)
+*/
+function generateTypographyLines(options, globalConfig) {
+	const lines = [];
+	const effectiveFontFamily = getEffectiveFontFamily$2(options.fontFamily, globalConfig?.fontFamily);
+	if (effectiveFontFamily) lines.push(`  font-family: '${effectiveFontFamily}', sans-serif;`);
+	if (options.fontSize) lines.push(`  font-size: ${buildFontSize(options.fontSize)};`);
+	if (options.fontWeight) lines.push(`  font-weight: ${options.fontWeight};`);
+	if (options.fontStyle) lines.push(`  font-style: ${options.fontStyle};`);
+	if (options.letterSpacing) lines.push(`  letter-spacing: ${buildLetterSpacing(options.letterSpacing)};`);
+	if (options.textAlign) lines.push(`  text-align: ${options.textAlign};`);
+	return lines;
+}
+/**
+* Generate typography CSS block with selector
+*/
+function generateTypographyBlock(selector, options, globalConfig) {
+	const lines = generateTypographyLines(options, globalConfig);
+	if (lines.length === 0) return "";
+	return `${selector} {
+${lines.join("\n")}
+}`;
+}
+/**
+* Generate base variant CSS properties (background, color, border, radius, padding)
+*/
+function generateBaseProperties(componentName, variant) {
+	const lines = [];
+	lines.push(`  --cux-${componentName}-bg: ${variant.background};`);
+	lines.push(`  --cux-${componentName}-color: ${variant.color};`);
+	if (variant.border) lines.push(`  --cux-${componentName}-border: ${buildBorder(variant.border)};`);
+	if (variant.borderRadius) lines.push(`  --cux-${componentName}-radius: ${buildBorderRadius(variant.borderRadius)};`);
+	if (variant.padding) lines.push(`  --cux-${componentName}-padding: ${buildPadding(variant.padding)};`);
+	return lines;
+}
+/**
+* Generate dark mode base properties
+*/
+function generateDarkBaseProperties(componentName, dark) {
+	const lines = [];
+	if (dark.background) lines.push(`  --cux-${componentName}-bg: ${dark.background};`);
+	if (dark.color) lines.push(`  --cux-${componentName}-color: ${dark.color};`);
+	return lines;
+}
+//#endregion
+//#region src/core/card-generator.ts
+const COMPONENT$6 = "card";
+/**
+* Generate complete CSS for card component
+*/
+function generateCardCSS(variants, globalConfig) {
+	const css = [];
+	css.push(generateCardBase());
+	variants.forEach((variant) => {
+		const variantName = toKebabCase(variant.name);
+		css.push(generateCardVariant(variant, variantName, globalConfig));
+		if (variant.dark) css.push(generateCardVariantDark(variant, variantName));
+	});
+	return css.join("\n\n");
+}
+/**
+* Generate base card styles
+*/
+function generateCardBase() {
+	return `/* Card Base Styles */
+.cux-${COMPONENT$6} {
+  --cux-${COMPONENT$6}-bg: #ffffff;
+  --cux-${COMPONENT$6}-color: inherit;
+  --cux-${COMPONENT$6}-border: none;
+  --cux-${COMPONENT$6}-radius: 0;
+  --cux-${COMPONENT$6}-padding: 0;
+  --cux-${COMPONENT$6}-shadow: none;
+  --cux-${COMPONENT$6}-inset-shadow: none;
+
+  /* Header properties */
+  --cux-${COMPONENT$6}-header-bg: transparent;
+  --cux-${COMPONENT$6}-header-color: inherit;
+  --cux-${COMPONENT$6}-header-padding: 0;
+  --cux-${COMPONENT$6}-header-border-bottom: none;
+
+  position: relative;
+  background: var(--cux-${COMPONENT$6}-bg);
+  color: var(--cux-${COMPONENT$6}-color);
+  border: var(--cux-${COMPONENT$6}-border);
+  border-radius: var(--cux-${COMPONENT$6}-radius);
+  box-shadow: var(--cux-${COMPONENT$6}-shadow);
+  overflow: hidden;
+}
+
+.cux-${COMPONENT$6}-inset-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: var(--cux-${COMPONENT$6}-radius);
+  box-shadow: var(--cux-${COMPONENT$6}-inset-shadow);
+  pointer-events: none;
+}
+
+.cux-${COMPONENT$6}-header {
+  position: relative;
+  z-index: 1;
+  background: var(--cux-${COMPONENT$6}-header-bg);
+  color: var(--cux-${COMPONENT$6}-header-color);
+  padding: var(--cux-${COMPONENT$6}-header-padding);
+  border-bottom: var(--cux-${COMPONENT$6}-header-border-bottom);
+}
+
+.cux-${COMPONENT$6}-body {
+  position: relative;
+  z-index: 1;
+  padding: var(--cux-${COMPONENT$6}-padding);
+}
+
+.cux-${COMPONENT$6}-footer {
+  position: relative;
+  z-index: 1;
+  padding: var(--cux-${COMPONENT$6}-padding);
+  border-top: var(--cux-${COMPONENT$6}-header-border-bottom);
+}`;
+}
+/**
+* Generate CSS for a specific card variant
+*/
+function generateCardVariant(variant, variantName, globalConfig) {
+	const lines = [];
+	lines.push(`/* Variant: ${variant.name} */`);
+	lines.push(`.cux-${COMPONENT$6}.--${variantName} {`);
+	lines.push(`  --cux-${COMPONENT$6}-bg: ${variant.background};`);
+	lines.push(`  --cux-${COMPONENT$6}-color: ${variant.color};`);
+	if (variant.border) lines.push(`  --cux-${COMPONENT$6}-border: ${buildBorder(variant.border)};`);
+	if (variant.borderRadius) lines.push(`  --cux-${COMPONENT$6}-radius: ${variant.borderRadius.tl}${variant.borderRadius.unit};`);
+	if (variant.padding) lines.push(`  --cux-${COMPONENT$6}-padding: ${buildPadding(variant.padding)};`);
+	const offsetShadow = generateOffsetShadowVar(COMPONENT$6, variant.shadows);
+	if (offsetShadow) lines.push(offsetShadow);
+	const insetShadow = generateInsetShadowVar(COMPONENT$6, variant.shadows);
+	if (insetShadow) lines.push(insetShadow);
+	lines.push(`  --cux-${COMPONENT$6}-header-bg: ${variant.headerBackground};`);
+	lines.push(`  --cux-${COMPONENT$6}-header-color: ${variant.headerColor};`);
+	if (variant.headerPadding) lines.push(`  --cux-${COMPONENT$6}-header-padding: ${buildPadding(variant.headerPadding)};`);
+	if (variant.headerBorderBottom) lines.push(`  --cux-${COMPONENT$6}-header-border-bottom: ${buildBorder(variant.headerBorderBottom)};`);
+	lines.push("}");
+	const bodyTypography = generateTypographyLines({
+		fontFamily: variant.fontFamily,
+		fontSize: variant.fontSize,
+		fontWeight: variant.fontWeight,
+		fontStyle: variant.fontStyle,
+		letterSpacing: variant.letterSpacing,
+		textAlign: variant.textAlign
+	}, globalConfig);
+	if (bodyTypography.length > 0) {
+		lines.push("");
+		lines.push(`.cux-${COMPONENT$6}.--${variantName} .cux-${COMPONENT$6}-body {`);
+		lines.push(...bodyTypography);
+		lines.push("}");
+	}
+	const headerTypography = generateTypographyLines({
+		fontFamily: variant.headerFontFamily,
+		fontSize: variant.headerFontSize,
+		fontWeight: variant.headerFontWeight,
+		fontStyle: variant.headerFontStyle,
+		letterSpacing: variant.headerLetterSpacing,
+		textAlign: variant.headerTextAlign
+	}, globalConfig);
+	if (headerTypography.length > 0) {
+		lines.push("");
+		lines.push(`.cux-${COMPONENT$6}.--${variantName} .cux-${COMPONENT$6}-header {`);
+		lines.push(...headerTypography);
+		lines.push("}");
+	}
+	return lines.join("\n");
+}
+/**
+* Generate dark mode CSS for a card variant
+*/
+function generateCardVariantDark(variant, variantName) {
+	const dark = variant.dark;
+	if (!dark) return "";
+	const lines = [];
+	lines.push(`/* Dark Mode Variant: ${variant.name} */`);
+	lines.push(`.dark .cux-${COMPONENT$6}.--${variantName} {`);
+	lines.push(...generateDarkBaseProperties(COMPONENT$6, dark));
+	const borderOverride = generateDarkBorderOverride(COMPONENT$6, variant.border, dark.borderColor);
+	if (borderOverride) lines.push(borderOverride);
+	if (dark.headerBackground) lines.push(`  --cux-${COMPONENT$6}-header-bg: ${dark.headerBackground};`);
+	if (dark.headerColor) lines.push(`  --cux-${COMPONENT$6}-header-color: ${dark.headerColor};`);
+	if (dark.headerBorderBottomColor && variant.headerBorderBottom) lines.push(`  --cux-${COMPONENT$6}-header-border-bottom: ${variant.headerBorderBottom.width}${variant.headerBorderBottom.unit} ${variant.headerBorderBottom.style} ${dark.headerBorderBottomColor};`);
+	const offsetShadow = generateDarkOffsetShadowVar(COMPONENT$6, variant.shadows, dark.shadowColor);
+	if (offsetShadow) lines.push(offsetShadow);
+	const insetShadow = generateDarkInsetShadowVar(COMPONENT$6, variant.shadows, dark.shadowInsetColor, dark.shadowInsetHighlightColor);
+	if (insetShadow) lines.push(insetShadow);
+	lines.push("}");
+	return lines.join("\n");
+}
+//#endregion
+//#region src/core/alert-generator.ts
+const COMPONENT$5 = "alert";
+/**
+* Generate complete CSS for alert component
+*/
+function generateAlertCSS(variants, globalConfig) {
+	const css = [];
+	css.push(generateAlertBase());
+	variants.forEach((variant) => {
+		const variantName = toKebabCase(variant.name);
+		css.push(generateAlertVariant(variant, variantName, globalConfig));
+		if (variant.dark) css.push(generateAlertVariantDark(variant, variantName));
+	});
+	return css.join("\n\n");
+}
+/**
+* Generate base alert styles
+*/
+function generateAlertBase() {
+	return `/* Alert Base Styles */
+.cux-${COMPONENT$5} {
+  --cux-${COMPONENT$5}-bg: transparent;
+  --cux-${COMPONENT$5}-color: inherit;
+  --cux-${COMPONENT$5}-border: none;
+  --cux-${COMPONENT$5}-radius: 0;
+  --cux-${COMPONENT$5}-padding: 0;
+  --cux-${COMPONENT$5}-shadow: none;
+  --cux-${COMPONENT$5}-inset-shadow: none;
+
+  /* Header properties */
+  --cux-${COMPONENT$5}-header-bg: transparent;
+  --cux-${COMPONENT$5}-header-color: inherit;
+  --cux-${COMPONENT$5}-header-padding: 0;
+  --cux-${COMPONENT$5}-header-border-bottom: none;
+
+  /* Close button properties */
+  --cux-${COMPONENT$5}-close-size: 20px;
+  --cux-${COMPONENT$5}-close-color: #6c757d;
+  --cux-${COMPONENT$5}-close-hover-color: #495057;
+  --cux-${COMPONENT$5}-close-active-color: #212529;
+
+  /* Layout */
+  --cux-${COMPONENT$5}-max-width: 500px;
+  --cux-${COMPONENT$5}-offset: 16px;
+
+  position: relative;
+  background: var(--cux-${COMPONENT$5}-bg);
+  color: var(--cux-${COMPONENT$5}-color);
+  border: var(--cux-${COMPONENT$5}-border);
+  border-radius: var(--cux-${COMPONENT$5}-radius);
+  box-shadow: var(--cux-${COMPONENT$5}-shadow);
+  max-width: var(--cux-${COMPONENT$5}-max-width);
+  overflow: hidden;
+}
+
+.cux-${COMPONENT$5}-inset-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: var(--cux-${COMPONENT$5}-radius);
+  box-shadow: var(--cux-${COMPONENT$5}-inset-shadow);
+  pointer-events: none;
+}
+
+.cux-${COMPONENT$5}-header {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  background: var(--cux-${COMPONENT$5}-header-bg);
+  color: var(--cux-${COMPONENT$5}-header-color);
+  padding: var(--cux-${COMPONENT$5}-header-padding);
+  border-bottom: var(--cux-${COMPONENT$5}-header-border-bottom);
+}
+
+.cux-${COMPONENT$5}-body {
+  position: relative;
+  z-index: 1;
+  padding: var(--cux-${COMPONENT$5}-padding);
+}
+
+.cux-${COMPONENT$5}-close {
+  flex-shrink: 0;
+  width: var(--cux-${COMPONENT$5}-close-size);
+  height: var(--cux-${COMPONENT$5}-close-size);
+  background: transparent;
+  border: none;
+  color: var(--cux-${COMPONENT$5}-close-color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 4px;
+  transition: color 0.15s ease;
+}
+
+.cux-${COMPONENT$5}-close:hover { color: var(--cux-${COMPONENT$5}-close-hover-color); }
+.cux-${COMPONENT$5}-close:active { color: var(--cux-${COMPONENT$5}-close-active-color); }
+.cux-${COMPONENT$5}-close svg { width: 100%; height: 100%; }
+
+/* Position modifiers */
+.cux-${COMPONENT$5}.--top-left { position: fixed; top: var(--cux-${COMPONENT$5}-offset); left: var(--cux-${COMPONENT$5}-offset); z-index: 9999; }
+.cux-${COMPONENT$5}.--top-center { position: fixed; top: var(--cux-${COMPONENT$5}-offset); left: 50%; transform: translateX(-50%); z-index: 9999; }
+.cux-${COMPONENT$5}.--top-right { position: fixed; top: var(--cux-${COMPONENT$5}-offset); right: var(--cux-${COMPONENT$5}-offset); z-index: 9999; }
+.cux-${COMPONENT$5}.--center-left { position: fixed; top: 50%; left: var(--cux-${COMPONENT$5}-offset); transform: translateY(-50%); z-index: 9999; }
+.cux-${COMPONENT$5}.--center-center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; }
+.cux-${COMPONENT$5}.--center-right { position: fixed; top: 50%; right: var(--cux-${COMPONENT$5}-offset); transform: translateY(-50%); z-index: 9999; }
+.cux-${COMPONENT$5}.--bottom-left { position: fixed; bottom: var(--cux-${COMPONENT$5}-offset); left: var(--cux-${COMPONENT$5}-offset); z-index: 9999; }
+.cux-${COMPONENT$5}.--bottom-center { position: fixed; bottom: var(--cux-${COMPONENT$5}-offset); left: 50%; transform: translateX(-50%); z-index: 9999; }
+.cux-${COMPONENT$5}.--bottom-right { position: fixed; bottom: var(--cux-${COMPONENT$5}-offset); right: var(--cux-${COMPONENT$5}-offset); z-index: 9999; }`;
+}
+/**
+* Generate CSS for a specific alert variant
+*/
+function generateAlertVariant(variant, variantName, globalConfig) {
+	const lines = [];
+	lines.push(`/* Variant: ${variant.name} */`);
+	lines.push(`.cux-${COMPONENT$5}.--${variantName} {`);
+	lines.push(`  --cux-${COMPONENT$5}-bg: ${variant.background};`);
+	lines.push(`  --cux-${COMPONENT$5}-color: ${variant.color};`);
+	if (variant.border) lines.push(`  --cux-${COMPONENT$5}-border: ${buildBorder(variant.border)};`);
+	if (variant.borderRadius) lines.push(`  --cux-${COMPONENT$5}-radius: ${variant.borderRadius.tl}${variant.borderRadius.unit};`);
+	if (variant.padding) lines.push(`  --cux-${COMPONENT$5}-padding: ${buildPadding(variant.padding)};`);
+	const offsetShadow = generateOffsetShadowVar(COMPONENT$5, variant.shadows);
+	if (offsetShadow) lines.push(offsetShadow);
+	const insetShadow = generateInsetShadowVar(COMPONENT$5, variant.shadows);
+	if (insetShadow) lines.push(insetShadow);
+	lines.push(`  --cux-${COMPONENT$5}-header-bg: ${variant.headerBackground};`);
+	lines.push(`  --cux-${COMPONENT$5}-header-color: ${variant.headerColor};`);
+	if (variant.headerPadding) lines.push(`  --cux-${COMPONENT$5}-header-padding: ${buildPadding(variant.headerPadding)};`);
+	if (variant.headerBorderBottom) lines.push(`  --cux-${COMPONENT$5}-header-border-bottom: ${buildBorder(variant.headerBorderBottom)};`);
+	if (variant.closeSize) lines.push(`  --cux-${COMPONENT$5}-close-size: ${variant.closeSize.value}${variant.closeSize.unit};`);
+	lines.push(`  --cux-${COMPONENT$5}-close-color: ${variant.closeColor};`);
+	lines.push(`  --cux-${COMPONENT$5}-close-hover-color: ${variant.closeHoverColor};`);
+	lines.push(`  --cux-${COMPONENT$5}-close-active-color: ${variant.closeActiveColor};`);
+	lines.push(`  --cux-${COMPONENT$5}-max-width: ${variant.maxWidth.value}${variant.maxWidth.unit};`);
+	lines.push(`  --cux-${COMPONENT$5}-offset: ${variant.offset.value}${variant.offset.unit};`);
+	lines.push("}");
+	const bodyTypography = generateTypographyLines({
+		fontFamily: variant.fontFamily,
+		fontSize: variant.fontSize,
+		fontWeight: variant.fontWeight,
+		fontStyle: variant.fontStyle,
+		letterSpacing: variant.letterSpacing,
+		textAlign: variant.textAlign
+	}, globalConfig);
+	if (bodyTypography.length > 0) {
+		lines.push("");
+		lines.push(`.cux-${COMPONENT$5}.--${variantName} .cux-${COMPONENT$5}-body {`);
+		lines.push(...bodyTypography);
+		lines.push("}");
+	}
+	const headerTypography = generateTypographyLines({
+		fontFamily: variant.headerFontFamily,
+		fontSize: variant.headerFontSize,
+		fontWeight: variant.headerFontWeight,
+		fontStyle: variant.headerFontStyle,
+		letterSpacing: variant.headerLetterSpacing,
+		textAlign: variant.headerTextAlign
+	}, globalConfig);
+	if (headerTypography.length > 0) {
+		lines.push("");
+		lines.push(`.cux-${COMPONENT$5}.--${variantName} .cux-${COMPONENT$5}-header {`);
+		lines.push(...headerTypography);
+		lines.push("}");
+	}
+	return lines.join("\n");
+}
+/**
+* Generate dark mode CSS for an alert variant
+*/
+function generateAlertVariantDark(variant, variantName) {
+	const dark = variant.dark;
+	if (!dark) return "";
+	const lines = [];
+	lines.push(`/* Dark Mode Variant: ${variant.name} */`);
+	lines.push(`.dark .cux-${COMPONENT$5}.--${variantName} {`);
+	lines.push(...generateDarkBaseProperties(COMPONENT$5, dark));
+	const borderOverride = generateDarkBorderOverride(COMPONENT$5, variant.border, dark.borderColor);
+	if (borderOverride) lines.push(borderOverride);
+	if (dark.headerBackground) lines.push(`  --cux-${COMPONENT$5}-header-bg: ${dark.headerBackground};`);
+	if (dark.headerColor) lines.push(`  --cux-${COMPONENT$5}-header-color: ${dark.headerColor};`);
+	if (dark.headerBorderBottomColor && variant.headerBorderBottom) lines.push(`  --cux-${COMPONENT$5}-header-border-bottom: ${variant.headerBorderBottom.width}${variant.headerBorderBottom.unit} ${variant.headerBorderBottom.style} ${dark.headerBorderBottomColor};`);
+	if (dark.closeColor) lines.push(`  --cux-${COMPONENT$5}-close-color: ${dark.closeColor};`);
+	if (dark.closeHoverColor) lines.push(`  --cux-${COMPONENT$5}-close-hover-color: ${dark.closeHoverColor};`);
+	if (dark.closeActiveColor) lines.push(`  --cux-${COMPONENT$5}-close-active-color: ${dark.closeActiveColor};`);
+	const offsetShadow = generateDarkOffsetShadowVar(COMPONENT$5, variant.shadows, dark.shadowColor);
+	if (offsetShadow) lines.push(offsetShadow);
+	const insetShadow = generateDarkInsetShadowVar(COMPONENT$5, variant.shadows, dark.shadowInsetColor, dark.shadowInsetHighlightColor);
+	if (insetShadow) lines.push(insetShadow);
+	lines.push("}");
+	return lines.join("\n");
+}
+//#endregion
+//#region src/core/avatar-generator.ts
+const COMPONENT$4 = "avatar";
+/**
+* Generate complete CSS for avatar component
+*/
+function generateAvatarCSS(variants, globalConfig) {
+	const css = [];
+	css.push(generateAvatarBase());
+	variants.forEach((variant) => {
+		const variantName = toKebabCase(variant.name);
+		css.push(generateAvatarVariant(variant, variantName, globalConfig));
+		if (variant.dark) css.push(generateAvatarVariantDark(variant, variantName));
+	});
+	return css.join("\n\n");
+}
+/**
+* Generate base avatar styles
+*/
+function generateAvatarBase() {
+	return `/* Avatar Base Styles */
+.cux-${COMPONENT$4} {
+  --cux-${COMPONENT$4}-bg: transparent;
+  --cux-${COMPONENT$4}-color: inherit;
+  --cux-${COMPONENT$4}-border: none;
+  --cux-${COMPONENT$4}-radius: 50%;
+  --cux-${COMPONENT$4}-padding: 0;
+  --cux-${COMPONENT$4}-shadow: none;
+
+  background: var(--cux-${COMPONENT$4}-bg);
+  color: var(--cux-${COMPONENT$4}-color);
+  border: var(--cux-${COMPONENT$4}-border);
+  border-radius: var(--cux-${COMPONENT$4}-radius);
+  padding: var(--cux-${COMPONENT$4}-padding);
+  box-shadow: var(--cux-${COMPONENT$4}-shadow);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  vertical-align: middle;
+  position: relative;
+}
+
+.cux-${COMPONENT$4} img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cux-${COMPONENT$4}-initials {
+  text-transform: uppercase;
+  user-select: none;
+}
+
+/* Size modifiers */
+.cux-${COMPONENT$4}.--xs { width: 24px; height: 24px; }
+.cux-${COMPONENT$4}.--sm { width: 32px; height: 32px; }
+.cux-${COMPONENT$4}.--md { width: 40px; height: 40px; }
+.cux-${COMPONENT$4}.--lg { width: 48px; height: 48px; }
+.cux-${COMPONENT$4}.--xl { width: 64px; height: 64px; }
+.cux-${COMPONENT$4}.--xxl { width: 96px; height: 96px; }
+
+/* Status indicator */
+.cux-${COMPONENT$4}-status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 25%;
+  height: 25%;
+  min-width: 8px;
+  min-height: 8px;
+  border-radius: 50%;
+  border: 2px solid white;
+  background: #6c757d;
+}
+
+.cux-${COMPONENT$4}-status.--online { background: #28a745; }
+.cux-${COMPONENT$4}-status.--offline { background: #6c757d; }
+.cux-${COMPONENT$4}-status.--busy { background: #dc3545; }
+.cux-${COMPONENT$4}-status.--away { background: #ffc107; }`;
+}
+/**
+* Generate CSS for a specific avatar variant
+*/
+function generateAvatarVariant(variant, variantName, globalConfig) {
+	const lines = [];
+	lines.push(`/* Variant: ${variant.name} */`);
+	lines.push(`.cux-${COMPONENT$4}.--${variantName} {`);
+	lines.push(...generateBaseProperties(COMPONENT$4, variant));
+	const shadowVar = generateShadowVar(COMPONENT$4, variant.shadows);
+	if (shadowVar) lines.push(shadowVar);
+	lines.push("}");
+	const typographyLines = generateTypographyLines({
+		fontFamily: variant.fontFamily,
+		fontSize: variant.fontSize,
+		fontWeight: variant.fontWeight,
+		fontStyle: variant.fontStyle,
+		letterSpacing: variant.letterSpacing
+	}, globalConfig);
+	if (typographyLines.length > 0) {
+		lines.push("");
+		lines.push(`.cux-${COMPONENT$4}.--${variantName} .cux-${COMPONENT$4}-initials {`);
+		lines.push(...typographyLines);
+		lines.push("}");
+	}
+	return lines.join("\n");
+}
+/**
+* Generate dark mode CSS for an avatar variant
+*/
+function generateAvatarVariantDark(variant, variantName) {
+	const dark = variant.dark;
+	if (!dark) return "";
+	const lines = [];
+	lines.push(`/* Dark Mode Variant: ${variant.name} */`);
+	lines.push(`.dark .cux-${COMPONENT$4}.--${variantName} {`);
+	lines.push(...generateDarkBaseProperties(COMPONENT$4, dark));
+	const borderOverride = generateDarkBorderOverride(COMPONENT$4, variant.border, dark.borderColor);
+	if (borderOverride) lines.push(borderOverride);
+	const shadowVar = generateDarkShadowVar(COMPONENT$4, variant.shadows, dark);
+	if (shadowVar) lines.push(shadowVar);
+	lines.push("}");
+	return lines.join("\n");
+}
+//#endregion
+//#region src/core/progress-generator.ts
+const COMPONENT$3 = "progress";
+/**
+* Generate complete CSS for progress component
+*/
+function generateProgressCSS(variants, globalConfig) {
+	const css = [];
+	css.push(generateProgressBase());
+	variants.forEach((variant) => {
+		const variantName = toKebabCase(variant.name);
+		css.push(generateProgressVariant(variant, variantName, globalConfig));
+		if (variant.dark) css.push(generateProgressVariantDark(variant, variantName));
+	});
+	return css.join("\n\n");
+}
+/**
+* Generate base progress styles
+*/
+function generateProgressBase() {
+	return `/* Progress Base Styles */
+.cux-${COMPONENT$3} {
+  --cux-${COMPONENT$3}-track-color: #e9ecef;
+  --cux-${COMPONENT$3}-fill-color: #0d6efd;
+  --cux-${COMPONENT$3}-stripe-color: rgba(255, 255, 255, 0.15);
+  --cux-${COMPONENT$3}-height: 16px;
+  --cux-${COMPONENT$3}-radius: 4px;
+  --cux-${COMPONENT$3}-border: none;
+  --cux-${COMPONENT$3}-shadow: none;
+  --cux-${COMPONENT$3}-inset-shadow: none;
+  --cux-${COMPONENT$3}-stripe-speed: 1s;
+
+  /* Label properties */
+  --cux-${COMPONENT$3}-label-color: #212529;
+  --cux-${COMPONENT$3}-label-font-size: 12px;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--cux-${COMPONENT$3}-track-color);
+  height: var(--cux-${COMPONENT$3}-height);
+  border-radius: var(--cux-${COMPONENT$3}-radius);
+  border: var(--cux-${COMPONENT$3}-border);
+  box-shadow: var(--cux-${COMPONENT$3}-shadow);
+  overflow: hidden;
+}
+
+.cux-${COMPONENT$3}-inset-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: var(--cux-${COMPONENT$3}-radius);
+  box-shadow: var(--cux-${COMPONENT$3}-inset-shadow);
+  pointer-events: none;
+}
+
+.cux-${COMPONENT$3}-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  background-color: var(--cux-${COMPONENT$3}-fill-color);
+  transition: width 0.3s ease;
+}
+
+.cux-${COMPONENT$3}-fill.--striped {
+  background-image: linear-gradient(
+    45deg,
+    var(--cux-${COMPONENT$3}-stripe-color) 25%,
+    transparent 25%,
+    transparent 50%,
+    var(--cux-${COMPONENT$3}-stripe-color) 50%,
+    var(--cux-${COMPONENT$3}-stripe-color) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: calc(var(--cux-${COMPONENT$3}-height) * 2) calc(var(--cux-${COMPONENT$3}-height) * 2);
+  background-color: var(--cux-${COMPONENT$3}-fill-color);
+}
+
+.cux-${COMPONENT$3}-fill.--animated {
+  animation: cux-${COMPONENT$3}-stripes var(--cux-${COMPONENT$3}-stripe-speed) linear infinite;
+}
+
+@keyframes cux-${COMPONENT$3}-stripes {
+  0% { background-position: 0 0; }
+  100% { background-position: calc(var(--cux-${COMPONENT$3}-height) * -2) 0; }
+}
+
+.cux-${COMPONENT$3}-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  color: var(--cux-${COMPONENT$3}-label-color);
+  font-size: var(--cux-${COMPONENT$3}-label-font-size);
+  pointer-events: none;
+}`;
+}
+/**
+* Generate CSS for a specific progress variant
+*/
+function generateProgressVariant(variant, variantName, globalConfig) {
+	const lines = [];
+	lines.push(`/* Variant: ${variant.name} */`);
+	lines.push(`.cux-${COMPONENT$3}.--${variantName} {`);
+	lines.push(`  --cux-${COMPONENT$3}-track-color: ${variant.trackColor};`);
+	lines.push(`  --cux-${COMPONENT$3}-fill-color: ${variant.fillColor};`);
+	lines.push(`  --cux-${COMPONENT$3}-stripe-color: ${variant.stripeColor};`);
+	if (variant.height) lines.push(`  --cux-${COMPONENT$3}-height: ${variant.height.value}${variant.height.unit};`);
+	if (variant.borderRadius) lines.push(`  --cux-${COMPONENT$3}-radius: ${buildBorderRadius(variant.borderRadius)};`);
+	if (variant.border) lines.push(`  --cux-${COMPONENT$3}-border: ${buildBorder(variant.border)};`);
+	lines.push(`  --cux-${COMPONENT$3}-stripe-speed: ${variant.speed}s;`);
+	const offsetShadow = generateOffsetShadowVar(COMPONENT$3, variant.shadows);
+	if (offsetShadow) lines.push(offsetShadow);
+	const insetShadow = generateInsetShadowVar(COMPONENT$3, variant.shadows);
+	if (insetShadow) lines.push(insetShadow);
+	lines.push("}");
+	lines.push("");
+	lines.push(`.cux-${COMPONENT$3}.--${variantName} .cux-${COMPONENT$3}-label {`);
+	const labelTypography = generateTypographyLines({
+		fontFamily: variant.fontFamily,
+		fontSize: variant.labelFontSize,
+		fontWeight: variant.fontWeight,
+		fontStyle: variant.fontStyle
+	}, globalConfig);
+	lines.push(`  color: ${variant.labelColor};`);
+	lines.push(`  font-size: ${buildFontSize(variant.labelFontSize)};`);
+	lines.push(...labelTypography.filter((l) => !l.includes("font-size")));
+	lines.push(`  display: ${variant.showLabel ? "block" : "none"};`);
+	lines.push("}");
+	return lines.join("\n");
+}
+/**
+* Generate dark mode CSS for a progress variant
+*/
+function generateProgressVariantDark(variant, variantName) {
+	const dark = variant.dark;
+	if (!dark) return "";
+	const lines = [];
+	lines.push(`/* Dark Mode Variant: ${variant.name} */`);
+	lines.push(`.dark .cux-${COMPONENT$3}.--${variantName} {`);
+	if (dark.trackColor) lines.push(`  --cux-${COMPONENT$3}-track-color: ${dark.trackColor};`);
+	if (dark.fillColor) lines.push(`  --cux-${COMPONENT$3}-fill-color: ${dark.fillColor};`);
+	if (dark.stripeColor) lines.push(`  --cux-${COMPONENT$3}-stripe-color: ${dark.stripeColor};`);
+	const borderOverride = generateDarkBorderOverride(COMPONENT$3, variant.border, dark.borderColor);
+	if (borderOverride) lines.push(borderOverride);
+	const offsetShadow = generateDarkOffsetShadowVar(COMPONENT$3, variant.shadows, dark.shadowColor);
+	if (offsetShadow) lines.push(offsetShadow);
+	const insetShadow = generateDarkInsetShadowVar(COMPONENT$3, variant.shadows, dark.shadowInsetColor, dark.shadowInsetHighlightColor);
+	if (insetShadow) lines.push(insetShadow);
+	lines.push("}");
+	if (dark.labelColor) {
+		lines.push("");
+		lines.push(`.dark .cux-${COMPONENT$3}.--${variantName} .cux-${COMPONENT$3}-label {`);
+		lines.push(`  color: ${dark.labelColor};`);
+		lines.push("}");
+	}
+	return lines.join("\n");
+}
+//#endregion
+//#region src/core/spinner-generator.ts
+const COMPONENT$2 = "spinner";
+/**
+* Generate complete CSS for spinner component
+*/
+function generateSpinnerCSS(variants) {
+	const css = [];
+	css.push(generateSpinnerBase());
+	css.push(generateSpinnerAnimations());
+	variants.forEach((variant) => {
+		const variantName = toKebabCase(variant.name);
+		css.push(generateSpinnerVariant(variant, variantName));
+		if (variant.dark) css.push(generateSpinnerVariantDark(variant, variantName));
+	});
+	return css.join("\n\n");
+}
+/**
+* Generate base spinner styles (shared across all types)
+*/
+function generateSpinnerBase() {
+	return `/* Spinner Base Styles */
+.cux-${COMPONENT$2} {
+  --cux-${COMPONENT$2}-color: #0d6efd;
+  --cux-${COMPONENT$2}-track: #95b6d8;
+  --cux-${COMPONENT$2}-size: 40px;
+  --cux-${COMPONENT$2}-speed: 1s;
+  --cux-${COMPONENT$2}-delay2: 0.2s;
+  --cux-${COMPONENT$2}-delay3: 0.4s;
+  --cux-${COMPONENT$2}-delay4: 0.6s;
+  --cux-${COMPONENT$2}-delay5: 0.8s;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}`;
+}
+/**
+* Generate all spinner animations
+*/
+function generateSpinnerAnimations() {
+	return `/* Spinner Animations */
+@keyframes cux-${COMPONENT$2}-ring-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes cux-${COMPONENT$2}-pulse-scale {
+  0%, 100% {
+    transform: scale(0.5);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes cux-${COMPONENT$2}-dots-bounce {
+  0%, 100% {
+    transform: translateY(0);
+    opacity: 0.3;
+  }
+  50% {
+    transform: translateY(calc(var(--cux-${COMPONENT$2}-size) * -0.25));
+    opacity: 1;
+  }
+}
+
+@keyframes cux-${COMPONENT$2}-bars-stretch {
+  0%, 100% {
+    transform: scaleY(0.3);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
+@keyframes cux-${COMPONENT$2}-dual-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Ring Spinner */
+.cux-${COMPONENT$2}-ring {
+  width: var(--cux-${COMPONENT$2}-size);
+  height: var(--cux-${COMPONENT$2}-size);
+}
+
+.cux-${COMPONENT$2}-ring-track {
+  stroke: var(--cux-${COMPONENT$2}-track);
+  fill: none;
+}
+
+.cux-${COMPONENT$2}-ring-arc {
+  stroke: var(--cux-${COMPONENT$2}-color);
+  fill: none;
+  stroke-linecap: round;
+  animation: cux-${COMPONENT$2}-ring-spin var(--cux-${COMPONENT$2}-speed) linear infinite;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+/* Pulse Spinner */
+.cux-${COMPONENT$2}-pulse {
+  width: var(--cux-${COMPONENT$2}-size);
+  height: var(--cux-${COMPONENT$2}-size);
+}
+
+.cux-${COMPONENT$2}-pulse-bg {
+  fill: var(--cux-${COMPONENT$2}-track);
+  opacity: 0.3;
+  animation: cux-${COMPONENT$2}-pulse-scale var(--cux-${COMPONENT$2}-speed) ease-in-out infinite;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+.cux-${COMPONENT$2}-pulse-fg {
+  fill: var(--cux-${COMPONENT$2}-color);
+  animation: cux-${COMPONENT$2}-pulse-scale var(--cux-${COMPONENT$2}-speed) ease-in-out infinite reverse;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+/* Dots Spinner */
+.cux-${COMPONENT$2}-dots {
+  display: flex;
+  gap: calc(var(--cux-${COMPONENT$2}-size) * 0.15);
+  align-items: center;
+}
+
+.cux-${COMPONENT$2}-dot {
+  width: calc(var(--cux-${COMPONENT$2}-size) * 0.2);
+  height: calc(var(--cux-${COMPONENT$2}-size) * 0.2);
+  background: var(--cux-${COMPONENT$2}-color);
+  border-radius: 50%;
+  animation: cux-${COMPONENT$2}-dots-bounce var(--cux-${COMPONENT$2}-speed) ease-in-out infinite;
+}
+
+.cux-${COMPONENT$2}-dot:nth-child(1) { animation-delay: 0s; }
+.cux-${COMPONENT$2}-dot:nth-child(2) { animation-delay: var(--cux-${COMPONENT$2}-delay2); }
+.cux-${COMPONENT$2}-dot:nth-child(3) { animation-delay: var(--cux-${COMPONENT$2}-delay3); }
+
+/* Bars Spinner */
+.cux-${COMPONENT$2}-bars {
+  display: flex;
+  gap: calc(var(--cux-${COMPONENT$2}-size) * 0.1);
+  align-items: center;
+}
+
+.cux-${COMPONENT$2}-bar {
+  width: calc(var(--cux-${COMPONENT$2}-size) * 0.15);
+  height: calc(var(--cux-${COMPONENT$2}-size) * 0.4);
+  background: var(--cux-${COMPONENT$2}-color);
+  border-radius: 2px;
+  animation: cux-${COMPONENT$2}-bars-stretch var(--cux-${COMPONENT$2}-speed) ease-in-out infinite;
+}
+
+.cux-${COMPONENT$2}-bar:nth-child(1) { animation-delay: 0s; }
+.cux-${COMPONENT$2}-bar:nth-child(2) { animation-delay: var(--cux-${COMPONENT$2}-delay2); }
+.cux-${COMPONENT$2}-bar:nth-child(3) { animation-delay: var(--cux-${COMPONENT$2}-delay3); }
+.cux-${COMPONENT$2}-bar:nth-child(4) { animation-delay: var(--cux-${COMPONENT$2}-delay4); }
+.cux-${COMPONENT$2}-bar:nth-child(5) { animation-delay: var(--cux-${COMPONENT$2}-delay5); }
+
+/* Dual Spinner */
+.cux-${COMPONENT$2}-dual {
+  width: var(--cux-${COMPONENT$2}-size);
+  height: var(--cux-${COMPONENT$2}-size);
+}
+
+.cux-${COMPONENT$2}-dual-outer,
+.cux-${COMPONENT$2}-dual-inner {
+  animation: cux-${COMPONENT$2}-dual-spin var(--cux-${COMPONENT$2}-speed) linear infinite;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+.cux-${COMPONENT$2}-dual-outer circle {
+  stroke: var(--cux-${COMPONENT$2}-color);
+  fill: none;
+  stroke-linecap: round;
+}
+
+.cux-${COMPONENT$2}-dual-inner circle {
+  stroke: var(--cux-${COMPONENT$2}-track);
+  fill: none;
+  stroke-linecap: round;
+}
+
+.cux-${COMPONENT$2}-dual-inner {
+  animation-direction: reverse;
+  opacity: 0.6;
+}`;
+}
+/**
+* Generate CSS for a specific spinner variant
+*/
+function generateSpinnerVariant(variant, variantName) {
+	const size = variant.size ? `${variant.size.value}${variant.size.unit}` : "40px";
+	const speed = `${variant.speed}s`;
+	const delay2 = `${Math.round(variant.speed * .2 * 100) / 100}s`;
+	const delay3 = `${Math.round(variant.speed * .4 * 100) / 100}s`;
+	const delay4 = `${Math.round(variant.speed * .6 * 100) / 100}s`;
+	const delay5 = `${Math.round(variant.speed * .8 * 100) / 100}s`;
+	const lines = [];
+	lines.push(`/* Variant: ${variant.name} */`);
+	lines.push(`.cux-${COMPONENT$2}.--${variantName} {`);
+	lines.push(`  --cux-${COMPONENT$2}-color: ${variant.color};`);
+	lines.push(`  --cux-${COMPONENT$2}-track: ${variant.trackColor};`);
+	lines.push(`  --cux-${COMPONENT$2}-size: ${size};`);
+	lines.push(`  --cux-${COMPONENT$2}-speed: ${speed};`);
+	lines.push(`  --cux-${COMPONENT$2}-delay2: ${delay2};`);
+	lines.push(`  --cux-${COMPONENT$2}-delay3: ${delay3};`);
+	lines.push(`  --cux-${COMPONENT$2}-delay4: ${delay4};`);
+	lines.push(`  --cux-${COMPONENT$2}-delay5: ${delay5};`);
+	lines.push("}");
+	return lines.join("\n");
+}
+/**
+* Generate dark mode CSS for a spinner variant
+*/
+function generateSpinnerVariantDark(variant, variantName) {
+	const dark = variant.dark;
+	if (!dark) return "";
+	const lines = [];
+	lines.push(`/* Dark Mode Variant: ${variant.name} */`);
+	lines.push(`.dark .cux-${COMPONENT$2}.--${variantName} {`);
+	if (dark.color) lines.push(`  --cux-${COMPONENT$2}-color: ${dark.color};`);
+	if (dark.trackColor) lines.push(`  --cux-${COMPONENT$2}-track: ${dark.trackColor};`);
+	lines.push("}");
+	return lines.join("\n");
+}
+//#endregion
+//#region src/core/badge-generator.ts
+const COMPONENT$1 = "badge";
+/**
+* Generate complete CSS for badge component
+*/
+function generateBadgeCSS(variants, globalConfig) {
+	const css = [];
+	css.push(generateBadgeBase());
+	variants.forEach((variant) => {
+		const variantName = toKebabCase(variant.name);
+		css.push(generateBadgeVariant(variant, variantName, globalConfig));
+		if (variant.dark) css.push(generateBadgeVariantDark(variant, variantName));
+	});
+	return css.join("\n\n");
+}
+/**
+* Generate base badge styles
+*/
+function generateBadgeBase() {
+	return `/* Badge Base Styles */
+.cux-${COMPONENT$1} {
+  --cux-${COMPONENT$1}-bg: #6c757d;
+  --cux-${COMPONENT$1}-color: #ffffff;
+  --cux-${COMPONENT$1}-border: none;
+  --cux-${COMPONENT$1}-radius: 4px;
+  --cux-${COMPONENT$1}-padding: 4px 8px;
+  --cux-${COMPONENT$1}-shadow: none;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cux-${COMPONENT$1}-bg);
+  color: var(--cux-${COMPONENT$1}-color);
+  border: var(--cux-${COMPONENT$1}-border);
+  border-radius: var(--cux-${COMPONENT$1}-radius);
+  padding: var(--cux-${COMPONENT$1}-padding);
+  box-shadow: var(--cux-${COMPONENT$1}-shadow);
+  white-space: nowrap;
+  vertical-align: middle;
+}`;
+}
+/**
+* Generate CSS for a specific badge variant
+*/
+function generateBadgeVariant(variant, variantName, globalConfig) {
+	const lines = [];
+	lines.push(`/* Variant: ${variant.name} */`);
+	lines.push(`.cux-${COMPONENT$1}.--${variantName} {`);
+	lines.push(...generateBaseProperties(COMPONENT$1, variant));
+	const shadowVar = generateShadowVar(COMPONENT$1, variant.shadows);
+	if (shadowVar) lines.push(shadowVar);
+	lines.push("}");
+	const typographyBlock = generateTypographyBlock(`.cux-${COMPONENT$1}.--${variantName}`, {
+		fontFamily: variant.fontFamily,
+		fontSize: variant.fontSize,
+		fontWeight: variant.fontWeight,
+		fontStyle: variant.fontStyle,
+		letterSpacing: variant.letterSpacing
+	}, globalConfig);
+	if (typographyBlock) {
+		lines.push("");
+		lines.push(typographyBlock);
+	}
+	return lines.join("\n");
+}
+/**
+* Generate dark mode CSS for a badge variant
+*/
+function generateBadgeVariantDark(variant, variantName) {
+	const dark = variant.dark;
+	if (!dark) return "";
+	const lines = [];
+	lines.push(`/* Dark Mode Variant: ${variant.name} */`);
+	lines.push(`.dark .cux-${COMPONENT$1}.--${variantName} {`);
+	lines.push(...generateDarkBaseProperties(COMPONENT$1, dark));
+	const borderOverride = generateDarkBorderOverride(COMPONENT$1, variant.border, dark.borderColor);
+	if (borderOverride) lines.push(borderOverride);
+	const shadowVar = generateDarkShadowVar(COMPONENT$1, variant.shadows, dark);
+	if (shadowVar) lines.push(shadowVar);
+	lines.push("}");
+	return lines.join("\n");
+}
+//#endregion
+//#region src/core/chip-generator.ts
+const COMPONENT = "chip";
+/**
+* Generate complete CSS for chip component
+*/
+function generateChipCSS(variants, globalConfig) {
+	const css = [];
+	css.push(generateChipBase());
+	variants.forEach((variant) => {
+		const variantName = toKebabCase(variant.name);
+		css.push(generateChipVariant(variant, variantName, globalConfig));
+		if (variant.dark) css.push(generateChipVariantDark(variant, variantName));
+	});
+	return css.join("\n\n");
+}
+/**
+* Generate base chip styles
+*/
+function generateChipBase() {
+	return `/* Chip Base Styles */
+.cux-${COMPONENT} {
+  --cux-${COMPONENT}-bg: #e9ecef;
+  --cux-${COMPONENT}-color: #212529;
+  --cux-${COMPONENT}-border: none;
+  --cux-${COMPONENT}-radius: 16px;
+  --cux-${COMPONENT}-padding: 4px 12px;
+  --cux-${COMPONENT}-shadow: none;
+
+  /* Close button properties */
+  --cux-${COMPONENT}-close-size: 16px;
+  --cux-${COMPONENT}-close-color: #495057;
+  --cux-${COMPONENT}-close-hover-color: #212529;
+  --cux-${COMPONENT}-close-active-color: #000000;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background: var(--cux-${COMPONENT}-bg);
+  color: var(--cux-${COMPONENT}-color);
+  border: var(--cux-${COMPONENT}-border);
+  border-radius: var(--cux-${COMPONENT}-radius);
+  padding: var(--cux-${COMPONENT}-padding);
+  box-shadow: var(--cux-${COMPONENT}-shadow);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.cux-${COMPONENT}-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cux-${COMPONENT}-close-size);
+  height: var(--cux-${COMPONENT}-close-size);
+  background: transparent;
+  border: none;
+  color: var(--cux-${COMPONENT}-close-color);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: color 0.15s ease;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.cux-${COMPONENT}-close:hover {
+  color: var(--cux-${COMPONENT}-close-hover-color);
+}
+
+.cux-${COMPONENT}-close:active {
+  color: var(--cux-${COMPONENT}-close-active-color);
+}
+
+.cux-${COMPONENT}-close svg {
+  width: 100%;
+  height: 100%;
+}`;
+}
+/**
+* Generate CSS for a specific chip variant
+*/
+function generateChipVariant(variant, variantName, globalConfig) {
+	const lines = [];
+	lines.push(`/* Variant: ${variant.name} */`);
+	lines.push(`.cux-${COMPONENT}.--${variantName} {`);
+	lines.push(...generateBaseProperties(COMPONENT, variant));
+	const shadowVar = generateShadowVar(COMPONENT, variant.shadows);
+	if (shadowVar) lines.push(shadowVar);
+	if (variant.closeSize) lines.push(`  --cux-${COMPONENT}-close-size: ${variant.closeSize.value}${variant.closeSize.unit};`);
+	lines.push(`  --cux-${COMPONENT}-close-color: ${variant.closeColor};`);
+	lines.push(`  --cux-${COMPONENT}-close-hover-color: ${variant.closeHoverColor};`);
+	lines.push(`  --cux-${COMPONENT}-close-active-color: ${variant.closeActiveColor};`);
+	lines.push("}");
+	const typographyLines = generateTypographyLines({
+		fontFamily: variant.fontFamily,
+		fontSize: variant.fontSize,
+		fontWeight: variant.fontWeight,
+		fontStyle: variant.fontStyle,
+		letterSpacing: variant.letterSpacing
+	}, globalConfig);
+	if (typographyLines.length > 0) {
+		lines.push("");
+		lines.push(`.cux-${COMPONENT}.--${variantName} {`);
+		lines.push(...typographyLines);
+		lines.push("}");
+	}
+	return lines.join("\n");
+}
+/**
+* Generate dark mode CSS for a chip variant
+*/
+function generateChipVariantDark(variant, variantName) {
+	const dark = variant.dark;
+	if (!dark) return "";
+	const lines = [];
+	lines.push(`/* Dark Mode Variant: ${variant.name} */`);
+	lines.push(`.dark .cux-${COMPONENT}.--${variantName} {`);
+	lines.push(...generateDarkBaseProperties(COMPONENT, dark));
+	const borderOverride = generateDarkBorderOverride(COMPONENT, variant.border, dark.borderColor);
+	if (borderOverride) lines.push(borderOverride);
+	if (dark.closeColor) lines.push(`  --cux-${COMPONENT}-close-color: ${dark.closeColor};`);
+	if (dark.closeHoverColor) lines.push(`  --cux-${COMPONENT}-close-hover-color: ${dark.closeHoverColor};`);
+	if (dark.closeActiveColor) lines.push(`  --cux-${COMPONENT}-close-active-color: ${dark.closeActiveColor};`);
+	const shadowVar = generateDarkShadowVar(COMPONENT, variant.shadows, dark);
+	if (shadowVar) lines.push(shadowVar);
+	lines.push("}");
+	return lines.join("\n");
+}
+//#endregion
+//#region src/combo-ux.ts
+var ComboUX = class {
+	options;
+	darkMode;
+	cssInjector;
+	themeLoader;
+	themeSync = null;
+	currentTheme = null;
+	constructor(options) {
+		this.options = {
+			theme: options.theme,
+			darkMode: options.darkMode ?? "auto",
+			persistDarkMode: options.persistDarkMode ?? true,
+			darkModeStorageKey: options.darkModeStorageKey ?? "cux-dark-mode"
+		};
+		this.darkMode = new DarkMode({
+			persist: this.options.persistDarkMode,
+			storageKey: this.options.darkModeStorageKey
+		});
+		this.cssInjector = new CSSInjector();
+		this.themeLoader = new ThemeLoader();
+		if (options.ws && options.ws !== false) this.themeSync = new ThemeSync((theme) => this.updateTheme(theme), typeof options.ws === "string" ? { url: options.ws } : options.ws);
+	}
+	/**
+	* Initialize the library (must be called manually or via composable)
+	*/
+	async init() {
+		injectBasscss();
+		this.darkMode.init(this.options.darkMode);
+		try {
+			await this.loadTheme(this.options.theme);
+		} catch (error) {
+			console.error("Failed to load theme:", error);
+		}
+		if (this.themeSync) this.themeSync.connect();
+	}
+	/**
+	* Inject base styles with theme colors
+	*/
+	injectBaseStylesFromTheme(theme) {
+		const backgroundColor = theme.typography?.globalConfig?.backgroundColor;
+		const darkBackgroundColor = theme.typography?.globalConfig?.dark?.backgroundColor;
+		const textColor = theme.typography?.globalConfig?.color;
+		const darkTextColor = theme.typography?.globalConfig?.dark?.color;
+		if (backgroundColor || darkBackgroundColor || textColor || darkTextColor) updateBaseStyles({
+			backgroundColor,
+			darkBackgroundColor,
+			textColor,
+			darkTextColor
+		});
+		else injectBaseStyles();
+	}
+	/**
+	* Load theme from URL or object
+	*/
+	async loadTheme(theme) {
+		const themeData = await this.themeLoader.load(theme);
+		this.currentTheme = themeData;
+		this.applyTheme(themeData);
+	}
+	/**
+	* Apply theme by generating and injecting CSS
+	*/
+	applyTheme(theme) {
+		this.injectBaseStylesFromTheme(theme);
+		const cssParts = [];
+		if (theme.typography) {
+			loadFontsFromTypography(theme.typography);
+			const typographyCSS = generateTypographyCSS(theme.typography);
+			if (typographyCSS) cssParts.push(typographyCSS);
+		}
+		if (theme.forms?.globalConfig) {
+			loadFontsFromForms(theme.forms);
+			const formsCSS = generateFormsCSS(theme.forms, theme.typography);
+			if (formsCSS) cssParts.push(formsCSS);
+		}
+		if (theme.buttons?.variants?.length) {
+			loadFontsFromButtonVariants(theme.buttons.variants);
+			cssParts.push(generateButtonCSS(theme.buttons.variants, theme.typography?.globalConfig));
+		}
+		if (theme.cards?.variants?.length) cssParts.push(generateCardCSS(theme.cards.variants, theme.typography?.globalConfig));
+		if (theme.alerts?.variants?.length) cssParts.push(generateAlertCSS(theme.alerts.variants, theme.typography?.globalConfig));
+		if (theme.avatars?.variants?.length) {
+			loadFontsFromAvatarVariants(theme.avatars.variants);
+			cssParts.push(generateAvatarCSS(theme.avatars.variants, theme.typography?.globalConfig));
+		}
+		if (theme.progress?.variants?.length) cssParts.push(generateProgressCSS(theme.progress.variants, theme.typography?.globalConfig));
+		if (theme.spinners?.variants?.length) cssParts.push(generateSpinnerCSS(theme.spinners.variants));
+		if (theme.badges?.variants?.length) cssParts.push(generateBadgeCSS(theme.badges.variants, theme.typography?.globalConfig));
+		if (theme.chips?.variants?.length) cssParts.push(generateChipCSS(theme.chips.variants, theme.typography?.globalConfig));
+		if (cssParts.length > 0) this.cssInjector.inject(cssParts.join("\n\n"));
+	}
+	/**
+	* Update theme (for real-time updates via websockets)
+	*/
+	updateTheme(theme) {
+		this.currentTheme = theme;
+		this.applyTheme(theme);
+	}
+	/**
+	* Update a specific button variant
+	*/
+	updateButtonVariant(variantName, updates) {
+		if (!this.currentTheme?.buttons?.variants) return;
+		const variant = this.currentTheme.buttons.variants.find((v) => v.name.toLowerCase() === variantName.toLowerCase());
+		if (variant) {
+			Object.assign(variant, updates);
+			this.applyTheme(this.currentTheme);
+		}
+	}
+	/** Check if dark mode is active */
+	get isDark() {
+		return this.darkMode.isDark;
+	}
+	/** Set dark mode */
+	setDarkMode(value) {
+		this.darkMode.setDarkMode(value);
+	}
+	/** Toggle dark mode */
+	toggleDarkMode() {
+		this.darkMode.toggle();
+	}
+	/** Register callback for dark mode changes */
+	onDarkModeChange(callback) {
+		return this.darkMode.onChange(callback);
+	}
+	/** Check if WebSocket is connected */
+	get isSyncConnected() {
+		return this.themeSync?.isConnected ?? false;
+	}
+	/** Connect to WebSocket server */
+	connectSync() {
+		this.themeSync?.connect();
+	}
+	/** Disconnect from WebSocket server */
+	disconnectSync() {
+		this.themeSync?.disconnect();
+	}
+	/** Register callback for sync connection */
+	onSyncConnect(callback) {
+		if (!this.themeSync) return () => {};
+		return this.themeSync.onConnect(callback);
+	}
+	/** Register callback for sync disconnection */
+	onSyncDisconnect(callback) {
+		if (!this.themeSync) return () => {};
+		return this.themeSync.onDisconnect(callback);
+	}
+	/** Register callback for sync errors */
+	onSyncError(callback) {
+		if (!this.themeSync) return () => {};
+		return this.themeSync.onError(callback);
+	}
+	/** Register callback for theme updates from sync */
+	onSyncThemeUpdate(callback) {
+		if (!this.themeSync) return () => {};
+		return this.themeSync.onThemeUpdate(callback);
+	}
+	/** Register callback for theme load events */
+	onThemeLoad(callback) {
+		return this.themeLoader.onLoad(callback);
+	}
+	/** Destroy instance and clean up */
+	destroy() {
+		this.darkMode.destroy();
+		this.cssInjector.destroy();
+		this.themeLoader.destroy();
+		if (this.themeSync) {
+			this.themeSync.destroy();
+			this.themeSync = null;
+		}
+	}
+};
+//#endregion
+//#region src/composables/useComboUX.ts
+/**
+* Vue composable for ComboUX
+*/
+let comboUXInstance = null;
+const isInitialized = ref(false);
+const isDark = ref(false);
+const subscribers = /* @__PURE__ */ new Set();
+function notifySubscribers() {
+	subscribers.forEach((cb) => cb(isDark.value));
+}
+/**
+* Initialize ComboUX with options
+* Should be called once in your app entry point
+*/
+async function initComboUX(options) {
+	if (comboUXInstance) {
+		console.warn("[ComboUX] Already initialized, returning existing instance");
+		return comboUXInstance;
+	}
+	comboUXInstance = new ComboUX(options);
+	await comboUXInstance.init();
+	isInitialized.value = true;
+	isDark.value = comboUXInstance.isDark;
+	comboUXInstance.onDarkModeChange((dark) => {
+		isDark.value = dark;
+		notifySubscribers();
+	});
+	return comboUXInstance;
+}
+/**
+* Get the current ComboUX instance
+*/
+function getComboUX() {
+	return comboUXInstance;
+}
+/**
+* Vue composable to use ComboUX in components
+*/
+function useComboUX() {
+	onMounted(() => {
+		subscribers.add(() => {});
+	});
+	onUnmounted(() => {
+		subscribers.delete(() => {});
+	});
+	return {
+		isInitialized: readonly(isInitialized),
+		isDark: readonly(isDark),
+		instance: comboUXInstance,
+		toggleDarkMode: () => comboUXInstance?.toggleDarkMode(),
+		setDarkMode: (value) => comboUXInstance?.setDarkMode(value),
+		updateTheme: (theme) => comboUXInstance?.updateTheme(theme)
+	};
+}
+/**
+* Destroy the ComboUX instance
+*/
+function destroyComboUX() {
+	if (comboUXInstance) {
+		comboUXInstance.destroy();
+		comboUXInstance = null;
+		isInitialized.value = false;
+	}
+}
+//#endregion
+//#region src/index.ts
+const ComboUXPlugin = { async install(app, options) {
+	if (options.autoInit !== false) await initComboUX(options);
+} };
+//#endregion
+export { ComboUX, ComboUXPlugin, ComboUXPlugin as default, destroyComboUX, getComboUX, initComboUX, useComboUX };