iryx-ui 0.18.0 → 0.18.1

package/dist/components/FormField.vue_vue_type_script_setup_true_lang.js

@@ -85,6 +85,8 @@ var x = ["data-iryx-field"], S = ["id"], C = ["id"], w = ["id"], T = /*@__PURE__
 			O.value ? (p(), l("p", {
 				key: 2,
 				id: `${_(D)}-error`,
+				role: "alert",
+				"aria-live": "polite",
 				class: f(P("error", T.ui?.error))
 			}, g(O.value), 11, C)) : T.help ? (p(), l("p", {
 				key: 3,

package/dist/components/Input.vue_vue_type_script_setup_true_lang.js

@@ -9,6 +9,7 @@ var T = [
 	"id",
 	"value",
 	"type",
+	"spellcheck",
 	"placeholder",
 	"disabled",
 	"required",
@@ -49,74 +50,80 @@ var T = [
 	}),
 	emits: ["update:modelValue"],
 	setup(u, { expose: d }) {
-		let D = u, O = y(u, "modelValue"), k = b(), A = r(), j = i(() => D.id ?? A?.id.value), M = i(() => D.invalid ?? A?.invalid.value ?? !1), N = e(), P = i(() => D.unstyled ?? N.unstyled), F = g(O.value), I;
-		function L() {
-			I !== void 0 && (clearTimeout(I), I = void 0);
+		let D = u, O = i(() => [
+			"email",
+			"url",
+			"tel",
+			"password"
+		].includes(D.type) ? !1 : void 0), k = y(u, "modelValue"), A = b(), j = r(), M = i(() => D.id ?? j?.id.value), N = i(() => D.invalid ?? j?.invalid.value ?? !1), P = e(), F = i(() => D.unstyled ?? P.unstyled), I = g(k.value), L;
+		function R() {
+			L !== void 0 && (clearTimeout(L), L = void 0);
 		}
-		x(O, (e) => {
-			L(), F.value = e;
+		x(k, (e) => {
+			R(), I.value = e;
 		});
-		function R(e) {
+		function z(e) {
 			let t = e.target.value;
-			if (F.value = t, L(), !D.debounce) {
-				O.value = t;
+			if (I.value = t, R(), !D.debounce) {
+				k.value = t;
 				return;
 			}
-			I = setTimeout(() => {
-				I = void 0, O.value = t;
+			L = setTimeout(() => {
+				L = void 0, k.value = t;
 			}, D.debounce);
 		}
-		function z() {
-			I !== void 0 && (L(), O.value = F.value);
+		function B() {
+			L !== void 0 && (R(), k.value = I.value);
 		}
-		m(L);
-		let B = g();
-		function V() {
-			L(), F.value = "", O.value = "", B.value?.focus();
+		m(R);
+		let V = g();
+		function H() {
+			R(), I.value = "", k.value = "", V.value?.focus();
 		}
-		d({ input: B });
-		let H = i(() => F.value !== "" && F.value != null), U = i(() => D.clearable && H.value && !D.disabled), W = i(() => D.loading || U.value || !!k.trailing), G = i(() => n({
+		d({ input: V });
+		let U = i(() => I.value !== "" && I.value != null), W = i(() => D.clearable && U.value && !D.disabled), G = i(() => D.loading || W.value || !!A.trailing), K = i(() => n({
 			size: D.size,
-			invalid: M.value
+			invalid: N.value
 		}));
-		function K(e, t) {
+		function q(e, t) {
 			let n = D.ui?.[e];
-			return P.value ? [n, t] : G.value[e]({ class: [n, t] });
+			return F.value ? [n, t] : K.value[e]({ class: [n, t] });
 		}
-		return (e, n) => (h(), s("div", { class: p(K("root", D.class)) }, [
-			v(k).leading ? (h(), s("span", {
+		return (e, n) => (h(), s("div", { class: p(q("root", D.class)) }, [
+			v(A).leading ? (h(), s("span", {
 				key: 0,
-				class: p(K("leading"))
+				class: p(q("leading"))
 			}, [_(e.$slots, "leading")], 2)) : o("", !0),
 			c("input", f({
-				id: j.value,
+				id: M.value,
 				ref_key: "inputEl",
-				ref: B,
-				value: F.value,
+				ref: V,
+				value: I.value,
 				type: D.type,
+				spellcheck: O.value,
 				placeholder: D.placeholder,
 				disabled: D.disabled,
 				required: D.required,
-				"aria-invalid": M.value || void 0,
-				"aria-describedby": v(A)?.describedBy.value,
-				class: K("input")
+				"aria-invalid": N.value || void 0,
+				"aria-describedby": v(j)?.describedBy.value,
+				class: q("input")
 			}, e.$attrs, {
-				onInput: R,
-				onBlur: z,
-				onKeydown: S(z, ["enter"])
+				onInput: z,
+				onBlur: B,
+				onKeydown: S(B, ["enter"])
 			}), null, 16, T),
-			W.value ? (h(), s("span", {
+			G.value ? (h(), s("span", {
 				key: 1,
-				class: p(K("trailing"))
+				class: p(q("trailing"))
 			}, [
 				_(e.$slots, "trailing"),
-				U.value ? (h(), s("button", {
+				W.value ? (h(), s("button", {
 					key: 0,
 					type: "button",
 					tabindex: "-1",
 					"aria-label": D.clearLabel,
-					class: p(K("clear")),
-					onClick: V
+					class: p(q("clear")),
+					onClick: H
 				}, [l(t, { icon: v(C) }, null, 8, ["icon"])], 10, E)) : o("", !0),
 				D.loading ? (h(), a(t, {
 					key: 1,

package/dist/components/PasswordInput.vue_vue_type_script_setup_true_lang.js

@@ -74,7 +74,8 @@ var w = [
 			invalid: f.invalid,
 			unstyled: f.unstyled,
 			ui: { input: N.value },
-			autocomplete: "current-password"
+			autocomplete: "current-password",
+			spellcheck: "false"
 		}, e.$attrs), l({ _: 2 }, [f.toggle ? {
 			name: "trailing",
 			fn: x(() => [c("button", {

package/dist/components/PinInput.vue_vue_type_script_setup_true_lang.js

@@ -53,6 +53,7 @@ var y = /*@__PURE__*/ l({
 		}, {
 			default: g(() => [(d(!0), o(n, null, f(w.value, (t) => (d(), o(n, { key: t }, [c(h(_), {
 				index: t,
+				spellcheck: "false",
 				"aria-invalid": b.invalid || void 0,
 				class: u(A.value)
 			}, null, 8, [

package/dist/theme/button.d.ts

@@ -19,7 +19,7 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
     block: {
         true: string;
     };
-}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-transparent font-medium no-underline transition-[color,background-color,border-color,box-shadow,opacity,filter,translate] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "inline-flex shrink-0 touch-manipulation items-center justify-center gap-2 rounded-xl border border-transparent font-medium no-underline transition-[color,background-color,border-color,box-shadow,opacity,filter,translate] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         solid: string;
         outline: string;
@@ -61,5 +61,5 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
     block: {
         true: string;
     };
-}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-transparent font-medium no-underline transition-[color,background-color,border-color,box-shadow,opacity,filter,translate] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined, "inline-flex shrink-0 touch-manipulation items-center justify-center gap-2 rounded-xl border border-transparent font-medium no-underline transition-[color,background-color,border-color,box-shadow,opacity,filter,translate] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
 export type ButtonVariants = Parameters<typeof buttonTheme>[0];

package/dist/theme/button.js

@@ -1,7 +1,7 @@
 import { tv as e } from "tailwind-variants";
 //#region src/theme/button.ts
 var t = e({
-	base: "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-transparent font-medium no-underline transition-[color,background-color,border-color,box-shadow,opacity,filter,translate] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	base: "inline-flex shrink-0 touch-manipulation items-center justify-center gap-2 rounded-xl border border-transparent font-medium no-underline transition-[color,background-color,border-color,box-shadow,opacity,filter,translate] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 	variants: {
 		variant: {
 			solid: "bg-linear-to-b from-primary-from to-primary-to text-primary-foreground hover:brightness-110 active:brightness-95",

package/dist/theme/checkbox.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		wrapper: "flex items-start gap-2.5",
-		root: "peer flex shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-background text-primary-foreground transition-colors outline-none focus:ring-2 focus:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
+		root: "peer flex shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-background text-primary-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
 		indicator: "flex items-center justify-center text-current",
 		content: "grid gap-1",
 		label: "text-sm leading-5 font-medium text-foreground select-none",

package/dist/theme/date-field.js

@@ -4,7 +4,7 @@ import { tv as t } from "tailwind-variants";
 var n = t({
 	slots: {
 		root: `inline-flex items-center gap-0.5 ${e} w-auto focus-within:ring-2 focus-within:ring-primary/50`,
-		segment: "rounded px-0.5 text-foreground tabular-nums outline-none focus:bg-primary focus:text-primary-foreground data-[disabled]:cursor-not-allowed",
+		segment: "rounded px-0.5 text-foreground tabular-nums outline-none focus-visible:bg-primary focus-visible:text-primary-foreground data-[disabled]:cursor-not-allowed",
 		literal: "text-muted-foreground"
 	},
 	variants: {

package/dist/theme/dialog.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		overlay: "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
-		content: "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-2xl border border-border bg-background p-6 text-foreground shadow-lg outline-none data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in",
+		content: "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overscroll-contain rounded-2xl border border-border bg-background p-6 text-foreground shadow-lg outline-none data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in",
 		header: "flex flex-col gap-1",
 		title: "text-base leading-none font-semibold",
 		description: "text-sm text-muted-foreground",

package/dist/theme/drawer.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		overlay: "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
-		content: "iryx-drawer fixed z-50 flex touch-none flex-col gap-4 border-border bg-background p-6 text-foreground shadow-lg outline-none",
+		content: "iryx-drawer fixed z-50 flex touch-none flex-col gap-4 overscroll-contain border-border bg-background p-6 text-foreground shadow-lg outline-none",
 		handle: "shrink-0 rounded-full bg-border",
 		header: "flex flex-col gap-1",
 		title: "text-base leading-none font-semibold",

package/dist/theme/radio-group.js

@@ -4,7 +4,7 @@ var t = e({
 	slots: {
 		root: "",
 		wrapper: "flex items-start gap-2.5",
-		item: "aspect-square shrink-0 cursor-pointer rounded-full border border-border bg-background transition-colors outline-none focus:ring-2 focus:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
+		item: "aspect-square shrink-0 cursor-pointer rounded-full border border-border bg-background transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
 		indicator: "flex size-full items-center justify-center after:block after:rounded-full after:bg-primary",
 		content: "grid gap-1",
 		label: "text-sm leading-5 text-foreground select-none",

package/dist/theme/switch.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		wrapper: "flex items-start gap-2.5",
-		root: "inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors outline-none focus:ring-2 focus:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
+		root: "inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
 		thumb: "pointer-events-none block rounded-full bg-background shadow-sm transition-transform data-[state=unchecked]:translate-x-0.5",
 		content: "grid gap-1",
 		label: "text-sm leading-5 font-medium text-foreground select-none",

package/dist/theme/time-field.js

@@ -4,7 +4,7 @@ import { tv as t } from "tailwind-variants";
 var n = t({
 	slots: {
 		root: `inline-flex items-center gap-0.5 ${e} w-auto focus-within:ring-2 focus-within:ring-primary/50`,
-		segment: "rounded px-0.5 text-foreground tabular-nums outline-none focus:bg-primary focus:text-primary-foreground data-[disabled]:cursor-not-allowed",
+		segment: "rounded px-0.5 text-foreground tabular-nums outline-none focus-visible:bg-primary focus-visible:text-primary-foreground data-[disabled]:cursor-not-allowed",
 		literal: "text-muted-foreground"
 	},
 	variants: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",

package/theme.css

@@ -19,6 +19,8 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 :root {
+  color-scheme: light;
+
   /*
    * Typeface. The library ships no webfont — that would put font files, a
    * licence and a network request in every consumer's bundle whether they
@@ -104,6 +106,8 @@
 }
 
 .dark {
+  color-scheme: dark;
+
   /* Neutral surfaces — shadcn/ui "zinc" palette. */
   --iryx-background: oklch(0.145 0 0);
   --iryx-foreground: oklch(0.985 0 0);