@witchcraft/ui 0.4.0 → 0.4.2

package/README.md

@@ -31,6 +31,7 @@ It does not install "@nuxtjs/tailwindcss" for now since it's not compatible with
 // without Nuxt:
 @import "@witchcraft/ui/utils.css";
 @import "@witchcraft/ui/base.css";
+@import "@witchcraft/ui/animations.css";
 // source used components
 @source "@witchcraft/ui/components";
 
@@ -54,23 +55,6 @@ To make it easier to style parts of components or override behavior, some compon
 
 I think this is nicer in general than having to pass an object with extra attributes. The only weird part, is because of how vue changes the case of props, for attributes like `innerHTML` you will need to pass `{prefix}-inner-h-t-m-l`, but all components have proper types to help this. Similarly events look like `{prefix}-on-click`.
 
-# Slots
-
-Usually it is possible to do most modifications through props, but slots to replace parts of components are available.
-
-Most slots where possible are passed all properties needed to replace them except classes so you can do something like this, to for example replace the simple input component inside the input component.
-
-```vue
-<lib-simple-input-deprecated>
-	<template #input="slotProps">
-		<lib-simple-input
-			:class="'completely custom styles'"
-			v-bind="slotProps"
-		></lib-simple-input>
-	</template>
-</lib-simple-input>
-
-```
 
 # Other
 
@@ -117,6 +101,7 @@ See [@witchcraft/editor/vite.config.dev.ts].
 ```css
 @import "@witchcraft/ui/utils.css";
 @import "@witchcraft/ui/base.css";
+@import "@witchcraft/ui/animations.css";
 @source "/path/to/node_modules/@witchcraft/ui/src/runtime/components";
 ```
 Base just contains animation keyframes, basic styles for vue animations, and some basic global styles. They will get imported regardless of whether they are used since otherwise tailwind does not detect they are being used.
@@ -165,56 +150,66 @@ Note that using the strictTemplates compiler option can cause weird issues with
 
 ## Props
 
-Due to issues with vue 3 removing $listeners and the fact that we can't inherit from an existing HTML attribute types to specify props for wrapper components (most of them), we have to declare props in a convoluted way to get proper types when we consume the components.
+Props and attribute typing used to have a lot of issues with vue. It's improved a bit. A typical component looks like this:
 
-Here is an example of the needed code for props to work correctly:
 ```vue
+<template>
+<div
+	:class="twMerge(`
+		our-classes
+	`, ($attrs as any).class)"
+	v-bind="{ ...$attrs, class: undefined }"
+>
+	...
+</div>
+</template>
 <script lang="ts">
-// this is done in a seperate script so that it actually compiles
-// and we can have interface merging, a setup script cannot interface merge
-
-import type { BaseInteractiveProps } from "../shared/props.js"
-
-// real props vue can understand, they will show up under props.*
-type RealProps =
-// simple types are okay
-& BaseInteractiveProps
-& {
-	// any ignored props that we need to use in the component template 
-	// will need to be re-defined so vue can see them
-	// in a way vue can see them if it's one of the problem properties
-	id?: InputHTMLAttributes["id"]
-}
-
-interface Props
-	extends
-	// we need to ignore the complex InputHTMLAttributes type
-	// otherwise vue compilation fails
-	// if we ignore it, all it's properties are passed as fallback attrs
-	// NOT to props as normal
-	// we also need to omit properties or events that the component overrides with a different type
-	/** @vue-ignore */
-	Partial<Omit<InputHTMLAttributes,"class" | "onSubmit"> & {
-		//	overrides for the components
-		// usually, for example, class can only be a string (because of tailwind)
-		// this will be passed as an attr
-		class?:string
-	}>,
-	/** @vue-ignore */
-	RealProps
-{ }
-</script>
+import type { BaseInteractiveProps } from "../../types/index.js"
 
-<script lang="ts" setup>
-const props = withDefaults(defineProps<Props>(), {
-	id: "",
-	unstyle: false, disabled:false, readonly:false, border:true,
-})
+// only if it makes sense, otherwise prefer a prop (___Attrs for attributes, ___Props if it wraps reka-ui props)
+// we do this regardless of whether we pass to the root or not (since we never allow non-tailwind classes)
 const $attrs = useAttrs()
-</script>
-```
+const props = withDefaults(defineProps<
+	& BaseInteractiveProps
+	& {
+		// if we need an id for hydration or some internal aria connection
+		id?: string
+		// if we allow setting a label via text
+		label?: string
+		// note we omitted it above, will be available via props.disabled
+		disabled?: boolean
+		// if we just need to pass "attributes" to the root
+		inputAttrs?: Omit<InputHTMLAttributes, "class"> & TailwindClassProp
+		// if we need to pass, to for example, a reka-ui Content component
+		contentProps?: PopoverContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp
+	}
+	// the parts under the ignore type the $attrs and are NOT available on props.*
+	// they must be accessed via $attrs and are not reactive
+	// if we need to change the type or need access to the prop via props.* we can omit it here
+	& /** @vue-ignore */ Omit<InputHTMLAttributes, "class" | "disabled">
+	& /** @vue-ignore */ TailwindClassProp
+>(), {
+	label: "",
+	// the defaults for BaseInteractiveProps that are not false by default, and no, they can't be spread
+	// see https://github.com/nuxt/module-builder/issues/649
+	border: true
+})
+// uses useId if id is not set so we have an id if we need it for hydration
+const finalId = useFallbackId(props)
+const modelValue = defineModel<string>({ required: false, default: "" })
+// use for inputs or elements where it's highly likely the user can start setting a value before hydration
+usePreHydrationValue(finalId, modelValue)
 
