@witchcraft/ui 0.3.7 → 0.3.9

package/dist/module.json

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

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{@reference 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{@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}

package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.vue

@@ -59,15 +59,24 @@
 				border
 				border-neutral-500
 				outlined-within:border-accent-500
+				has-[input:invalid]:border-danger-700
+				has-[input:invalid]:dark:border-danger-600
+			`,
+  border && !valid && `
+				border-danger-700
+				dark:border-danger-600
 			`,
   isOpen && `rounded-b-none`,
   !valid && `
-				border-danger-700
 				outlined:!outline-danger-700
 				text-danger-800
 				dark:text-danger-400
-				dark:border-danger-600
-				`,
+			`,
+  `
+				has-[input:invalid]:outline-danger-700
+				has-[input:invalid]:text-danger-800
+				has-[input:invalid]:dark:text-danger-400
+			`,
   readonly && `
 				bg-neutral-50
 				text-neutral-800

package/dist/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -3,31 +3,31 @@
 	:id="id ?? fallbackId"
 	:class="twMerge(
   `
-			simple-input
-			flex-1
-			grow-[999999]
-			rounded-sm
-			px-1
-			focus-outline
-			min-w-[2rem]
-			bg-inherit
-			placeholder:text-neutral-400
-			placeholder:focus:text-accent-300
-			read-only:bg-neutral-50
-			read-only:text-neutral-800
-			read-only:placeholder:select-none
-			read-only:placeholder:text-opacity-0
-			read-only:focus:placeholder:text-opacity-0
-			disabled:placeholder:text-nuetral-400
-			disabled:cursor-unset
-			disabled:bg-neutral-50
-			disabled:text-neutral-400
-			dark:read-only:bg-neutral-950
-			dark:read-only:text-neutral-200
-			dark:disabled:placeholder:text-nuetral-600
-			dark:disabled:bg-neutral-950
-			dark:disabled:text-neutral-500
-		`,
+		simple-input
+		flex-1
+		grow-[999999]
+		rounded-sm
+		px-1
+		focus-outline
+		min-w-[2rem]
+		bg-inherit
+		placeholder:text-neutral-400
+		placeholder:focus:text-accent-300
+		read-only:bg-neutral-50
+		read-only:text-neutral-800
+		read-only:placeholder:select-none
+		read-only:placeholder:text-opacity-0
+		read-only:focus:placeholder:text-opacity-0
+		disabled:placeholder:text-nuetral-400
+		disabled:cursor-unset
+		disabled:bg-neutral-50
+		disabled:text-neutral-400
+		dark:read-only:bg-neutral-950
+		dark:read-only:text-neutral-200
+		dark:disabled:placeholder:text-nuetral-600
+		dark:disabled:bg-neutral-950
+		dark:disabled:text-neutral-500
+	`,
   type === `text` && `
 			min-w-[10ch]
 			w-full
@@ -44,16 +44,28 @@
 			focus:border-accent-500
 			disabled:border-neutral-400
 			dark:disabled:border-neutral-600
+			invalid:border-danger-700
+			invalid:focus:border-danger-700
+			invalid:dark:border-danger-600
 		`,
-  !valid && `
-			placeholder:text-danger-700
-			border-danger-700
+  border && !valid && `
+			dark:border-danger-600
 			focus:border-danger-700
+			border-danger-700
+		`,
+  `
+			invalid:outline-danger-700
+			invalid:text-danger-800
+			invalid:dark:text-danger-400
+			invalid:placeholder:text-danger-700
+			invalid:dark:placeholder:text-danger-700
+		`,
+  !valid && `
 			outlined:!outline-danger-700
 			text-danger-800
 			dark:text-danger-400
+			placeholder:text-danger-700
 			dark:placeholder:text-danger-700
-			dark:border-danger-600
 		`,
   $attrs?.class
 )"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",

package/src/runtime/assets/utils.css

@@ -217,7 +217,7 @@
 }
 
 @utility bg-transparency-squares {
-	@reference bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6;
+	@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6;
 }
 
 @utility link-like {

package/src/runtime/components/LibInputDeprecated/LibInputDeprecated.vue

@@ -57,15 +57,24 @@
 				border
 				border-neutral-500
 				outlined-within:border-accent-500
+				has-[input:invalid]:border-danger-700
+				has-[input:invalid]:dark:border-danger-600
+			`,
+			border && !valid && `
+				border-danger-700
+				dark:border-danger-600
 			`,
 			isOpen && `rounded-b-none`,
 			!valid && `
-				border-danger-700
 				outlined:!outline-danger-700
 				text-danger-800
 				dark:text-danger-400
-				dark:border-danger-600
-				`,
+			`,
+			`
+				has-[input:invalid]:outline-danger-700
+				has-[input:invalid]:text-danger-800
+				has-[input:invalid]:dark:text-danger-400
+			`,
 			readonly && `
 				bg-neutral-50
 				text-neutral-800

package/src/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -2,31 +2,31 @@
 <input
 	:id="id ?? fallbackId"
 	:class="twMerge(`
-			simple-input
-			flex-1
-			grow-[999999]
-			rounded-sm
-			px-1
-			focus-outline
-			min-w-[2rem]
-			bg-inherit
-			placeholder:text-neutral-400
-			placeholder:focus:text-accent-300
-			read-only:bg-neutral-50
-			read-only:text-neutral-800
-			read-only:placeholder:select-none
-			read-only:placeholder:text-opacity-0
-			read-only:focus:placeholder:text-opacity-0
-			disabled:placeholder:text-nuetral-400
-			disabled:cursor-unset
-			disabled:bg-neutral-50
-			disabled:text-neutral-400
-			dark:read-only:bg-neutral-950
-			dark:read-only:text-neutral-200
-			dark:disabled:placeholder:text-nuetral-600
-			dark:disabled:bg-neutral-950
-			dark:disabled:text-neutral-500
-		`,
+		simple-input
+		flex-1
+		grow-[999999]
+		rounded-sm
+		px-1
+		focus-outline
+		min-w-[2rem]
+		bg-inherit
+		placeholder:text-neutral-400
+		placeholder:focus:text-accent-300
+		read-only:bg-neutral-50
+		read-only:text-neutral-800
+		read-only:placeholder:select-none
+		read-only:placeholder:text-opacity-0
+		read-only:focus:placeholder:text-opacity-0
+		disabled:placeholder:text-nuetral-400
+		disabled:cursor-unset
+		disabled:bg-neutral-50
+		disabled:text-neutral-400
+		dark:read-only:bg-neutral-950
+		dark:read-only:text-neutral-200
+		dark:disabled:placeholder:text-nuetral-600
+		dark:disabled:bg-neutral-950
+		dark:disabled:text-neutral-500
+	`,
 		type === `text` && `
 			min-w-[10ch]
 			w-full
@@ -43,16 +43,28 @@
 			focus:border-accent-500
 			disabled:border-neutral-400
 			dark:disabled:border-neutral-600
+			invalid:border-danger-700
+			invalid:focus:border-danger-700
+			invalid:dark:border-danger-600
 		`,
-		!valid && `
-			placeholder:text-danger-700
-			border-danger-700
+		border && !valid && `
+			dark:border-danger-600
 			focus:border-danger-700
+			border-danger-700
+		`,
+		`
+			invalid:outline-danger-700
+			invalid:text-danger-800
+			invalid:dark:text-danger-400
+			invalid:placeholder:text-danger-700
+			invalid:dark:placeholder:text-danger-700
+		`,
+		!valid && `
 			outlined:!outline-danger-700
 			text-danger-800
 			dark:text-danger-400
+			placeholder:text-danger-700
 			dark:placeholder:text-danger-700
-			dark:border-danger-600
 		`,
 		($attrs as any)?.class
 	)"