@celar-ui/svelte 2.0.0 → 2.0.2

package/dist/buttons/TextBaseButton.svelte

@@ -13,6 +13,7 @@
 		children,
 		loading,
 		icon,
+		style,
 		active = false,
 		gap = 'calc(var(--spacing) * 2)',
 		...rest
@@ -20,7 +21,7 @@
 	let visibility = $derived(loading ? 'hidden' : 'initial');
 </script>
 
-<BaseButton {...rest} {loading} {active} data-button-base-text style="--body-gap: {gap}">
+<BaseButton {...rest} {loading} {active} data-button-base-text style="--body-gap: {gap}; {style}">
 	{#if icon}
 		<span class="button-icon" style:visibility>
 			{@render icon()}

package/dist/buttons/styles/button_utils.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @utility button-base {
 	@apply relative m-0 box-border inline-block h-fit w-fit cursor-pointer border-none p-0 no-underline transition-all select-none;

package/dist/buttons/styles/expanded_text_button.css

@@ -1,6 +1,6 @@
 @reference './button_utils.css';
 
-@layer component {
+@layer components {
 	[data-button-text-expanded] {
 		@apply button-text-base;
 		background-color: transparent;

package/dist/containment/Spacer.svelte

@@ -28,7 +28,7 @@
 </div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-spacer] {

package/dist/containment/styles/avatar.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-avatar-root] {

package/dist/containment/styles/breadcrumb.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-breadcrumb] {

package/dist/containment/styles/card.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-card] {

package/dist/containment/styles/container.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-container] {
@@ -12,11 +12,11 @@
 		}
 
 		&[data-sm='true'] {
-			max-width: var(--breakpoint--sm);
+			max-width: var(--breakpoint-sm);
 		}
 
 		&[data-md='true'] {
-			max-width: var(--breakpoint--md);
+			max-width: var(--breakpoint-md);
 		}
 
 		&[data-fluid='true'] {

package/dist/containment/styles/surface-container.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-surface-container] {

package/dist/inputs/Checkbox.svelte

@@ -55,7 +55,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-checkbox] {
@@ -67,9 +67,7 @@
 			padding: --spacing(1) 0;
 			padding-right: --spacing(4);
 			width: 100%;
-			-webkit-user-select: none;
-			   -moz-user-select: none;
-			        user-select: none;
+			user-select: none;
 
 			[data-checkbox-icon] {
 				display: flex;
@@ -97,5 +95,9 @@
 		:global([data-checkbox-root]:not([data-state='unchecked'])) {
 			background-color: var(--color-primary);
 		}
+
+		:global([data-checkbox-root]:focus-visible) {
+			@apply outline-primary outline outline-solid;
+		}
 	}
 </style>

package/dist/inputs/ColorInput.svelte

@@ -19,7 +19,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-color-input] {
@@ -36,9 +36,7 @@
 				position: absolute;
 				top: 0;
 				right: 0;
-				-webkit-appearance: none;
-				   -moz-appearance: none;
-				        appearance: none;
+				appearance: none;
 				outline: none;
 				border: none;
 				border-radius: var(--radius-2xl);

package/dist/inputs/FileInput.svelte

@@ -24,7 +24,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-file-input] {

package/dist/inputs/RadioItem.svelte

@@ -16,7 +16,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-radio-item] {
@@ -28,9 +28,7 @@
 			padding: --spacing(1) 0;
 			padding-right: --spacing(4);
 			width: 100%;
-			-webkit-user-select: none;
-			   -moz-user-select: none;
-			        user-select: none;
+			user-select: none;
 
 			[data-radio-item-icon] {
 				width: --spacing(14);

package/dist/inputs/Slider.svelte

@@ -19,7 +19,7 @@
 </div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@utility track {
 		@apply box-border h-2 w-full rounded-2xl border-none;
@@ -56,8 +56,7 @@
 
 				&,
 				&::-webkit-slider-thumb {
-					-webkit-appearance: none;
-					        appearance: none;
+					appearance: none;
 				}
 
 				&::-webkit-slider-runnable-track {

package/dist/inputs/Switch.svelte

@@ -18,7 +18,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-switch] {
@@ -29,9 +29,7 @@
 			justify-content: flex-start;
 			align-items: center;
 			width: 100%;
-			-webkit-user-select: none;
-			   -moz-user-select: none;
-			        user-select: none;
+			user-select: none;
 		}
 
 		:global([data-switch-root]) {

package/dist/inputs/TagInput.svelte

@@ -106,7 +106,7 @@
 </div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-tag-input] {
@@ -137,11 +137,6 @@
 				font-family: inherit;
 				color: inherit;
 
-				&::-moz-placeholder {
-					@apply text-onBackground/70;
-					opacity: 1;
-				}
-
 				&::placeholder {
 					@apply text-onBackground/70;
 					opacity: 1;

package/dist/inputs/TextInput.svelte

@@ -20,7 +20,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-text-input] {
@@ -52,23 +52,12 @@
 					}
 				}
 
-				&:is(:-moz-placeholder) ~ [data-text-input-placeholder] {
-					transform: translateY(50%);
-					visibility: hidden;
-					opacity: 0;
-				}
-
 				&:is(:placeholder-shown) ~ [data-text-input-placeholder] {
 					transform: translateY(50%);
 					visibility: hidden;
 					opacity: 0;
 				}
 
-				&::-moz-placeholder {
-					@apply text-onBackground/70;
-					opacity: 1;
-				}
-
 				&::placeholder {
 					@apply text-onBackground/70;
 					opacity: 1;

package/dist/inputs/styles/radio_group.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 @layer components {
 	[data-radio-group-root] {
 		position: relative;

package/dist/misc/Badge.svelte

@@ -14,7 +14,7 @@
 </span>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-badge] {

package/dist/misc/DuckSpinner.svelte

@@ -138,7 +138,7 @@
 </svg>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-duck-spinner] {
@@ -149,7 +149,7 @@
 				stroke-linecap: round;
 				stroke-linejoin: round;
 				stroke-dasharray: none;
-				transition-duration: var(--tw-duration, 150ms);
+				transition-duration: var(--default-transition-duration, 150ms);
 				transition-property: stroke;
 			}
 
@@ -171,15 +171,6 @@
 					opacity: 0.32;
 					animation-direction: reverse;
 				}
-
-				@keyframes spin {
-					from {
-						rotate: 0;
-					}
-					to {
-						rotate: 359deg;
-					}
-				}
 			}
 
 			.duck {
@@ -190,18 +181,6 @@
 				animation-iteration-count: infinite;
 				animation-name: slay;
 
-				@keyframes slay {
-					0% {
-						rotate: -24deg;
-					}
-					50% {
-						rotate: 24deg;
-					}
-					100% {
-						rotate: -24deg;
-					}
-				}
-
 				.body {
 					stroke-width: 1.5;
 				}
@@ -210,22 +189,43 @@
 					stroke-width: 1;
 				}
 			}
-		}
 
-		[data-thin='true'] {
-			.line {
-				stroke-width: 0.5;
-			}
-
-			.duck {
-				.body {
-					stroke-width: 1;
+			&[data-thin='true'] {
+				.line {
+					stroke-width: 0.5;
 				}
 
-				.eye {
-					stroke-width: 0.8;
+				.duck {
+					.body {
+						stroke-width: 1;
+					}
+
+					.eye {
+						stroke-width: 0.8;
+					}
 				}
 			}
 		}
+
+		@keyframes slay {
+			0% {
+				rotate: -24deg;
+			}
+			50% {
+				rotate: 24deg;
+			}
+			100% {
+				rotate: -24deg;
+			}
+		}
+
+		@keyframes spin {
+			from {
+				rotate: 0;
+			}
+			to {
+				rotate: 359deg;
+			}
+		}
 	}
 </style>

package/dist/misc/Gap.svelte

@@ -9,7 +9,7 @@
 <div data-gap style:width={size}></div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-gap] {

package/dist/misc/LinearProgressIndicator.svelte

@@ -8,7 +8,7 @@
 </div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-linear-progress-indicator] {
@@ -31,16 +31,16 @@
 				width: 0;
 				height: 100%;
 			}
+		}
 
-			@keyframes linear-progress-animation {
-				0% {
-					left: -8%;
-					width: 8%;
-				}
-				100% {
-					left: 100%;
-					width: 100%;
-				}
+		@keyframes linear-progress-animation {
+			0% {
+				left: -8%;
+				width: 8%;
+			}
+			100% {
+				left: 100%;
+				width: 100%;
 			}
 		}
 	}

package/dist/navigation/AdaptiveSidebar.svelte

@@ -47,11 +47,11 @@
 </div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-adaptive-sidebar-backdrop] {
-			@apply bg-onBackground/20 blur-md transition-all;
+			@apply bg-onBackground/20 backdrop-blur transition-all;
 			position: fixed;
 			top: 0;
 			left: 0;

package/dist/navigation/AppBar.svelte

@@ -28,7 +28,7 @@
 </section>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-app-bar] {
@@ -45,7 +45,7 @@
 			[data-app-bar-left] {
 				display: flex;
 				align-items: center;
-				gap: var(--gap--half);
+				gap: --spacing(2);
 				overflow: hidden;
 
 				[data-app-bar-title] {

package/dist/navigation/NavigationBar.svelte

@@ -9,7 +9,7 @@
 </section>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-navigation-bar] {
@@ -29,7 +29,6 @@
 				border-top-left-radius: 0;
 				border-bottom-right-radius: var(--radius);
 				padding: 0 --spacing(2);
-				width: -moz-min-content;
 				width: min-content;
 				height: 100%;
 			}

package/dist/navigation/NavigationBarButton.svelte

@@ -24,7 +24,7 @@
 </a>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-navigation-bar-button] {

package/dist/navigation/styles/navigation_drawer.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-navigation-drawer-backdrop] {

package/dist/overlay/styles/command.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-command-dialog] {
@@ -8,7 +8,7 @@
 		max-height: calc(75dvh - --spacing(8));
 
 		[data-command-input] {
-			@apply border-onBackground/20 border border-solid;
+			@apply border-onBackground/20 border border-solid transition-colors;
 			background-color: var(--color-background);
 			border-radius: var(--radius-lg);
 			padding: --spacing(2);
@@ -17,7 +17,6 @@
 			line-height: 1.5;
 			color: var(--color-onSurface);
 			outline: none;
-			transition: border-color var(--tw-duration, 150ms) ease-in-out;
 			width: 100%;
 			box-sizing: border-box;
 

package/dist/overlay/styles/dialog.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-celar-dialog-overlay] {
@@ -12,7 +12,8 @@
 	}
 
 	[data-celar-dialog-content] {
-		box-sizing: border-box shadow-xl;
+		@apply shadow-xl;
+		box-sizing: border-box;
 		position: fixed;
 		top: calc(50dvh - --spacing(4));
 		left: calc(50lvw - --spacing(4));
@@ -29,10 +30,10 @@
 			max-width: min(calc(100% - --spacing(8)), var(--breakpoint-xs));
 		}
 		&[data-sm='true'] {
-			max-width: min(calc(100% - --spacing(8)), var(--breakpoint--sm));
+			max-width: min(calc(100% - --spacing(8)), var(--breakpoint-sm));
 		}
 		&[data-md='true'] {
-			max-width: min(calc(100% - --spacing(8)), var(--breakpoint--md));
+			max-width: min(calc(100% - --spacing(8)), var(--breakpoint-md));
 		}
 		&[data-fluid='true'] {
 			width: 100%;

package/dist/overlay/styles/popover.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-popover-content] {

package/dist/overlay/styles/surface-dialog.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-minimal-surface-dialog] {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "2.0.0",
+	"version": "2.0.2",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",
@@ -13,7 +13,7 @@
 	},
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
+		"build": "vite build && bun run prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"prepack": "svelte-kit sync && svelte-package && publint",
@@ -27,6 +27,7 @@
 	"files": [
 		"dist",
 		"src/styles",
+		"src/bin",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
@@ -41,10 +42,12 @@
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
-		"./src/styles/*.scss": {
-			"import": "./src/styles/*.scss",
-			"require": "./src/styles/*.scss"
-		}
+		"./styles/index.css": "./src/styles/index.css",
+		"./styles/theme.css": "./src/styles/theme.css",
+		"./styles/*.css": "./src/styles/*.css"
+	},
+	"bin": {
+		"gen-theme": "./src/bin/gen-theme.ts"
 	},
 	"peerDependencies": {
 		"bits-ui": "^2.8.0",
@@ -59,7 +62,6 @@
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^5.1.1",
 		"@tailwindcss/vite": "^4.2.2",
-		"autoprefixer": "^10.4.27",
 		"bits-ui": "^2.17.3",
 		"csstype": "^3.2.3",
 		"eslint": "^9.39.4",
@@ -71,7 +73,6 @@
 		"prettier-plugin-svelte": "^3.5.1",
 		"prettier-plugin-tailwindcss": "^0.7.2",
 		"publint": "^0.3.18",
-		"sass": "^1.99.0",
 		"svelte": "^5.55.3",
 		"svelte-check": "^4.4.6",
 		"tailwindcss": "^4.2.2",

package/src/bin/gen-theme.ts

@@ -0,0 +1,71 @@
+#!/usr/bin/env bun
+
+/**
+ * Generate Tailwind 4 @theme CSS from Material Color Utilities theme output.
+ * Usage: bun index.ts <output-path>
+ *
+ * This script generates a CSS file with @variant and @theme directives,
+ * using the output of Material Color Utilities' themeFromSourceColor.
+ */
+
+import materialDynamicColors from 'material-dynamic-colors';
+import { mkdir, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+
+// ---- CONFIGURABLE SOURCE COLOR / OUTPUT ----
+const argv = process.argv.slice(2);
+const getFlag = (names: string[]) => {
+	const i = argv.findIndex((a) => names.includes(a));
+	if (i >= 0 && argv[i + 1] && !argv[i + 1].startsWith('--')) return argv[i + 1];
+	const kv = argv.find((a) => names.some((n) => a.startsWith(`${n}=`)));
+	return kv ? kv.split('=').slice(1).join('=') : undefined;
+};
+const sourceColor = (getFlag(['--color', '-c']) || process.env.SOURCE_COLOR || '#ff907f').trim();
+const outputPath = path.resolve(
+	process.cwd(),
+	getFlag(['--out', '-o']) || process.env.OUTPUT_PATH || 'src/styles/theme.css'
+);
+
+// ---- GENERATE THEME ----
+const theme = await materialDynamicColors(sourceColor);
+
+// ---- TAILWIND 4 @THEME CSS OUTPUT ----
+function toThemeVariables(colors: Record<string, string>): string {
+	return Object.entries(colors)
+		.map(([k, v]) => `  --color-${k}: ${v};`)
+		.join('\n');
+}
+
+const lightVars = toThemeVariables(theme.light as unknown as Record<string, string>);
+const darkVars = toThemeVariables(theme.dark as unknown as Record<string, string>);
+
+const css = `/* Generated by index.ts */
+/* Source color: ${sourceColor} */
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+${lightVars}
+  --color-info: #1a3baa;
+  --color-onInfo: #e2ffff;
+  --color-success: #2b5f50;
+  --color-onSuccess: #e8fef5;
+  --color-warning: #8a5a00;
+  --color-onWarning: #fff8ec;
+}
+
+@variant dark {
+${darkVars}
+  --color-info: #008eff;
+  --color-onInfo: #101a3b;
+  --color-success: #9bdac7;
+  --color-onSuccess: #184d3a;
+  --color-warning: #bfa060;
+  --color-onWarning: #4a3700;
+}
+`;
+
+// ---- WRITE FILE ----
+await mkdir(path.dirname(outputPath), { recursive: true });
+await writeFile(outputPath, css);
+console.log(`Material theme CSS written to ${outputPath}`);