-For prop types that don't error, I think we can just define them normally, but then it turns into a mess, some components will have their values in props, some in $attrs, this way. This is consistent and also more in line with what we expect.
+</script>
+<script lang="ts">
+/**
+ * If the component requires general docs, they should be written here over the export default.
+ */
+export default {
+	name: "WComponentName"
+	// https://v3.vuejs.org/guide/typescript-support.html#annotating-props
+}
+</script>```
 
 Related Links:
 - https://github.com/vuejs/rfcs/discussions/397

package/dist/module.d.mts

@@ -35,7 +35,7 @@ interface ModuleOptions {
      */
     mainCssFile?: string;
     /** @internal */
-    _playgroundWorkaround?: boolean;
+    _playgroundWorkaround?: string;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -19,10 +19,10 @@ const componentsInfo = globFiles([
   `!**/Template/**.vue`
 ], [], (filepath, name) => ({
   originalName: name,
-  name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
+  name: name.startsWith("W") ? name.replace("W", "PREFIX") : `PREFIX${name}`,
   filepath
 }));
-const module = defineNuxtModule({
+const module$1 = defineNuxtModule({
   meta: {
     name: "witchcraftUi",
     configKey: "witchcraftUi"
@@ -37,7 +37,7 @@ const module = defineNuxtModule({
     componentPrefix: "W",
     debug: true,
     mainCssFile: "~/assets/css/tailwind.css",
-    _playgroundWorkaround: false
+    _playgroundWorkaround: void 0
   },
   moduleDependencies: {
     // not working, see note for unpluginOptions
@@ -73,18 +73,22 @@ const module = defineNuxtModule({
         directives: options.directives
       }
     );
+    const assetDir = resolve("runtime/assets");
+    const tailwindFiles = globFiles([
+      `${assetDir}/**/*.css`,
+      `!${assetDir}/**/tailwind.css`,
+      `!${assetDir}/**/theme.css`
+    ], []);
     addTemplate({
       filename: "witchcraft-ui.css",
       write: true,
-      getContents: () => options._playgroundWorkaround ? crop`
+      getContents: () => options._playgroundWorkaround === "@witchcraft/ui" ? crop`
 					${indent(themeAsTailwindCss(theme, themeConvertionOpts), 5)}
-					@import "${resolve("runtime/assets/base.css")}";
-					@import "${resolve("runtime/assets/utils.css")}";
+					${indent(tailwindFiles.map((_) => `@import "${_.filepath}";`).join("\n"), 5)}
 					${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(tailwindFiles.map((_) => `@import "${_.filepath.replace(assetDir, "@witchcraft/ui")}";`).join("\n"), 5)}
 					${indent(filteredComponentsInfo.map((_) => `@source "${_.filepath}";`).join("\n"), 5)}
 				`
     });
@@ -154,4 +158,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { module as default };
+export { module$1 as default };

package/dist/runtime/assets/animations.css

