@witchcraft/ui 0.0.1 → 0.1.1

package/package.json

@@ -1,10 +1,9 @@
 {
 	"name": "@witchcraft/ui",
-	"version": "0.0.1",
+	"version": "0.1.1",
 	"description": "Vue component library.",
 	"type": "module",
 	"main": "./dist/runtime/main.lib.js",
-	"types": "./types/index.d.ts",
 	"sideEffects": false,
 	"exports": {
 		".": {
@@ -13,7 +12,7 @@
 		},
 		"./*": {
 			"import": "./dist/runtime/*",
-			"types": "./dist/runtime/*"
+			"types": "./dist/runtime/*.d.ts"
 		},
 		"./components": {
 			"types": "./dist/runtime/components/index.d.ts",
@@ -51,11 +50,11 @@
 			"types": "./dist/runtime/build/*.d.ts",
 			"import": "./dist/runtime/build/*"
 		},
-		"./style.css": "./src/runtime/assets/style.css",
+		"./utils.css": "./src/runtime/assets/utils.css",
 		"./base.css": "./src/runtime/assets/base.css",
 		"./nuxt": {
-			"import": "./dist/module.mjs",
-			"require": "./dist/module.cjs"
+			"types": "./dist/types.d.mts",
+			"import": "./dist/module.mjs"
 		},
 		"./types": {
 			"types": "./dist/runtime/types/index.d.ts",
@@ -68,20 +67,18 @@
 	"scripts": {
 		"//prepare": "echo Needed so that if we pull the package from git it will get built and installed properly.",
 		"prepare": "husky && pnpm gen:theme && pnpm build",
-		"build": "nuxt-module-build prepare && nuxt-module-build build && pnpm build:playground",
-		"build:playground": "cd playground && pnpm link:module && pnpm generate",
+		"build": "nuxt-module-build prepare && nuxt-module-build build && nuxi generate playground",
 		"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
 		"dev": "nuxi dev playground",
 		"storybook": "BROWSER=none storybook dev -p 6006",
 		"storybook:clear-cache": "BROWSER=none storybook dev -p 6006 --no-manager-cache",
 		"storybook:build": "pnpm nuxt prepare && storybook build -o docs/storybook",
 		"storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook\"",
-		"test": "pnpm storybook:test",
-		"test:types": "vue-tsc --noEmit --pretty --project tsconfig.types.json",
+		"test": "pnpm storybook:test && pnpm lint:types",
 		"doc": "pnpm test && pnpm storybook:build",
 		"doc:dev": "pnpm storybook",
-		"lint:eslint": "eslint \"{src,test,playground/app}/**/*.{js,ts,vue,cjs}\" \"*.{js,ts}\" --max-warnings=0 --report-unused-disable-directives",
-		"lint:types": "pnpm test:types",
+		"lint:eslint": "eslint \"src/**/*.{js,ts,vue,cjs}\" \"*.{js,ts}\" --max-warnings=5 --report-unused-disable-directives",
+		"lint:types": "vue-tsc --noEmit --pretty --project tsconfig.types.json",
 		"lint:commits": "commitlint --from $(git rev-list --max-parents=0 HEAD) --to HEAD --verbose",
 		"lint:imports": "madge --circular --extensions ts ./src",
 		"lint": "pnpm lint:types && pnpm lint:eslint",
@@ -103,19 +100,20 @@
 		}
 	},
 	"dependencies": {
-		"@alanscodelog/utils": "^5.0.0",
+		"@alanscodelog/utils": "^5.1.0",
 		"@egoist/vue-to-react": "^1.2.0",
 		"@iconify/json": "^2.2.323",
-		"@nuxt/kit": "^3.16.2",
-		"@nuxt/schema": "^3.16.2",
+		"@nuxt/kit": "^4.0.1",
+		"@nuxt/schema": "^4.0.1",
 		"@nuxt/types": "^2.17.3",
 		"@tailwindcss/vite": "^4.1.0",
-		"@witchcraft/nuxt-utils": "^0.0.1",
+		"@witchcraft/nuxt-utils": "^0.1.0",
 		"colord": "^2.9.3",
 		"colorjs.io": "0.6.0-alpha.1",
 		"defu": "^6.1.4",
 		"fast-glob": "^3.3.2",
 		"metamorphosis": "^0.4.1",
+		"reka-ui": "^2.2.1",
 		"tailwind-merge": "^3.1.0",
 		"unplugin-icons": "^22.1.0",
 		"unplugin-vue-components": "^28.4.1",
@@ -124,15 +122,16 @@
 	"devDependencies": {
 		"@alanscodelog/commitlint-config": "^3.0.2",
 		"@alanscodelog/eslint-config": "^5.0.0",
-		"@alanscodelog/semantic-release-config": "^5.0.1",
-		"@alanscodelog/tsconfigs": "^5.0.0",
+		"@alanscodelog/semantic-release-config": "^5.0.4",
+		"@alanscodelog/tsconfigs": "^6.0.0",
 		"@alanscodelog/vite-config": "^0.0.5",
 		"@chromatic-com/storybook": "^3.2.6",
 		"@commitlint/cli": "^19.3.0",
 		"@internationalized/date": "^3.1.0",
 		"@nuxt/eslint-config": "^1.3.0",
-		"@nuxt/module-builder": "^0.8.4",
+		"@nuxt/module-builder": "^1.0.2",
 		"@nuxtjs/i18n": "^9.5.3",
+		"@playwright/test": "=1.50.0",
 		"@rollup/plugin-node-resolve": "^16.0.1",
 		"@storybook/addon-a11y": "^8.6.12",
 		"@storybook/addon-actions": "^8.6.12",
@@ -146,25 +145,25 @@
 		"@storybook/test-runner": "^0.22.0",
 		"@storybook/vue3": "^8.6.12",
 		"@storybook/vue3-vite": "^8.6.12",
+		"@tailwindcss/cli": "^4.1.4",
 		"@tailwindcss/postcss": "^4.1.2",
-		"@types/node": "^22.14.0",
-		"@vitejs/plugin-vue": "^5.0.4",
+		"@types/node": "^24.1.0",
+		"@vitejs/plugin-vue": "^6.0.0",
 		"@vue/runtime-core": "^3.4.27",
-		"@playwright/test": "=1.50.0",
-		"playwright": "=1.50.0",
 		"@vue/runtime-dom": "^3.4.27",
 		"@vueuse/components": "^13.0.0",
 		"@vueuse/core": "^13.0.0",
 		"autoprefixer": "^10.4.19",
 		"concurrently": "^9.1.2",
-		"eslint": "=9.12.0",
+		"eslint": "^9.32.0",
 		"eslint-plugin-jsdoc": "^48.0.0",
 		"http-server": "^14.1.1",
 		"husky": "^9.0.11",
 		"indexit": "2.1.0-beta.3",
 		"madge": "^7.0.0",
-		"nuxt": "^3.16.2",
-		"radix-vue": "^1.9.11",
+		"nuxt": "^4.0.1",
+		"playwright": "=1.50.0",
+		"playwright-core": "=1.50.0",
 		"semantic-release": "^24.1.2",
 		"storybook": "^8.6.12",
 		"storybook-dark-mode": "^4.0.2",
@@ -172,12 +171,11 @@
 		"ts-node": "^10.9.2",
 		"typescript": "~5.8.2",
 		"unbuild": "^3.5.0",
-		"vite": "^6.2.5",
+		"vite": "^7.0.6",
 		"vite-plugin-externalize-deps": "^0.9.0",
 		"vite-tsconfig-paths": "^5.0.1",
-		"playwright-core": "=1.50.0",
 		"vue": "^3.5.13",
-		"vue-tsc": "^2.0.19",
+		"vue-tsc": "3.0.4",
 		"wait-on": "^8.0.3"
 	},
 	"author": "Alan <alanscodelog@gmail.com>",

package/src/module.ts

@@ -23,10 +23,15 @@ const knownDirectives = ["vExtractRootEl", "vResizableCols", "vResizeObserver",
 
 const { resolve, resolvePath } = createResolver(import.meta.url)
 
-const componentsInfo: { name: string, filepath: string }[] = globFiles([
+const componentsInfo: {
+	name: string
+	originalName: string
+	filepath: string
+}[] = globFiles([
 	`${resolve("./runtime/components")}/**/*.vue*`,
 	`!**/Template/**.vue`,
 ],[], (filepath: string, name: string) => ({
+	originalName: name,
 	name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
 	filepath,
 }))
@@ -56,9 +61,11 @@ export interface ModuleOptions {
 	componentPrefix: string
 	debug?: boolean
 	/**
-	 * @default "~/assets/css/tailwind.css"
+	 * @default "~/assets/css/tailwind.css" if it exists.
 	 */
 	mainCssFile?: string
+	/** @internal */
+	_playgroundWorkaround?: boolean
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -75,6 +82,7 @@ export default defineNuxtModule<ModuleOptions>({
 		componentPrefix: "W",
 		debug: true,
 		mainCssFile: "~/assets/css/tailwind.css",
+		_playgroundWorkaround: false,
 	},
 	async setup(options, nuxt) {
 		const moduleName = "@witchcraft/ui"
@@ -102,18 +110,22 @@ export default defineNuxtModule<ModuleOptions>({
 		)
 
 
-		const contents = [
-			...componentsInfo.map(_ => _.filepath)
-		]
 		addTemplate({
 			filename: "witchcraft-ui.css",
 			write: true,
-			getContents: () => crop`
-				${indent(themeAsTailwindCss(theme, themeConvertionOpts), 4)}
-				@import "@witchcraft/ui/style.css";
-				@import "@witchcraft/ui/base.css";
-				${indent(contents.map(_ => `@source "${_}";`).join("\n"), 4)}
-			`,
+			getContents: () => options._playgroundWorkaround
+				? crop`
+					${indent(themeAsTailwindCss(theme, themeConvertionOpts), 5)}
+					@import "${resolve("runtime/assets/base.css")}";
+					@import "${resolve("runtime/assets/utils.css")}";
+					${indent(filteredComponentsInfo.map(_ => `@source "${_.filepath}";`).join("\n"), 5)}
+				`
+				: crop`
+					${indent(themeAsTailwindCss(theme, themeConvertionOpts), 5)}
+					@import "@witchcraft/ui/base.css";
+					@import "@witchcraft/ui/utils.css";
+					${indent(filteredComponentsInfo.map(_ => `@source "${_.filepath}";`).join("\n"), 5)}
+				`
 		})
 		
 		
@@ -160,9 +172,16 @@ export default defineNuxtModule<ModuleOptions>({
 				]
 			}
 		})
-		nuxt.options.css.push(await resolvePath(options.mainCssFile!, nuxt.options.alias))
+		const mainCssFile = await resolvePath(options.mainCssFile!, nuxt.options.alias)
+
+		const exists = fs.existsSync(mainCssFile)
+		if (exists) {
+			nuxt.options.css.push(mainCssFile)
+		}
+
 		// we need to hook in first before it does, otherwise the plugins don't load correctly
 		await installModule("unplugin-icons/nuxt")
+		await installModule("reka-ui/nuxt")
 
 		// todo make names more specific
 		// addImportsDir(resolve("helpers"))

package/src/runtime/assets/base.css

@@ -18,7 +18,7 @@
 .list-enter-from,
 .list-leave-to {
 	opacity: 0;
-	transform: translateX(30px);
+	transform: translateX(100%);
 }
 
 /* ensure leaving items are taken out of layout flow so that moving
@@ -65,3 +65,12 @@ animations can be calculated correctly. */
 a {
 	@apply link-like;
 }
+
+* {
+	 @apply styled-scrollbar;
+}
+
+textarea {
+	@apply styled-resizer;
+}
+

package/src/runtime/assets/locales/en.json

@@ -5,7 +5,7 @@
 		"file-input.compact-choose-file-plural": "Choose Files",
 		"file-input.non-compact-choose-file": "Drag & Drop File",
 		"file-input.non-compact-choose-file-plural": "Drag & Drop Files",
-		"color-picker.pick-color": "Pick Color",
+		"color-input.aria-and-title-prefix": "Click to Open Color Picker, Current Color: ",
 		"cancel": "Cancel",
 		"save": "Save",
 		"copy": "Copy",
@@ -15,7 +15,7 @@
 		"color-picker.aria.value": "Value",
 		"color-picker.aria.hue-slider": "Hue Slider",
 		"color-picker.aria.alpha-slider": "Alpha Slider",
-		"color-picker.aria.description": "Use the arrow keys to move the handle, or use shift to move in 10 pixel increments.",
+		"color-picker.aria.description": "Use the arrow keys to move the handle, or use shift to move in 10 pixel increments. Press enter to save value.",
 		"dark-mode-switcher.title": "Switch dark mode type, current: ",
 		"dark-mode-switcher.system": "System",
 		"dark-mode-switcher.dark": "Dark",

package/src/runtime/assets/tailwind.css

@@ -2,4 +2,4 @@
 @import "tailwindcss" source("../../");
 @import "./theme.css";
 @import "./base.css";
-@import "./style.css";
+@import "./utils.css";

package/src/runtime/assets/{style.css → utils.css}

@@ -37,17 +37,17 @@
 }
 
 @utility focus-outline-within {
-	@apply outlined-within:outline-hidden outlined-within:ring-2 outlined-within:ring-accent-500 outlined-within:ring-offset-2;
+	@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2;
 }
 
 @utility focus-outline {
-	@apply outlined:outline-hidden outlined:ring-2 outlined:ring-accent-500 outlined:ring-offset-2;
+	@apply outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2;
 }
 @utility focus-outline-no-offset {
-	@apply outlined:outline-hidden outlined:ring-2 outlined:ring-accent-500;
+	@apply outlined:outline-2 outlined:outline-accent-500;
 }
 @utility focus-outline-hidden {
-	@apply outlined:outline-hidden;
+	@apply outlined:outline-none;
 }
 
 /* .bg-squares-gradient { */
@@ -125,6 +125,88 @@
 		display: none;
 	}
 }
+@utility styled-scrollbar {
+	/* local defaults */
+	--_scrollbar_width: var(--scrollbar-width, calc(3 * var(--spacing)));
+	--_scrollbar_border_width: var(--scrollbar-border-width, calc(var(--spacing)/2));
+	--_scrollbar_color: var(--scrollbar-color, --alpha(var(--color-accent-500) / 40%));
+	--_scrollbar_hover_color: var(--scrollbar-hover-color, --alpha(var(--color-accent-500) / 80%));
+	--_scrollbar_bg_color: var(--scrollbar-bg-color, var(--color-bg));
+
+	.dark & {
+		--_scrollbar_bg_color: var(--scrollbar-bg-color, var(--color-fg));
+	}
+	/* Chrome, Edge and Safari */
+	&::-webkit-scrollbar {
+		width: var(--_scrollbar_width);	
+		height: var(--_scrollbar_width);
+	}
+	&::-webkit-scrollbar-corner {
+		background-color: transparent;
+	}
+	&::-webkit-scrollbar-track {
+		border-radius: var(--_scrollbar_width);
+		background-color: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		border-radius: var(--_scrollbar_width);
+		background-color: var(--_scrollbar_color);
+		border: var(--_scrollbar_border_width) solid var(--_scrollbar_bg_color);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		border-radius: var(--_scrollbar_width);
+		background-color: var(--_scrollbar_hover_color);
+		cursor: pointer;
+	}
+
+	&::-webkit-scrollbar-thumb:active {
+		border-radius: var(--_scrollbar_width);
+		background-color: var(--_scrollbar_hover_color);
+	}
+}
+
+@utility styled-scrollbar-w-* {
+	--scrollbar-width: --value(integer);
+}
+
+@utility styled-scrollbar-border-w-* {
+	--scrollbar-border-width: --value(integer);
+}
+
+@utility styled-scrollbar-* {
+	--scrollbar-color: --value(--color-*);
+}
+@utility styled-scrollbar-bg-* {
+	--scrollbar-bg-color: --value(--color-*);
+}
+
+/** only for textareas */
+@utility styled-resizer {
+	--_resizer_width: var(--resizer-width, 8px);
+	--_resizer_color: var(--resizer-color, var(--color-neutral-300));
+	.dark & {
+		--_resizer_color: var(--resizer-color, var(--color-neutral-700));
+	}
+	&::-webkit-resizer {
+		border-width: var(--_resizer_width);
+		border-style: solid;
+		border-top-color: transparent;
+		border-right-color: var(--_resizer_color);
+		border-bottom-color: var(--_resizer_color);
+		border-left-color: transparent;
+	}
+}
+
+@utility styled-resizer-w-* {
+	--resizer-width: --value(integer);
+}
+@utility styled-resizer-color-* {
+	--resizer-color: --value(--color-*);
+}
+
+
 @utility content-vertical-holder {
 	--tw-content: "\200b";
 	content: var(--tw-content);

package/src/runtime/build/WitchcraftUiResolver.ts

@@ -1,6 +1,6 @@
 import { type ComponentResolver } from "unplugin-vue-components"
 
-const prefixless = ["Icon", "Aria", "TestWrapper"]
+const prefixless = ["Icon", "Aria"]
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const WitchcraftUiResolver = (
 	{

package/src/runtime/components/Focus.stories.ts

@@ -24,13 +24,14 @@ const template = `
 			<div class="outline-hidden focus:border-danger-500 border border-accent-600" tabindex="0">Has Manual Focus Classes</div>
 		`
 export default meta
-type Story = StoryObj<typeof NAME>
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type Story = StoryObj<{}>
 
 export const Primary: Story = {
 	render: args => ({
 		components,
 		setup: () => {
-			const el = ref<HTMLElement>(null)
+			const el = ref<HTMLElement | null>(null)
 			onMounted(() => {
 				// el.value.focus()
 			})

package/src/runtime/components/Icon/Icon.vue

@@ -1,6 +1,6 @@
 <template>
 <div
-	class="icon inline-block"
+	:class="twMerge('icon inline-block', $attrs?.class)"
 	v-bind="{...$attrs, class:undefined}"
 >
 	<slot/>
@@ -10,9 +10,16 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes,useAttrs } from "vue"
 
-const $attrs = useAttrs()
+import { twMerge } from "../../utils/twMerge.js"
+
+defineOptions({
+	name: "icon",
+	inheritAttrs: false,
+})
+
+
+const $attrs = useAttrs() as any
 
-// eslint-disable-next-line no-use-before-define
 const props = defineProps<Props>()
 
 
@@ -26,9 +33,6 @@ const props = defineProps<Props>()
  * 		<icon><i-...></icon>
  * ``
  */
-export default {
-	name: "icon",
-}
 
 interface Props
 	extends

package/src/runtime/components/LibButton/LibButton.vue

@@ -2,26 +2,26 @@
 <button
 	:id="id ?? fallbackId"
 	:class="!($attrs as any).unstyle && twMerge(`
-			button
-			flex
-			cursor-pointer
-			items-center
-			justify-center
-			rounded-sm
-			px-1
-			hover:cursor-pointer
-			[&:hover_*]:cursor-pointer
-			focus-outline
-			disabled:shadow-none
-			disabled:text-neutral-500
-			disabled:cursor-default
-			text-fg
-			hover:text-accent-700
-			dark:text-bg
-			dark:hover:text-accent-500
-			dark:disabled:text-neutral-500
-			dark:disabled:hover:text-neutral-500
-		`,
+		button
+		flex
+		cursor-pointer
+		items-center
+		justify-center
+		rounded-sm
+		px-1
+		hover:cursor-pointer
+		[&:hover_*]:cursor-pointer
+		focus-outline
+		disabled:shadow-none
+		disabled:text-neutral-500
+		disabled:cursor-default
+		text-fg
+		hover:text-accent-700
+		dark:text-bg
+		dark:hover:text-accent-500
+		dark:disabled:text-neutral-500
+		dark:disabled:hover:text-neutral-500
+	`,
 		!color && `active:text-neutral-800` /* todo for colors */,
 		border && `
 			transition-all
@@ -31,11 +31,11 @@
 			shadow-neutral-950/20
 			hover:shadow-[0_1px_3px_0]
 			hover:shadow-neutral-950/30
-			hover:border-neutral-300
-
+			hover:border-neutral-200
+			dark:hover:border-neutral-800
 			relative
 			after:absolute
-			after:rounded-sm
+			after:rounded-xs
 			after:inset-0
 			after:content
 			after:shadow-[0_1px_0_0_inset]
@@ -45,15 +45,13 @@
 			dark:hover:after:shadow-bg/50
 			after:pointer-events-none
 			after:mix-blend-overlay
-
-			active:shadow-inner
+			active:inset-shadow
 			active:shadow-fg/20
 			active:border-transparent
 			border
-			border-neutral-400
+			border-neutral-300
 			disabled:border-neutral-200
 			disabled:bg-neutral-50
-
 			dark:hover:shadow-accent-950/30
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
@@ -156,7 +154,7 @@
 		`,
 		($attrs as any)?.class
 	)"
-	:type="$attrs.type as any ?? 'submit'"
+	:type="$attrs.type as any"
 	:tabindex="0"
 	:disabled="disabled"
 	:data-border="border"
@@ -169,17 +167,19 @@
 		...ariaLabel,
 	}"
 >
-	<label :id="`label-${id ?? fallbackId}`" class="label pointer-events-none flex flex-1 items-center justify-center gap-1">
-		<slot name="icon"/>
-		<slot
-			v-bind="{ label}"
-		>
-			<span v-if="label && !isBlank(label!)">
-				{{ label }}
-			</span>
-		</slot>
-		<slot name="icon-after"/>
-	</label>
+	<slot name="label" v-bind="{id:`label-${id ?? fallbackId}`, classes:'button--label pointer-events-none flex flex-1 items-center justify-center gap-1'}">
+		<label :id="`label-${id ?? fallbackId}`" class="button--label pointer-events-none flex flex-1 items-center justify-center gap-1">
+			<slot name="icon"/>
+			<slot
+				v-bind="{ label}"
+			>
+				<span v-if="label && !isBlank(label!)">
+					{{ label }}
+				</span>
+			</slot>
+			<slot name="icon-after"/>
+		</label>
+	</slot>
 </button>
 </template>
 
@@ -193,7 +193,7 @@ import { type ButtonHTMLAttributes,computed, type HTMLAttributes, type PropType,
 import { useAriaLabel } from "../../composables/useAriaLabel.js"
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, baseInteractiveProps, baseInteractivePropsDefaults, type ButtonProps,getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
 
 const $attrs = useAttrs()
@@ -205,7 +205,6 @@ defineOptions({
 
 const fallbackId = getFallbackId()
 
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	color: false,
 	label: "",
@@ -227,12 +226,7 @@ type RealProps =
 	& LinkableByIdProps
 	& LabelProps
 	& BaseInteractiveProps
-	& {
-		border?: boolean
-		color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false
-		label?: string
-		autoTitleFromAria?: boolean
-	}
+	& ButtonProps
 
 interface Props
 	extends

package/src/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -1,6 +1,7 @@
 <template>
 <div
 	:class="twMerge(`
+		checkbox--wrapper
 		flex
 		items-center
 		gap-1
@@ -12,8 +13,8 @@
 >
 	<slot name="left"/>
 	<label
-		class="flex items-center gap-1"
 		:class="twMerge(`
+			checkbox--label
 			flex
 			items-center
 			gap-1
@@ -26,6 +27,7 @@
 		<input
 			:id="id ?? fallbackId"
 			:class="!($attrs as any).unstyle && twMerge(`
+				checkbox
 				focus-outline-no-offset
 				m-0
 				p-[0.4em]
@@ -33,7 +35,8 @@
 				dark:bg-fg
 				appearance-none
 				border
-				border-accent-600
+				border-neutral-500
+				focus:border-accent-600
 				rounded-sm
 				aspect-square
 				relative
@@ -71,6 +74,7 @@ import type { MakeRequired } from "@alanscodelog/utils/types"
 import { computed, type HTMLAttributes, type InputHTMLAttributes,type PropType, ref, useAttrs, useSlots } from "vue"
 
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
 import { twMerge } from "../../utils/twMerge.js"
 import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
@@ -84,7 +88,6 @@ const $slots = useSlots()
 /* todo multi states */
 
 const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	...baseInteractivePropsDefaults,
 })
@@ -99,7 +102,7 @@ const el = ref<null | HTMLElement>(null)
 const inputEl = ref<null | HTMLElement>(null)
 const $value = defineModel<boolean>("modelValue", { default: false })
 
-
+usePreHydrationValue(props.id ?? fallbackId, $value)
 </script>
 
 <script lang="ts">