@@ -1 +1 @@
-@theme{--animate-blinkInf:blink 1s linear-infinite;@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}--animate-slideBgInf:slide-bg 10s linear-infinite;@keyframes slide{0%{background-position:0}to{background-position:100%}}--animate-hide:hide 500ms ease-in;@keyframes hide{0%{opacity:1}to{opacity:0}}--animate-slideIn:slideIn 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideIn{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}--animate-overlayShow:overlayShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes overlayShow{0%{opacity:0}to{opacity:1}}--animate-contentShow:contentShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes contentShow{0%{opacity:0;transform:translateY(-10%) scale(.96)}to{opacity:1;transform:scale(1)}}}
+@utility animate-from-*{--animate-from:--value([length],[percentage]);--animate-from:calc(var(--spacing) * --value(integer))}@utility -animate-from-*{--animate-from:--value([length],[percentage]);--animate-from:calc(var(--spacing) * -1 * --value(integer))}@theme{--animate-blinkInf:blink 1s linear infinite;@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}--animate-slideBgInf:slideBg 10s ease-in-out linear-infinite;@keyframes slideBg{0%{background-position:0}to{background-position:100%}}--animate-hide:hide 500ms ease-in;@keyframes hide{0%{opacity:1}to{opacity:0}}--animate-slideInLeft:slideInLeft 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInLeft{0%{opacity:0;transform:translateX(var(--animate-from,100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInRight:slideInRight 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInRight{0%{opacity:0;transform:translateX(var(--animate-from,-100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInUp:slideInUp 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInUp{0%{opacity:0;transform:translateY(var(--animate-from,100%))}to{opacity:1;transform:translateY(0)}}--animate-slideInDown:slideInDown 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInDown{0%{opacity:0;transform:translateY(var(--animate-from,-100%))}to{opacity:1;transform:translateY(0)}}--animate-overlayShow:overlayShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes overlayShow{0%{opacity:0}to{opacity:1}}--animate-contentShow:contentShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes contentShow{0%{opacity:0;transform:translateY(-10%) scale(.96)}to{opacity:1;transform:scale(1)}}}

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

@@ -25,6 +25,8 @@
 		"pagination.aria.go-to-next-page": "Go to next page. Page {count}",
 		"pagination.aria.go-to-page": "Go to page {count}",
 		"pagination.aria.current-page": "Current page {count}",
+		"pagination.aria.go-to-first-page": "Go to first page",
+		"pagination.aria.go-to-last-page": "Go to last page",
 		"pagination.previous-page": "Prev",
 		"pagination.next-page": "Next",
 		"recorder.recording": "Recording",

package/dist/runtime/assets/utils.css

@@ -1 +1 @@
-@custom-variant dark (&:where(.dark, .dark *));@utility focus-outline-within{@reference outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2}@utility focus-outline{@reference outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2}@utility focus-outline-no-offset{@reference outlined:outline-2 outlined:outline-accent-500}@utility focus-outline-hidden{@reference outlined:outline-none}@utility bg-squares-gradient{--_square:var(--squareSize,5px);--_double_square:calc(var(--_square)*2);--_light_square:var(--lightSquare,var(--color-white));--_dark_square:var(--darkSquare,var(--color-black));background-color:var(--_light_square);background:repeating-conic-gradient(var(--_dark_square) 0 25%,var(--_light_square) 0 50%) 50% /var(--_double_square) var(--_double_square)}@utility square-light-*{--lightSquare:--value(--color- *)}@utility square-dark-*{--darkSquare:--value(--color- *)}@utility square-size-*{--squareSize:calc(--value(integer) * 1px)}@utility bg-bars-gradient{--_bg_color:var(--bars-bg-color,var(--color-accent-700));--_fg_color:var(--bars-fg-color,var(--color-accent-800));--_angle:var(--bars-angle,45deg);--_fg_width:var(--bars-fg-width,50%);--_bg_width:calc(100% - var(--_fg_width));background-color:var(--_bg_color);--_pos_1:calc(var(--_bg_width)/2);--_pos_2:calc(var(--_bg_width)/2 + var(--_fg_width)/2);--_pos_3:calc(var(--_bg_width) + var(--_fg_width)/2);background-image:repeating-linear-gradient(var(--_angle),var(--_bg_color),var(--_bg_color) var(--_pos_1),var(--_fg_color) var(--_pos_1),var(--_fg_color) var(--_pos_2),var(--_bg_color) var(--_pos_2),var(--_bg_color) var(--_pos_3),var(--_fg_color) var(--_pos_3),var(--_fg_color))}@utility bars-angle-*{--bars-angle:var(--value(integer) * 1deg)}@utility bars-fg-*{--bars-fg-color:--value(--color-*)}@utility bars-bg-*{--bars-bg-color:--value(--color-*)}@utility bars-w-*{--bars-fg-width:calc(--value(integer) * 1%, 50%)}@utility scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}@utility styled-scrollbar{--_scrollbar_width:var(--scrollbar-width,calc(var(--spacing)*3));--_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))}&::-webkit-scrollbar{height:var(--_scrollbar_width);width:var(--_scrollbar_width)}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track{background-color:transparent}&::-webkit-scrollbar-thumb,&::-webkit-scrollbar-track{border-radius:var(--_scrollbar_width)}&::-webkit-scrollbar-thumb{background-color:var(--_scrollbar_color);border:var(--_scrollbar_border_width) solid var(--_scrollbar_bg_color)}&::-webkit-scrollbar-thumb:hover{cursor:pointer}&::-webkit-scrollbar-thumb:active,&::-webkit-scrollbar-thumb:hover{background-color:var(--_scrollbar_hover_color);border-radius:var(--_scrollbar_width)}}@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-*)}@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-bottom-color:var(--_resizer_color);border-left-color:transparent;border-right-color:var(--_resizer_color);border-style:solid;border-top-color:transparent;border-width:var(--_resizer_width)}}@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)}@utility no-touch-action{touch-action:none}@utility bg-transparency-squares{@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6}@utility link-like{@apply cursor-pointer hover:text-accent-500}
+@custom-variant dark (&:where(.dark, .dark *));@utility focus-outline-within{@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2}@utility focus-outline{@apply outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2}@utility focus-outline-no-offset{@apply outlined:outline-2 outlined:outline-accent-500}@utility focus-outline-hidden{@apply outlined:outline-none}@utility bg-squares-gradient{--_square:var(--squareSize,5px);--_double_square:calc(var(--_square)*2);--_light_square:var(--lightSquare,var(--color-white));--_dark_square:var(--darkSquare,var(--color-black));background-color:var(--_light_square);background:repeating-conic-gradient(var(--_dark_square) 0 25%,var(--_light_square) 0 50%) 50% /var(--_double_square) var(--_double_square)}@utility square-light-*{--lightSquare:--value(--color- *)}@utility square-dark-*{--darkSquare:--value(--color- *)}@utility square-size-*{--squareSize:calc(--value(integer) * 1px)}@utility bg-bars-gradient{--_bg_color:var(--bars-bg-color,var(--color-accent-700));--_fg_color:var(--bars-fg-color,var(--color-accent-800));--_angle:var(--bars-angle,45deg);--_fg_width:var(--bars-fg-width,50%);--_bg_width:calc(100% - var(--_fg_width));background-color:var(--_bg_color);--_pos_1:calc(var(--_bg_width)/2);--_pos_2:calc(var(--_bg_width)/2 + var(--_fg_width)/2);--_pos_3:calc(var(--_bg_width) + var(--_fg_width)/2);background-image:repeating-linear-gradient(var(--_angle),var(--_bg_color),var(--_bg_color) var(--_pos_1),var(--_fg_color) var(--_pos_1),var(--_fg_color) var(--_pos_2),var(--_bg_color) var(--_pos_2),var(--_bg_color) var(--_pos_3),var(--_fg_color) var(--_pos_3),var(--_fg_color))}@utility bars-angle-*{--bars-angle:var(--value(integer) * 1deg)}@utility bars-fg-*{--bars-fg-color:--value(--color-*)}@utility bars-bg-*{--bars-bg-color:--value(--color-*)}@utility bars-w-*{--bars-fg-width:calc(--value(integer) * 1%, 50%)}@utility mix-from-*{--mix-from:--value(--color-*);--mix:color-mix(in srgb,var(--mix-from),var(--mix-to,transparent) var(--mix-percentage,50%))}@utility mix-to-*{--mix-to:--value(--color-*);--mix-percentage:calc(--modifier(integer) * 1%);--mix:color-mix(in srgb,var(--mix-from),var(--mix-to,transparent) var(--mix-percentage,50%))}@utility tint-*{--mix-from:--value(--color-*);--mix-to:#fff;--mix-percentage:calc(--modifier(integer) * 1%);--mix:color-mix(in srgb,var(--mix-from),var(--mix-to) var(--mix-percentage,20%))}@utility shade-*{--mix-from:--value(--color-*);--mix-to:#000;--mix-percentage:calc(--modifier(integer) * 1%);--mix:color-mix(in srgb,var(--mix-from),var(--mix-to) var(--mix-percentage))}@utility scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}@utility styled-scrollbar{--_scrollbar_width:var(--scrollbar-width,calc(var(--spacing)*3));--_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))}&::-webkit-scrollbar{height:var(--_scrollbar_width);width:var(--_scrollbar_width)}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track{background-color:transparent}&::-webkit-scrollbar-thumb,&::-webkit-scrollbar-track{border-radius:var(--_scrollbar_width)}&::-webkit-scrollbar-thumb{background-color:var(--_scrollbar_color);border:var(--_scrollbar_border_width) solid var(--_scrollbar_bg_color)}&::-webkit-scrollbar-thumb:hover{cursor:pointer}&::-webkit-scrollbar-thumb:active,&::-webkit-scrollbar-thumb:hover{background-color:var(--_scrollbar_hover_color);border-radius:var(--_scrollbar_width)}}@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-*)}@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-bottom-color:var(--_resizer_color);border-left-color:transparent;border-right-color:var(--_resizer_color);border-style:solid;border-top-color:transparent;border-width:var(--_resizer_width)}}@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)}@utility no-touch-action{touch-action:none}@utility bg-transparency-squares{@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6}@utility link-like{@apply cursor-pointer hover:text-accent-500}@utility no-truncate{overflow:visible;text-overflow:unset;white-space:normal}

package/dist/runtime/build/WitchcraftUiResolver.js

@@ -1,11 +1,10 @@
-const prefixless = ["Icon", "Aria"];
 export const WitchcraftUiResolver = ({
   prefix = "W",
   filter = () => true
 } = {}) => (componentName) => {
   if (componentName.startsWith(prefix)) {
     const n = componentName.slice(1);
-    const filename = prefixless.includes(n) ? n : `Lib${n}`;
+    const filename = `W${n}`;
     if (!filter(n)) {
       return void 0;
     }

package/dist/runtime/components/TestControls/TestControls.d.vue.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     showOutline: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/TestControls/TestControls.vue

@@ -1,16 +1,16 @@
 <template>
-<!-- Width 100% + 2xmargin in combination with the margins in LibRoot is a bit of a hack so that it looks like there's padding around the content in test mode (for storybook). We can't just absolutely position these controls or they make the container scroll. -->
+<!-- Width 100% + 2xmargin in combination with the margins in WRoot is a bit of a hack so that it looks like there's padding around the content in test mode (for storybook). We can't just absolutely position these controls or they make the container scroll. -->
 <div class="test-controls flex gap-2 p-1 pb-10 -ml-10 w-[calc(100%_+_var(--spacing)*20)]">
 	<div class="flex-grow"/>
 	<div class="outline-indicator">
 		{{ showOutline ? "Outline Enabled" : "Outline Disabled" }}
 	</div>
-	<lib-dark-mode-switcher/>
+	<WDarkModeSwitcher/>
 </div>
 </template>
 
 <script setup>
-import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue";
+import WDarkModeSwitcher from "../WDarkModeSwitcher/WDarkModeSwitcher.vue";
 defineOptions({ name: "TestControls" });
 defineProps({
   showOutline: { type: Boolean, required: true }

package/dist/runtime/components/TestControls/TestControls.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     showOutline: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/WButton/WButton.d.vue.ts

@@ -0,0 +1,34 @@
+import { type ButtonHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = BaseInteractiveProps & {
+    label?: string;
+    border?: boolean;
+    color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class" | "color"> & /** @vue-ignore */ TailwindClassProp;
+declare var __VLS_1: {
+    classes: string;
+}, __VLS_3: {}, __VLS_5: {
+    label: string;
+}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    'icon-after'?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+    border: boolean;
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{LibButton/LibButton.vue → WButton/WButton.vue}

@@ -1,7 +1,6 @@
 <template>
 <button
-	:id="id ?? fallbackId"
-	:class="!$attrs.unstyle && twMerge(
+	:class="!unstyle && twMerge(
   `
 		button
 		flex
@@ -27,7 +26,8 @@
   border && `
 			transition-all
 			bg-neutral-100
-			dark:bg-neutral-800
+			dark:tint-neutral-800/10
+			dark:bg-(--mix)
 			shadow-[0_1px_1px_0]
 			shadow-neutral-950/20
 			hover:shadow-[0_1px_3px_0]
@@ -42,6 +42,7 @@
 			after:shadow-[0_1px_0_0_inset]
 			after:shadow-bg/20
 			hover:after:shadow-bg/60
+			disabled:after:hidden
 			dark:after:shadow-bg/10
 			dark:hover:after:shadow-bg/50
 			after:pointer-events-none
@@ -50,15 +51,16 @@
 			active:shadow-fg/20
 			active:border-transparent
 			border
-			border-neutral-300
+			border-black/10
 			disabled:border-neutral-200
-			disabled:bg-neutral-50
+			disabled:bg-neutral-100
 			dark:hover:shadow-neutral-950/70
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
-			dark:border-neutral-900
+			dark:border-black/50
 			dark:disabled:border-neutral-800
-			dark:disabled:bg-neutral-900
+			dark:disabled:bg-(--mix)
+			dark:disabled:shade-neutral-900/10
 		`,
   border && (!color || color === `secondary`) && `
 			after:shadow-bg/90
@@ -154,26 +156,24 @@
 		`,
   $attrs?.class
 )"
-	:type="$attrs.type"
+	:type="$attrs?.type || 'button'"
 	:tabindex="0"
 	:disabled="disabled"
 	:data-border="border"
 	:data-color="color"
-	:aria-disabled="disabled"
 	v-bind="{
-  ...autoTitle,
   ...$attrs,
-  class: void 0,
-  ...ariaLabel
+  class: void 0
 }"
 >
 	<slot
 		name="label"
-		v-bind="{ id: `label-${id ?? fallbackId}`, classes: 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1' }"
+		v-bind="{
+  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"
+		<div
+			:class="!unstyle && 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1'"
 		>
 			<slot name="icon"/>
 			<slot
@@ -184,38 +184,26 @@
 				</span>
 			</slot>
 			<slot name="icon-after"/>
-		</label>
+		</div>
 	</slot>
 </button>
 </template>
 
 <script setup>
 import { isBlank } from "@alanscodelog/utils/isBlank";
-import { computed, useAttrs } from "vue";
-import { useAriaLabel } from "../../composables/useAriaLabel.js";
+import { useAttrs } from "vue";
 import { twMerge } from "../../utils/twMerge.js";
-import { getFallbackId } from "../shared/props.js";
 const $attrs = useAttrs();
 defineOptions({
-  name: "LibButton"
+  name: "WButton",
+  inheritAttrs: false
 });
-const fallbackId = getFallbackId();
-const props = defineProps({
-  id: { type: String, required: false },
-  label: { type: String, required: false, default: "" },
-  disabled: { type: Boolean, required: false, default: false },
-  readonly: { type: Boolean, required: false, default: false },
+defineProps({
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
   border: { type: Boolean, required: false, default: true },
-  unstyle: { type: Boolean, required: false, default: false },
-  color: { type: [String, Boolean], required: false, default: false },
-  autoTitleFromAria: { type: Boolean, required: false }
+  unstyle: { type: Boolean, required: false },
+  label: { type: String, required: false, default: "" },
+  color: { type: [String, Boolean], required: false, default: false }
 });
-const ariaLabel = useAriaLabel(props, fallbackId);
-const autoTitle = computed(() => ({
-  title: props.autoTitleFromAria ? $attrs["aria-label"] ?? props.label : void 0
-}));
-</script>
-
-<script>
-
 </script>

package/dist/runtime/components/WButton/WButton.vue.d.ts

@@ -0,0 +1,34 @@
+import { type ButtonHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = BaseInteractiveProps & {
+    label?: string;
+    border?: boolean;
+    color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class" | "color"> & /** @vue-ignore */ TailwindClassProp;
+declare var __VLS_1: {
+    classes: string;
+}, __VLS_3: {}, __VLS_5: {
+    label: string;
+}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    'icon-after'?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+    border: boolean;
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/WCheckbox/WCheckbox.d.vue.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = BaseInteractiveProps & {
+    id?: string;
+    label?: string;
+    labelAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+} & /** @vue-ignore */ Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSumbit" | "autocomplete"> & /** @vue-ignore */ TailwindClassProp;
+type __VLS_ModelProps = {
+    "modelValue"?: boolean | "indeterminate";
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_26: {};
+type __VLS_Slots = {} & {
+    left?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {
+    border: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};